1.3　移動UI的設計內容

作為一個移動UI設計師，主要的工作內容包括什么呢？移動UI設計和傳統的平面設計工作很相似，都需要考慮配色及頁面布局對App產品的影響。由于移動硬件的屏幕尺寸都不大，因此，還要考慮App界面中的按鈕、圖標和文字的排列布局。

1.3.1　配色方案的設計

配色對任何設計作品來說都很重要，尤其是移動UI設計。好的配色是一個App界面設計成功的基礎。

在開始設計一個App界面時，首先就是要根據產品的行業和受眾人群確定界面的主色，然后再根據主色確定配色方案。

可以通過App的行業選擇主色，因為每一種顏色都具有特定的心理效果和情感效果，會引起受眾人群產生各種遐想。例如，看到綠色，就會想到教育和醫療行業；看到藍色，就會想到科技行業；看到紅色，就會想到食品和安全行業，如圖1-15所示。

除了根據顏色本色的色彩意象來確定主色，設計師還可以通過App項目產品或企業Logo的顏色來確定App界面的主色。

例如，中石油的Logo采用了紅色和橘黃色。因此在設計與石油產業相關的App產品時，界面的主色就可以選擇紅色或橘黃色，如圖1-16所示。

確定了頁面的主色以后，就可以根據主色再選擇輔助色、點綴色和文字色了。無論要選擇哪種顏色，都可以遵循同色搭配、臨色搭配和補色搭配的標準。

● 同色搭配

同色搭配指的是使用降低了明度或純度的主色與主色搭配。例如主色選擇了藍色，輔助色設置為淺藍色。同色系搭配如圖1-17所示。這種搭配方式會顯得頁面效果整潔，風格一致。同色搭配是入門級的色彩搭配方式。

● 臨色搭配

臨色搭配指的是使用色譜環上與主色相鄰的顏色與主色搭配，例如主色選擇了青色，輔助色設置為洋紅色。臨色系搭配如圖1-18所示。

這種搭配方式能夠很好地凸顯頁面中的內容，對比強烈，主題突出。這種搭配方式相對比較難操作，不考慮黑色和白色等中性色，建議搭配的顏色不要超過3種。

提示

配色的技巧有很多，設計師不用局限于以上幾種配色方式，可以在實際的工作中不斷實踐，摸索出符合自己特色與風格的配色技巧。

● 補色搭配

補色搭配指的是使用色譜環上主色對面的顏色與主色搭配，例如主色選擇了洋紅色，輔助色設置為綠色。補色系搭配如圖1-19所示。

這種搭配方式可以很好地凸顯重要內容。由于補色顏色對比比較強烈，在搭配使用時要適當降低顏色的純度或明度。在使用面積上也應適當減小，降低由于互相補色給用戶視覺帶來的不適感。

1.3.2　頁面布局的設計

確定了界面的配色方案以后，設計師首先要分析項目產品的信息，并梳理清楚產品信息架構，然后選擇一種非常好的方式來合理地呈現這些信息，體現產品的核心操作流程，這就是頁面布局的設計。

頁面布局的方式有很多種，例如列表式布局、陳列館式布局、宮格式布局、選項卡式布局和旋轉木馬式布局。不同的布局方式能呈現不同的頁面內容，給用戶帶來不同的視覺感受。由于篇幅的關系，本節只介紹常見的宮格式布局和列表式布局。其他布局方式將在后面章節中與案例一起講解。

● 宮格式布局

宮格式布局是將不同模塊以塊狀宮格方式沿水平方向和豎直方向布局，使產品的功能模塊可以完全展示在用戶面前，具有較好的延展性。

宮格式布局多以3×3的模塊劃分，每個模塊多以“圖標+文字”的形式展示，圖1-20所示為芒果TV的界面。有時也呈現為卡片式宮格，圖1-21所示為美圖秀秀的界面。

宮格式布局使產品擁有較多的信息模塊，每個模塊都具有完整的體系或較深的層級，且模塊與模塊之間相互獨立。通過標簽或分頁的形式劃分不同宮格組，以區分產品功能模塊，如圖1-22所示為支付寶界面分頁劃分宮格組。

提示

有時產品的功能較多，界面所展示的模塊內容較多，因此一些產品也允許用戶自行設置宮格所展示的內容。例如，支付寶就允許用戶自行設置頁面中顯示的應用內容。

宮格式布局可以使用戶直觀地看到產品的各種功能模塊，并且在使用過程中能夠較為直接地進入某個功能模塊而不需要花費過多精力去尋找，其效率較高。對于信息量較大且每個模塊之間關聯性較弱的產品，宮格式布局可以同時呈現出多個入口，其延展性優秀，并且可以較好地拓展信息模塊，便于產品迭代。

● 列表式布局

如果產品需要有大量信息或功能展示，且在展示多個模塊的同時還需要展示出每個模塊相應的信息（例如新聞類App），并且需要以規整的方式呈現，此時就可以采用列表式布局。

列表式布局通常采用豎排列表的形式或采用“圖標+文字”的形式，用于展示同類型或并列的元素，通過上下滑動可以查看更多列表內容，用戶可接受程度較高，同時視覺上也較為規整。

對于不同種類的信息有時也采用分頁的形式進行區分，同時在列表右側展示次級信息。文字列表式布局如圖1-23所示。也可以采用“標題+圖片”的方式顯示列表，增加頁面的可讀性和美觀性。標題+圖片的布局如圖1-24所示。

提示

以內容為主的產品列表則多以“標題+圖片+部分內容”的形式展現，同時對純圖片和視頻的模塊列表樣式進行了區分。例如今日頭條用戶就可以看到更多的列表信息。

列表式布局可以使用戶快速獲取一定量的信息，以決定是否點擊進入更深的層級進行深度瀏覽或操作。用戶可以在多類信息中進行篩選和對比，自主高效地選擇自己想要的內容。

列表式布局信息展示的層級較為清晰，且可以靈活地通過不同形式進行展示。在展示主要信息的同時，還可以展示一定的次要信息，提醒及輔助用戶理解。列表式布局符合用戶從上到下查看的視覺流程，排版也較為整齊，并且延展性強。

提示

豐富且華麗的布局固然重要，但要符合當前產品的特點和需求。無論采用何種布局方式，只要能將產品的內容和特點展示清楚即可。

1.3.3　按鈕和圖標的設計

在UI中合理地使用按鈕和圖標，能夠使頁面內容簡單、醒目且友好，并增加設計的藝術感染力。對內容較豐富的App來說，圖標的使用可以節省空間，用戶可以在一個頁面中查看更多的信息。

雖然在UI設計中使用按鈕和圖標有很多好處，但也要考慮其潛在的負面影響。下面針對移動UI設計中按鈕和圖標設計的要點進行講解。

● 圖標傳達含義的功能必須放在首位

設計師們有時會過于注重形式，忽略了圖標本身的功能，導致其難以識別，這打破了圖標最重要的圖形意象屬性。按照定義，圖標是一個對象或動作的視覺體現。對用戶而言，如果這個對象或動作不明確，該圖標就失去它的實用價值，并成為一個視覺干擾。

圖1-25所示分別為主頁、打印機和放大鏡的圖標，這幾個圖標在用戶心中已經享有普遍共識并且容易辨識。

對用戶而言，大多數圖標的含義仍舊模棱兩可，圖1-26所示為一個游戲中心的圖標，其采用了一組色彩豐富的圓圈，讓人很難聯想到它跟游戲有什么關系。

圖標的首要任務就是引導用戶去他們需要的地方。設計師可以通過5秒鐘規則和選擇熟悉的圖標兩種方法來設計符合用戶要求的圖標。5秒鐘規則指的是，如果設計師花了超過5秒的時間考慮一個圖標是否合適，那么這個圖標不太可能有效地傳達含義。選擇熟悉的圖標指的是用戶通常對圖標的理解基于以前的經驗，使用競品的圖標是個不錯的選擇。

● 保持圖標的簡單和示意

在大多數情況下，設計圖標無須發揮創意。這是因為太花哨的圖標可能會對用戶體驗產生負面影響。圖標設計理念的本質是減到最簡形態。設計師應確保即使圖標是小尺寸也具有清晰度和可讀性，所以精心設計的圖標應該能夠快速辨認。

圖1-27所示為iOS系統不同版本中的照相機圖標，可以看到圖標的設計風格從寫實轉換為扁平化，圖標變得更加簡單，但也更易辨認。

● 包含清晰可見的文本標簽

是否減少用戶思考的時間是衡量用戶體驗良好的一個很重要的標準。界面清晰是一個好界面的重要特征。圖標的設計應該能幫助用戶毫不費力地了解它們的功能。但是，圖標的問題在于用戶會基于之前的經驗對每個圖標聯想出不同的含義。如果用戶為了探索每個圖標的功能而一一試用，那就失去了圖標該有的作用。

在一些特殊的上下文環境里，為避免圖標可能會產生的歧義，應該在圖標周圍設計一個文本標簽，用來清晰地表達其含義。支付寶界面中添加了文本標簽的圖標，能夠清楚地表達其含義，如圖1-28所示。

● 使用感更佳的圖標觸控體驗

用戶在移動端訪問應用程序時，通常都是通過手指點擊與界面進行交換的。較小的圖標會嚴重影響用戶的訪問。因此，包括圖標在內的UI控件，尺寸要足夠大才能承載手指間的動作。

提示

通常成人手指的平均寬度為11mm，嬰兒的手指寬度為6mm，一些體育運動員的手指寬度可以達到甚至超過19mm。

觸屏對象的推薦點擊目標尺寸為7～10mm。兩大主流操作系統對于點擊目標尺寸的規范不盡相同。

iOS系統推薦的最小點擊目標尺寸為44px×44px。由于物理像素的尺寸會隨著屏幕分辨率發生變化，在5.8寸的屏幕上，蘋果公司推薦的尺寸是1125px×2436px。

Android系統推薦觸控目標的尺寸至少為48dp×48dp。如果一個圖標的尺寸為24dp×24dp，則需要在其周圍加上間距，共同組成48dp×48dp的觸控面積，如圖1-29所示。

提示

為了防止觸控間距太近造成用戶的誤碰觸，需要在兩個觸控目標間設置間距，通常會設置2mm的間距。

● 不要跨平臺使用圖標

在設計Android或iOS系統應用時，不要使用其他平臺特定的UI元素。各平臺為某些常用功能使用一套典型的圖標，比如分享、新建和刪除。當轉換應用到另一個平臺時，應替換掉相對應的圖標。Android系統和iOS系統中相同功能圖標的對比，如圖1-30所示。

圖標設計是UI設計的一個重點，UI中使用的所有圖標都應有目的性，正確的圖標設計能夠簡單而直接地幫助用戶使用應用程序。

1.3.4　文字和版式的設計

在移動端UI中，文字內容能占版面近80%的區域。因此，理解文字和排版對設計師來說非常重要。設計師需要始終把內容的可讀性放在首位，再綜合考慮設計文字和版式。

● 字體基本結構

一般來說，為了保證字體的完整展示，字體設計師都會給字體預留一定的安全距離，設定合適的升部線及降部線距離，讓字體的展示更為平衡。圖1-31所示為字體的基本結構。

● 了解漢字字型

了解字體結構，更有利于在以后的界面設計中運用字體。在大多數情況下，我們都選擇系統自帶的字體，比如微軟雅黑、宋體、黑體等來定義標題和內容。這些字體都是中文字，漢字的常見字型結構如圖1-32所示。

在設計和制作Logo、banner時，需要對字體進行改造來達到更加理想的效果。掌握漢字的字型結構及一些最基本的設計原則是非常必要的。

● 襯線字和無襯線字

西方國家的字母體系分成兩大字族：Serif（襯線字）及Sans Serif（無襯線字）。襯線字是指在字的筆畫開始及結束的地方有額外的裝飾，而且筆畫的粗細會因直橫的不同而有所不同。相反，無襯線字就沒有這些額外裝飾，而且筆畫粗細大致上是差不多的。圖1-33所示為襯線字和無襯線字的對比。

襯線字的字體較易辨識，因此也具有較高的易讀性。無襯線字較醒目，需要強調、突出的小篇幅文字一般使用無襯線字；而在長篇正文中，為了閱讀便利，一般使用襯線字。

提示

在實際應用中，因為中文的宋體和西文的襯線體、中文的黑體和西文的無襯線體，在風格和應用場景上相似，所以通常搭配使用。

在移動端界面設計中，由于屏幕尺寸較小，在追求排版美觀之前，要保證文字內容能夠簡單且清晰地展現出來。優秀的文字與排版會使用戶更愿意去閱讀，因此要先關注設定的文字和排版是否便于閱讀，然后再考慮為了美觀而進行的修飾。