一、圖標(biāo)設(shè)計(jì)是什么意思

圖標(biāo)設(shè)計(jì)（英文：Icon Design）也成為ICON設(shè)計(jì)，圖標(biāo)可分為廣義、狹義兩種，廣義指的是現(xiàn)實(shí)世界中的圖形符號(hào)、且有明確指向的含義，而狹義的圖標(biāo)指的設(shè)備界面中的象形圖和表意文字，這些設(shè)備泛指承載互聯(lián)網(wǎng)產(chǎn)品的載體，如手機(jī)、電腦、iPad…等。在 UI設(shè)計(jì)中，圖標(biāo)設(shè)計(jì)主要具是針對(duì)狹義的概念。

二、圖標(biāo)的設(shè)計(jì)類型

從微觀角度來(lái)看，圖標(biāo)的主要組成元素包括線、面、顏色、文字等，元素可以組合的常見圖標(biāo)類型共分為線性、面性、線面結(jié)合、文字四種。

1、線性圖標(biāo)

主要是通過(guò)元素"線"去延伸，基于線的粗細(xì)大小、端點(diǎn)類型、圓角、描邊、顏色等基礎(chǔ)屬性塑造成型。常用于調(diào)性簡(jiǎn)潔的產(chǎn)品設(shè)計(jì)，如移動(dòng)端的標(biāo)題欄、頁(yè)面的次要功能設(shè)計(jì)；B 端后臺(tái)業(yè)務(wù)類產(chǎn)品。細(xì)分有"單色、多色、漸變色、透明度/疊加、斷點(diǎn)"五種類型。

線性圖標(biāo)

2、面性圖標(biāo)

相比較線性圖標(biāo)應(yīng)用場(chǎng)景更加豐富，視覺(jué)表現(xiàn)力更強(qiáng)、更突出，常用于主要功能圖標(biāo)，細(xì)分"單色、多色、漸變色、透明度/疊加"四種類型。

面性圖標(biāo)

3、線面圖標(biāo)

線和面相結(jié)合而成的一種類型圖標(biāo)，這種圖標(biāo)的比較難駕馭，一般產(chǎn)品的主要功能設(shè)計(jì)都會(huì)比較克制。市面上這種類型圖標(biāo)的應(yīng)用比較少。這種圖標(biāo)的設(shè)計(jì)也是非?？简?yàn)設(shè)計(jì)師的設(shè)計(jì)功底，細(xì)分"單色、多色、漸變色、透明度/疊加"四種類型。

線面圖標(biāo)

4、文字圖標(biāo)

通過(guò)文字表達(dá)圖標(biāo)語(yǔ)義的一種設(shè)計(jì)類型。常用語(yǔ)學(xué)習(xí)類，工具類和語(yǔ)義特殊難表達(dá)的功能。

文字圖標(biāo)

三、圖標(biāo)的設(shè)計(jì)風(fēng)格

可以基于圖標(biāo)類型，通過(guò)設(shè)計(jì)技法、軟件等創(chuàng)新設(shè)計(jì)出不同風(fēng)格的圖標(biāo)。

1、擬物化圖標(biāo)

這類圖標(biāo)的特點(diǎn)是通過(guò)細(xì)節(jié)和光影還原現(xiàn)實(shí)物品的造型和質(zhì)感，能給用戶極強(qiáng)的代入感，用戶可通過(guò)對(duì)現(xiàn)實(shí)事物的聯(lián)想，快速領(lǐng)會(huì)圖標(biāo)表達(dá)的意圖。但是隨著 ICON 的發(fā)展，擬物圖標(biāo)也帶來(lái)了一些問(wèn)題，因?yàn)橛脩絷P(guān)注的核心永遠(yuǎn)都是信息本身，華麗的視覺(jué)元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對(duì)用戶獲取信息的一種干擾，所以現(xiàn)在擬物化的圖標(biāo)很少運(yùn)用在 APP 界面之內(nèi)。

擬物化圖標(biāo)

2、輕質(zhì)感圖標(biāo)

相較于擬物風(fēng)格不會(huì)有太多復(fù)雜的視覺(jué)元素，層次簡(jiǎn)單，用色素雅干凈，采用輕投影、輕漸變的方法設(shè)計(jì)，這類圖標(biāo)具有一定的立體感，能給人輕盈、簡(jiǎn)潔、精致的感覺(jué)，在界面設(shè)計(jì)中，一般在面積比較大的區(qū)域我們會(huì)使用加入輕質(zhì)感的圖標(biāo)。

輕質(zhì)感圖標(biāo)

3、毛玻璃效果圖標(biāo)

通過(guò)元素疊加背景虛化的方式形成的玻璃模糊質(zhì)感，毛玻璃風(fēng)格圖標(biāo)層次豐富、通透感強(qiáng)。

毛玻璃效果圖標(biāo)

4、2.5D圖標(biāo)

也稱等軸側(cè)風(fēng)格，通過(guò)軸側(cè)拉伸的設(shè)計(jì)手法，表現(xiàn)形式十分突出有震撼力。

2.5D圖標(biāo)

5、新擬態(tài)圖標(biāo)

利用光影原理融合背景形成的一種立體感的效果。應(yīng)用場(chǎng)景比較受限制，對(duì)背景顏色依賴性比較高。

新擬態(tài)圖標(biāo)

6、扁平圖標(biāo)

設(shè)計(jì)組成元素簡(jiǎn)單干凈，外形突出，信息轉(zhuǎn)達(dá)直觀。

扁平圖標(biāo)

7、卡通圖標(biāo)

主要是使用插畫的設(shè)計(jì)手法，常用于可愛(ài)、溫暖特性的產(chǎn)品。

卡通圖標(biāo)

8、實(shí)物貼圖圖標(biāo)

用實(shí)際具體的物品來(lái)表達(dá)，如得物的鞋類商品及使用鞋的商品，盒馬果蔬類商品就是用水果和蔬菜去表達(dá)。這類圖標(biāo)更貼合業(yè)務(wù)，表達(dá)簡(jiǎn)單易懂。

實(shí)物貼圖圖標(biāo)

9、C4D圖標(biāo)

屬于 3D 設(shè)計(jì)軟件延伸出來(lái)的一種新的風(fēng)格。圖標(biāo)質(zhì)感很強(qiáng)，表現(xiàn)力豐富。

C4D圖標(biāo)

10、IP 形象圖標(biāo)

常用于產(chǎn)品底部 tab"首頁(yè)"功能和 logo 的啟動(dòng)圖標(biāo)上，主要便于增加產(chǎn)品的辨識(shí)度。

IP 形象圖標(biāo)

四、圖標(biāo)的設(shè)計(jì)應(yīng)用

1、業(yè)務(wù)和設(shè)備類型

業(yè)務(wù)類型常見的主要為 B、C 端業(yè)務(wù)，設(shè)備類型常見為移動(dòng)端、網(wǎng)頁(yè)端，其他覆蓋的終端設(shè)備和業(yè)務(wù)不做過(guò)多贅述。圖標(biāo)的設(shè)計(jì)應(yīng)用主要想重點(diǎn)介紹這幾年比較主流的 B 端網(wǎng)頁(yè)類大廠項(xiàng)目。這些風(fēng)格的主要特點(diǎn)就是專業(yè)，嚴(yán)謹(jǐn)、科技感、震撼力強(qiáng)?，F(xiàn)下 B 端 C 化已經(jīng)成為了新的趨勢(shì)，越來(lái)越多新的設(shè)計(jì)風(fēng)格也會(huì)逐步融入到 B 端的業(yè)務(wù)中。

圖標(biāo)設(shè)計(jì)的應(yīng)用

2、應(yīng)用場(chǎng)景

應(yīng)用場(chǎng)景這說(shuō)明舉例主要以移動(dòng)端為主，常應(yīng)用于功能、啟動(dòng)、導(dǎo)航、氛圍感圖標(biāo)。其他應(yīng)用場(chǎng)景這里就不一一舉例了。

五、圖標(biāo)設(shè)計(jì)的原則

圖標(biāo)設(shè)計(jì)的基本原則就是要盡可能的發(fā)揮圖標(biāo)的優(yōu)點(diǎn)：比文字直觀，比文字漂亮，減少圖標(biāo)的缺點(diǎn)：不如文字表達(dá)的準(zhǔn)確。因此圖標(biāo)設(shè)計(jì)的基本原則可以簡(jiǎn)單的歸納一下幾點(diǎn)。

1、可識(shí)別性原則

可識(shí)別性原則，意思是說(shuō)，圖標(biāo)的圖形，要能準(zhǔn)確表達(dá)相應(yīng)的操作。換言之，就是我看到一個(gè)圖標(biāo)，就要明白他所代表的含義，這是圖標(biāo)設(shè)計(jì)的靈魂?？梢援?dāng)之無(wú)愧稱之為圖標(biāo)設(shè)計(jì)的第一原則。

2、差異性原則

差異性原則，什么意思呢？意思是如果一個(gè)界面上有六個(gè)圖標(biāo)，我一眼看上去，要能第一時(shí)間感覺(jué)到他們之間的差異性，否則我怎么辨認(rèn)呢？這是圖標(biāo)設(shè)計(jì)中很重要的一條原則，但也是在設(shè)計(jì)中最容易被忽略的一條，圖標(biāo)和文字相比,它的優(yōu)越性在于它更直觀一些，但是如果圖標(biāo)設(shè)計(jì)失去了這一點(diǎn)。

3、合適的精細(xì)度，元素個(gè)數(shù)

首先我們要明確一個(gè)點(diǎn)，圖標(biāo)的主要作用是用的，代替文字，第二才是美觀。但圖標(biāo)設(shè)計(jì)者往往陷入了一個(gè)誤區(qū)，片面的追求精細(xì)，高光和質(zhì)感。其實(shí)，圖標(biāo)的可用性隨著精細(xì)度的變化，是一個(gè)類似于波峰的曲線。在初始階段，圖標(biāo)可用性會(huì)隨著精細(xì)度的變化而上升，但是達(dá)到一定精細(xì)度以后，圖標(biāo)的可用性往往會(huì)隨著圖標(biāo)的精細(xì)度而下降。

4、風(fēng)格統(tǒng)一性原則

經(jīng)常會(huì)看到很多界面上，往往會(huì)堆砌著各種不同風(fēng)格的圖標(biāo)，顯然，這些圖標(biāo)都是從互聯(lián)網(wǎng)上收集起來(lái)，由于沒(méi)有完全配套的圖標(biāo)，只能東拼西湊，導(dǎo)致界面粗制濫造，業(yè)余。

5、與環(huán)境的協(xié)調(diào)性

圖標(biāo)是沒(méi)有單獨(dú)存在的，圖標(biāo)最終是要放置在界面上才會(huì)起作用的。因此，圖標(biāo)的設(shè)計(jì)，要考慮圖標(biāo)所處的環(huán)境，比如你的界面是森林和大地，你就可以考慮用石塊，木頭，或者蘑菇，野花設(shè)計(jì)一系列的圖標(biāo)。

如果你的界面是平面的，簡(jiǎn)約的，你可以考慮用一些簡(jiǎn)單的平面的符號(hào)或者圖形來(lái)設(shè)計(jì)你的圖標(biāo)，這樣整個(gè)界面會(huì)很協(xié)調(diào)，不要認(rèn)為這樣的圖標(biāo)是簡(jiǎn)陋的，其實(shí)這樣的圖標(biāo)的可識(shí)別性非常強(qiáng)的，在簡(jiǎn)潔的界面里，會(huì)透露出一種簡(jiǎn)約之美。

6、視覺(jué)效果

追求視覺(jué)效果，一定是要在保證差異性，可識(shí)別性，統(tǒng)一性，協(xié)調(diào)性原則的基礎(chǔ)上，要先滿足基本的功能需求，才可以考慮更高層次的要求--情感需求。

圖標(biāo)設(shè)計(jì)的視覺(jué)效果，很大程度上取決于設(shè)計(jì)師的天賦、美感和藝術(shù)修養(yǎng)，有些設(shè)計(jì)師做了很多年的設(shè)計(jì)，作品一堆，拿出來(lái)一看，粗糙，刺眼，土氣。

7、 原創(chuàng)性

這一條對(duì)圖標(biāo)設(shè)計(jì)師提出了更高的要求，這是一個(gè)挑戰(zhàn)，但我認(rèn)為，圖標(biāo)設(shè)計(jì)的原創(chuàng)性并不是必要的，因?yàn)槌Ｓ玫膱D標(biāo)風(fēng)格種類已經(jīng)很多，易用性較高的風(fēng)格也就那么多種，過(guò)度追求圖標(biāo)的原創(chuàng)性和藝術(shù)效果，會(huì)導(dǎo)致圖標(biāo)設(shè)計(jì)另辟蹊徑，這樣做往往會(huì)降低圖標(biāo)的易用性降低，也就是說(shuō)所謂的好看不實(shí)用。當(dāng)然，這里也要看你的產(chǎn)品的側(cè)重點(diǎn)，如果考慮更多的是情感化的設(shè)計(jì)，完美的藝術(shù)效果，這樣做也無(wú)可厚非。

六、圖標(biāo)設(shè)計(jì)規(guī)范

1、網(wǎng)格尺寸比例

為了保持圖標(biāo)元素的平衡，尺寸大小需要保持一致，在UI界面設(shè)計(jì)中，網(wǎng)格的大小必須要是4或12的倍數(shù)（安卓是8的倍數(shù)，iOS是4的是倍數(shù)）。@2x下作圖要保證是4的倍數(shù)，這樣可以整除2，適配@1x的屏幕；@3x下作圖就需要是12的倍數(shù)了，這個(gè)數(shù)值可以整除2、3、4，適配@1x和@2x的屏幕，常見的網(wǎng)格尺寸有 16、24、36、48、64、128、512、1024，這些網(wǎng)格尺寸并非固定，也會(huì)根據(jù)設(shè)計(jì)中的特殊尺寸而變化。界面中通常使用的圖標(biāo)尺寸24*24px、48*48px。

一個(gè)圖標(biāo)系統(tǒng)包括網(wǎng)格尺寸和圖標(biāo)元素兩部分，設(shè)定好網(wǎng)格尺寸后，就需要用 keyline 來(lái)約束圖標(biāo)形狀的長(zhǎng)、寬比例了。最終設(shè)計(jì)的圖標(biāo)大小并不是跟隨網(wǎng)格尺寸，而是根據(jù)不同的形狀占比受制于圖標(biāo) keyline，最終形成統(tǒng)一的視覺(jué)大小。

圖標(biāo)網(wǎng)格尺寸比例

從上圖中可以看出，相同尺寸的圖標(biāo)在真實(shí)的視覺(jué)中相差很大，這就好比一個(gè) 100 像素的圓形、跟 100 像素的方形相比，站在邏輯角度，大小是相同的，但在視覺(jué)上，一定是方形顯得更大。所以我們常說(shuō)的圖標(biāo)大小相同，并非真實(shí)尺寸，而是視覺(jué)感受。

為保持圖標(biāo)視覺(jué)上的一致性和平衡感，需要先繪制 keyline 用來(lái)指導(dǎo)、規(guī)范圖標(biāo)設(shè)計(jì)。keyline 由圓形、正方形、長(zhǎng)方形-橫、長(zhǎng)方形-豎、三角形和對(duì)角線組成，網(wǎng)格的大小需保持 4 的倍數(shù)，便于不同尺寸的圖標(biāo)都能適配，可使用 24*24px 的網(wǎng)格尺寸為基準(zhǔn)，其他尺寸的圖標(biāo)可通過(guò)增加倍數(shù)以此類推，如 48*48px、72*72px……

下圖是以 24px 尺寸的網(wǎng)格參考基準(zhǔn)示例（出血為 2px）：

網(wǎng)格參考基準(zhǔn)示例

當(dāng)把圖標(biāo)畫在網(wǎng)格上時(shí)可以很好的規(guī)范圖標(biāo)，讓它們從整體的視覺(jué)上看著統(tǒng)一規(guī)范。

網(wǎng)格參考基準(zhǔn)示例

3、像素統(tǒng)一

在設(shè)計(jì)一整套系統(tǒng)化的圖標(biāo)時(shí)，我們一定要注意圖標(biāo)的像素大小，要運(yùn)用相同的網(wǎng)格尺寸設(shè)計(jì)相同線條粗細(xì)的圖標(biāo)，包括曲線，角度以及內(nèi)部和外部筆劃。這樣圖標(biāo)看起來(lái)才更統(tǒng)一，也有利于后期圖標(biāo)的迭代更新。

圖標(biāo)繪制基于48x48px畫布繪制的線性圖標(biāo)，線寬默認(rèn)為4px，不同場(chǎng)景縮放比例使用：

● 圖標(biāo)為32x32px時(shí)，線寬3px（基準(zhǔn)線寬）

● 圖標(biāo)為24x24px時(shí)，線寬2px（基準(zhǔn)線寬）

● 圖標(biāo)為16x16px時(shí)，線寬2px（基準(zhǔn)線寬）

像素統(tǒng)一

4、圖標(biāo)的曲率

曲率簡(jiǎn)單來(lái)講就是圖標(biāo)中帶有圓角的邊角度數(shù)，只要是帶有圓角的矩形就都會(huì)有一定的曲率。在圖標(biāo)中曲率的呈現(xiàn)方式有兩種：外曲、內(nèi)曲。

圖標(biāo)的曲率

外曲與內(nèi)曲并不一定同時(shí)存在，在特定情況下內(nèi)部結(jié)構(gòu)可以是直角（無(wú)曲率）。如下圖：當(dāng)內(nèi)部結(jié)構(gòu)都是圓角時(shí)會(huì)發(fā)現(xiàn)整個(gè)圖標(biāo)稍顯臃腫，這時(shí)我們可以把部分內(nèi)部圓角直接變?yōu)橹苯牵ㄒ部梢愿淖兦蚀笮。淖兒缶蜁?huì)發(fā)現(xiàn)圖標(biāo)的整體結(jié)構(gòu)會(huì)顯得更加協(xié)調(diào)。需要注意的是如果一個(gè)圖標(biāo)做了這樣的處理，在同等情況下的圖標(biāo)都要做一樣的處理，不然圖標(biāo)會(huì)顯得非常雜亂，不統(tǒng)一。

5、傾斜角度

根據(jù)像素的網(wǎng)格線來(lái)設(shè)置兩條對(duì)角線，會(huì)讓你的圖標(biāo)看起來(lái)更清晰。在傾斜的角度選擇上，不要出現(xiàn) 7.8°、14.2°這樣的奇怪?jǐn)?shù)值。我們可以將 15°的增量用于傾斜角度（也可以采用其他有規(guī)律的角度方案），這樣會(huì)使得整體的圖形變化顯得更加規(guī)律，也能夠滿足不同圖形的角度需求。

傾斜角度

6、斷點(diǎn)形態(tài)

在做很多圖標(biāo)時(shí)都會(huì)用斷點(diǎn)的缺口來(lái)打破"全包邊圖標(biāo)"的沉悶感，使圖標(biāo)具有透氣性，如果想給圖標(biāo)添加斷點(diǎn)，那么要保證斷點(diǎn)的形態(tài)保持一致。

斷點(diǎn)形態(tài)

7、圖標(biāo)間距

確保圖標(biāo)內(nèi)每個(gè)細(xì)節(jié)和元素都有足夠的空間，圖標(biāo)的相鄰元素之間的空間在整個(gè)圖標(biāo)中不應(yīng)太小，我們可以定義最小間隙以避免輪廓"粘住"，在 24px 尺寸下的間距不得小于 1px。

圖標(biāo)間距

8. 透視

如果在做圖標(biāo)時(shí)牽涉到了透視需求，那么就一定要保證圖標(biāo)的透視角度一致。

透視

9. 視覺(jué)重心

非中心對(duì)稱圖形物理對(duì)齊時(shí)視覺(jué)上會(huì)有偏離感，多個(gè)不同形狀的圖標(biāo)視覺(jué)重心并不在一條水平線上，需要微調(diào)才能保證平衡感。

視覺(jué)重心

10. 圖形整潔

在圖形的處理上，不要留有多余的節(jié)點(diǎn)，干掉多余的節(jié)點(diǎn)，保持圖形的整潔。

圖形整潔

11. 命名

ICON 命名要求較為嚴(yán)格，涉及到我們切圖給開發(fā)，所以我們命名爭(zhēng)取做對(duì)，且需嚴(yán)格遵守規(guī)則，正確的命名原則：類型_位置_功能_狀態(tài)_大小。

圖標(biāo)命名

切圖命名參考

七、圖標(biāo)的評(píng)判標(biāo)準(zhǔn)

當(dāng)圖標(biāo)設(shè)計(jì)完后，我們應(yīng)該如何去評(píng)判一個(gè)圖標(biāo)的好壞？很多設(shè)計(jì)師并沒(méi)有完整的評(píng)判體系，其實(shí)我們可以從這五個(gè)維度對(duì)圖標(biāo)進(jìn)行評(píng)判：識(shí)別性、圖標(biāo)氣質(zhì)、協(xié)調(diào)性、一致性、品牌調(diào)性。

1、識(shí)別性

圖標(biāo)最主要的用途就是輔助用戶理解信息，特別是對(duì)于當(dāng)圖標(biāo)單獨(dú)存在時(shí)，一定不能讓用戶產(chǎn)生疑慮。要想圖標(biāo)達(dá)到高識(shí)別，我們可以從這 2 個(gè)方向入手：大眾認(rèn)知隱喻、真實(shí)世界映射。

(1)、大眾認(rèn)知隱喻

在互聯(lián)網(wǎng)普及的今天，許多界面的隱喻圖標(biāo)已被廣大用戶熟知認(rèn)可，對(duì)于這類隱喻圖標(biāo)用戶不用思考身體就已做出反應(yīng)，我們?cè)谠O(shè)計(jì)圖標(biāo)時(shí)可以從隱喻圖標(biāo)中添加修改部分元素，從而形成新的圖標(biāo)，這樣既能保證圖標(biāo)的識(shí)別性，也能做出差異化。

大眾認(rèn)知隱喻

(2)、真實(shí)世界映射

選擇真實(shí)世界中的物品映射，能使人下意識(shí)對(duì)圖標(biāo)的作用有近似預(yù)期，降低學(xué)習(xí)成本，提高識(shí)別度。

真實(shí)世界映射

2、圖標(biāo)氣質(zhì)

每個(gè) App 應(yīng)該有自己獨(dú)特的產(chǎn)品氣質(zhì)，而我們所做的圖標(biāo)就是要跟隨產(chǎn)品的氣質(zhì)。例如當(dāng)你要做一款二次元產(chǎn)品，你的圖標(biāo)氣質(zhì)就應(yīng)該偏活潑、可愛(ài)、萌、青春，而不是剛硬、嚴(yán)謹(jǐn)、規(guī)矩。

圖標(biāo)氣質(zhì)

3、一致性

一致性是圖標(biāo)的基礎(chǔ)，我們?cè)诶L制整套圖標(biāo)時(shí)要確保它們的基礎(chǔ)屬性全部一致，細(xì)節(jié)統(tǒng)一，圖標(biāo)內(nèi)容的統(tǒng)一在視覺(jué)上也更加和諧美觀。圖標(biāo)是否具有一致性，就要從以下七個(gè)方向去評(píng)判：尺寸大小、圖形角度、拐角（曲率）、描邊、間距、透視、顏色。

3-1 尺寸大小：網(wǎng)格大小是否統(tǒng)一、是否遵守圖標(biāo)的 keyline 規(guī)則。

3-2 圖形角度：是否遵循設(shè)定的角度規(guī)范（15°的增量用于傾斜角度）

3-3 拐角（曲率）：拐角的曲率是否統(tǒng)一，如果圖形太多且復(fù)雜，那么我們可以根據(jù)圖標(biāo)的特性去設(shè)定曲率的規(guī)則，例如可以設(shè)定當(dāng)邊角像素在 1-2px 時(shí)內(nèi)外曲率為 2px；當(dāng)邊角像素在 3px 時(shí)內(nèi)外曲為 2px，內(nèi)曲為 1px；當(dāng)邊角像素大于或等于 4px 時(shí)，外曲為 2px，內(nèi)部則為直角。

3-4 描邊：描邊大小是否一致。

3-5 間距：是否遵守間距規(guī)范。

3-6 透視：透視是否一致，避免在同一套圖標(biāo)中出現(xiàn)正視圖/側(cè)視圖混雜的情況。

3-7 顏色：在圖標(biāo)的配色上要保持一致的規(guī)律，采用相同的顏色是比較常見的配色方式。如果采用不同色相的配色方式。也需要保持整體的配色協(xié)調(diào)，避免出現(xiàn)飽和度、明度反差過(guò)大的配色。

圖標(biāo)設(shè)計(jì)的一致性

4、協(xié)調(diào)性

一致性代表的是圖標(biāo)的基礎(chǔ)，而協(xié)調(diào)性則代表圖標(biāo)的整體狀態(tài)，協(xié)調(diào)性的呈現(xiàn)狀態(tài)是驗(yàn)證一致性是否合理的標(biāo)準(zhǔn)，當(dāng)協(xié)調(diào)性存在問(wèn)題時(shí)，我們就要反過(guò)來(lái)查看一致性存在的誤區(qū)并給予修改。在圖標(biāo)的協(xié)調(diào)性上我們主要審視這三點(diǎn)：視覺(jué)大小、飽滿度、透析感。

(1)、視覺(jué)大小

視覺(jué)大小對(duì)標(biāo)的是一致性的尺寸大小與描邊大小，當(dāng)你發(fā)現(xiàn)圖標(biāo)視覺(jué)大小不對(duì)等時(shí)，你就要回過(guò)去查看你的網(wǎng)格與 keyline 是否運(yùn)用正確，確保正確后再查看你的圖標(biāo)是否按照 keyline 的規(guī)范繪制以及描邊大小是否一致。（同樣尺寸下的圖標(biāo)，從光感上來(lái)看描邊粗的圖標(biāo)視覺(jué)偏大）

視覺(jué)大小協(xié)調(diào)

(2)、飽滿度

飽滿度對(duì)標(biāo)的一致性的間距，當(dāng)你發(fā)現(xiàn)圖標(biāo)不夠飽滿時(shí)，你就要去查看你設(shè)定的間距值是否偏大，是否合理。

飽滿度協(xié)調(diào)

(3)、透析感

透析感簡(jiǎn)單來(lái)說(shuō)就是留白區(qū)域。透析感對(duì)標(biāo)的也是一致性的間距，當(dāng)元素的描邊過(guò)大時(shí)，我們就要合理的設(shè)定間距的最小值，不然整個(gè)圖標(biāo)就顯得非常臃腫。

透析感協(xié)調(diào)

5、品牌調(diào)性

品牌調(diào)性是我們經(jīng)常提到的緯度，我們打開很多 APP 都會(huì)發(fā)現(xiàn)他們的圖標(biāo)設(shè)計(jì)都非常普通，沒(méi)有任何特色，過(guò)于大眾化，雖然都做了一些形式上的改變，但總是與品牌缺乏聯(lián)動(dòng)性。其實(shí)我們可以結(jié)合品牌調(diào)性，在圖標(biāo)上做更多的聯(lián)動(dòng)、創(chuàng)新。

(1)、品牌顏色

色彩是圖標(biāo)設(shè)計(jì)中重要的構(gòu)成元素之一，我們可以直接提取品牌色作為圖標(biāo)設(shè)計(jì)視覺(jué)元素。

當(dāng)然品牌顏色除了可以直接用外，還可以在提取時(shí)適當(dāng)調(diào)整色彩的飽和度、明度，做更多的形式變化。

 (2)、品牌 LOGO

提取品牌 LOGO 是最常用的使用方式，我們從品牌中提取出來(lái)的圖標(biāo)一般運(yùn)用在 APP 首頁(yè)標(biāo)簽。因?yàn)槭醉?yè)是 APP 中最重要的頁(yè)面，也是進(jìn)入 APP 默認(rèn)的頁(yè)面，把首頁(yè)圖標(biāo)替換成品牌 LOGO，能反復(fù)加強(qiáng)了用戶對(duì) App 的 logo 印象，這樣不但使 App 內(nèi)外形成了視覺(jué)聯(lián)系，同時(shí)也二次傳遞了品牌形象。

(3)、品牌元素

可以在品牌中提取它識(shí)別性較強(qiáng)的局部元素作為圖標(biāo)。品牌提取的元素并不只是所見到的品牌視覺(jué)形象，還可以提取與品牌內(nèi)容強(qiáng)相關(guān)的元素。

(4)、品牌名稱

如果你的品牌還不為大眾所熟知，那么為了強(qiáng)化用戶對(duì)品牌名稱的認(rèn)知，可以把品牌名稱直接放入標(biāo)簽欄中。

八、圖標(biāo)設(shè)計(jì)注意事項(xiàng)

1、識(shí)別性

圖標(biāo)存在的意義，主要是為了快速傳遞信息，不能讓其成了無(wú)用的裝飾品。隨著互聯(lián)網(wǎng)的普及、時(shí)間的積累，人們對(duì)一些線上圖標(biāo)信息的隱喻已根深蒂固，早就形成了慣性思維，所以我們?cè)O(shè)計(jì)的圖標(biāo)必須要符合用戶的認(rèn)知，能讓用戶快速理解，即便出現(xiàn)個(gè)別特殊情況，也要用文字清楚的標(biāo)注說(shuō)明，否則一旦讓用戶產(chǎn)生疑惑，圖標(biāo)就起了負(fù)面作用，在很大程度上影響使用體驗(yàn)。符合認(rèn)知的圖標(biāo)能讓用戶下意識(shí)的理解且接近心理預(yù)期，減少學(xué)習(xí)成本，提升使用效率。

2、簡(jiǎn)潔美觀

圖標(biāo)是將現(xiàn)實(shí)世界中的事件/事務(wù)用抽象的圖形表現(xiàn)出來(lái)，如果過(guò)于追求完美而設(shè)計(jì)的太復(fù)雜，還不如直接上圖片來(lái)的快，所以不能過(guò)于展現(xiàn)真實(shí)物品的細(xì)節(jié)，最終設(shè)計(jì)出正確而不失真的圖標(biāo)尤為重要，這樣既能用于傳遞信息，又便于用戶快速且清晰感知。

3、視覺(jué)對(duì)齊

為確保視覺(jué)平衡，異形元素在使用系統(tǒng)自動(dòng)對(duì)齊后，會(huì)有一定的偏差，需手動(dòng)微調(diào)進(jìn)行視覺(jué)對(duì)齊。

4、保持一致

針對(duì)大型項(xiàng)目，要想整個(gè)家族的圖標(biāo)更加和諧，保持相同的樣式及設(shè)計(jì)原則著實(shí)不易，尤其是在多人完成設(shè)計(jì)的情況下，事先有一個(gè)清晰的設(shè)計(jì)原則和規(guī)范是必不可少的。圖標(biāo)都有著對(duì)應(yīng)的視覺(jué)重量，例如描邊粗細(xì)、填充模式、繁簡(jiǎn)程度等屬性，需要做的就是控制好這些關(guān)鍵因素，讓整體看起來(lái)視覺(jué)重量相同且能相互關(guān)聯(lián)組合到一起，保持所有圖標(biāo)的一致性。

5、最小間隙

單個(gè)圖標(biāo)的各元素之間要有呼吸感，需要適當(dāng)?shù)牧舭?，如果描邊過(guò)大，整個(gè)條看起來(lái)感覺(jué)像糊成一團(tuán)或臃腫不堪，如果存在類似問(wèn)題，可通過(guò)減小描邊值或降低圖標(biāo)的復(fù)雜程度來(lái)解決。

6、使用 2 的倍數(shù)

以偶數(shù)為單位的設(shè)計(jì)便于數(shù)據(jù)的計(jì)算（2 的倍數(shù)），例如正負(fù)形間距、描邊值等，在 iOS@2x 設(shè)計(jì)下，@1x 也不會(huì)出現(xiàn)小數(shù)點(diǎn)。在移動(dòng)端設(shè)計(jì)中，最小的圖標(biāo)為 24px，可被 2、3、4、6、8、12 整除，也是可以被整除最多的數(shù)值，因此，可靈活的等比縮放。

7、延展性

即便做好了前面的一切，圖標(biāo)設(shè)計(jì)工作也并未完成，需要做的是持續(xù)測(cè)試圖標(biāo)的可用性，做好后續(xù)的完善與優(yōu)化，沒(méi)有最好、只有更好，以確保上線后的效果和后續(xù)的迭代。

總結(jié)

優(yōu)化猩SEO：圖標(biāo)設(shè)計(jì)是UI設(shè)計(jì)中非常重要的環(huán)節(jié)，在尺寸有限的界面上，小小的 icon 可以更加簡(jiǎn)單高效的表達(dá)含義，傳遞給用戶正確和友好的指引，同時(shí)也起到烘托產(chǎn)品氛圍的作用。

參考鏈接：

6500字超全干貨！圖標(biāo)設(shè)計(jì)零基礎(chǔ)入門指南 - 優(yōu)設(shè)網(wǎng)

https://www.uisdc.com/icon-design-guidelines-2

5000+干貨！從4個(gè)方面掌握?qǐng)D標(biāo)設(shè)計(jì)的基礎(chǔ)知識(shí) - 優(yōu)設(shè)網(wǎng)

https://www.uisdc.com/icon-design-5

圖標(biāo)設(shè)計(jì)_百度百科

https://baike.baidu.com/item/%E5%9B%BE%E6%A0%87%E8%AE%BE%E8%AE%A1/293143

搜索結(jié)果 圖標(biāo)設(shè)計(jì) - 優(yōu)設(shè)網(wǎng)

https://www.uisdc.com/?s=%E5%9B%BE%E6%A0%87%E8%AE%BE%E8%AE%A1

修改于2023-08-29