一、圖標(biāo)的定義及分類

1、圖標(biāo)的定義

圖標(biāo)是具有高度概括性的、用于視覺信息傳達的圖像。圖標(biāo)常?？梢詡鬟_出豐富的信息，并且常常和詞匯、文本搭配相互搭配使用，兩者互相支撐，或隱晦或直白地共同傳遞出其中所包含的意義、特征、內(nèi)容和信息。

在數(shù)字設(shè)計領(lǐng)域，圖標(biāo)作為網(wǎng)頁或者UI界面中的象形圖和表意文字而存在，是確保界面可用性的基礎(chǔ)設(shè)施，也是達成人機交互這一目標(biāo)的有效途徑。

2、圖標(biāo)類型（基于功能劃分）

2-1釋意性圖標(biāo)：

釋意性圖標(biāo)是用來解釋和闡明特定功能或者內(nèi)容類別的視覺標(biāo)記。它并不是一定被點擊可交互的UI元素，在很多時候只是有輔助解釋其含義的文案。在不搭配文本的情況下用戶會借助這些圖標(biāo)來獲取信息。不過有時候圖標(biāo)表達的含義可能還不夠完整或者清晰，所以會將圖標(biāo)和文案搭配起來一起使用，這樣可以大大降低誤讀的可能性，釋意性圖標(biāo)一共可以分為以下三類：

2-1-1純圖標(biāo)：

例如火球買手APP中的店家“特定標(biāo)簽”，以及圖文展示下的“觀看數(shù)量圖標(biāo)”與“收藏圖標(biāo)”，它們并不需要用文字去解釋，用戶也知道它表達的是什么。

2-1-2圖文結(jié)合：

例如造作APP中的“購物車圖標(biāo)”與“收貨地址圖標(biāo)”，為了讓用戶能夠很好的明白圖標(biāo)的意圖，所以在圖標(biāo)下方會配有文字提示，這樣就能大大的降低誤讀的可能性。

2-1-3純圖標(biāo)（圖標(biāo)內(nèi)含文字）：

例如開眼APP中視頻封面左上角“開眼精選圖標(biāo)”，它把圖標(biāo)與重要文字結(jié)合在一起展示給用戶，看起來不僅十分具有個性，而且用戶對其理解性也非常強。

2-2交互性圖標(biāo)：

交互圖標(biāo)的最大意義在于可以引導(dǎo)用戶進行交互行為，是在產(chǎn)品中不可或缺的組成部分。它們可以在用戶不同的操作手勢下幫助用戶執(zhí)行不同的交互過程，這種類型圖標(biāo)也是APP中最常見的，常見的交互性圖標(biāo)如：搜索、底部標(biāo)簽、返回、點贊、收藏、掃一掃等。

2-3裝飾性圖標(biāo)：

裝飾性圖標(biāo)僅僅是用來提升整個界面的視覺體驗，它并不具備任何功能性。這類圖標(biāo)往往是為了迎合用戶的偏好與期望，通過豐富視覺體驗的方法來增加內(nèi)容的觀賞性，這樣不僅可以吸引并留住用戶，還可以讓整個用戶體驗更加積極，最為大家所熟悉的就是滴滴出行APP中的“小車圖標(biāo)”。

3、圖標(biāo)類型（基于基礎(chǔ)樣式+表現(xiàn)手法）

圖標(biāo)基于基礎(chǔ)樣式（線、面、線面結(jié)合）+表現(xiàn)手法（顏色、透明度、投影、疊加...）劃分，一共可以分為20種類型，每種類型的展示方式也都各有不同。

3-1線性圖標(biāo)（6種）

線性圖標(biāo)通過線來塑造輪廓，在界面中App的圖標(biāo)尺寸并不大，所以如果線過于復(fù)雜，在小面積中過多的線會對識別性產(chǎn)生較大的困擾。在圖標(biāo)設(shè)計中使用的線有粗細之分，常用的App圖標(biāo)設(shè)計線的粗細一般有2PX或者3PX，不同的線條粗細所帶來的視覺感受也不同，細線顯得精致，粗線視覺面積大，顯得厚重。

3-2面性圖標(biāo)（6種）

面性圖標(biāo)是通過面來塑造形體的圖標(biāo)，采用了剪影的設(shè)計形式，通過線或者面去切割基礎(chǔ)輪廓面，通過分型來塑造圖標(biāo)的體積感。不同的切割手法造成了面性圖標(biāo)設(shè)計感的差別。

3-3線面結(jié)合圖標(biāo)（6種）

線面結(jié)合圖標(biāo)相較單一的線性圖標(biāo)或單一的面性圖標(biāo)樣式更加豐富、也更富有趣味性。從設(shè)計的角度上說，由于元素的多樣化，設(shè)計更容易獲得好的效果。相反，如果運用不當(dāng)會顯得圖標(biāo)非常雜亂，如何有效的把控好兩者之間的過度是關(guān)鍵。

3-4擬物化圖標(biāo)

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

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

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

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

合理的遵循圖標(biāo)規(guī)范可以有利于設(shè)計師之間合作使用，指導(dǎo)設(shè)計師如何規(guī)范的去設(shè)計圖標(biāo)，以確保企業(yè)所有產(chǎn)品圖標(biāo)風(fēng)格的一致性和可用性達到統(tǒng)一，同時也是為了后續(xù)產(chǎn)品更新迭代有可參考的地方。

1、圖標(biāo)尺寸

為了保證圖標(biāo)的尺寸大小一致性，我們往往會建立基礎(chǔ)的網(wǎng)格尺寸來進行繪制圖標(biāo)，常用的網(wǎng)格繪制尺寸為：16、24、36、48、64、128、512、1024。這些尺寸并不是固定的，在設(shè)計中也會存在特殊的尺寸，例如谷歌在臺式機上設(shè)計圖標(biāo)，當(dāng)鼠標(biāo)和鍵盤是主要輸入方法時，就會使用密集布局，基礎(chǔ)網(wǎng)格就會縮小到20。

下面就以常用的24x24為大家展示：

網(wǎng)格包含2px出血位。這樣可以確保圖標(biāo)在導(dǎo)出時將保留其所需的比例和周圍的空白區(qū)域，同時還能夠很好的平衡圖標(biāo)的視覺重心。

*在使用常規(guī)圖標(biāo)時避免一部分在出血位。

*在使用多個元素的圖標(biāo)時，避免圖標(biāo)擁擠我們可以讓其部分出現(xiàn)在出血位，確保它們之間有足夠的空間。

2、圖標(biāo)的keyline

keyline由圓形，正方形，矩形，正交，三角形和對角線組成。它可以為您提供圖標(biāo)集中基本形狀或比例的一致大小。這使創(chuàng)建視覺上的穩(wěn)定變得更加容易，并有助于在設(shè)計相似比例的圖標(biāo)時有共同的參考準(zhǔn)則。

在24尺寸下的keyline構(gòu)成如下（24尺寸下的出血區(qū)域為2）：

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

3、像素

3-1像素統(tǒng)一

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

當(dāng)然，描邊像素的粗細并不是絕對的，如果我們要做一些密集型的圖標(biāo)時，可以考慮適當(dāng)?shù)目s小線的像素大小。如下，我們設(shè)定的系統(tǒng)圖標(biāo)線條粗細為3px，當(dāng)你用3px作用于指紋圖標(biāo)上時就會顯得非常擁擠，并且在視覺上比其余圖標(biāo)更重，這時我們就可以把它的線條像素降級，設(shè)定為2px。

3-2避免小數(shù)位

我們在用矢量工具繪制圖標(biāo)時，要仔細看好圖標(biāo)的網(wǎng)格尺寸和圖標(biāo)結(jié)構(gòu)尺寸，避免產(chǎn)生小數(shù)位。

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

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

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

5、傾斜角度

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

6、斷點形態(tài)

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

7、圖標(biāo)間距

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

8、透視

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

9、視覺重心

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

10、圖形整潔

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

11、命名

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

三、圖標(biāo)的性格走向

每個App應(yīng)該有自己獨特的產(chǎn)品氣質(zhì)，同樣圖標(biāo)性格也應(yīng)當(dāng)與產(chǎn)品氣質(zhì)保持一致。圖標(biāo)性格一共分為了4個走向：粗曠（粗直）、活潑（粗圓）、商務(wù)（細直）、精致（細圓）。

1、粗曠類圖標(biāo)

圖標(biāo)結(jié)構(gòu)特點：線條較粗（或面性圖標(biāo)、線面結(jié)合圖標(biāo)）、拐角為直角。

粗曠類圖標(biāo)讓人看起來非常飽滿、剛正，它更多適用于男性、潮流、有格調(diào)類型等產(chǎn)品中。例如VSCO，它的底部標(biāo)簽欄圖標(biāo)全部采用了粗線條的直角設(shè)計。

2、活潑類圖標(biāo)

圖標(biāo)結(jié)構(gòu)特點：線條較粗（或面性圖標(biāo)、線面結(jié)合圖標(biāo)）、拐角為圓角。

活潑類圖標(biāo)讓人看起來十分容易接近，能讓人感受到溫暖、舒適，它更多適用于電商、社交、母嬰、二次元、娛樂、直播、美食等產(chǎn)品中。例如閑魚，不管是在LOGO字體的處理還是APP內(nèi)部的圖標(biāo)處理，都是采用了線條較粗的圓角設(shè)計。

3、商務(wù)類圖標(biāo)

圖標(biāo)結(jié)構(gòu)特點：線條較細、拐角為直角。

商務(wù)類圖標(biāo)讓人看起來十分規(guī)矩、嚴(yán)謹、值得信賴，它更多適用于新聞、政府、商務(wù)、工具等產(chǎn)品中。例如工具類的思維導(dǎo)圖APP，它的可操作按鈕都是商務(wù)類的圖標(biāo)。因為這類圖標(biāo)的特性，所以目前我們很少在移動端上看到它，它更多適用于PC端的后臺界面中。

4、精致類圖標(biāo)

圖標(biāo)結(jié)構(gòu)特點：線條較細、拐角為圓角。

精致類圖標(biāo)讓人看起來非常干凈、柔和、顯得高級感，它更多適用于旅游、奢侈品、藝術(shù)、領(lǐng)域垂直等產(chǎn)品中。例如airbnb，在APP應(yīng)用中大部分都采用了精致類圖標(biāo)。

四、圖標(biāo)的評判標(biāo)準(zhǔn)

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

1、識別性

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

1-1 大眾認知隱喻

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

1-2 真實世界映射

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

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

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

3、一致性

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

3-1 尺寸大?。壕W(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時內(nèi)外曲率為2px；當(dāng)邊角像素在3px時內(nèi)外曲為2px，內(nèi)曲為1px；當(dāng)邊角像素大于或等于4px時，外曲為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)飽和度、明度反差過大的配色。

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

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

4-1 視覺大小

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

4-2 飽滿度

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

4-3 透析感

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

5、品牌調(diào)性

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

5-1品牌顏色

色彩是圖標(biāo)設(shè)計中重要的構(gòu)成元素之一，我們可以直接提取品牌色作為圖標(biāo)設(shè)計視覺元素。例如站酷，站酷的品牌色是黃色，標(biāo)簽欄的圖標(biāo)（選中狀態(tài)）就提取了品牌的黃色，讓其與品牌調(diào)性高度一致。

當(dāng)然品牌顏色除了可以直接用外，還可以在提取時適當(dāng)調(diào)整色彩的飽和度、明度，做更多的形式變化。例如懂車帝，就在原有的黃色基礎(chǔ)上做了些許調(diào)整，圖標(biāo)采用黃色透明漸變的處理方式，在與品牌顏色呼應(yīng)的同時，使得整個圖標(biāo)更加精致、有活力。

5-2品牌LOGO

提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來的圖標(biāo)一般運用在APP首頁標(biāo)簽。因為首頁是APP中最重要的頁面，也是進入APP默認的頁面，把首頁圖標(biāo)替換成品牌LOGO，能反復(fù)加強了用戶對App的logo印象，這樣不但使App內(nèi)外形成了視覺聯(lián)系，同時也二次傳遞了品牌形象。例如大眾點評，它的首頁標(biāo)簽就用了品牌LOGO。

5-3品牌元素

我們可以在品牌中提取它識別性較強的局部元素作為圖標(biāo)。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁圖標(biāo)。

品牌提取的元素并不只是所見到的品牌視覺形象，還可以提取與品牌內(nèi)容強相關(guān)的元素。例如QQ音樂，就把音符作為首頁圖標(biāo)。

5-4品牌名稱

如果你的品牌還不為大眾所熟知，那么為了強化用戶對品牌名稱的認知，可以把品牌名稱直接放入標(biāo)簽欄中。例如MONO，就把它的名稱分為四個字母分別放在了4個標(biāo)簽內(nèi)，需要注意的是這類圖標(biāo)不能單獨出現(xiàn)，因為它本身不具備引導(dǎo)含義，必須配合文字一起出現(xiàn)，這樣才能讓用戶能易理解。

5-5品牌性格

圖標(biāo)風(fēng)格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標(biāo)，會讓人記憶猶新。例如：每日故宮，它的圖標(biāo)就非常具有特色，結(jié)合了品牌的性格以及定位，加入了眾多的古代中國元素，整體看起來有股濃濃的古韻之風(fēng)。

5-6吉祥物 

如果品牌中含有吉祥物，我們可以提取吉祥物的外形，把它用于產(chǎn)品的圖標(biāo)中。例如盒馬，它就把盒馬的吉祥物做了風(fēng)格化的處理，放于APP的首頁標(biāo)簽。