編輯導(dǎo)語：當(dāng)接到圖標(biāo)設(shè)計(jì)的需求時(shí)，首先應(yīng)該怎么做呢？本文作者從圖標(biāo)的繪制流程、繪制方式、設(shè)計(jì)原則、可用性測試等方面，對圖標(biāo)設(shè)計(jì)進(jìn)行了分析，一起來看一下吧。

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

1. 關(guān)鍵詞提取以及頭腦風(fēng)暴

當(dāng)接到圖標(biāo)設(shè)計(jì)需求時(shí)，需要將信息中的關(guān)鍵詞進(jìn)行提煉，并且發(fā)散思維獲取一些關(guān)鍵詞的同義詞、近義詞。提供最初的設(shè)計(jì)方向。

2. 文字符號化

把腦暴后的關(guān)鍵詞圖形化，過程中可以用筆紙粗略繪制，目的是能確定出最契合要表達(dá)信息的圖標(biāo)外形。

3. 使用場景梳理

梳理圖標(biāo)所使用的環(huán)境、場景。比如標(biāo)簽欄、導(dǎo)航欄在頁面中屬于一級使用場景，使用視覺重量更大的面形圖標(biāo)。個(gè)人中心、分類、詳情頁屬于二級使用場景，使用線型圖標(biāo)居多。更多強(qiáng)調(diào)內(nèi)容本身。

二、圖標(biāo)的繪制方式

1. 貝塞爾曲線

塞爾曲線（Bézier curve），又稱貝茲曲線或貝濟(jì)埃曲線，是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。一般的矢量圖形軟件通過它來精確畫出曲線，貝茲曲線由線段與節(jié)點(diǎn)組成，節(jié)點(diǎn)是可拖動(dòng)的支點(diǎn)，線段像可伸縮的皮筋，其實(shí)就是我們通常理解的PhotoShop中的鋼筆工具。

對于貝塞爾曲線，最重要的點(diǎn)是數(shù)據(jù)點(diǎn)（路徑的起始點(diǎn)和中指點(diǎn)）和控制點(diǎn)（決定一條路徑的彎曲軌跡）。

2. 布爾運(yùn)算

爾運(yùn)算是數(shù)字符號化的邏輯推演法，包括聯(lián)合、相交、相減。在圖形處理操作中引用了這種邏輯運(yùn)算方法以使簡單的基本圖形組合產(chǎn)生新的形體，并由二維布爾運(yùn)算發(fā)展到三維圖形的布爾運(yùn)算。

在三維圖形方面，布爾運(yùn)算則是通過兩個(gè)以上的物體進(jìn)行并集、差集、交集的運(yùn)算，從而得到新的物體形態(tài)。軟件系統(tǒng)提供了4種布爾運(yùn)算方式：并集、交集、差集、減去頂層。

• 并集：將兩個(gè)形狀合并成為一個(gè)形狀，取全部形狀
• 減去頂層：用底層圖形減去頂層圖形，剩下的部分為最終圖形
• 交集：兩個(gè)圖形重疊、相交的部分
• 差集：相當(dāng)于「并集」減去「交集」之后剩下的部分

通過布爾運(yùn)算，我們能繪制出絕大多數(shù)的圖標(biāo)，但有些結(jié)構(gòu)線條復(fù)雜的圖標(biāo)無法使用相加、相減、相切進(jìn)行完成，這個(gè)時(shí)候就需要使用貝塞爾曲線刻畫圖標(biāo)。

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

1. 簡單：圖標(biāo)存在的目的，是快速傳達(dá)概念

在這一系列符號當(dāng)中，你能明白其中哪些的含義？對于這款車的駕駛者而言，可能會隨著使用時(shí)間的積累，逐漸明白其中一部分圖標(biāo)的含義。很大程度上，這是因?yàn)檫@些圖標(biāo)本身并不直觀。

我們可以從下面看到，圖標(biāo)是怎么一步步變得難以識別的：

當(dāng)圖標(biāo)開始使用我們不熟悉的含義和隱喻時(shí)候，它就自然變得難以理解。從左往右數(shù)第三個(gè)圖標(biāo)，是安全帶的提示燈圖標(biāo)，當(dāng)它亮起的時(shí)候，意味著你沒有系好安全帶。這個(gè)含義相對直觀，你可能能夠很快掌握。而最右邊的這個(gè)「電動(dòng)助力轉(zhuǎn)向系統(tǒng)警告燈」含義就非常模糊了。

最成功的圖標(biāo)設(shè)計(jì)，不僅僅是讓圖標(biāo)本身易于理解，而且對于不同的文化背景、不同年齡段、不同知識背景的人都能理解，只有做到這樣才行。

如果你想要表達(dá)的信息過于抽象，那么單獨(dú)使用圖標(biāo)，可能不是最清晰的解決方案，應(yīng)當(dāng)將圖標(biāo)和文本標(biāo)簽結(jié)合起來使用。

2. 對齊：確保每個(gè)圖標(biāo)都感覺平衡，盡量進(jìn)行視覺對齊

在這個(gè)播放圖標(biāo)當(dāng)中，盡管三角形被放置在中間位置，但是它并沒有視覺對齊，我們的眼睛看到的時(shí)候，會覺得中間的三角形說向左靠的。三角形靠左的這一邊在視覺上更重，因此它應(yīng)該向右移動(dòng)一點(diǎn)來確保平衡。

設(shè)計(jì)的時(shí)候，適當(dāng)?shù)奈⒄{(diào)就能達(dá)到平衡的效果。不要單純的相信數(shù)據(jù)，要用你的雙眼來進(jìn)行檢查和修正。

3. 簡潔：用盡可能少的詞匯來進(jìn)行表達(dá)和描述

簡潔是圖標(biāo)設(shè)計(jì)的精髓之一，因?yàn)槲覀兘?jīng)常需要在很小的屏幕上操作，圖標(biāo)可以傳達(dá)很多信息，而不同文本或者其他復(fù)雜的內(nèi)容。在用戶界面當(dāng)中，簡約準(zhǔn)確的設(shè)計(jì)風(fēng)格能夠凸顯重點(diǎn)，讓內(nèi)容發(fā)揮效用。Telegram 的圖標(biāo)設(shè)計(jì)，就非常的簡約有趣：

1）一致性

為了讓圖標(biāo)家族顯得更加和諧，始終保證相同的樣式和設(shè)計(jì)規(guī)則。

在 iOS 13 之前，蘋果的圖標(biāo)設(shè)計(jì)有著各種不同的粗細(xì)筆觸，不同的填充樣式，大小也各不相同。

任何圖標(biāo)都有著相應(yīng)的視覺重量。而視覺重量取決于圖標(biāo)筆觸的粗細(xì)、填充模式、大小和形狀這幾個(gè)屬性。而圖標(biāo)設(shè)計(jì)的難點(diǎn)就在于，如何控制所有的這些參數(shù)，做到整體的一致性。

蘋果公司最近引入了 SF Symbols 這個(gè)功能，將圖標(biāo)直接制作成為圖標(biāo)字體，在這套字體當(dāng)中，圖標(biāo)有 9 種不同的「字重」和3種不同的的風(fēng)格（也許有點(diǎn)復(fù)雜，但是絕對充分夠用）。從圖標(biāo)到符號，在填充模式、筆觸輪廓等多個(gè)不同的屬性上，確保你能挑出感覺更加和諧的圖標(biāo)。

2）避免半像素

做設(shè)計(jì)最基礎(chǔ)也是最忌諱的就是像素模糊，因?yàn)殡S著設(shè)備的不斷更新手機(jī)屏幕的顯示精致度越來高，任何一個(gè)微小的瑕疵都會在手機(jī)屏幕上被用戶明顯感知。并且會因?yàn)檫@樣的模糊問題直接降低整個(gè)UI界面的品質(zhì)度。

3）視覺風(fēng)格統(tǒng)一

統(tǒng)一的視覺風(fēng)格有很多種元素，包含圓角、線面、線條粗細(xì)、設(shè)計(jì)形式等。圓角的統(tǒng)一又分為統(tǒng)一的外圓角和統(tǒng)一的內(nèi)圓角，例如外圓角為4px內(nèi)圓角為2px，那么所有涉及到圓角的圖標(biāo)都要保持統(tǒng)一。

線形圖標(biāo)和面性圖標(biāo)最好不要混合使用，尤其是同一類的圖標(biāo)。線條粗細(xì)要全套圖標(biāo)完全一致，例如設(shè)定圖標(biāo)粗細(xì)為3px那就要統(tǒng)一為3px。當(dāng)然在實(shí)際設(shè)計(jì)中可能還有更多的設(shè)計(jì)元素需要統(tǒng)一，只要遵循這個(gè)統(tǒng)一的原則就一定能設(shè)計(jì)出一套有品質(zhì)保證的圖標(biāo)。

四、圖標(biāo)設(shè)計(jì)自查方法

圖標(biāo)的的底層價(jià)值在于它能否準(zhǔn)確的向用戶傳達(dá)信息！所以識別性是圖標(biāo)最基礎(chǔ)的要求，一個(gè)有價(jià)值的圖標(biāo)，不光在于視覺是否美觀，更在于信息傳遞的精確度，圖標(biāo)識別性主要分為語義識別和視覺識別兩部分。

1. 語義識別

語義識別的理解就是當(dāng)用戶看到這個(gè)圖標(biāo)之后，很清晰的知道這個(gè)是干什么的。如下方支付寶的圖標(biāo)掃一掃，首付款、出行、卡包?！皰咭粧摺眻D標(biāo)，與日常用戶在掃碼頁面時(shí)，都會有一個(gè)二維碼顯示區(qū)域，中間有一條線在區(qū)域內(nèi)掃瞄，基于這樣的用戶習(xí)慣和認(rèn)知，掃一掃圖標(biāo)就很好的傳遞這是掃描二維碼的意思。

2. 視覺識別

視覺識別更在乎影響用戶識別圖標(biāo)的感官因素，如顏色、復(fù)雜程度、圖標(biāo)類型的搭配等。

圖標(biāo)顏色：明度相近的色相顏色不能在一起使用，放在一起就會顯得圖標(biāo)很刺眼，我們平常說的白底黑字，意思就是為了形成顏色對比，從而突出主體。

復(fù)雜程度：明度相近的色相顏色不能在一起使用，放在一起就會顯得圖標(biāo)很刺眼，我們平常說的白底黑字，意思就是為了形成顏色對比，從而突出主體。

類型搭配：底色與圖標(biāo)類型的結(jié)合，“底色+面性”的識別性 >“底色+線性”的識別性。

統(tǒng)一性：可以從圓角大?。簣A角大小的細(xì)節(jié)很容易被忽略，因?yàn)樗某尚魏兔柽呅问降倪x取也有很大的關(guān)聯(lián)，描邊方式有內(nèi)描邊、居中描邊、外描邊。描邊的大小會根據(jù)基線來擴(kuò)展。

描邊粗細(xì)：圖標(biāo)的粗線也會影響整體圖標(biāo)的一致性如下圖所示，對比很強(qiáng)烈。

端點(diǎn)類型：平頭斷點(diǎn)較為生硬，圓頭斷點(diǎn)比較可愛活潑。

視覺統(tǒng)一：根據(jù)keyline網(wǎng)格規(guī)范設(shè)計(jì)保證圖標(biāo)的平衡統(tǒng)一。

圖標(biāo)數(shù)據(jù)小數(shù)點(diǎn)：當(dāng)圖標(biāo)中的點(diǎn)的位置或者某一部分出現(xiàn)小數(shù)點(diǎn)的場景，需要調(diào)整至整數(shù)，根據(jù)四舍五入的計(jì)數(shù)方式進(jìn)行精確，描邊大小數(shù)值可以存在“X.5”這樣的情況。

五、圖標(biāo)的可用性測試

1. 可用性測試標(biāo)準(zhǔn)

根據(jù)前面的設(shè)計(jì)原則可以推導(dǎo)出圖標(biāo)可用性的測試標(biāo)準(zhǔn)：

• 識別度：圖標(biāo)是否能讓用戶理解含義？是否是用戶認(rèn)知習(xí)慣下熟悉的圖標(biāo)？一套圖標(biāo)下是否存在與其他圖標(biāo)含義沖突？圖標(biāo)的拓展性如何？是否需要添加文字標(biāo)簽說明？
• 設(shè)計(jì)是否統(tǒng)一：表現(xiàn)在視覺大小、視覺語言、復(fù)雜程度、圖標(biāo)元素參數(shù)、整體協(xié)調(diào)性、配色。
• 品牌信息：是否有獨(dú)特性、是否可以傳遞品牌信息？
• 細(xì)節(jié)：圖標(biāo)是否簡潔、美感？

2. 可用性測試方法

測試方法主要有兩種：放在頁面中測試以及獨(dú)立頁面外測試。

測試圖標(biāo)的統(tǒng)一性，需要放在頁面中測試，根據(jù)頁面的實(shí)際使用環(huán)境，測試圖標(biāo)在頁面中是否和諧、完整；是否需要文字信息輔助說明；圖標(biāo)在頁面中是否容易被用戶找到。

可以使用A/B測試，找一些用戶通過AB版測試，衡量兩個(gè)版本見圖標(biāo)的差異性，是否出現(xiàn)用戶疑惑、失望，是否符合用戶的心理預(yù)期。當(dāng)然在測試前需要保證AB版本的圖標(biāo)大小位置完全一致，確保沒有其他變量影響測試。

測試圖標(biāo)的識別性，需要將所有圖標(biāo)單獨(dú)出來，刪除所有文字信息，如果帶有文字。判斷是否出現(xiàn)圖標(biāo)不能理解的情況。刪除文字也是考慮到測試的時(shí)候會因?yàn)槲淖中畔⒌囊龑?dǎo)，從而忽略了圖標(biāo)傳遞含義。

六、圖標(biāo)的交付

1. 圖標(biāo)的交付格式

說圖標(biāo)交付之前，先了解一下圖標(biāo)的格式有哪些。 JPG、PNG、GIF、SVG，一共四種格式。區(qū)別是什么呢？

1. JPG：自帶背景，不支持縮放
2. PNG：可以透明模式，不支持縮放，需要注意留白大小
3. GIF：一般用在動(dòng)態(tài)度表，支持透明背景
4. SVG：唯一可以支持無損縮放的矢量格式

2. 圖標(biāo)的交付方式

通常有兩種交付方式：

1. 通過藍(lán)湖進(jìn)行界面倍數(shù)適配，自動(dòng)切圖。
2. 將SVG格式的圖標(biāo)上傳到iconfont的網(wǎng)站，讓開發(fā)同學(xué)自己下載。需要注意上傳到iconfont是有嚴(yán)格設(shè)計(jì)標(biāo)準(zhǔn)，需要自己檢查是否符合上傳標(biāo)準(zhǔn)。

七、小結(jié)

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

• 《理論篇》主要講述圖標(biāo)設(shè)計(jì)的概念以及設(shè)計(jì)原則等理論內(nèi)容
• 《工作篇》主要講述工作中圖標(biāo)設(shè)計(jì)過程以及圖標(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)載。

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