圖標(biāo)的分類和風(fēng)格有很多種，而設(shè)計(jì)圖標(biāo)的時(shí)候，如何才能抓住用戶的眼球，設(shè)計(jì)出自己滿意的圖標(biāo)呢？

圖標(biāo)這個(gè)小東西，是現(xiàn)今世界上最通用的圖形語言。它是能夠被每個(gè)人理解的語言，無論膚色、國際、性別等。

從現(xiàn)實(shí)的世界到互聯(lián)網(wǎng)時(shí)代的智能手機(jī)屏幕中，你很難想象，一個(gè)小小的圖標(biāo)可以包含如此多的信息，在現(xiàn)代社會(huì)的信息傳遞中，承擔(dān)者重要的角色。

實(shí)際上，從人類幵始有了獨(dú)立的思想幵始，人類就幵始在設(shè)計(jì)圖標(biāo)表達(dá)自己。那時(shí)候可能，就只是簡單的象形圖形。而現(xiàn)代社會(huì)，作為圖標(biāo)設(shè)計(jì)者的我們，在圖標(biāo)設(shè)計(jì)時(shí)，需要考慮的，也不僅僅只是表意那么簡單，我們要了解圖標(biāo)的風(fēng)格、屬性、設(shè)計(jì)要點(diǎn)，這也是我篇文章要講的主要內(nèi)容。

一、圖標(biāo)的歷史作用

圖標(biāo)的設(shè)計(jì)歷史，可能可以追溯到史前時(shí)代，包括我們在電視的探索頻道上看到的，科學(xué)家在幽暗的山洞中，用手中的火把，照亮石壁上的各種史前人類創(chuàng)作的各類圖形。

圖標(biāo)在我們?nèi)祟惏l(fā)展長河的信息傳遞環(huán)節(jié)，承擔(dān)著重要的角色。那么，在而今的互聯(lián)網(wǎng)時(shí)代、GUI時(shí)代更是如此。

隨著世界節(jié)奏的加快，圖標(biāo)正成為我們生活中的重要組成部分，它能幫助我們快速獲取信息，幫助我們的思維，迅速得做出決定和找到我們的目標(biāo)事物。

因?yàn)殚喿x一個(gè)圖標(biāo)，遠(yuǎn)遠(yuǎn)比閱讀一段文字或者語音，要來得輕松和迅速。而且它還一定程度比語言更通用，沒有不同地區(qū)種族人們的識(shí)別障礙。

同樣的圓形、矩形、三角形組成的不同性別的洗手間圖標(biāo)，放在很多的國家都是通用的，人們都能識(shí)別其指代的含義，即使沒有文字標(biāo)注。

二、圖標(biāo)的分類

圖標(biāo)的設(shè)計(jì)，從現(xiàn)實(shí)實(shí)際的各種引導(dǎo)型圖標(biāo)，到GUI界面中的圖標(biāo)，都是充斥著各種各樣的形式和表現(xiàn)方式。

從大類上可以分成兩類，分別為：象形圖標(biāo)和表意圖標(biāo)。

1. 象形圖標(biāo)

跟我們漢字的起源一樣，象形圖標(biāo)就是通過與參考物體類似的構(gòu)型，來傳遞意義。

比如：一個(gè)蘋果造型的圖標(biāo)其表達(dá)的意思就是一個(gè)蘋果。

這是目前最流行的圖標(biāo)類型——象形圖標(biāo)，包含了目前很多主流的圖標(biāo)設(shè)計(jì)風(fēng)格。包括：線形圖標(biāo)、面形圖標(biāo)、擬物圖標(biāo)、手繪圖標(biāo)等等。

2.?表意圖標(biāo)

這類型的圖標(biāo)會(huì)比較復(fù)雜，人們需要投入學(xué)習(xí)成本，可以參考英文的表意形式，人們需要去記住這個(gè)單詞表達(dá)什么意思。還有例子就是，比如：大學(xué)學(xué)習(xí)高數(shù)中各種復(fù)雜的符號(hào)，學(xué)生仔也需要去學(xué)習(xí)，并記住每個(gè)符號(hào)背后的含義，各種圖形化的logo也是同樣道理。

所以表意圖標(biāo)的基本含義，即使它是有基本形狀，但是人們無法一眼知道其指代的含義，而是需要去學(xué)習(xí)。

三、圖標(biāo)的風(fēng)格

1. 擬物圖標(biāo)：致力于創(chuàng)造類似真實(shí)世界的圖標(biāo)

這是喬布斯時(shí)代IOS的代表設(shè)計(jì)風(fēng)格，初衷是：希望這第一批進(jìn)入智能手機(jī)世界的用戶，能用現(xiàn)實(shí)世界順滑地過渡到虛擬的操作中。

例如：收音機(jī)的設(shè)計(jì)，就是從入口圖標(biāo)到里面的界面，都是很有質(zhì)感的擬物設(shè)計(jì)，希望用戶能像在現(xiàn)實(shí)世界中一樣，不用花費(fèi)任何的學(xué)習(xí)成本，而去操作每一個(gè)功能每一個(gè)按鈕。

設(shè)計(jì)要點(diǎn)：超現(xiàn)實(shí)的擬物、結(jié)合使用場景進(jìn)行構(gòu)型、質(zhì)感表達(dá)到位、光影合理。

雖然現(xiàn)在擬物圖標(biāo)已經(jīng)被時(shí)代淘汰了，但是我還是很鼓勵(lì)，很多朋友去做一些擬物的練習(xí)，因?yàn)檫@能夠一定程度上，鍛煉了自己的質(zhì)感表現(xiàn)、構(gòu)型和光影的控制這些技法，對(duì)以后的設(shè)計(jì)事業(yè)，還是很有幫助的——雖然這中練習(xí)會(huì)花費(fèi)很長時(shí)間。

2.?線形圖標(biāo)：線條的藝術(shù)

這是現(xiàn)在最流行的圖標(biāo)表現(xiàn)風(fēng)格之一，也是每一個(gè)設(shè)計(jì)師最容易開始的一種圖標(biāo)設(shè)計(jì)風(fēng)格。

• 特點(diǎn)：圖標(biāo)是由一條等粗細(xì)度線條構(gòu)成的圖形，相比面形圖標(biāo)會(huì)比較有細(xì)節(jié)的表現(xiàn)空間，控制線條的粗細(xì)和構(gòu)型能夠有很多樣的視覺表現(xiàn)；
• 應(yīng)用場景：通常應(yīng)用在小的功能入口，起到指代功能的作用；
• 設(shè)計(jì)要點(diǎn)：線條粗度需整套一致、構(gòu)型飽滿、大小上要視覺統(tǒng)一、視角一致（一般都是正視圖的圖標(biāo)，中間不要插入一兩個(gè)俯視圖或者類似側(cè)軸的角度）、圓角統(tǒng)一。

3. 面形圖標(biāo)：扁平化時(shí)代的代表

這也是非常常見的圖標(biāo)，它是扁平化和象形圖標(biāo)的代表。設(shè)計(jì)時(shí)，主要是設(shè)計(jì)師會(huì)去從現(xiàn)實(shí)世界中提取事物的關(guān)鍵形狀特點(diǎn)，然后通過草稿再電子化的一個(gè)過程。

• 特點(diǎn)是：一個(gè)象形的剪影小色塊、視覺上比較有張力，比線形圖標(biāo)有更重的視覺感、不好刻畫較多細(xì)節(jié)；
• 應(yīng)用場景：通常是作為一個(gè)軟件標(biāo)識(shí)或者系統(tǒng)標(biāo)識(shí)的入口圖標(biāo)；
• 設(shè)計(jì)要點(diǎn)：布爾運(yùn)算、正負(fù)形只能選擇一種并統(tǒng)一、大小是視覺上要統(tǒng)一、視角一致、圓角統(tǒng)一、剪影面積趨近、構(gòu)型飽滿。

4.?填充型圖標(biāo)：以“MBE”為代表的圖標(biāo)風(fēng)格

這種類型的圖標(biāo)，可以說是面形圖標(biāo)和線形圖標(biāo)的完美結(jié)合，采用線條構(gòu)型然后在內(nèi)部填充顏色。

• 特點(diǎn)是：比較新穎，有較多的表現(xiàn)空間；
• 應(yīng)用場景：通常應(yīng)用在比較有張力，需要個(gè)性的產(chǎn)品需求中；
• 設(shè)計(jì)要點(diǎn)：線條統(tǒng)一、配色統(tǒng)一、大小視覺上統(tǒng)一。

5.?手繪圖標(biāo)：游戲圖標(biāo)

這是一種手工繪制的圖標(biāo)，這種風(fēng)格的圖標(biāo)，可以天馬行空的彰顯設(shè)計(jì)師的表現(xiàn)力，在一些主題比賽中，這種圖標(biāo)風(fēng)格參加比賽可以說是開掛的狀態(tài)。

• 特點(diǎn)：視覺表現(xiàn)豐富細(xì)膩、很有感染力和場景感；
• 應(yīng)用場景：更多的應(yīng)用在游戲中或者手機(jī)主題設(shè)計(jì)中；
• 設(shè)計(jì)要點(diǎn)：細(xì)節(jié)的把握 、視覺的把握、圖標(biāo)構(gòu)型、整個(gè)風(fēng)格統(tǒng)一等

四、圖標(biāo)設(shè)計(jì)

在而今的UI全面扁平化時(shí)代，很多產(chǎn)品的UI設(shè)計(jì)，存在很多雷同相識(shí)的情況，可能你去掉兩套APP的logo后，會(huì)發(fā)現(xiàn)他們的界面設(shè)計(jì)其實(shí)差不多。

那為了擺脫這種尷尬的情況，合適的有產(chǎn)品的品牌色彩的圖標(biāo)設(shè)計(jì)，會(huì)讓一款產(chǎn)品變得更加出彩和特別。

因?yàn)樵谝话愕腢I界面中，主要的元素?zé)o非就是：色塊、線條、文字、標(biāo)簽等設(shè)計(jì)元素，去掉色塊、線條、文字這些很少表現(xiàn)空間的元素后，剩下的能夠有較多表現(xiàn)空間的，也就是那幾套圖標(biāo)了。所以一套合適的圖標(biāo)設(shè)計(jì)，是能夠更好地傳遞一款產(chǎn)品的品牌觀念，并且在APP市場中表現(xiàn)脫穎。

1. 選擇合適的風(fēng)格

為一款A(yù)PP選擇一個(gè)合適的圖標(biāo)風(fēng)格，一般會(huì)考慮到多種因素，包括：產(chǎn)品本身的VI、產(chǎn)品的目標(biāo)人群的需求定位、產(chǎn)品的品牌調(diào)性、使用場景、如何塑造出彩的構(gòu)型等。

當(dāng)然這一切前提，都是在建立在圖標(biāo)，不僅要漂亮而且一致的前提。你可以收集多種優(yōu)秀的參考方案，或者輸出一些不同風(fēng)格的圖標(biāo)草圖，去跟團(tuán)隊(duì)的設(shè)計(jì)師進(jìn)行腦暴，直到選定一種合適的主題。

那么一旦你決定了你圖標(biāo)風(fēng)格后，就需要按照這個(gè)風(fēng)格堅(jiān)持接下來的整套設(shè)計(jì)，不要讓單個(gè)不合群的圖標(biāo)破壞整體的美感。

2. 圖標(biāo)的構(gòu)型

每一個(gè)圖標(biāo)的構(gòu)型，關(guān)系到最終到每個(gè)圖標(biāo)輸出的視覺效果，所以構(gòu)型是一開始的重中之重。圖標(biāo)造型的提取，可能有一部分設(shè)計(jì)師覺得，我應(yīng)該從一開始保持絕對(duì)的原創(chuàng)，從現(xiàn)實(shí)中或者從照片上提取一個(gè)事物的造型輪廓，去勾勒草圖去轉(zhuǎn)電子版，這聽起來感覺是很酷，但是我覺得這是錯(cuò)誤的。

我更多得覺得，我們應(yīng)該站在前人的肩膀去做更多，去做創(chuàng)新去突破，而不是從頭開始，那樣比較浪費(fèi)時(shí)間。

所以我的常規(guī)做法是，在網(wǎng)絡(luò)上收集很多自己覺得好的，符合自己想要的主題的圖標(biāo)作品，提取它們中的好的構(gòu)型方式，再結(jié)合自己的思考，在上面加入自己的創(chuàng)新想法，輸出一個(gè)更好的構(gòu)型方案。

3.?圖標(biāo)的大小

單個(gè)圖標(biāo)很容易設(shè)計(jì)，但是當(dāng)要做5個(gè)以上的整套圖標(biāo)的話，會(huì)難度加大很多。

一個(gè)首先要考慮的問題就是——圖標(biāo)的規(guī)格，我們必須保持每個(gè)圖標(biāo)的大小視覺上的一致。

為什么這里要強(qiáng)調(diào)視覺上的一致？

因?yàn)樵赑S中，即使你拉了輔助線，對(duì)得面積相等的兩個(gè)圖標(biāo)實(shí)際的視覺感受，卻是大相徑庭。類似的視覺錯(cuò)覺的誤差，我們也看到過很多，所以一切以受眾的觀感為準(zhǔn)。

例如：兩個(gè)大小相同的形狀一個(gè)圓和一個(gè)正方形。正方形總是看起來更大，因?yàn)樗钛a(bǔ)了更多的空間，所以我們一般會(huì)把這個(gè)方形做縮小一點(diǎn)處理，讓他們在視覺上的大小感受相同 。

4.?安全框

安全框是一個(gè)輔助設(shè)計(jì)師，設(shè)計(jì)一套統(tǒng)一規(guī)整的圖標(biāo)集的有效工具，一般的安全框分為內(nèi)外兩個(gè)。安全框的大小，需要設(shè)計(jì)師根據(jù)自己圖標(biāo)使用場景的需求去設(shè)定。內(nèi)安全框的作用是，用來規(guī)定整個(gè)圖標(biāo)的大小統(tǒng)一的，外安全框則是，用來表示最總的輸出規(guī)格，也就是要給開發(fā)輸出的最終圖標(biāo)切片的規(guī)格。

當(dāng)然，如果你覺得在里面畫上9宮格的虛線，或者其他固定的輔助線，有助于你的圖標(biāo)構(gòu)型的統(tǒng)一的話，也是可以自己根據(jù)自己的需求添加的。

5.?選擇合適的工具

選擇一個(gè)適合的工具，現(xiàn)在流行的工具主要有：PS、AI和sketch。

這里的答案是都可以，不必糾結(jié)于軟件的表現(xiàn)太多，我們更多要關(guān)注的是——自己的靈感來源和整體質(zhì)量。我自己最近會(huì)比較喜歡用sketch去設(shè)計(jì)圖標(biāo)，使用布爾運(yùn)算，去切割組合出自己想要的圖標(biāo)造型，在設(shè)計(jì)中要對(duì)齊每一個(gè)像素格，不可以出現(xiàn)虛邊的情況。

如果使用的工具是AI的話，那么如果你的圖標(biāo)在做了拉伸縮小后再輸出時(shí)，可能會(huì)存在虛邊的情況，這里需要經(jīng)常去注意。

6.選擇合適的顏色

根據(jù)圖標(biāo)的樣式，你可以選擇決定自己圖標(biāo)的顏色可以是單色，或者是多種顏色集合。但是顏色不宜過多，單個(gè)圖標(biāo)的顏色最好不要超過3種。因?yàn)槲覀兊淖罱K設(shè)計(jì)目標(biāo)，是為了用戶更好地去識(shí)別和記憶圖標(biāo)的含義。

顏色的加入，能為我們的圖標(biāo)設(shè)計(jì)創(chuàng)造更多的可能性，不只是在視覺的表現(xiàn)力方面，而且依靠各種不同顏色的所代表的屬性，我們還能通過顏色，來加強(qiáng)和傳遞圖標(biāo)在某些特定場景下的信息。

7.最后操作

當(dāng)你完成了整套的圖標(biāo)設(shè)計(jì)后，還不能立馬提交評(píng)審或者應(yīng)用到產(chǎn)品中，還要繼續(xù)對(duì)整套圖標(biāo)進(jìn)行改進(jìn)和調(diào)整，按照各種圖標(biāo)風(fēng)格的設(shè)計(jì)，要求去重新從一致性、統(tǒng)一性等方面進(jìn)行核查。確保它們在樣式上都均勻美觀，這是很重要的一步，應(yīng)該認(rèn)真對(duì)待。

五、最后

這些簡單的圖標(biāo)知識(shí)和設(shè)計(jì)中要考慮到的點(diǎn)，應(yīng)該是開始一套圖標(biāo)設(shè)計(jì)之前，必須知道的點(diǎn)，不是一個(gè)明確的圖標(biāo)設(shè)計(jì)指南。因?yàn)槠渌O(shè)計(jì)師也會(huì)有自己的方法和技術(shù)，最終都是以一個(gè)結(jié)果為導(dǎo)向的，就是輸出更好的圖標(biāo)設(shè)計(jì)，創(chuàng)造更好的產(chǎn)品體驗(yàn)。

想做更多更好的圖標(biāo)設(shè)計(jì)，最好的方法還是盡可能得多看東西，多去看世界各地的設(shè)計(jì)師的處理方式思維方式，然后keep practice。

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

題圖來自 Unsplash ，基于 CC0 協(xié)議