1.1　UI設(shè)計(jì)與移動(dòng)UI設(shè)計(jì)

要想設(shè)計(jì)出好的移動(dòng)UI作品，首先要了解UI的基礎(chǔ)概念。了解UI設(shè)計(jì)的基礎(chǔ)概念后，可以幫助設(shè)計(jì)師從本質(zhì)上理解UI設(shè)計(jì)的內(nèi)容和原理，充分發(fā)揮設(shè)計(jì)師的個(gè)人設(shè)計(jì)理念，設(shè)計(jì)出更多既符合行業(yè)需求，又滿足用戶需求的作品。

1.1.1　了解UI設(shè)計(jì)

UI即User Interface的簡(jiǎn)稱。UI設(shè)計(jì)則是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)能夠充分體現(xiàn)軟件的定位和特點(diǎn)。

UI設(shè)計(jì)的范圍很廣，大到Windows操作系統(tǒng)，小到輸入法軟件，都有UI設(shè)計(jì)的身影。常見(jiàn)的銀行取款機(jī)界面、排隊(duì)機(jī)界面也都是UI設(shè)計(jì)的范疇，如圖1-1所示。

UI設(shè)計(jì)按照其職能劃分可以分為圖形設(shè)計(jì)、交互設(shè)計(jì)和用戶測(cè)試/研究，如圖1-2所示。

圖形設(shè)計(jì)通常指的是軟件產(chǎn)品的“外形”設(shè)計(jì)。

交互設(shè)計(jì)主要設(shè)計(jì)軟件的操作流程、樹(shù)狀結(jié)構(gòu)和操作規(guī)范等。交互設(shè)計(jì)是UI設(shè)計(jì)中最重要的環(huán)節(jié)，通常一個(gè)軟件產(chǎn)品在編碼之前需要完成的就是交互設(shè)計(jì)，并確立交互模型和交互規(guī)范。

用戶測(cè)試/研究則用來(lái)測(cè)試交互設(shè)計(jì)的合理性和圖形設(shè)計(jì)的美觀性，其主要通過(guò)目標(biāo)用戶問(wèn)卷調(diào)查的形式來(lái)衡量UI設(shè)計(jì)的合理性。

提示

如果沒(méi)有對(duì)UI設(shè)計(jì)進(jìn)行測(cè)試/研究，那么UI設(shè)計(jì)的好壞只能憑借設(shè)計(jì)師或領(lǐng)導(dǎo)的審美來(lái)評(píng)判，這樣會(huì)為項(xiàng)目帶來(lái)極大的風(fēng)險(xiǎn)。

1.1.2　了解移動(dòng)UI設(shè)計(jì)

移動(dòng)UI設(shè)計(jì)通常指的是智能手機(jī)、平板電腦和智能手表等移動(dòng)設(shè)備中應(yīng)用程序的UI設(shè)計(jì)。常見(jiàn)的移動(dòng)設(shè)備如圖1-3所示。

移動(dòng)設(shè)備中的應(yīng)用程序就是指被用戶經(jīng)常提起的App。App是Application的縮寫(xiě)，主要是指安裝在智能手機(jī)上的軟件，用來(lái)完善原始系統(tǒng)的不足并增加個(gè)性化，為用戶提供更豐富的使用體驗(yàn)，淘寶和12306都是移動(dòng)設(shè)備中的App，如圖1-4所示。

用戶在選擇移動(dòng)端軟件時(shí)，通常會(huì)選擇界面視覺(jué)清晰，并具有良好體驗(yàn)的應(yīng)用軟件。目前市場(chǎng)上的移動(dòng)應(yīng)用軟件非常多，但這些軟件良莠不齊，界面各異。如何滿足用戶需求，如何使自己的軟件盈利，這都是UI設(shè)計(jì)師需要考慮的內(nèi)容。

1.1.3　移動(dòng)UI與平面UI

平面UI設(shè)計(jì)的范圍非常廣，包括絕大多數(shù)的UI領(lǐng)域。而移動(dòng)UI設(shè)計(jì)主要是指智能手機(jī)和平板電腦的客戶端。從設(shè)計(jì)的角度來(lái)說(shuō)，二者在屏幕尺寸、設(shè)計(jì)規(guī)范和UI交互操作上都有很大的不同。

● 屏幕尺寸不同

移動(dòng)設(shè)備的屏幕一般都比較小，且受到不同系統(tǒng)的限制，因此每一個(gè)頁(yè)面中所放的東西較少，需要通過(guò)多層級(jí)的方式擴(kuò)充內(nèi)容。而平面UI則沒(méi)有這個(gè)顧慮，每一頁(yè)中都盡量多放東西，從而減少層級(jí)。例如，PC端的淘寶店鋪，整個(gè)頁(yè)面尺寸較大，可放的空間也大，用戶只需要通過(guò)二級(jí)頁(yè)面就可以看到想要找的內(nèi)容，如圖1-5所示。

而移動(dòng)端的淘寶店鋪層級(jí)較多，用戶想要找到感興趣的商品，往往需要一層一層查找，如圖1-6所示，點(diǎn)擊了“天貓”欄目后只是進(jìn)入了天貓頁(yè)面。

● 設(shè)計(jì)規(guī)范不同

平面UI通常使用鼠標(biāo)操作，而移動(dòng)端UI使用手指操作。鼠標(biāo)操作的精度非常高，手指操作的精確度則相對(duì)較低。因此平面UI的圖標(biāo)一般都比較小，而移動(dòng)端的圖標(biāo)則要大很多。微信PC端和移動(dòng)端圖標(biāo)大小的對(duì)比如圖1-7所示。

● UI交互操作不同

平面UI中可以展現(xiàn)的UI交互操作方式更多，例如單擊、雙擊、按住、移入、移除、右擊和滾輪等多種操作；而移動(dòng)端的功能相對(duì)較弱，只能實(shí)現(xiàn)點(diǎn)擊、按住和滑動(dòng)等操作。

例如移動(dòng)端愛(ài)奇藝視頻，在屏幕的左邊上下滑動(dòng)可以調(diào)整亮度，在屏幕的右邊上下滑動(dòng)可以調(diào)整聲音，在屏幕的下面左右滑動(dòng)進(jìn)度條可以調(diào)整視頻的進(jìn)度，雙擊屏幕可以暫停播放。移動(dòng)端愛(ài)奇藝界面如圖1-8所示。

PC端的愛(ài)奇藝視頻，則通過(guò)單擊、雙擊、右擊和滾輪進(jìn)行多種操作。PC端愛(ài)奇藝界面如圖1-9所示。

提示

除了以上所講的不同，平面UI與移動(dòng)UI還有很多地方是不同的，例如圖片的格式、切片輸出要求等，在后面的章節(jié)中會(huì)逐一詳細(xì)講解。