1.2 App中的功能圖標

功能圖標在UI設計中占據非常重要的作用，幾乎存在于每一個應用界面中，無論是在導航欄、工具欄或標簽欄，還是在首頁、詳情頁或個人中心頁，都隨處可見功能圖標的身影。功能圖標具有明確的表意功能，其作用在于替代文字或輔助文字來指引用戶進行快速導航，它具有圖形化的符號，比文字更加直觀，符合普羅大眾的認知習慣，有助于用戶形成記憶思維，提高應用的易用性。同時，設計精致、風格統一的功能圖標提升了產品視覺效果，不但給用戶帶來視覺上的愉悅感，還帶來良好一致的使用體驗。在《零基礎學UI》書中介紹到功能圖標分為面形圖標、線形圖標和扁平線形圖標3種類型，本篇就來講解它們通常各自出現在什么樣的界面場景中。

面形圖標使用場景

面形圖標具有廣泛的適用性，即使是在以線形圖標風格主導的iOS應用里，也常常出現面形圖標設計的標簽欄或導航欄，它們通常是運動、時尚類應用。例如，FitTime是一款健身運動應用，在標簽欄上采用了面形圖標的設計，塊狀簡練的圖形使得界面風格干凈清爽、簡潔有力，同為健身運動應用的Keep也采用了面形圖標設計。

由于面形圖標的視覺占比最大化，具有強烈的視覺表現力，通常用于應用界面的主要功能入口，以方便用戶快速尋找。例如，螞蜂窩和全民K歌在首頁采用了面形圖標設計的功能入口，一目了然。

在應用界面中使用面形圖標設計通常分為反白和正形兩種類型：反白即圖標填充白色且在圖標之下襯以填充色彩的背板，背板按形狀又分為圓形、橢圓矩形和圓角矩形3種；正形即圖標直接填充色彩且無背板，按填充又分為單色、折紙、多色3種。

在采用反白圖標設計時需注意圖標與背板的尺寸比例，雖然沒有嚴格的繪制標準，但從整體視覺效果上考慮，圖標繪制尺寸建議最小不低于背板直徑的1/2，最大不超過背板直徑的0.618（黃金比例），同時還要考慮所有圖標的視差一致。

圓形和圓角矩形的繪制方法很簡單，直接使用形狀工具即可繪制，而橢圓矩形介于這兩者之間。橢圓矩形也叫超橢圓形，英文名為Squircle，是Square（正方形）與Circle（圓形）的合體。橢圓矩形最早出現在諾基亞的MeeGo操作系統中，扁平化設計趨勢流行后，這種圓乎乎的獨特造型逐漸受到設計師的青睞。下面就來介紹幾種超簡單的橢圓矩形繪制方法。

多邊形繪制法

選擇多邊形工具，在工具屬性欄設置下拉菜單勾選平滑拐角，按住Shift即可在畫布上繪制出橢圓矩形。

這是最簡單的繪制方法之一，如果需要調節橢圓矩形的輪廓弧度和圓角大小，可以使用直接選擇工具選中錨點向中心或向外移動，向中心則輪廓弧度更平且圓角更小，向外則輪廓弧度更凸且圓角更大。千萬不要通過拉伸方向線的圓點來調節輪廓弧度和圓角，這樣的操作很難做到精確。

魚眼繪制法

選擇橢圓工具，在畫布上繪制圓形，執行Command+T右鍵“變形”，在工具屬性欄變形的下拉菜單選擇“魚眼”，單擊對勾或敲回車確定。

布爾運算繪制法

我們可以觀察到橢圓矩形是圓角矩形的四條邊微微向外凸出，因此可以在圓角矩形的四條邊分別添加同樣大小橢圓形得到橢圓矩形。在繪制時需注意橢圓形與圓角矩形的輪廓相切（紅圈標示），否則合并后的形狀輪廓不平滑。

線形圖標使用場景

在《iOS人機界面指南》中定義了線形圖標的設計風格，所有iOS原生應用的導航欄、標簽欄、工具欄全部采用了2px線框的圖標設計。例如，iOS健康應用的標簽欄和iOS照片應用的工具欄采用了線形的圖標設計，可以減少視覺干擾，讓用戶集中在產品核心功能上，同時輕量化的視覺語言也與扁平化的設計風格更為融合。

線形圖標是通過線條來表現物體的輪廓，它比面形圖標更能塑造優美的外觀，且作為貫穿圖標繪制的線條本身就是一種設計語言，因此繪制整套線形圖標會更加統一，具有整體感。

通常，在應用界面設計中，線形圖標很少和背板同時存在，因為線框描繪的圖形視覺表現力較弱，易埋沒在背板的填色中，但如果掌握好一定的規則，一些簡單的線形圖標也可以襯以背板。例如，QQ郵箱和網易新聞表格左側的圖標簡潔利落，在很小的尺寸也具有清晰的表現力。在信息復雜的首頁主要功能入口，則需要加粗圖標的描邊才不會失去視覺重心，例如糯米；而在信息結構單一的頁面中，簡潔的線形圖標配合背景色塊，既增強視覺聚焦又統一和諧，例如微博。

扁平線形圖標使用場景

近年來設計師熱衷于將面形圖標和線形圖標結合在一起，因此創造了扁平線形圖標設計風格，這種類似插畫感覺的圖形一開始多用于引導頁、無數據頁的情感表現，后來逐漸在標簽欄、首頁主要功能入口也出現了扁平線形圖標的身影。精致的扁平線形圖標令人賞心悅目，大大提升了應用的整體視覺效果，拉近了與用戶之間的距離，從而建立起良好的用戶印象。