6.3 圖標管理和交付

完成圖標后需要進行視覺檢視，避免任何多余的線條或形狀，保證盡可能整潔。檢查所有線條是否都在標準框架內，讓其他人幫忙來檢查你的圖標是否整潔是非常有必要的。對圖標精心設計評審，合格后再加入資源庫，這樣避免多人同時修改而造成混亂。

文件格式是導出圖標的關鍵。不同的人需要的文件格式也不同，如果你為外部合伙人提供圖標，那么可能會提供1x、2x和3x.的png文件，以適應多種設備。而對于開發和其他設計人員，則通常需要導出.svg文件，這些文件可以在設計程序中編輯，并且可以通過代碼在應用程序或瀏覽器中繪制。當導出SVG時，代碼應該盡可能簡潔。選擇Figma的另一個重要原因是它有超小的SVG導出，并且還能自動優化。

圖標資源管理工具：Nucleo

或許你能做出完美無瑕的圖標，但如果不能讓它們產品中發揮作用的話，那將毫無意義。所以在你開始設計之前，可以和開發人員談談，他們能告訴你圖標交付的要求，這將改變你的一些選擇，比如圖標的粗細或大小。問問其他設計師過去做過什么，以確保你們沒有重復工作。你還可以和市場運營人員聊一下，看看他們在日常物料中缺少什么。總之，多向別人尋求反饋、建議和幫助。他們會激勵你發現更好的想法，并讓你了解自己應該做什么。一套完整的圖標設計規范是有必要的。

6.4 線性or面性

設計中，我們應該是用「線性圖標」還是「面性圖標」呢?

其實二者沒有太明顯的選擇優劣，很多場景下已經越來越模糊，但總的來說，還是有一些法則可以作為參考：

常用的手法：在App的底部導航欄，選中狀態使用面型圖標，而非選中狀態使用線性圖標;

16px左右的小圖標慎用線性圖標，線性圖標在16px下，可排布像素的區域較小，這個時候線性圖標不容易設計;

面型圖標比起線性圖標，除裝飾性外具備更強的視覺信息層次感，更具引導性，比如金剛區功能圖標、IOS設置界面，使用面型圖標;

車載等系統界面，更適合用面型圖標，面型圖標的視覺面積較大，短時間內更加容易識別;

線性圖標看起來通常會更加細膩精致，適合比較精致簡潔的設計或者女性化產品設計;

 

功能圖標在UI設計中占據非常重要的作用，幾乎存在于每一個應用界面中，無論是在導航欄、工具欄或標簽欄，還是在首頁、詳情頁、或個人中心頁，都隨處可見功能圖標的身影。功能圖標具有明確的表意功能，起作用在于替代文字或輔助文字來指引用戶進行快速導航，它具有圖形化的符號，比文字更加直觀，符合普羅大眾的認知習慣，有助于用戶形成記憶思維，提高應用的易用性。同時，設計精美、風格統一的功能圖標提升了產品視覺效果，不但給用戶帶來視覺上的愉悅感，還帶來良好一致的使用體驗。

7.1 線性圖標使用場景

在iOS所有原生應用的導航欄和工具欄都采用了2px線框的圖標設計，很多APP產品的標簽欄都選擇用線性風格的圖標設計。無疑，線性圖標可以減少視覺干擾，讓用戶集中在產品核心功能上，同時輕量化的視覺語言也與扁平化的設計風格更為融合。它比面形圖標更能塑造優美的外觀，且線條本身就是一種設計語言，因此繪制整套線性圖標會更加統一，具有整體感。

通常，在UI設計中，線性圖標很少和背板同時存在，因為線條的圖形視覺表現力較弱，容易埋沒在背景色中，但也不是必須的，如果掌握好一定的規則，一些簡單的線性圖標和背板的組合也會很協調。

7.2 面形圖標使用場景

面形圖標具有廣泛適用性，通常在運動、時尚類應用的標簽欄出現。由于面形圖標的視覺占比最大化，具有強烈的視覺表現力，一般用于應用界面的主要功能入口，以方便用戶快速尋找。

功能入口的面形圖標通常分為反白和正形兩種類型。反白即在彩色背板上顯示白色的圖標，正形即圖標直接填充色彩且無背板。在帶有背板的圖標設計時要注意圖標與背板的尺寸比例，雖沒有嚴格的繪制標準，但從整體視覺效果上考慮，圖標尺寸最好不低于背板直徑但1/2，最大不超過背板直徑的0.618(黃金比例)，同時還要考慮所有圖標的視差一致。

7.3 扁平圖標的使用場景

扁平化圖標實際上是線性圖標和面形圖標的一種組合形式，這種類似插畫感覺的圖形一開始多用于引導頁、空狀態也的情感化設計，后來逐漸在標簽欄、首頁主要功能入口也出現了扁平化圖標的身影。精致的扁平化圖標令人賞心悅目，拉近了與用戶之間的距離，從而建立起良好的用戶印象。

我們了解了 icon 的基本知識，那么如何設計一個好的 icon 呢?怎樣評判我們的 icon 是否合適，是否貼合整個產品呢?我們需要了解什么才是一個好的 icon 。

我們可以從以下五個方面來檢驗，分別是：識別性，規范性、統一性、呼吸感與品牌感。

8.1 識別性

圖標就是幫助用戶理解信息，所以識別性(也可以說是可訪問性)是一個圖標最重要的一項，尤其在沒有文字說明的情況下，一定不能讓用戶產生疑惑。我們檢測圖標的可讀性通常要將圖標的背景色底板在黑色和白色之間進行切換對比，不論是黑色還是白色的背景都可以看清圖標的全部細節，還需要確保圖標中的每一種顏色都是可見的。第二就是將圖標拿到強光下進行觀察，在強光下是否可以看清圖標的主題結構，圖標是否有足夠的辨識度。

圖標識別性可以分為兩類，分別是含義識別和視覺識別。

含義識別：是視覺語言是否可替換文字語言，簡言之就是讓你的圖標可以被用戶理解，不會讓用戶產生歧義。

視覺識別：圖標的大小，顏色，線條的粗細，這些影響視覺識別的因素識別性是否高。

8.2 規范性

規范性也是做好一個圖標的基礎，我們要保證圖標在視覺大小的一致性，圖標飽滿度、遵循同一種規律，細節統一性。

視覺大小的一致性：在相同尺寸的基礎上分析形狀間的視覺差異，來審視視覺上是否統一，如一樣尺寸大小的圓和方形的視覺大小就不一致，那么我們可以規定它的最大尺寸，進而在尺寸規范中適當調整，使得視覺大小達到統一;

飽滿度：常用的衡量方法就是正負形衡量法，在圖標所占區域的矩形框中，看圖標的正形的面積是否還可以增加;

相同規律：同一套圖標必須是以同種風格呈現的，例如是否全部使用了圓角或直角的風格，圓角大小、繪制風格是否一致;

細節統一：包括像素是否對齊、圓角、描邊粗細是否統一的問題;

8.3 統一性

在繪制多個類型相同的圖標時，我們需要注意這一套圖標合集需要在視覺上保持統一性。在一整套產品中，會有很多種圖標，但是圖標的功能不一樣，所表達的內容也不同。這時，圖標一致性的意義就體現出來了，根據格式塔原理中的相似性原則：人們會將如元素彼此相似的東西感知為一組。這也意味著如果具有相同功能、含義和層次結構級別的元素，則應在視覺上保持統一匹配。

圖標內容的統一會讓用戶明白相似的圖標所代表的的功能也相同，而且在視覺上也更加和諧美觀。因此我們在繪標后還需檢查線條的粗細比重，邊角的大小，配色方案，細節層次和設計元素在整個合集中是否是不變且一致的。

8.4 呼吸感

呼吸感的意思就是適當留白。不管是圖標還是界面，適當的留白可以突出主體內容，讓內容具備易看性。在圖標的繪制過程中，我們應該注意圖標元素之間的間距不宜過近，元素也不宜過多。圖標是一個物體的簡略縮影，目的是為了表達內容，讓用戶快速理解，太過復雜的細節會影響圖標的識別速度。因此在圖標的繪制過程中應該刪除所有無法傳達圖標意義的元素，避免使圖標變得太過復雜難以識別。

8.5 品牌感

品牌感就是我們上面談到的要與品牌理念相符，傳達給用戶的感受一致，通過吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌圖形的方法來提取品牌基因。我們要試著從品牌設計的角度去理解，尋找自己產品獨特的品牌氣質，挑選合適的技法。然后把這些元素具象化，融入在界面設計中。

那么，該如何提升品牌感，打造屬于自己App的獨特風格呢?品牌基因為我們提供了一些線索，這是近年來非常流行的一種趨勢。

我們都知道圖標在APP設計中的重要性，但是打開許多APP你會發現他們的圖標設計都非常普通，似乎是在圖標網站上下載的素材。雖然一些優秀的設計師在進行圖標設計師加入一些諸如圓角、斷線等設計語言，但是仍逃脫不了與其他APP設計雷同、毫無個性的通病，使得UI看上去普通、不精致，缺少產品氣質。

 

那么，該如何打造屬于自己APP的獨特風格呢?品牌基因為我們提供了一些線索。它是由平面設計中的VIS(視覺識別系統)引入的一種設計策略，通過對品牌形象進行延生設計形成一套完整的視覺符號。每一個APP都有其品牌形象，代表了與眾不同的氣質。接下來，我們就來學習如何利用品牌基因進行圖標設計。

9.1 提取品牌圖形

通常一個App的第一個tab是首頁，是用戶進入App后看到的第一個頁面，最常見的圖標設計是一個小房子的圖形。首頁是App中最重要的頁面，承載了整個產品的核心功能，是用戶瀏覽最多的地方，因此使用一個讓人印象深刻的品牌圖形作為“首頁”圖標是必要的，不但使App內外形成了視覺聯系，同時也二次傳遞了品牌形象，加強了用戶對App的良好印象。例如網易云音樂的首頁標簽就直接使用了它的品牌圖形，其優點不言而喻。

但是請注意，這種設計策略并不適合于所有的App，當第一個tab被賦予特定功能，就不可使用品牌圖形，否則用戶會難以理解。例如微信第一個tab是聊天列表，此時使用氣泡就比品牌圖形更加合適。

還有另外一種情況。通常一個App的最后一個tab是個人中心，即“我的”。如果App的品牌圖形是動物圖形，也可以使用其整體或局部圖形來作為「個人中心」的入口圖標。

9.2 提取品牌色彩

色彩也是圖標設計中重要的構成元素之一，合理協調的色彩搭配讓用戶在瀏覽頁面時感覺舒服。從品牌形象中提取色彩作為圖標設計的依據，可以給用戶帶來由內而外一致的視覺體驗。在設計時提取品牌色彩可適當調整色彩的飽和度，明度，既可以將圖形整體填充色彩(例如微信)，也可以局部填充色彩，還可以填充為圖標背景色，使圖標之間形成色彩上的關聯。直播應用Bigo Live的品牌色是青藍色，在標簽欄的圖標設計上(選中態)將圖形局部元素填充青藍漸變色，活潑清爽的搭配帶給用戶輕快的感覺，與整體品牌調性高度一致。

9.3 提取設計語言

在VI設計中通常提取輔助圖形作為設計元素，這在圖標設計中同樣適用，當所有的圖標都具備了相同的設計元素，他們就構成了一套完整的視覺符號。例如飛豬的品牌圖形就很特別，豬的頭部輪廓是由大寫字母F演變成的翅膀造型，因此可以看到“我的”小人圖標的也使用了類似的輪廓，這樣他們就形成了某種視覺聯系。

9.4 提取產品氣質

品牌形象決定了產品的氣質，而產品的氣質決定了吸引什么樣的用戶。就如當我們第一次看到一個人的時候，往往會根據他的外貌形象特征，產生一個大致的印象，這就是一個人的氣質。APP也同樣，例如傳遞傳統手工藝人社交的「東家」，其產品流淌著古樸、溫潤、精致的人文氣息，它將宋體漢字的筆畫進行拆解組合，創造出具有東方韻味且極具形式感的圖標設計。

9.5 拆分品牌名稱

App標簽欄圖標最常見的形式是圖形加文字的組合，由于文字本身就能傳達最直接的含義，因此圖形的識別性并不那么重要了，我們就可以在其視覺表現形式上賦予更多創意和個性。MONO是一款閱讀類App，它的標簽欄圖標直接將品牌名稱中的4個字母拆分成4個圖形。雖然每個字母與其對應的功能模塊本身并沒有直接聯系，但加上標簽文字的輔助也不會造成閱讀困難，而且產品本身的用戶人群就是比較能接受新鮮事物的年輕人，因此這樣的創意反而給App設計加分了。

9.6 展開形象聯想

我們日常使用的眾多App大多數都有著相同的功能模塊：首頁、發現、動態、我的等，因此也就出現了很多雷同的圖標設計。比如“首頁”是尖頂房子，“發現”是眼睛，“動態”是氣泡，如果有差別也只是設計風格的差異，有的直角有的圓角，有的線性有的面形。這樣的設計沒有品牌歸屬感，試一下將這些圖標單獨拿出來就無法判斷它是誰，它從哪兒來?

優秀的設計師不僅要具備將圖標繪制精美的能力，還要具備豐富的設計想象力，不拘泥于設計規范的條條框框，有時候打破規則才能設計出優秀的圖標。“首頁”除了小房子我們還可以想到什么?馬蜂窩的做法就很巧妙，“首頁”圖標是“蜂巢”，而蜂巢是馬蜂的房子，這樣的設計與品牌形象緊密相連，簡直完美!不過最新的改版好像已經改沒了。

總之，要想在繪制整套圖標時建立統一風格，就要從外觀和顏色上確立主風格，在局部尋求個性特征，將兩者結合，并融合產品屬性和符合用戶定位，先在腦海中構思出清晰的概念，然后在稿紙上繪制草圖，最后確立一個最佳方案上機完成，只有不斷地思考和打磨才能創作出最佳的設計方案。

寫在最后

圖標設計是UI設計中非常重要的環節，因為除了文字和圖片的排版之外，在扁平時代能夠傳遞給用戶情緒和設計感的通道就是頁面中的各種圖形與圖標。在尺寸有限的界面上，小小的 icon 可以更加簡單高效的表達含義，傳遞給用戶正確和友好的指引。建議每位UI設計師在平時做大量的練習嘗試各種不同的風格，以滿足不同的業務需求。

OK，圖標設計指南就分享到這里，希望對大家有所幫助。因為篇幅較長，幾經修改，有細節不嚴謹的地方，歡迎斧正，感謝閱讀。

參考文獻

Material Design

Human Interface Guidelines

ICON | 設計指南——v優客

ICON設計指南——Bonnie Kate Wolf

圖標設計零基礎科普指南

UI設計師必須知道的 iOS和Android的APP圖標設計指南

品牌基因圖標設計技巧

作者：印跡時光