借著疫情期間在家休假的時(shí)間，將平時(shí)用到的一些零零散散的圖標(biāo)繪制方法與思路進(jìn)行了一次全面的匯總與沉淀。從實(shí)習(xí)期間畫一組圖標(biāo)的無(wú)從下手，每一個(gè)圖標(biāo)看起來(lái)都像是散裝的一樣，到后來(lái)慢慢學(xué)習(xí)與練習(xí)，到現(xiàn)在變得了解了圖標(biāo)的繪制流程，過(guò)程也是比較麻煩，因?yàn)楹苌儆腥娴膱D標(biāo)講解文章，都是看一篇懂一點(diǎn)，然后在揉到練習(xí)當(dāng)中。所以本篇文章盡量將圖標(biāo)進(jìn)行細(xì)致一些的流程說(shuō)明，有不足之處還望指教。

圖標(biāo)的可用性

圖標(biāo)可用性，顧名思義就是圖標(biāo)繪制出來(lái)是否能被用戶所看懂并快速識(shí)別，是否可以為業(yè)務(wù)賦能。為此我總結(jié)出了四條圖標(biāo)繪制的評(píng)判標(biāo)準(zhǔn)。

1. 凸顯性

用戶是否能在某頁(yè)面上迅速找到該圖標(biāo)，凸顯性的目的是可以快速查找，幫助用戶做選擇。圖標(biāo)在識(shí)別的速度上遠(yuǎn)遠(yuǎn)大于文字，所以在一些頁(yè)面中的重要功能使用圖標(biāo)的目的是為了吸引用戶的注意力，讓重要功能得到凸顯，提高重要功能的點(diǎn)擊率。

2. 可識(shí)別性

圖標(biāo)的目的是要讓用戶猜出他看到的圖標(biāo)所表達(dá)的意義，有什么作用，以及點(diǎn)擊后會(huì)出現(xiàn)什么樣的場(chǎng)景，發(fā)生什么樣的事情。所以一個(gè)圖標(biāo)的好與壞最重要的因素就體現(xiàn)在這里：圖標(biāo)的可識(shí)別性與可預(yù)知性。

影響圖標(biāo)可識(shí)別性的三點(diǎn)因素

• 視覺(jué)復(fù)雜性：圖標(biāo)的細(xì)節(jié)與組合圖形的元素
• 熟悉性：圖標(biāo)中圖形所表達(dá)語(yǔ)義的熟悉程度
• 具體性：圖標(biāo)或者圖標(biāo)中的圖形與現(xiàn)實(shí)生活中物體的相似程度

3. 美觀度

圖標(biāo)是否美觀，對(duì)用戶是否有足夠的吸引力。在《設(shè)計(jì)通用法則》一書中有一條設(shè)計(jì)法則是：美即適用效應(yīng)。不管任何事物，美麗的外表都會(huì)給人帶來(lái)好感，讓人覺(jué)得這種事物在任何方面都非常美好。作為設(shè)計(jì)師，把一件事物美觀化是一件終生的必修課，用戶對(duì)圖標(biāo)或者界面的第一印象就是始于顏值。

4. 業(yè)務(wù)屬性

圖標(biāo)是否符合業(yè)務(wù)屬性，是否可以喚起用戶的使用情緒，提高點(diǎn)擊率，起到為業(yè)務(wù)賦能的作用。在界面中，我們?cè)O(shè)計(jì)的圖標(biāo)最終目的不只是讓用戶覺(jué)得它美觀，而是要為我們的產(chǎn)品賦能，什么是為產(chǎn)品賦能呢？通俗來(lái)說(shuō)就是使圖標(biāo)能夠提升點(diǎn)擊率從而給公司創(chuàng)造收益。

圖標(biāo)如何為產(chǎn)品賦能呢？

• 符合產(chǎn)品與業(yè)務(wù)屬性：比如兒童類產(chǎn)品，圖標(biāo)就要圓滑，多彩，看起來(lái)萌一點(diǎn)的感覺(jué)；如果是金融類的產(chǎn)品就應(yīng)該使用微圓角，直角，中性色，金色來(lái)代表金融的莊嚴(yán)感與高級(jí)感。
• 喚起用戶的使用情緒：比如在大眾點(diǎn)評(píng) app 中，有關(guān)與食品的圖標(biāo)都使用橙色的擬物，因?yàn)榕梢越o人們帶來(lái)食欲感，微擬物配合暖色系就可以喚起用戶對(duì)食品的情緒感。
• 引導(dǎo)用戶點(diǎn)擊，提升點(diǎn)擊率：想要讓用戶點(diǎn)擊一個(gè)內(nèi)容，那必須要有足夠的吸引力吸引用戶去點(diǎn)擊，一般來(lái)說(shuō)美觀度越高、趣味元素越多的圖標(biāo)可以占據(jù)大部分的吸引力，一個(gè)圖標(biāo)在頁(yè)面中所占的比例也會(huì)影響對(duì)用戶的吸引力，合理的文案搭配也會(huì)吸引用戶去點(diǎn)擊，比如優(yōu)惠信息，新功能提示等。

圖標(biāo)的類型

1. 線性圖標(biāo)

線性圖標(biāo)，顧名思義，即圖標(biāo)是由直線、曲線、點(diǎn)在內(nèi)等元素組合而成的圖標(biāo)樣式。線性圖標(biāo)具有辨識(shí)度高，清晰唯美，簡(jiǎn)約易看等優(yōu)點(diǎn)，線性圖標(biāo)不會(huì)對(duì)頁(yè)面造成太多的視覺(jué)干擾。缺點(diǎn)是：線性圖標(biāo)的創(chuàng)作空間較少，太復(fù)雜的線性圖標(biāo)看起來(lái)會(huì)讓人感覺(jué)到累。

2. 面性圖標(biāo)

面性圖標(biāo)，即使用對(duì)圖形內(nèi)容進(jìn)行色彩填充的圖標(biāo)樣式。面性圖標(biāo)是現(xiàn)實(shí)生活中物體的縮影，優(yōu)點(diǎn)非常多，比如表意能力強(qiáng)，細(xì)節(jié)豐富，色彩豐富，情緒感強(qiáng)，視覺(jué)突出，創(chuàng)作空間大等。面性圖標(biāo)可以讓用戶迅速定位圖標(biāo)位置，快速預(yù)知點(diǎn)擊后的狀態(tài)。但是面性圖標(biāo)在頁(yè)面中不可過(guò)多出現(xiàn)，否則會(huì)造成頁(yè)面臃腫，難分主次，用戶視覺(jué)疲勞。

3. 混合型圖標(biāo)

在設(shè)計(jì)圖標(biāo)類型的時(shí)候，不一定局限于單純的線性與面性，也可以兩者結(jié)合，讓圖標(biāo)即有線性描邊的輪廓，還有色彩填充的區(qū)域，混合型圖標(biāo)可以讓頁(yè)面變得更加有活力，同時(shí)還可以吸引用戶的注意力，美觀與創(chuàng)意性強(qiáng)。但是混合型圖標(biāo)在商業(yè)產(chǎn)品中要謹(jǐn)慎使用，因?yàn)槭褂貌划?dāng)會(huì)讓頁(yè)面變得雜亂不堪，用戶無(wú)法識(shí)別圖標(biāo)表達(dá)的語(yǔ)義。

圖標(biāo)的色彩

1. 色彩情緒

色彩情緒即顏色心理，指不同波長(zhǎng)色彩的光信息作用于人的視覺(jué)器官，通過(guò)視覺(jué)神經(jīng)傳入大腦后，經(jīng)過(guò)思維，與以往的記憶及經(jīng)驗(yàn)產(chǎn)生聯(lián)想，從而形成一系列的色彩心理反應(yīng)。在任何場(chǎng)景下合理使用色彩心理可以調(diào)起用戶情緒，還可以讓用戶產(chǎn)生聯(lián)想進(jìn)而快速識(shí)別。

在設(shè)計(jì)圖標(biāo)的時(shí)候，合理的運(yùn)用色彩情緒，會(huì)使圖標(biāo)更具有科學(xué)性，可以讓用戶在使用的過(guò)程中更加自然、舒服，同時(shí)也會(huì)增加用戶的識(shí)別速度喚起用戶的使用情緒。

色彩情緒表

2. 配色方法

在配色時(shí)，我們采用更具備科學(xué)性、更符合人類感官的 HSB 系統(tǒng)進(jìn)行配置。在根據(jù)主色配置漸變色時(shí)，我們經(jīng)常是在主色的基礎(chǔ)上加白或者加黑。但是只加入大量的白或者黑就會(huì)改變?cè)旧实拿鞫扰c飽和度，從而使畫面顯得霧蒙蒙的，不夠清晰通透。正確的做法是在給主色變亮減暗的同時(shí)，改變主色的飽和度。在 hsb 色相條中，最亮的三個(gè)顏色分別是，藍(lán)紫色，青綠色與黃色，如果需要加亮主色就在混白的同時(shí)將藍(lán)色向青色改變色相，如果需要減暗則是相反，這樣在調(diào)制漸變色變化的過(guò)程中不會(huì)出現(xiàn)太臟的顏色。

3. 配色方案

常見的色彩搭配

中性色（黑白）+主色、主色+點(diǎn)綴色、主色+透明度、單漸變、雙漸變錯(cuò)層、撞色疊加穿透等效果。一般常用的就是中性色+主色、主色+點(diǎn)綴色。

點(diǎn)綴色配色

• 互補(bǔ)色：互補(bǔ)色就是在色環(huán)上距離 180° 的色彩，形成具有視覺(jué)沖擊力的色彩。
• 近似色：近似色是在色環(huán)上距離 45° 左右的色彩，形成的配色效果風(fēng)格和諧統(tǒng)一。
• 對(duì)比色：對(duì)比色是在色環(huán)上 120° 左右的色彩，可以產(chǎn)生較為強(qiáng)烈鮮明的視覺(jué)效果。

圖標(biāo)繪制技巧

1. 像素對(duì)齊

我們?cè)诶L制圖標(biāo)的時(shí)候，應(yīng)該將圖標(biāo)的每個(gè)像素盡量對(duì)齊于像素點(diǎn)，這樣導(dǎo)出圖標(biāo)時(shí)像素的邊緣不會(huì)出現(xiàn)鋸齒，不會(huì)出現(xiàn)過(guò)于模糊的情況。通常在繪制時(shí)我們應(yīng)該去除繪制軟件中 x 與 y 軸，寬（w）與高（h）的小數(shù)點(diǎn)，這樣就可以避免無(wú)法對(duì)齊像素的情況。

2. 圖標(biāo)參考線

在繪制兩個(gè)或者以上的圖標(biāo)時(shí)，為了避免多個(gè)圖標(biāo)出現(xiàn)大小不一的情況，我們應(yīng)該使用由谷歌材料設(shè)計(jì)語(yǔ)言提供的圖標(biāo)參考線進(jìn)行繪制，使用圖標(biāo)盒子可以讓一整套圖標(biāo)在視覺(jué)效果上更加統(tǒng)一和諧，不會(huì)出現(xiàn)一大一小一長(zhǎng)一短的情況。

使用方法

先繪制一個(gè) 152*152px 的正方形，一個(gè) 176*176px 的正圓形，一個(gè)寬 176*128px 的水平矩形和一個(gè) 128*176px 的垂直矩形，圓角為 4px，然后將這個(gè)四個(gè)形狀進(jìn)行水平居中對(duì)齊，之后得出一個(gè)圖標(biāo)的參考線。

在寬度相等的情況下，正方形的面積要大于正圓的面積，所以在繪制圓形圖標(biāo)時(shí)應(yīng)該將圓形的上下左右四個(gè)頂點(diǎn)頂齊與圖標(biāo)盒子正方形區(qū)域的四條邊；在繪制方形圖標(biāo)時(shí)應(yīng)該將方形的四個(gè)角點(diǎn)頂齊與圓形參考線的外圍邊；在繪制橫向矩形與縱向矩形圖標(biāo)時(shí)，應(yīng)該將圖標(biāo)的左右邊或者是上下邊控制在正方形的參考線之內(nèi)，這樣矩形圖標(biāo)繪制出來(lái)會(huì)更加的圓潤(rùn)，相對(duì)于其他的形狀圖標(biāo)更加匹配。

3. 可訪問(wèn)性

我們繪制的圖標(biāo)必須要保證清晰度，可辨別性。不管是在強(qiáng)光下還是正常光下都需要良好的可讀性。這就需要圖標(biāo)不論是自身元素之間的對(duì)比度還是和頁(yè)面底板背景之間的對(duì)比度都需要很好的可讀性。我們檢測(cè)圖標(biāo)的可讀性通常要將圖標(biāo)的背景色底板在黑色和白色之間進(jìn)行切換對(duì)比，不論是黑色還是白色的背景都可以看清圖標(biāo)的全部細(xì)節(jié)，還需要確保圖標(biāo)中的每一種顏色都是可見的。第二就是將圖標(biāo)拿到強(qiáng)光下進(jìn)行觀察，在強(qiáng)光下是否可以看清圖標(biāo)的主題結(jié)構(gòu)，圖標(biāo)是否有足夠的辨識(shí)度。

在繪制圖標(biāo)時(shí)，我們可以參考 WCAG 2.1：圖形和用戶界面組件的對(duì)比度至少為 3 : 1 的標(biāo)準(zhǔn)進(jìn)行相應(yīng)配色，以達(dá)到良好的可視狀態(tài)。

可訪問(wèn)性測(cè)試：https://webaim.org/resources/contrastchecker/

4. 統(tǒng)一性

在繪制多個(gè)類型相同的圖標(biāo)時(shí)，我們需要注意這一套圖標(biāo)合集需要在視覺(jué)上保持統(tǒng)一性。在一整套產(chǎn)品中，會(huì)有很多種圖標(biāo)，但是圖標(biāo)的功能不一樣，所表達(dá)的內(nèi)容也不同。這時(shí)，圖標(biāo)一致性的意義就體現(xiàn)出來(lái)了，根據(jù)格式塔原理中的相似性原則：人們會(huì)將如元素彼此相似的東西感知為一組。這也意味著如果具有相同功能、含義和層次結(jié)構(gòu)級(jí)別的元素，則應(yīng)在視覺(jué)上保持統(tǒng)一匹配。我們傾向于將彼此相似的元素視為同一個(gè)分組，相似性可以幫助我們組織和分類頁(yè)面里的元素對(duì)象，并將它們與特定的含義或功能相關(guān)聯(lián)。有不同的方法可以使元素被認(rèn)為是相似的，這些方法包括顏色、大小、形狀、紋理、尺寸和方向的相似性。

圖標(biāo)內(nèi)容的統(tǒng)一會(huì)讓用戶明白相似的圖標(biāo)所代表的的功能也相同，而且在視覺(jué)上也更加和諧美觀。因此我們?cè)诶L標(biāo)后還需檢查線條的粗細(xì)比重，邊角的大小，配色方案，細(xì)節(jié)層次和設(shè)計(jì)元素在整個(gè)合集中是否是不變且一致的。

5. 圖標(biāo)呼吸感

呼吸感的意思就是適當(dāng)留白。在設(shè)計(jì)中，適當(dāng)?shù)牧舭卓梢酝怀鲋黧w內(nèi)容，讓內(nèi)容具備易看性。不管是圖標(biāo)還是界面，元素與元素之間都應(yīng)該存在一定的間距。在圖標(biāo)的繪制過(guò)程中，我們應(yīng)該注意圖標(biāo)元素之間的間距不宜過(guò)近，元素也不宜過(guò)多。圖標(biāo)是一個(gè)物體的簡(jiǎn)略縮影，目的是為了表達(dá)內(nèi)容，讓用戶快速理解，但是在有限的空間中，太過(guò)復(fù)雜的細(xì)節(jié)會(huì)影響圖標(biāo)的識(shí)別速度。因此在圖標(biāo)的繪制過(guò)程中應(yīng)該刪除所有無(wú)法傳達(dá)圖標(biāo)意義的元素，避免使圖標(biāo)變得太過(guò)復(fù)雜難以識(shí)別。

6. 合理運(yùn)用布爾運(yùn)算

布爾運(yùn)算在設(shè)計(jì)行業(yè)中被得到廣泛的運(yùn)用，比如工業(yè)設(shè)計(jì)，影視后期，logo 設(shè)計(jì)等，布爾運(yùn)算具有一致性與規(guī)范性的優(yōu)點(diǎn)。我們?cè)谠O(shè)計(jì)面性圖標(biāo)的時(shí)候可以合理使用布爾運(yùn)算進(jìn)行繪制，這樣繪制的圖標(biāo)具有吸引力和說(shuō)服力。

7. 頁(yè)面層次感

在頁(yè)面中，有需要吸引用戶點(diǎn)擊的圖標(biāo)，也有起到輔助作用的指示圖標(biāo)，還有引導(dǎo)用戶操作的圖標(biāo)，這些圖標(biāo)在頁(yè)面中占據(jù)著不同的地位.在所有圖標(biāo)中，有色圖標(biāo)強(qiáng)于無(wú)色圖標(biāo)，多色圖標(biāo)強(qiáng)于單色圖標(biāo)，面性圖標(biāo)強(qiáng)于線性圖標(biāo)，帶背景圖標(biāo)強(qiáng)于無(wú)背景圖標(biāo)，在設(shè)計(jì)圖標(biāo)的時(shí)候應(yīng)該根據(jù)業(yè)務(wù)需要進(jìn)行視覺(jué)強(qiáng)弱不同的設(shè)計(jì)。

8. 業(yè)務(wù)屬性

如文上所說(shuō)，圖標(biāo)采用與業(yè)務(wù)相符合的色彩搭配會(huì)讓用戶在使用的過(guò)程中更加自然、舒服，同時(shí)也會(huì)增加用戶的識(shí)別速度，喚起用戶的使用情緒。一個(gè)圖標(biāo)的繪制是否具備商業(yè)價(jià)值也恰恰體現(xiàn)在這里。

如下圖所示，左圖是斗魚直播 APP 的截圖，右圖是京東金融的圖標(biāo)截圖。這兩款產(chǎn)品的業(yè)務(wù)以及所對(duì)應(yīng)的用戶群體完全不一樣，斗魚是一款直播的產(chǎn)品，直播面向的用戶群體是青少年，所以整體的產(chǎn)品調(diào)性是：萌、活潑、多彩、絢麗、時(shí)尚等，斗魚直播的圖標(biāo)繪制需要面向年輕人，色彩的高飽和與有趣的元素來(lái)抓住用戶的眼球。但是京東金融是一款理財(cái)?shù)漠a(chǎn)品，面向的用戶則是中老年，大多數(shù)都是有一些存款的人，這些人不需要斗魚那樣花里胡哨的元素，他們只在乎這個(gè)產(chǎn)品是否安全，利息是否高，所以京東金融這個(gè)產(chǎn)品的整體風(fēng)格就需要偏向于：安全、高端、大氣，這樣才能給用戶從視覺(jué)上營(yíng)造信任感。我們?cè)O(shè)計(jì)圖標(biāo)時(shí)通常使用產(chǎn)品的調(diào)性作為主風(fēng)格，但是像美團(tuán)淘寶這些業(yè)務(wù)眾多的產(chǎn)品中，我們就需要根據(jù)產(chǎn)品下的細(xì)分業(yè)務(wù)進(jìn)行風(fēng)格定位，然后設(shè)計(jì)中相應(yīng)融入產(chǎn)品的品牌元素，使用合理的色彩情緒等讓圖標(biāo)變得更符合業(yè)務(wù)的風(fēng)格。

最終測(cè)試

當(dāng)我們的圖標(biāo)繪制完成后需要測(cè)試這一組圖標(biāo)的重心是否統(tǒng)一，常用的方法是使用標(biāo)準(zhǔn)的正圓形和正方形來(lái)和所有繪制的圖標(biāo)進(jìn)行對(duì)比，保證所有的圖標(biāo)重心相近，視覺(jué)統(tǒng)一。也可以采用不同角度的觀察法，可以從上下左右四個(gè)角度去觀察圖標(biāo)，看看圖標(biāo)在不同的角度下重心是否統(tǒng)一。

一組圖標(biāo)的繪制流程

1. 情緒板

情緒板是在執(zhí)行一項(xiàng)設(shè)計(jì)操作之前非常重要的一個(gè)步驟，情緒板并不是像設(shè)計(jì)平臺(tái)展示作品集里那樣放幾張圖片，幾個(gè)關(guān)鍵詞，而是一套對(duì)接下來(lái)設(shè)計(jì)的一個(gè)風(fēng)格走向定位。根據(jù)不同的用戶人群，不同顏色的色彩情緒，不同產(chǎn)品的業(yè)務(wù)，將用戶調(diào)研的結(jié)果，產(chǎn)品的背景進(jìn)行總結(jié)與思考，定位接下來(lái)的設(shè)計(jì)風(fēng)格。

2. 繪制流程

選取照片

觀察生活，對(duì)想畫的圖標(biāo)進(jìn)行照片實(shí)物造型的提取。圖標(biāo)是對(duì)生活中事物的精簡(jiǎn)概括。利用現(xiàn)實(shí)照片作為設(shè)計(jì)參考可以讓繪制出的圖標(biāo)更真實(shí)，辨識(shí)度更高，還可以做到差異化設(shè)計(jì)。

造型勾勒

使用矢量軟件的基本圖形與鋼筆工具描著照片進(jìn)行輪廓的繪制。

簡(jiǎn)化優(yōu)化

簡(jiǎn)化草稿輪廓的結(jié)構(gòu)，只保留一個(gè)物體的主要特點(diǎn)元素，刪除多余元素。優(yōu)化圖標(biāo)細(xì)節(jié)，需要時(shí)將圖標(biāo)線性轉(zhuǎn)面性。

業(yè)務(wù)屬性

根據(jù)業(yè)務(wù)需要，調(diào)整圖標(biāo)風(fēng)格，添加質(zhì)感。

3. 制定規(guī)范

無(wú)規(guī)矩不成方圓，規(guī)矩的出現(xiàn)可以讓一切雜亂的東西變得合理，統(tǒng)一起來(lái)。在設(shè)計(jì)上也是如此，規(guī)范具有統(tǒng)一輸出，指引細(xì)節(jié)、便于查看的好處，規(guī)范就是一組圖標(biāo)中的規(guī)矩，所有圖標(biāo)的繪制都按照規(guī)矩來(lái)，最終的成品就會(huì)顯得井然有序。

在制定規(guī)范時(shí)，我們通常先繪制出一個(gè)符合業(yè)務(wù)風(fēng)格的圖標(biāo)，然后根據(jù)這一個(gè)圖標(biāo)定制后續(xù)的圖標(biāo)規(guī)范，最基本的規(guī)范便是描邊寬度，斷點(diǎn)位置、圓角大小，主色輔色，漸變角度，點(diǎn)綴元素，光影角度等，在一組中的圖標(biāo)需要在這些圖形屬性中進(jìn)行統(tǒng)一，這樣的圖標(biāo)雖然形狀不一樣但是在視覺(jué)上看起來(lái)是屬于同一合集的。

制定規(guī)范一般分為三個(gè)過(guò)程：

• 拆分細(xì)節(jié)：將圖標(biāo)中的細(xì)節(jié)元素進(jìn)行分解，在規(guī)范中制定細(xì)節(jié)元素的使用法則。
• 風(fēng)格定位：根據(jù)產(chǎn)品調(diào)性，業(yè)務(wù)屬性在規(guī)范中制定相應(yīng)的色彩心理、質(zhì)感風(fēng)格。
• 功能劃分：功能相近的包括色彩、質(zhì)感應(yīng)該采取相近性。

文章來(lái)源：優(yōu)設(shè)網(wǎng)    作者：簫灬西人生

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)