1.2.3 界面設(shè)計

確認(rèn)高保真原型圖后，要根據(jù)它繪制產(chǎn)品設(shè)計稿，整體設(shè)計稿里包含圖標(biāo)（icon）設(shè)計、主界面設(shè)計、二級界面設(shè)計、閃屏頁設(shè)計、活動頁設(shè)計等。

產(chǎn)品的設(shè)計風(fēng)格主要通過啟動圖標(biāo)和主界面?zhèn)鬟_(dá)給用戶，是產(chǎn)品給用戶的第一印象，排版布局、配色、配圖等都要遵循統(tǒng)一的設(shè)計風(fēng)格。因此，要先確定整體設(shè)計風(fēng)格。

例如，打開衣柜選擇出門要穿的衣服時，首先要考慮穿著風(fēng)格，是運(yùn)動風(fēng)、淑女風(fēng)、嘻哈風(fēng)還是辦公室風(fēng)格，并根據(jù)已選好的風(fēng)格搭配自己的上衣、褲子、鞋、帽子等。不能一身運(yùn)動風(fēng)服裝，搭配一雙職場風(fēng)格的高跟鞋。

在設(shè)計的時候，必須遵循為產(chǎn)品服務(wù)的原則。UI設(shè)計是偏理性的行業(yè)，和藝術(shù)家不同，想畫什么就畫什么。每個界面的布局、每個按鈕的顏色，以及每個功能圖標(biāo)的繪制，都要考慮用戶在操作的時候是否合理、是否人性化，不要因為設(shè)計造成用戶在產(chǎn)品體驗上的困擾。

支付寶App界面整體為扁平風(fēng)格，主色調(diào)為藍(lán)色（支付寶的品牌色），顯得干凈、清爽，給人一種安全、可信賴的感覺。作為一個用戶經(jīng)常使用的App，它的啟動圖標(biāo)在眾多圖標(biāo)當(dāng)中很容易被識別。主界面當(dāng)中各個功能圖標(biāo)的設(shè)計遵循統(tǒng)一的風(fēng)格，而且讓用戶在單獨(dú)看圖形不看文字的前提下，就可以快速地分辨出各個按鈕的功能和含義。用戶可以很快地在主界面中找到自己常用的功能。

（圖片來源于支付寶App界面）

美團(tuán)外賣App的啟動圖標(biāo)是一個小袋鼠，象征美團(tuán)配送的時效性。人們經(jīng)常能見到這個袋鼠形象，比如，外賣小哥的衣服上、安全帽上、外賣箱子上等。它的識別度很高，所以大家一看到這個啟動圖標(biāo)，就能想到美團(tuán)外賣。美團(tuán)外賣App界面的整體色調(diào)也選擇和小袋鼠一樣的顏色，并且首頁搭配美食圖片，讓用戶一打開應(yīng)用就有點(diǎn)餐的欲望。

（圖片來源于美團(tuán)外賣App界面）