起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識萬字長文｜終極圖標設計指南——理論篇
編輯導語：圖標是用戶界面不可缺少的元素，能夠有效幫助用戶解決很多問題。本篇文章作者分享了有關圖標設計的基礎理論，從多個方面講述了圖標的歷史、意義、使用方法、設計風格、類型以及規格尺寸、交互層等，一起來學習一下吧，希望對你有幫助。
如今的用戶界面中，圖標絕對是不可或缺的元素。雖然絕大多數的圖標都很小，甚至不被人注意到，但是它們幫助設計和用戶解決了許多問題。
圖標是可用性和導航的關鍵，用戶能夠感知到圖標的功用，但是只有設計師才會明白，想要讓圖標簡約、可用還富有表現力，要耗費多少時間和精力。
我們每天接收到各種信息，美的丑的，很多時候我們看的都是別人家誰做的高端的，拔高自己的同時，基礎不能落下。
扎實的基礎是拔高的前提。喬布斯曾經說過：“細節至關重要，花費時間仔細打磨是值得的”。
圖標是現如今UI界面中可用性和導航體系的核心組件。所以，這篇文章分為上篇、中篇、下篇三部分，仔細總結圖標的基礎知識。
從圖標的歷史出發，談及到圖標的意義、如何使用、設計風格、圖標類型、規格尺寸、交互層等多方面。
一、什么是圖標
上世紀九十年代伴隨IT產業出現的一個技術測繪，原指計算機軟件編程中為使人機界面更加易于操作和人性化而設計出的標識特定功能的圖形標志。
在不同場景下圖標的表達含義也會有不。
我們從廣義和狹義兩個角度來做概述：
- 廣義：具有指代意義的圖形符號，具有高度濃縮并且可以快捷傳達信息、便于以及的特性。應用范圍非常廣泛，包括軟件、硬件、網頁、社交場所等公共公共場合。所謂無處不在。例如，男女廁所標志，和各種交通標志。
- 狹義：應用于計算機軟件方面。程序標識，數據標識，命令選擇、模式信號等。圖標有助于用戶快速識別并且執行命令和打開相關程序文件。具有相同擴展名的文件具有相同的圖標。
UI設計中圖標主要被劃分為兩大類：標志圖標以及功能圖標。標志圖標，即手機APP應用的啟動入口。
由于這是用戶接觸app的第一印象，具備品牌傳播的屬性，決定了用戶去留問題。功能性圖標，主要是app出現在app、網站內部，具備功能性引導的功能。
二、圖標的意義
隨著人們工作越來越忙，圖標已成為了生活中的一部分。幫助我們快速定位，幫助我們快速的做出決定和行為，以及幫助我們找到需要的東西。
圖標連接著整個世界。不管你使用什么樣的語言，作為視覺語言的圖標都發揮著巨大的作用。例如機場中的導航標識、商場中的指示標識等等。圖標能夠快速的傳達信息。隨著信息技術的提升以及信息過剩，人們的注意力更加短暫和稀缺，
圖標成為了這個充滿噪音和過多無價值信息世界的救生員。通過簡單快速的查看就可以知道圖標中攜帶的復雜信息。優秀的圖標成為我們生活中的救生員。無論你需要找到正確的應用程序或產品頁面上的特定功能，又或者當你在外國城市搜索地鐵時，圖標都可以節省你很多時間。
隨著世界越來越忙，越來越嘈雜和全球化，它將在未來更加重要。
三、圖標的優勢
圖標設計是界面設計中很重要的元素之一，一套高質量的圖標對產品的品牌形象和用戶的體驗影響是巨大的。不僅能提升界面美觀度、降低用戶理解成本，還能塑造品牌形象、提升用戶的安全感和轉化率。
同時圖標具備傳遞信息非常的高效的特點?，F在人類能夠維持注意力的時間越來越短（已經比金魚還短了），因此傳遞信息的速度就越來越重要。
1. 圖標傳達信息快
本身對圖形的理解和接收能力就比單純的文字要快。圖形能更簡單清晰且很直觀的展示。
2. 圖標傳達信息準
通用圖形能跨語言、跨地區、跨文化群體表達出同樣含義，不易發生混淆。同樣文化背景的人對文字理解可能會不一致。
如果用圖形就會一目了然。用戶已經經過了長時間不同平臺長期培養，很多圖標已經形成了視覺習慣，比如齒輪代表設置、鉛筆代表編輯、放大鏡代表搜索。已經超越了語言地區的限制。
3. 品牌塑造穩定
同一個品牌、同一個平臺保持同樣的風格圖標，會讓人感到很專業。并且一套好的圖標從獨特性、象征性、記憶性上都更易于感動用戶，激發人們點擊的欲望。用戶始終在商家提供的環境里，能提升安全感。例如支付寶、拼多多、網易嚴選等優秀的互聯網產品。
4. 減少用戶辨識時間
人體左腦主要從事思維邏輯處理，右腦主要形象思維，從事視覺圖像、音樂、空間幾何處理。據科學表明，右腦是左腦處理速度的60萬倍，意味著人類對圖像的敏感度是非常高的。所以我們可以將文字圖像化，從而快速引導用戶接受相應消息，進行操作，減少理解閱讀思考的時間。
四、圖標的類型及設計屬性
圖標根據具體實際用途大體可以分為三大類：工具圖標、裝飾圖標、啟動圖標，而根據設計風格分類主要有線性風格、面性風格、漸變風格、剪影風格、長投影風格、卡通風格、輕質感風格、擬物風格、2.5D風格等等。
1. 工具圖標
1）線性風格
線性圖標，即圖形是通過線條的描邊輪廓勾勒出來的。多數人對它樣式認識的第一反應應該是使用純色的閉合輪廓，比如上圖案例，線性圖標的創作空間看似不多，但實際上有非常多的調整空間。特點是簡約、概括、視覺識別度良好，設計感強。
2）面性風格
面性圖標，即使用對內容區域進行色彩填充的圖標樣式。同樣，在這類圖標中，也不是只能應用純色的方式進行填充，還有非常多的視覺表現類型。
3）混合風格
在設計圖標類型的時候，也不一定非線性和面性不可，有一些熱衷創造和嘗試的設計師，還創作出了混合型的圖標，既有線性描邊的輪廓，又有色彩填充的區域。
2. 啟動圖標
啟動圖標的設計比前面兩種類型的圖標說起來更難，因為它實際上就是把「LOGO嵌套進系統圖標模版」的圖標。主要分為文字類型、圖形類型、插畫類型、圖標類型，擬物類型。
3. 裝飾圖標
裝飾圖標最主要的應用區域，集中在首頁的快速入口上，也是今天多數應用中會使用的組件。
1）漸變風格
多為單色漸變，顏色過渡清新自然，是目前的主流設計風格之一。除用于圖標外，漸變風格可使用的場景非常多，如APP中的背景圖、按鈕等。
2）輕質感風格
層次簡單，用色素雅干凈，采用輕投影、輕漸變的方法設計。這類圖標具有一定的立體感，能給人輕盈、簡潔、精致的感覺。
3）輕質感風格
層次簡單，用色素雅干凈，采用輕投影、輕漸變的方法設計。這類圖標具有一定的立體感，能給人輕盈、簡潔、精致的感覺。
4）2.5d風格
介于2D和3D之間，那么它就是在平面上面看立體的2.5D透視原理圖像，就是物體的正面光面和暗面三面組成，也算是偽3D。首先，設計師需要設計出明暗、背面、正面三個面的圖像之后，拼合后只需要做圖像、光影關系的調整，以及整體配色和感覺。
5）實物貼圖風格
采用了真實攝影物體的設計風格，它不屬于完全依靠我們創作和繪制出來的。
6）MBE風格
MBE是從扁平化的潮流中逐漸演變而來的。
最原始的MBE風格特征非常明顯：粗描邊、描邊斷點、深淺色調搭配出陰影質感、一般以單色調為主、背景有些低飽和度的小圓圈和加號點綴。粗線條描邊起到了對界面的絕對隔絕，突顯內容，表現清晰，單色調化繁為簡，富有質感。
后期，也有眾多設計師對這種風格進行了改良，描邊斷點、背景點綴、色彩溢出不再是必要的，進一步簡化了設計。
五、如何選擇線性還是面性
基礎功能圖標是應用程序或網站使用最頻繁的圖標。主要作用是替代或者輔助文字來引導用戶。
表現形式也比較簡單無非三種：線性圖標、面性圖標、線面結合。那么我們在工作中如何正確選擇使用呢？
線性圖標顧名思義用線條來表現繪制。面性圖標也就是一個物體的剪影，用塊來表現語義。
二者的表現形式卻有很多種，同色的、漸變色的、疊加的、斷線等。在點線面基礎三元素中，從面積大小角度考慮，點最小，面最大。
從視覺上來說，線性給人的感覺是較為輕量、簡約。
面性給人的視覺重量最重，通過面積、色彩、質感等相對于線性圖標具備更強的視覺信息層級，更具引導性。
線面結合的方式相較于前兩者，樣式表現會更為豐富，形式感最強。但由于圖標內元素增多，如果運用不得當，很容易顯得雜亂。
通常設計拿到需求時，首先考慮的是圖標的識別效率，畢竟圖標最重要的作用是快速傳遞信息。
線性圖標的線條比較微妙尤其是形狀邊緣時更容易被識別到，面性的特征就會被忽略掉。
綜上所述，具體如何使用，需要了解圖標的實際作用是什么，然后做出選擇。市面上的應用大多是用線性用在功能圖表為主，面性用在功能區，吸引用戶點擊。線面結合用的比較少。
六、如何準確運用圖標
1. 面性圖標的運用
面性圖標視覺表現力強，有效的強調頁面的視覺重心，能更好的突出主要業務重心，所以常用在首頁做為主要流量分發。很多產品在節日或活動中，常常改變面性圖標來營造氣氛。
面性圖標不建議在列表中大量使用，原因是形式與功能之間的關系，面性圖標的特點是視覺表現力強，不具備高效的識別性，對于功能分類的列表頁面，視覺重點是功能的名稱，圖標的作用是輔助文字表達，需要快速無差別識別功能，并不需要高效引導的作用。
2. 面性與異形圖標的運用
面性圖標的第一視覺是一個色塊，異形圖標第一視覺是個形狀，所以面性圖標視覺表現力強，異形圖標識別效率高。
通過二者的這一特征，于是做了這樣的設計。第一排的面性圖標都是用戶的高頻使用的業務板塊，視覺上強引導為用戶優先做出選擇，這就是一種高級的設計手法！
3. 用圖標區別視覺層級、業務板塊
下圖為京東的個人中心頁面嘛，圖標有主有次，有視覺層級，強化用戶常用的或者產品主推的業務，為用戶做選擇。
七、圖標的用色原則
首先看一下微信以及支付寶的圖標設計，不難發現運用了四色系原則。
保證四個色系是比較合理的，紅、黃、藍、綠也符合大多數業務場景屬性。
一般情況下，四色系能保證用色的合理性。當然這并不是絕對，只要視覺舒適，符合業務，是可以突破四色系的。
拋開四色系原則，我們也不難發現一些應用上使用了純黑色的線型圖標。其實純黑色用的好，比四色系更容易凸顯逼格，更加高級。比如得物、小黑盒。一個是產品特性，潮流相關，一個是傳遞品牌特性。
黑色象征著高貴、穩重、科技、潮流。黑色是一個很神奇的顏色，可以莊重、高雅，也可以讓其他顏色（亮色）突出出來。不難理解，得物為什么用黑色，潮流相關，凸顯個性、有逼格；小黑盒用黑色，與游戲相關，大多是男性用戶居多，而且品牌中有“黑”，也契合品牌。
八、圖標的大小規范
1. 圖標大小
iOS的網格大小要求是4的倍數，最小熱區是44pt。安卓的設計規范要求網格大小是8的倍數，最小操作熱區為48dp。
同時需要考慮到不同機型適配問題。@2x要求是4的倍數，被2整除適配@1x；@3x要求12的倍數，適配@1x、@2x。建議是采用48pt為常規尺寸。
2. 圖標粗細
為了保證圖標能夠看清，圖標的粗細也有相應的要求，太細會存在看不清的情況。
在@1x一倍圖設計模式下，以48px為基準，常用的圖標粗細有：1.5px、2px、3px、4px。需要注意在48X48px畫布上繪制線性圖標，線寬為4px時，當不同場景縮放，需要按比例進行調整：圖標為32X32px時線寬為3px；圖標為24X24px時線寬為2px；圖標為16X16px時線寬為2px。
3. 物理大小&視覺大小
在繪制一整套圖標的時候，總被說視覺不統一，大小不一樣。這是因為你按照物理大小在做圖標，忽略了視覺大小。分別是什么意思呢？
物理大小是形狀之間的寬和高相同，不是計算面積；視覺大小是，正方形的邊長跟圓形的直徑相等的情況下，繪制出來的圖形，視覺上圓總要小一點。
也就是視覺大小。需要通過人眼去判斷不斷的微調大小和比例。視覺大小是感受上的視覺。
除了正方形跟圓意外，還有菱形，三角形。在繪制這類圖形，一定要注意視覺大小。別再讓別人說你的圖標不統一了。
為了保證圖標的視覺統一，通常會借助網格（keyline線）
4. 什么是圖標網格
把圖標網格當成一種約束，讓你的圖標集保持規范統一。網格是一個框架，讓你的圖標保持統一。
5. 什么時候使用網格
網格是一個框架結構，會在這個基礎上圖標會保持一致。如果未來這些圖標被其他人維護的時候，網格也可以起到很好的作用。
網格很像遵循的規則，讓其他設計師在最開始就明白圖標的尺寸、以及設計規范。
當然并不是所有時候繪制圖標都必須先建立網格。如果你要創建超過50個圖標以上的圖標集時，網格還是很有必要的。
你要使用同一種風格創建很多圖標，網格有助于保持視覺網格統一 。
另一個情況是當你要給現有的平臺設計圖標，而這個平臺有自己的圖標網格。
如給 iOS或Android 設計圖標, 你最好使用它們平臺的網格規范。這些網格確保它們在各個平臺上保持網格統一,你應該遵循這些規則，確保和平臺的風格保持一致。
九、圖標常用尺寸
1. iPhone圖標尺寸規范
@2x格式使用機型：iPhone 4，4s，5，5s，5s，s，6，6s，7，8，XR；
@3x格式使用機型：iPhone 6P，6SP，7P，8P，X，XS，XS Max；
2. 安卓圖標尺寸規范
3. iPad圖標尺寸規范
十、如何統一圖標
1. 創建凝聚力的圖標集
創建一個圖標很容易。創建一些美觀的圖標也不難。這使它們具有凝聚力，可能會是一個難點。完成一組連貫的圖標是一個艱巨的挑戰。下面有6個有用的技巧，可以掌握如何創建精美的具備凝聚力的圖標集。
2. 為什么圖標應該具有凝聚力
圖標設計不僅僅是代表真實對象的圖形符號。這是一種獨特的語言，其中每個圖標都是一個具有自己含義的名詞。
就像在現實世界中與伴侶聊天一樣，可以使用圖標與數字世界中的人進行交流。
在一組使用樣式不同的圖標就像在一個句子中混合使用不同的語言–即使您很好的被人們所理解，人們也不會認真對待您。
1）堅持一種風格
這是要使圖標漂亮且一致的關鍵。在確定圖標的樣式之前，請勿開始制作任何圖標。
有很多樣式和樣式變體。最常見的是：輪廓圖標，字形，平面圖標，擬形圖標，手繪等。一旦確定了未來圖標的樣式，請堅持使用該圖標集中的每個圖標。具有不同樣式的圖標引人注目，但效果并不理想。它破壞了整個集合的凝聚力，美感和價值。
從決定使用哪種樣式的那一刻起，所有設置的圖標都應使用相同的樣式制作。不要讓風格各異的圖標殺死場景并破壞其背后的辛苦工作。
2）保持相同的風格
這與保持相同樣式略有不同。
每種風格都有其個性。例如，可以制作成千上萬種不同的輪廓圖標變體。但是選擇正確的樣式同樣重要。
圖標是詳細的還是簡約的？有粗線還是細線更好？還是混合線寬？那角落呢：它們應該是圓的還是尖的？要使用圓形或對接帽嗎？
確切知道為什么每個元素都按您的方式進行?？紤]一下您未來圖標集的所有可能細節，并一直堅持到最后。
3）大小相同
保持集合中每個圖標的大小相同。它們不僅應該在相同大小的方形框架中，而且看起來也應該相等！
想象兩個相同大小的形狀–圓形和正方形。正方形將始終看起來更大，因為它會填充更多空間。應該進行一些更改以使它們在外觀上相同。例如，將正方形縮小一點。
4）使用網格
出色的圖標集始終使用網格制作。只是不要過度使用它們。如果您發現圖標看起來不適合網格，請調整！好的集合有一個網格。
5）在整個集合中使用相同的元素
很簡單：如果您在一個圖標中使用了20px的圓圈，另一個圖標則需要一個類似的圓圈，只需復制它即可。毫無疑問，在整個集合中具有相等大小的對象會使它看起來更具凝聚力！從其他圖標復制元素將為您節省大量時間！
6）使用相同的調色板
相同的顏色組合應該保留在集合的所有圖標中。選擇顏色，將它們添加到色板，然后嘗試使用它們。
十一、B端、C端圖標的差異
1. 圖標內容差異化
C端產品的圖標設計需要突出自己的設計理念，還要與其他產品形成個性化、差異化，尤其是競品。
設計過程中盡可能與產品品牌結合，讓用戶快速記住你的產品（品牌）。所以C端產品的圖標設計更具備獨特的視覺風格。
B端產品的圖標設計則不需要過于差異化，主要強調圖標的表意與實際需求一致。在圖標表達上差距不能太大，同質化較為嚴重。
2. 不同的設計難點
C端產品圖標更多偏向趣味性，不太會考慮業務層，更多重視視覺表現與優化
B端產品圖標更多取決于業務。在B端的設計場景中，很多圖標是與各種業務名稱關聯，而業務名稱復雜多變，往往去思考每個業務所表達的特殊含義。
3. 不同的側重點
C端產品圖標數量較少，但是使用的場景十分復雜。當形成一套視覺圖標體系的時候，要把多場景的圖標進行串聯，需要考慮不同功能不同頁面之間的聯系。比如首頁功能區、分類區、個人中心等，都要需要保證整體性。
B端產品圖標的使用場景比C端少的多，但數量往往是C端的好幾倍。需要通過圖標保證不同業務之間的關系，所以B端圖標更講究延展性。
十二、小結
整個圖標設計分為三篇來講述的。
- 《理論篇》主要講述圖標設計的概念以及設計原則等理論內容；
- 《工作篇》主要講述工作中圖標設計過程以及圖標落地；
- 《分享篇》主要分享圖標設計的工具、圖標網站、圖標設計團隊或者設計師。
第一篇內容就到這里結束了。
本文由 @卡洛設計 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash ，基于 CC0 協議。
文章蠻長的哈哈，不過作者確實從多個方面講述了圖標這一概念，總之，受益匪淺。