編輯導(dǎo)語(yǔ)：圖標(biāo)是用戶(hù)界面不可缺少的元素，能夠有效幫助用戶(hù)解決很多問(wèn)題。本篇文章作者分享了有關(guān)圖標(biāo)設(shè)計(jì)的基礎(chǔ)理論，從多個(gè)方面講述了圖標(biāo)的歷史、意義、使用方法、設(shè)計(jì)風(fēng)格、類(lèi)型以及規(guī)格尺寸、交互層等，一起來(lái)學(xué)習(xí)一下吧，希望對(duì)你有幫助。

如今的用戶(hù)界面中，圖標(biāo)絕對(duì)是不可或缺的元素。雖然絕大多數(shù)的圖標(biāo)都很小，甚至不被人注意到，但是它們幫助設(shè)計(jì)和用戶(hù)解決了許多問(wèn)題。

圖標(biāo)是可用性和導(dǎo)航的關(guān)鍵，用戶(hù)能夠感知到圖標(biāo)的功用，但是只有設(shè)計(jì)師才會(huì)明白，想要讓圖標(biāo)簡(jiǎn)約、可用還富有表現(xiàn)力，要耗費(fèi)多少時(shí)間和精力。

我們每天接收到各種信息，美的丑的，很多時(shí)候我們看的都是別人家誰(shuí)做的高端的，拔高自己的同時(shí)，基礎(chǔ)不能落下。

扎實(shí)的基礎(chǔ)是拔高的前提。喬布斯曾經(jīng)說(shuō)過(guò)：“細(xì)節(jié)至關(guān)重要，花費(fèi)時(shí)間仔細(xì)打磨是值得的”。

圖標(biāo)是現(xiàn)如今UI界面中可用性和導(dǎo)航體系的核心組件。所以，這篇文章分為上篇、中篇、下篇三部分，仔細(xì)總結(jié)圖標(biāo)的基礎(chǔ)知識(shí)。

從圖標(biāo)的歷史出發(fā)，談及到圖標(biāo)的意義、如何使用、設(shè)計(jì)風(fēng)格、圖標(biāo)類(lèi)型、規(guī)格尺寸、交互層等多方面。

一、什么是圖標(biāo)

上世紀(jì)九十年代伴隨IT產(chǎn)業(yè)出現(xiàn)的一個(gè)技術(shù)測(cè)繪，原指計(jì)算機(jī)軟件編程中為使人機(jī)界面更加易于操作和人性化而設(shè)計(jì)出的標(biāo)識(shí)特定功能的圖形標(biāo)志。

在不同場(chǎng)景下圖標(biāo)的表達(dá)含義也會(huì)有不。

我們從廣義和狹義兩個(gè)角度來(lái)做概述：

• 廣義：具有指代意義的圖形符號(hào)，具有高度濃縮并且可以快捷傳達(dá)信息、便于以及的特性。應(yīng)用范圍非常廣泛，包括軟件、硬件、網(wǎng)頁(yè)、社交場(chǎng)所等公共公共場(chǎng)合。所謂無(wú)處不在。例如，男女廁所標(biāo)志，和各種交通標(biāo)志。
• 狹義：應(yīng)用于計(jì)算機(jī)軟件方面。程序標(biāo)識(shí)，數(shù)據(jù)標(biāo)識(shí)，命令選擇、模式信號(hào)等。圖標(biāo)有助于用戶(hù)快速識(shí)別并且執(zhí)行命令和打開(kāi)相關(guān)程序文件。具有相同擴(kuò)展名的文件具有相同的圖標(biāo)。

UI設(shè)計(jì)中圖標(biāo)主要被劃分為兩大類(lèi)：標(biāo)志圖標(biāo)以及功能圖標(biāo)。標(biāo)志圖標(biāo)，即手機(jī)APP應(yīng)用的啟動(dòng)入口。

由于這是用戶(hù)接觸app的第一印象，具備品牌傳播的屬性，決定了用戶(hù)去留問(wèn)題。功能性圖標(biāo)，主要是app出現(xiàn)在app、網(wǎng)站內(nèi)部，具備功能性引導(dǎo)的功能。

二、圖標(biāo)的意義

隨著人們工作越來(lái)越忙，圖標(biāo)已成為了生活中的一部分。幫助我們快速定位，幫助我們快速的做出決定和行為，以及幫助我們找到需要的東西。

圖標(biāo)連接著整個(gè)世界。不管你使用什么樣的語(yǔ)言，作為視覺(jué)語(yǔ)言的圖標(biāo)都發(fā)揮著巨大的作用。例如機(jī)場(chǎng)中的導(dǎo)航標(biāo)識(shí)、商場(chǎng)中的指示標(biāo)識(shí)等等。圖標(biāo)能夠快速的傳達(dá)信息。隨著信息技術(shù)的提升以及信息過(guò)剩，人們的注意力更加短暫和稀缺，

圖標(biāo)成為了這個(gè)充滿(mǎn)噪音和過(guò)多無(wú)價(jià)值信息世界的救生員。通過(guò)簡(jiǎn)單快速的查看就可以知道圖標(biāo)中攜帶的復(fù)雜信息。優(yōu)秀的圖標(biāo)成為我們生活中的救生員。無(wú)論你需要找到正確的應(yīng)用程序或產(chǎn)品頁(yè)面上的特定功能，又或者當(dāng)你在外國(guó)城市搜索地鐵時(shí)，圖標(biāo)都可以節(jié)省你很多時(shí)間。

隨著世界越來(lái)越忙，越來(lái)越嘈雜和全球化，它將在未來(lái)更加重要。

三、圖標(biāo)的優(yōu)勢(shì)

圖標(biāo)設(shè)計(jì)是界面設(shè)計(jì)中很重要的元素之一，一套高質(zhì)量的圖標(biāo)對(duì)產(chǎn)品的品牌形象和用戶(hù)的體驗(yàn)影響是巨大的。不僅能提升界面美觀(guān)度、降低用戶(hù)理解成本，還能塑造品牌形象、提升用戶(hù)的安全感和轉(zhuǎn)化率。

同時(shí)圖標(biāo)具備傳遞信息非常的高效的特點(diǎn)?，F(xiàn)在人類(lèi)能夠維持注意力的時(shí)間越來(lái)越短（已經(jīng)比金魚(yú)還短了），因此傳遞信息的速度就越來(lái)越重要。

1. 圖標(biāo)傳達(dá)信息快

本身對(duì)圖形的理解和接收能力就比單純的文字要快。圖形能更簡(jiǎn)單清晰且很直觀(guān)的展示。

2. 圖標(biāo)傳達(dá)信息準(zhǔn)

通用圖形能跨語(yǔ)言、跨地區(qū)、跨文化群體表達(dá)出同樣含義，不易發(fā)生混淆。同樣文化背景的人對(duì)文字理解可能會(huì)不一致。

如果用圖形就會(huì)一目了然。用戶(hù)已經(jīng)經(jīng)過(guò)了長(zhǎng)時(shí)間不同平臺(tái)長(zhǎng)期培養(yǎng)，很多圖標(biāo)已經(jīng)形成了視覺(jué)習(xí)慣，比如齒輪代表設(shè)置、鉛筆代表編輯、放大鏡代表搜索。已經(jīng)超越了語(yǔ)言地區(qū)的限制。

3. 品牌塑造穩(wěn)定

同一個(gè)品牌、同一個(gè)平臺(tái)保持同樣的風(fēng)格圖標(biāo)，會(huì)讓人感到很專(zhuān)業(yè)。并且一套好的圖標(biāo)從獨(dú)特性、象征性、記憶性上都更易于感動(dòng)用戶(hù)，激發(fā)人們點(diǎn)擊的欲望。用戶(hù)始終在商家提供的環(huán)境里，能提升安全感。例如支付寶、拼多多、網(wǎng)易嚴(yán)選等優(yōu)秀的互聯(lián)網(wǎng)產(chǎn)品。

4. 減少用戶(hù)辨識(shí)時(shí)間

人體左腦主要從事思維邏輯處理，右腦主要形象思維，從事視覺(jué)圖像、音樂(lè)、空間幾何處理。據(jù)科學(xué)表明，右腦是左腦處理速度的60萬(wàn)倍，意味著人類(lèi)對(duì)圖像的敏感度是非常高的。所以我們可以將文字圖像化，從而快速引導(dǎo)用戶(hù)接受相應(yīng)消息，進(jìn)行操作，減少理解閱讀思考的時(shí)間。

四、圖標(biāo)的類(lèi)型及設(shè)計(jì)屬性

圖標(biāo)根據(jù)具體實(shí)際用途大體可以分為三大類(lèi)：工具圖標(biāo)、裝飾圖標(biāo)、啟動(dòng)圖標(biāo)，而根據(jù)設(shè)計(jì)風(fēng)格分類(lèi)主要有線(xiàn)性風(fēng)格、面性風(fēng)格、漸變風(fēng)格、剪影風(fēng)格、長(zhǎng)投影風(fēng)格、卡通風(fēng)格、輕質(zhì)感風(fēng)格、擬物風(fēng)格、2.5D風(fēng)格等等。

1. 工具圖標(biāo)

1）線(xiàn)性風(fēng)格

線(xiàn)性圖標(biāo)，即圖形是通過(guò)線(xiàn)條的描邊輪廓勾勒出來(lái)的。多數(shù)人對(duì)它樣式認(rèn)識(shí)的第一反應(yīng)應(yīng)該是使用純色的閉合輪廓，比如上圖案例，線(xiàn)性圖標(biāo)的創(chuàng)作空間看似不多，但實(shí)際上有非常多的調(diào)整空間。特點(diǎn)是簡(jiǎn)約、概括、視覺(jué)識(shí)別度良好，設(shè)計(jì)感強(qiáng)。

2）面性風(fēng)格

面性圖標(biāo)，即使用對(duì)內(nèi)容區(qū)域進(jìn)行色彩填充的圖標(biāo)樣式。同樣，在這類(lèi)圖標(biāo)中，也不是只能應(yīng)用純色的方式進(jìn)行填充，還有非常多的視覺(jué)表現(xiàn)類(lèi)型。

3）混合風(fēng)格

在設(shè)計(jì)圖標(biāo)類(lèi)型的時(shí)候，也不一定非線(xiàn)性和面性不可，有一些熱衷創(chuàng)造和嘗試的設(shè)計(jì)師，還創(chuàng)作出了混合型的圖標(biāo)，既有線(xiàn)性描邊的輪廓，又有色彩填充的區(qū)域。

2. 啟動(dòng)圖標(biāo)

啟動(dòng)圖標(biāo)的設(shè)計(jì)比前面兩種類(lèi)型的圖標(biāo)說(shuō)起來(lái)更難，因?yàn)樗鼘?shí)際上就是把「LOGO嵌套進(jìn)系統(tǒng)圖標(biāo)模版」的圖標(biāo)。主要分為文字類(lèi)型、圖形類(lèi)型、插畫(huà)類(lèi)型、圖標(biāo)類(lèi)型，擬物類(lèi)型。

3. 裝飾圖標(biāo)

裝飾圖標(biāo)最主要的應(yīng)用區(qū)域，集中在首頁(yè)的快速入口上，也是今天多數(shù)應(yīng)用中會(huì)使用的組件。

1）漸變風(fēng)格

多為單色漸變，顏色過(guò)渡清新自然，是目前的主流設(shè)計(jì)風(fēng)格之一。除用于圖標(biāo)外，漸變風(fēng)格可使用的場(chǎng)景非常多，如APP中的背景圖、按鈕等。

2）輕質(zhì)感風(fēng)格

層次簡(jiǎn)單，用色素雅干凈，采用輕投影、輕漸變的方法設(shè)計(jì)。這類(lèi)圖標(biāo)具有一定的立體感，能給人輕盈、簡(jiǎn)潔、精致的感覺(jué)。

3）輕質(zhì)感風(fēng)格

層次簡(jiǎn)單，用色素雅干凈，采用輕投影、輕漸變的方法設(shè)計(jì)。這類(lèi)圖標(biāo)具有一定的立體感，能給人輕盈、簡(jiǎn)潔、精致的感覺(jué)。

4）2.5d風(fēng)格

介于2D和3D之間，那么它就是在平面上面看立體的2.5D透視原理圖像，就是物體的正面光面和暗面三面組成，也算是偽3D。首先，設(shè)計(jì)師需要設(shè)計(jì)出明暗、背面、正面三個(gè)面的圖像之后，拼合后只需要做圖像、光影關(guān)系的調(diào)整，以及整體配色和感覺(jué)。

5）實(shí)物貼圖風(fēng)格

采用了真實(shí)攝影物體的設(shè)計(jì)風(fēng)格，它不屬于完全依靠我們創(chuàng)作和繪制出來(lái)的。

6）MBE風(fēng)格

MBE是從扁平化的潮流中逐漸演變而來(lái)的。

最原始的MBE風(fēng)格特征非常明顯：粗描邊、描邊斷點(diǎn)、深淺色調(diào)搭配出陰影質(zhì)感、一般以單色調(diào)為主、背景有些低飽和度的小圓圈和加號(hào)點(diǎn)綴。粗線(xiàn)條描邊起到了對(duì)界面的絕對(duì)隔絕，突顯內(nèi)容，表現(xiàn)清晰，單色調(diào)化繁為簡(jiǎn)，富有質(zhì)感。

后期，也有眾多設(shè)計(jì)師對(duì)這種風(fēng)格進(jìn)行了改良，描邊斷點(diǎn)、背景點(diǎn)綴、色彩溢出不再是必要的，進(jìn)一步簡(jiǎn)化了設(shè)計(jì)。

五、如何選擇線(xiàn)性還是面性

基礎(chǔ)功能圖標(biāo)是應(yīng)用程序或網(wǎng)站使用最頻繁的圖標(biāo)。主要作用是替代或者輔助文字來(lái)引導(dǎo)用戶(hù)。

表現(xiàn)形式也比較簡(jiǎn)單無(wú)非三種：線(xiàn)性圖標(biāo)、面性圖標(biāo)、線(xiàn)面結(jié)合。那么我們?cè)诠ぷ髦腥绾握_選擇使用呢？

線(xiàn)性圖標(biāo)顧名思義用線(xiàn)條來(lái)表現(xiàn)繪制。面性圖標(biāo)也就是一個(gè)物體的剪影，用塊來(lái)表現(xiàn)語(yǔ)義。

二者的表現(xiàn)形式卻有很多種，同色的、漸變色的、疊加的、斷線(xiàn)等。在點(diǎn)線(xiàn)面基礎(chǔ)三元素中，從面積大小角度考慮，點(diǎn)最小，面最大。

從視覺(jué)上來(lái)說(shuō)，線(xiàn)性給人的感覺(jué)是較為輕量、簡(jiǎn)約。

面性給人的視覺(jué)重量最重，通過(guò)面積、色彩、質(zhì)感等相對(duì)于線(xiàn)性圖標(biāo)具備更強(qiáng)的視覺(jué)信息層級(jí)，更具引導(dǎo)性。

線(xiàn)面結(jié)合的方式相較于前兩者，樣式表現(xiàn)會(huì)更為豐富，形式感最強(qiáng)。但由于圖標(biāo)內(nèi)元素增多，如果運(yùn)用不得當(dāng)，很容易顯得雜亂。

通常設(shè)計(jì)拿到需求時(shí)，首先考慮的是圖標(biāo)的識(shí)別效率，畢竟圖標(biāo)最重要的作用是快速傳遞信息。

線(xiàn)性圖標(biāo)的線(xiàn)條比較微妙尤其是形狀邊緣時(shí)更容易被識(shí)別到，面性的特征就會(huì)被忽略掉。

綜上所述，具體如何使用，需要了解圖標(biāo)的實(shí)際作用是什么，然后做出選擇。市面上的應(yīng)用大多是用線(xiàn)性用在功能圖表為主，面性用在功能區(qū)，吸引用戶(hù)點(diǎn)擊。線(xiàn)面結(jié)合用的比較少。

六、如何準(zhǔn)確運(yùn)用圖標(biāo)

1. 面性圖標(biāo)的運(yùn)用

面性圖標(biāo)視覺(jué)表現(xiàn)力強(qiáng)，有效的強(qiáng)調(diào)頁(yè)面的視覺(jué)重心，能更好的突出主要業(yè)務(wù)重心，所以常用在首頁(yè)做為主要流量分發(fā)。很多產(chǎn)品在節(jié)日或活動(dòng)中，常常改變面性圖標(biāo)來(lái)營(yíng)造氣氛。

面性圖標(biāo)不建議在列表中大量使用，原因是形式與功能之間的關(guān)系，面性圖標(biāo)的特點(diǎn)是視覺(jué)表現(xiàn)力強(qiáng)，不具備高效的識(shí)別性，對(duì)于功能分類(lèi)的列表頁(yè)面，視覺(jué)重點(diǎn)是功能的名稱(chēng)，圖標(biāo)的作用是輔助文字表達(dá)，需要快速無(wú)差別識(shí)別功能，并不需要高效引導(dǎo)的作用。

2. 面性與異形圖標(biāo)的運(yùn)用

面性圖標(biāo)的第一視覺(jué)是一個(gè)色塊，異形圖標(biāo)第一視覺(jué)是個(gè)形狀，所以面性圖標(biāo)視覺(jué)表現(xiàn)力強(qiáng)，異形圖標(biāo)識(shí)別效率高。

通過(guò)二者的這一特征，于是做了這樣的設(shè)計(jì)。第一排的面性圖標(biāo)都是用戶(hù)的高頻使用的業(yè)務(wù)板塊，視覺(jué)上強(qiáng)引導(dǎo)為用戶(hù)優(yōu)先做出選擇，這就是一種高級(jí)的設(shè)計(jì)手法！

3. 用圖標(biāo)區(qū)別視覺(jué)層級(jí)、業(yè)務(wù)板塊

下圖為京東的個(gè)人中心頁(yè)面嘛，圖標(biāo)有主有次，有視覺(jué)層級(jí)，強(qiáng)化用戶(hù)常用的或者產(chǎn)品主推的業(yè)務(wù)，為用戶(hù)做選擇。

七、圖標(biāo)的用色原則

首先看一下微信以及支付寶的圖標(biāo)設(shè)計(jì)，不難發(fā)現(xiàn)運(yùn)用了四色系原則。

保證四個(gè)色系是比較合理的，紅、黃、藍(lán)、綠也符合大多數(shù)業(yè)務(wù)場(chǎng)景屬性。

一般情況下，四色系能保證用色的合理性。當(dāng)然這并不是絕對(duì)，只要視覺(jué)舒適，符合業(yè)務(wù)，是可以突破四色系的。

拋開(kāi)四色系原則，我們也不難發(fā)現(xiàn)一些應(yīng)用上使用了純黑色的線(xiàn)型圖標(biāo)。其實(shí)純黑色用的好，比四色系更容易凸顯逼格，更加高級(jí)。比如得物、小黑盒。一個(gè)是產(chǎn)品特性，潮流相關(guān)，一個(gè)是傳遞品牌特性。

黑色象征著高貴、穩(wěn)重、科技、潮流。黑色是一個(gè)很神奇的顏色，可以莊重、高雅，也可以讓其他顏色（亮色）突出出來(lái)。不難理解，得物為什么用黑色，潮流相關(guān)，凸顯個(gè)性、有逼格；小黑盒用黑色，與游戲相關(guān)，大多是男性用戶(hù)居多，而且品牌中有“黑”，也契合品牌。

八、圖標(biāo)的大小規(guī)范

1. 圖標(biāo)大小

iOS的網(wǎng)格大小要求是4的倍數(shù)，最小熱區(qū)是44pt。安卓的設(shè)計(jì)規(guī)范要求網(wǎng)格大小是8的倍數(shù)，最小操作熱區(qū)為48dp。

同時(shí)需要考慮到不同機(jī)型適配問(wèn)題。@2x要求是4的倍數(shù)，被2整除適配@1x；@3x要求12的倍數(shù)，適配@1x、@2x。建議是采用48pt為常規(guī)尺寸。

2. 圖標(biāo)粗細(xì)

為了保證圖標(biāo)能夠看清，圖標(biāo)的粗細(xì)也有相應(yīng)的要求，太細(xì)會(huì)存在看不清的情況。

在@1x一倍圖設(shè)計(jì)模式下，以48px為基準(zhǔn)，常用的圖標(biāo)粗細(xì)有：1.5px、2px、3px、4px。需要注意在48X48px畫(huà)布上繪制線(xiàn)性圖標(biāo)，線(xiàn)寬為4px時(shí)，當(dāng)不同場(chǎng)景縮放，需要按比例進(jìn)行調(diào)整：圖標(biāo)為32X32px時(shí)線(xiàn)寬為3px；圖標(biāo)為24X24px時(shí)線(xiàn)寬為2px；圖標(biāo)為16X16px時(shí)線(xiàn)寬為2px。

3. 物理大小&視覺(jué)大小

在繪制一整套圖標(biāo)的時(shí)候，總被說(shuō)視覺(jué)不統(tǒng)一，大小不一樣。這是因?yàn)槟惆凑瘴锢泶笮≡谧鰣D標(biāo)，忽略了視覺(jué)大小。分別是什么意思呢？

物理大小是形狀之間的寬和高相同，不是計(jì)算面積；視覺(jué)大小是，正方形的邊長(zhǎng)跟圓形的直徑相等的情況下，繪制出來(lái)的圖形，視覺(jué)上圓總要小一點(diǎn)。

也就是視覺(jué)大小。需要通過(guò)人眼去判斷不斷的微調(diào)大小和比例。視覺(jué)大小是感受上的視覺(jué)。

除了正方形跟圓意外，還有菱形，三角形。在繪制這類(lèi)圖形，一定要注意視覺(jué)大小。別再讓別人說(shuō)你的圖標(biāo)不統(tǒng)一了。

為了保證圖標(biāo)的視覺(jué)統(tǒng)一，通常會(huì)借助網(wǎng)格（keyline線(xiàn)）

4. 什么是圖標(biāo)網(wǎng)格

把圖標(biāo)網(wǎng)格當(dāng)成一種約束，讓你的圖標(biāo)集保持規(guī)范統(tǒng)一。網(wǎng)格是一個(gè)框架，讓你的圖標(biāo)保持統(tǒng)一。

5. 什么時(shí)候使用網(wǎng)格

網(wǎng)格是一個(gè)框架結(jié)構(gòu)，會(huì)在這個(gè)基礎(chǔ)上圖標(biāo)會(huì)保持一致。如果未來(lái)這些圖標(biāo)被其他人維護(hù)的時(shí)候，網(wǎng)格也可以起到很好的作用。

網(wǎng)格很像遵循的規(guī)則，讓其他設(shè)計(jì)師在最開(kāi)始就明白圖標(biāo)的尺寸、以及設(shè)計(jì)規(guī)范。

當(dāng)然并不是所有時(shí)候繪制圖標(biāo)都必須先建立網(wǎng)格。如果你要?jiǎng)?chuàng)建超過(guò)50個(gè)圖標(biāo)以上的圖標(biāo)集時(shí)，網(wǎng)格還是很有必要的。

你要使用同一種風(fēng)格創(chuàng)建很多圖標(biāo)，網(wǎng)格有助于保持視覺(jué)網(wǎng)格統(tǒng)一 。

另一個(gè)情況是當(dāng)你要給現(xiàn)有的平臺(tái)設(shè)計(jì)圖標(biāo)，而這個(gè)平臺(tái)有自己的圖標(biāo)網(wǎng)格。

如給 iOS或Android 設(shè)計(jì)圖標(biāo), 你最好使用它們平臺(tái)的網(wǎng)格規(guī)范。這些網(wǎng)格確保它們?cè)诟鱾€(gè)平臺(tái)上保持網(wǎng)格統(tǒng)一,你應(yīng)該遵循這些規(guī)則，確保和平臺(tái)的風(fēng)格保持一致。

九、圖標(biāo)常用尺寸

1. iPhone圖標(biāo)尺寸規(guī)范

@2x格式使用機(jī)型：iPhone 4，4s，5，5s，5s，s，6，6s，7，8，XR；

@3x格式使用機(jī)型：iPhone 6P，6SP，7P，8P，X，XS，XS Max；

2. 安卓圖標(biāo)尺寸規(guī)范

3. iPad圖標(biāo)尺寸規(guī)范

十、如何統(tǒng)一圖標(biāo)

1. 創(chuàng)建凝聚力的圖標(biāo)集

創(chuàng)建一個(gè)圖標(biāo)很容易。創(chuàng)建一些美觀(guān)的圖標(biāo)也不難。這使它們具有凝聚力，可能會(huì)是一個(gè)難點(diǎn)。完成一組連貫的圖標(biāo)是一個(gè)艱巨的挑戰(zhàn)。下面有6個(gè)有用的技巧，可以掌握如何創(chuàng)建精美的具備凝聚力的圖標(biāo)集。

2. 為什么圖標(biāo)應(yīng)該具有凝聚力

圖標(biāo)設(shè)計(jì)不僅僅是代表真實(shí)對(duì)象的圖形符號(hào)。這是一種獨(dú)特的語(yǔ)言，其中每個(gè)圖標(biāo)都是一個(gè)具有自己含義的名詞。

就像在現(xiàn)實(shí)世界中與伴侶聊天一樣，可以使用圖標(biāo)與數(shù)字世界中的人進(jìn)行交流。

在一組使用樣式不同的圖標(biāo)就像在一個(gè)句子中混合使用不同的語(yǔ)言–即使您很好的被人們所理解，人們也不會(huì)認(rèn)真對(duì)待您。

1）堅(jiān)持一種風(fēng)格

這是要使圖標(biāo)漂亮且一致的關(guān)鍵。在確定圖標(biāo)的樣式之前，請(qǐng)勿開(kāi)始制作任何圖標(biāo)。

有很多樣式和樣式變體。最常見(jiàn)的是：輪廓圖標(biāo)，字形，平面圖標(biāo)，擬形圖標(biāo)，手繪等。一旦確定了未來(lái)圖標(biāo)的樣式，請(qǐng)堅(jiān)持使用該圖標(biāo)集中的每個(gè)圖標(biāo)。具有不同樣式的圖標(biāo)引人注目，但效果并不理想。它破壞了整個(gè)集合的凝聚力，美感和價(jià)值。

從決定使用哪種樣式的那一刻起，所有設(shè)置的圖標(biāo)都應(yīng)使用相同的樣式制作。不要讓風(fēng)格各異的圖標(biāo)殺死場(chǎng)景并破壞其背后的辛苦工作。

2）保持相同的風(fēng)格

這與保持相同樣式略有不同。

每種風(fēng)格都有其個(gè)性。例如，可以制作成千上萬(wàn)種不同的輪廓圖標(biāo)變體。但是選擇正確的樣式同樣重要。

圖標(biāo)是詳細(xì)的還是簡(jiǎn)約的？有粗線(xiàn)還是細(xì)線(xiàn)更好？還是混合線(xiàn)寬？那角落呢：它們應(yīng)該是圓的還是尖的？要使用圓形或?qū)用眴幔?/p>

確切知道為什么每個(gè)元素都按您的方式進(jìn)行。考慮一下您未來(lái)圖標(biāo)集的所有可能細(xì)節(jié)，并一直堅(jiān)持到最后。

3）大小相同

保持集合中每個(gè)圖標(biāo)的大小相同。它們不僅應(yīng)該在相同大小的方形框架中，而且看起來(lái)也應(yīng)該相等！

想象兩個(gè)相同大小的形狀–圓形和正方形。正方形將始終看起來(lái)更大，因?yàn)樗鼤?huì)填充更多空間。應(yīng)該進(jìn)行一些更改以使它們?cè)谕庥^(guān)上相同。例如，將正方形縮小一點(diǎn)。

4）使用網(wǎng)格

出色的圖標(biāo)集始終使用網(wǎng)格制作。只是不要過(guò)度使用它們。如果您發(fā)現(xiàn)圖標(biāo)看起來(lái)不適合網(wǎng)格，請(qǐng)調(diào)整！好的集合有一個(gè)網(wǎng)格。

5）在整個(gè)集合中使用相同的元素

很簡(jiǎn)單：如果您在一個(gè)圖標(biāo)中使用了20px的圓圈，另一個(gè)圖標(biāo)則需要一個(gè)類(lèi)似的圓圈，只需復(fù)制它即可。毫無(wú)疑問(wèn)，在整個(gè)集合中具有相等大小的對(duì)象會(huì)使它看起來(lái)更具凝聚力！從其他圖標(biāo)復(fù)制元素將為您節(jié)省大量時(shí)間！

6）使用相同的調(diào)色板

相同的顏色組合應(yīng)該保留在集合的所有圖標(biāo)中。選擇顏色，將它們添加到色板，然后嘗試使用它們。

十一、B端、C端圖標(biāo)的差異

1. 圖標(biāo)內(nèi)容差異化

C端產(chǎn)品的圖標(biāo)設(shè)計(jì)需要突出自己的設(shè)計(jì)理念，還要與其他產(chǎn)品形成個(gè)性化、差異化，尤其是競(jìng)品。

設(shè)計(jì)過(guò)程中盡可能與產(chǎn)品品牌結(jié)合，讓用戶(hù)快速記住你的產(chǎn)品（品牌）。所以C端產(chǎn)品的圖標(biāo)設(shè)計(jì)更具備獨(dú)特的視覺(jué)風(fēng)格。

B端產(chǎn)品的圖標(biāo)設(shè)計(jì)則不需要過(guò)于差異化，主要強(qiáng)調(diào)圖標(biāo)的表意與實(shí)際需求一致。在圖標(biāo)表達(dá)上差距不能太大，同質(zhì)化較為嚴(yán)重。

2. 不同的設(shè)計(jì)難點(diǎn)

C端產(chǎn)品圖標(biāo)更多偏向趣味性，不太會(huì)考慮業(yè)務(wù)層，更多重視視覺(jué)表現(xiàn)與優(yōu)化

B端產(chǎn)品圖標(biāo)更多取決于業(yè)務(wù)。在B端的設(shè)計(jì)場(chǎng)景中，很多圖標(biāo)是與各種業(yè)務(wù)名稱(chēng)關(guān)聯(lián)，而業(yè)務(wù)名稱(chēng)復(fù)雜多變，往往去思考每個(gè)業(yè)務(wù)所表達(dá)的特殊含義。

3. 不同的側(cè)重點(diǎn)

C端產(chǎn)品圖標(biāo)數(shù)量較少，但是使用的場(chǎng)景十分復(fù)雜。當(dāng)形成一套視覺(jué)圖標(biāo)體系的時(shí)候，要把多場(chǎng)景的圖標(biāo)進(jìn)行串聯(lián)，需要考慮不同功能不同頁(yè)面之間的聯(lián)系。比如首頁(yè)功能區(qū)、分類(lèi)區(qū)、個(gè)人中心等，都要需要保證整體性。

B端產(chǎn)品圖標(biāo)的使用場(chǎng)景比C端少的多，但數(shù)量往往是C端的好幾倍。需要通過(guò)圖標(biāo)保證不同業(yè)務(wù)之間的關(guān)系，所以B端圖標(biāo)更講究延展性。

十二、小結(jié)

整個(gè)圖標(biāo)設(shè)計(jì)分為三篇來(lái)講述的。

• 《理論篇》主要講述圖標(biāo)設(shè)計(jì)的概念以及設(shè)計(jì)原則等理論內(nèi)容；
• 《工作篇》主要講述工作中圖標(biāo)設(shè)計(jì)過(guò)程以及圖標(biāo)落地；
• 《分享篇》主要分享圖標(biāo)設(shè)計(jì)的工具、圖標(biāo)網(wǎng)站、圖標(biāo)設(shè)計(jì)團(tuán)隊(duì)或者設(shè)計(jì)師。

第一篇內(nèi)容就到這里結(jié)束了。

本文由 @卡洛設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash ，基于 CC0 協(xié)議。