編輯導語：當接到圖標設計的需求時，首先應該怎么做呢？本文作者從圖標的繪制流程、繪制方式、設計原則、可用性測試等方面，對圖標設計進行了分析，一起來看一下吧。

一、圖標的繪制流程

1. 關鍵詞提取以及頭腦風暴

當接到圖標設計需求時，需要將信息中的關鍵詞進行提煉，并且發散思維獲取一些關鍵詞的同義詞、近義詞。提供最初的設計方向。

2. 文字符號化

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

3. 使用場景梳理

梳理圖標所使用的環境、場景。比如標簽欄、導航欄在頁面中屬于一級使用場景，使用視覺重量更大的面形圖標。個人中心、分類、詳情頁屬于二級使用場景，使用線型圖標居多。更多強調內容本身。

二、圖標的繪制方式

1. 貝塞爾曲線

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

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

2. 布爾運算

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

在三維圖形方面，布爾運算則是通過兩個以上的物體進行并集、差集、交集的運算，從而得到新的物體形態。軟件系統提供了4種布爾運算方式：并集、交集、差集、減去頂層。

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

通過布爾運算，我們能繪制出絕大多數的圖標，但有些結構線條復雜的圖標無法使用相加、相減、相切進行完成，這個時候就需要使用貝塞爾曲線刻畫圖標。

三、圖標的設計原則

1. 簡單：圖標存在的目的，是快速傳達概念

在這一系列符號當中，你能明白其中哪些的含義？對于這款車的駕駛者而言，可能會隨著使用時間的積累，逐漸明白其中一部分圖標的含義。很大程度上，這是因為這些圖標本身并不直觀。

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

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

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

如果你想要表達的信息過于抽象，那么單獨使用圖標，可能不是最清晰的解決方案，應當將圖標和文本標簽結合起來使用。

2. 對齊：確保每個圖標都感覺平衡，盡量進行視覺對齊

在這個播放圖標當中，盡管三角形被放置在中間位置，但是它并沒有視覺對齊，我們的眼睛看到的時候，會覺得中間的三角形說向左靠的。三角形靠左的這一邊在視覺上更重，因此它應該向右移動一點來確保平衡。

設計的時候，適當的微調就能達到平衡的效果。不要單純的相信數據，要用你的雙眼來進行檢查和修正。

3. 簡潔：用盡可能少的詞匯來進行表達和描述

簡潔是圖標設計的精髓之一，因為我們經常需要在很小的屏幕上操作，圖標可以傳達很多信息，而不同文本或者其他復雜的內容。在用戶界面當中，簡約準確的設計風格能夠凸顯重點，讓內容發揮效用。Telegram 的圖標設計，就非常的簡約有趣：

1）一致性

為了讓圖標家族顯得更加和諧，始終保證相同的樣式和設計規則。

在 iOS 13 之前，蘋果的圖標設計有著各種不同的粗細筆觸，不同的填充樣式，大小也各不相同。

任何圖標都有著相應的視覺重量。而視覺重量取決于圖標筆觸的粗細、填充模式、大小和形狀這幾個屬性。而圖標設計的難點就在于，如何控制所有的這些參數，做到整體的一致性。

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

2）避免半像素

做設計最基礎也是最忌諱的就是像素模糊，因為隨著設備的不斷更新手機屏幕的顯示精致度越來高，任何一個微小的瑕疵都會在手機屏幕上被用戶明顯感知。并且會因為這樣的模糊問題直接降低整個UI界面的品質度。

3）視覺風格統一

統一的視覺風格有很多種元素，包含圓角、線面、線條粗細、設計形式等。圓角的統一又分為統一的外圓角和統一的內圓角，例如外圓角為4px內圓角為2px，那么所有涉及到圓角的圖標都要保持統一。

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

四、圖標設計自查方法

圖標的的底層價值在于它能否準確的向用戶傳達信息！所以識別性是圖標最基礎的要求，一個有價值的圖標，不光在于視覺是否美觀，更在于信息傳遞的精確度，圖標識別性主要分為語義識別和視覺識別兩部分。

1. 語義識別

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

2. 視覺識別

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

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

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

類型搭配：底色與圖標類型的結合，“底色+面性”的識別性 >“底色+線性”的識別性。

統一性：可以從圓角大?。簣A角大小的細節很容易被忽略，因為它的成形和描邊形式的選取也有很大的關聯，描邊方式有內描邊、居中描邊、外描邊。描邊的大小會根據基線來擴展。

描邊粗細：圖標的粗線也會影響整體圖標的一致性如下圖所示，對比很強烈。

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

視覺統一：根據keyline網格規范設計保證圖標的平衡統一。

圖標數據小數點：當圖標中的點的位置或者某一部分出現小數點的場景，需要調整至整數，根據四舍五入的計數方式進行精確，描邊大小數值可以存在“X.5”這樣的情況。

五、圖標的可用性測試

1. 可用性測試標準

根據前面的設計原則可以推導出圖標可用性的測試標準：

• 識別度：圖標是否能讓用戶理解含義？是否是用戶認知習慣下熟悉的圖標？一套圖標下是否存在與其他圖標含義沖突？圖標的拓展性如何？是否需要添加文字標簽說明？
• 設計是否統一：表現在視覺大小、視覺語言、復雜程度、圖標元素參數、整體協調性、配色。
• 品牌信息：是否有獨特性、是否可以傳遞品牌信息？
• 細節：圖標是否簡潔、美感？

2. 可用性測試方法

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

測試圖標的統一性，需要放在頁面中測試，根據頁面的實際使用環境，測試圖標在頁面中是否和諧、完整；是否需要文字信息輔助說明；圖標在頁面中是否容易被用戶找到。

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

測試圖標的識別性，需要將所有圖標單獨出來，刪除所有文字信息，如果帶有文字。判斷是否出現圖標不能理解的情況。刪除文字也是考慮到測試的時候會因為文字信息的引導，從而忽略了圖標傳遞含義。

六、圖標的交付

1. 圖標的交付格式

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

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

2. 圖標的交付方式

通常有兩種交付方式：

1. 通過藍湖進行界面倍數適配，自動切圖。
2. 將SVG格式的圖標上傳到iconfont的網站，讓開發同學自己下載。需要注意上傳到iconfont是有嚴格設計標準，需要自己檢查是否符合上傳標準。

七、小結

整個圖標設計分為三篇來講述的。

• 《理論篇》主要講述圖標設計的概念以及設計原則等理論內容
• 《工作篇》主要講述工作中圖標設計過程以及圖標落地
• 《分享篇》主要分享圖標設計的工具、圖標網站、圖標設計團隊或者設計師

第二篇內容就到這里結束了。

本文由 @卡洛設計 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash ，基于 CC0 協議。