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

一、圖标的繪制流程

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. 語義識别

語義識别的理解就是當用戶看到這個圖标之後，很清晰的知道這個是幹什麼的。如下方支付寶的圖标掃一掃，首付款、出行、卡包。“掃一掃”圖标，與日常用戶在掃碼頁面時，都會有一個二維碼顯示區域，中間有一條線在區域内掃瞄，基于這樣的用戶習慣和認知，掃一掃圖标就很好的傳遞這是掃描二維碼的意思。

2. 視覺識别

視覺識别更在乎影響用戶識别圖标的感官因素，如顔色、複雜程度、圖标類型的搭配等。

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

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

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

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

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

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

視覺統一：根據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 協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部