編輯導語：圖标是用戶界面不可缺少的元素，能夠有效幫助用戶解決很多問題。本篇文章作者分享了有關圖标設計的基礎理論，從多個方面講述了圖标的曆史、意義、使用方法、設計風格、類型以及規格尺寸、交互層等，一起來學習一下吧，希望對你有幫助。

如今的用戶界面中，圖标絕對是不可或缺的元素。雖然絕大多數的圖标都很小，甚至不被人注意到，但是它們幫助設計和用戶解決了許多問題。

圖标是可用性和導航的關鍵，用戶能夠感知到圖标的功用，但是隻有設計師才會明白，想要讓圖标簡約、可用還富有表現力，要耗費多少時間和精力。

我們每天接收到各種信息，美的醜的，很多時候我們看的都是别人家誰做的高端的，拔高自己的同時，基礎不能落下。

紮實的基礎是拔高的前提。喬布斯曾經說過：“細節至關重要，花費時間仔細打磨是值得的”。

圖标是現如今UI界面中可用性和導航體系的核心組件。所以，這篇文章分為上篇、中篇、下篇三部分，仔細總結圖标的基礎知識。

從圖标的曆史出發，談及到圖标的意義、如何使用、設計風格、圖标類型、規格尺寸、交互層等多方面。

一、什麼是圖标

上世紀九十年代伴随IT産業出現的一個技術測繪，原指計算機軟件編程中為使人機界面更加易于操作和人性化而設計出的标識特定功能的圖形标志。

在不同場景下圖标的表達含義也會有不。

我們從廣義和狹義兩個角度來做概述：

• 廣義：具有指代意義的圖形符号，具有高度濃縮并且可以快捷傳達信息、便于以及的特性。應用範圍非常廣泛，包括軟件、硬件、網頁、社交場所等公共公共場合。所謂無處不在。例如，男女廁所标志，和各種交通标志。
• 狹義：應用于計算機軟件方面。程序标識，數據标識，命令選擇、模式信号等。圖标有助于用戶快速識别并且執行命令和打開相關程序文件。具有相同擴展名的文件具有相同的圖标。

UI設計中圖标主要被劃分為兩大類：标志圖标以及功能圖标。标志圖标，即手機APP應用的啟動入口。

由于這是用戶接觸app的第一印象，具備品牌傳播的屬性，決定了用戶去留問題。功能性圖标，主要是app出現在app、網站内部，具備功能性引導的功能。

二、圖标的意義

随着人們工作越來越忙，圖标已成為了生活中的一部分。幫助我們快速定位，幫助我們快速的做出決定和行為，以及幫助我們找到需要的東西。

圖标連接着整個世界。不管你使用什麼樣的語言，作為視覺語言的圖标都發揮着巨大的作用。例如機場中的導航标識、商場中的指示标識等等。圖标能夠快速的傳達信息。随着信息技術的提升以及信息過剩，人們的注意力更加短暫和稀缺，

圖标成為了這個充滿噪音和過多無價值信息世界的救生員。通過簡單快速的查看就可以知道圖标中攜帶的複雜信息。優秀的圖标成為我們生活中的救生員。無論你需要找到正确的應用程序或産品頁面上的特定功能，又或者當你在外國城市搜索地鐵時，圖标都可以節省你很多時間。

随着世界越來越忙，越來越嘈雜和全球化，它将在未來更加重要。

三、圖标的優勢

圖标設計是界面設計中很重要的元素之一，一套高質量的圖标對産品的品牌形象和用戶的體驗影響是巨大的。不僅能提升界面美觀度、降低用戶理解成本，還能塑造品牌形象、提升用戶的安全感和轉化率。

同時圖标具備傳遞信息非常的高效的特點。現在人類能夠維持注意力的時間越來越短（已經比金魚還短了），因此傳遞信息的速度就越來越重要。

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 協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部