圖標設計師分享給你，icon設計的技巧與設計要點

圖標是每一個現代UI中不可或缺的組成部分，它們不僅能協助UI布局組織內容，而且輕量級的圖標融入界面也不會喧賓奪主。

不僅手機和平板的APP UI中會大量用到各種圖標，智能手錶的界面中也是如此，這正是因為圖標具備快速直觀傳達信息的能力。

在尺寸有限的移動端界面上，小小的icon可以更加簡單高效的表達含義，並且給用戶正確和友好的指引。所以對於UI設計師來說，與icon們相愛相殺無疑是每天日常。

儘管圖標有潛在的優點，但如果設計時不考慮其潛在的負面影響，也會常常導致可用性問題，那怎樣能做出高質量的圖標設計呢？就來看看在圖標設計中使用到的技巧。

01

捕捉對象的特徵

設計師們有時會過於注重形式，忽略了本身的功能，導致圖標難以識別，這打破了它最重要的圖形意象屬性，圖標的傳達含義功能必須放在首位。按照定義，圖標是一個對象或動作的視覺體現。如果對於用戶而言，這個對象或行動不明確，該圖標就立刻失去它的實用價值，並成為一個視覺干擾。

以下是一些在用戶心中享有普遍共識的圖標。

對於icon設計最重要的一點是當你設計出一個圖標，用戶能不能立即辨認。無論是青蛙還是鉛筆，它所表達意義的識別性，必須一目了然.必須具備經典的隱喻特徵。

02

讓圖標簡單、通用

對於圖標設計師來說，設計圖標的關鍵在於讓圖標盡量簡單，瞄準一個風格和目標。這有助於讓軟體開發者更加靈活的使用圖標，增加圖標的可用性。

「關於趨勢，我們覺得保持圖標的簡單和基本特徵是非常重要的，我們遵循這個趨勢」——DryIcons

圖標設計理念的本質是減到最簡形態，圖標的作用是輔助理解，設計圖標，要明確圖標要表達的意思，做到讓用戶一看即可明白圖標的含義，並且要尊重用戶使用圖標的習慣，切勿過度設計，讓用戶難以理解。所以，識別性是圖標設計第一要務，也是精髓所在。

03

讓圖標風格統一，視覺表現統一

隨著設計風格的不斷變化，圖標的風格大致可以分為：擬物化、扁平化、線框、MBE等等。風格沒有好壞，不同風格有不同的特性，要根據圖標的使用場景去決定。圖標的簡易程度、線條的粗細都能影響圖標的風格。簡而言之，視覺表現上統一性，是好圖標的前提。

MBE風格

線框風格

扁平色塊風格

雖然在不同的頁面和場景中，icon可以用不同的風格來表現，但當他們表示相同功能的時候，記得使用同樣的視覺元素，再套上當前頁面的風格。例如在不同頁面出現的公積金相關圖標，用的都是同樣形狀的小樓。

04

使用一致的光源

一個特別有用的技巧：當你在設計一系列圖標時,不緊緊要在風格上一致,像「光源」這些細節也需要注意.雖然這是次要的，但這會影響圖標的整體質量。在 Windows Vista 裡面，圖標會在操作系統間有不同的光源，但每一個單元的圖標是一致的。

05

表達足夠準確，消除理解上的差異

良好的用戶體驗可以定義在很多方面，但衡量標準之一是減少了多少用戶思考的成本。清晰是一個好界面的最重要特徵。圖標的設計應該幫助用戶毫不費力知曉他們要做什麼。

蘋果郵箱的標準化屏幕。你能準確的定義每個圖標表達的含義嗎？

我們以Airbnb的App底部icon來舉個栗子，他們選用了一個很有意思的小樹葉icon，當沒有文案說明的時候，想必一千個用戶心裡有一千個哈姆雷特，大家都會有自己的理解。

所以說icon是輔助的表達，文字才是標準答案，除了前面所說的大眾完全熟知的icon，其他的最好附上相應文案，以免用戶理解誤差。

有統計表示，對於帶有標籤的圖標，88%的情況下，用戶輕點圖標時可以準確地預測接下來會發生什麼。對於沒有標籤的圖標，這個數字下降到60%。對於那些特殊的圖標，這個數字只有34%。

06

矢量格式的圖標的運用

圖標通常在一個尺寸範圍內使用，因此創建一個視覺效果很棒的可縮放矢量圖形，可以有多種用途。當你需要不同尺寸時，矢量繪圖可以讓你不需要重繪。

相反，矢量繪圖並不是圖標設計師們的最佳方法，由於許多icon需要非常小的尺寸，矢量往往不能很好的呈現，所以必須在指定尺寸內重繪。

07

功能型與展示型圖標

功能型icon最好選擇用戶熟悉的icon元素，對於App中的操作功能，下圖都是被無數產品反覆利用的、已經約定俗成的icon，除此之外還有「放大鏡=搜索」「小房子=首頁」等等，用戶已經潛移默化的接受這些icon的意思，並沒有學習成本，所以使用這些熟悉的元素是十分必要的。

對於入口或展示型icon來說，我們要選擇主要的元素，表意要簡潔，可以適當聯想。

在這些例子中，「信用卡分期」一定要畫卡片嗎？「附近銀行」一定要畫銀行嗎？「網貸評級」一定要畫網貸嗎？我們還是會具體情況具體分析，對關鍵詞做一些取捨。在這裡作為一個工具的「附近銀行」的功能點在於定位，而非強調銀行本身，所以最後還是選擇了定位符號來表達了這項功能。

很多時候我們要表達的內容並不具象，在這個時候就可以進行適當的聯想，去畫一個相關的物體。比如「公積金」就很很抽象，但是它與房子有關；「記賬」是個動作，但是「賬本」是個東西，這樣表達起來就簡單多了，也更親切。

設計icon不管是大尺寸圖標還是小尺寸清楚是非常重要的，下面我們來了解下icon設計的幾個要點：

像素對齊

01

細節決定圖標質量，一般情況下，圖標設計用矢量設計方法，做到像素對齊，細節到位。

圖標柵格設計法便於像素對齊

柵格法圖標設計

多用布爾運算

02

只有一個圖層方便後期調整，方便交接使用。做圖標設計，為了做到更加精準、規範，盡量使用圖形工具，少用鋼筆工具，便於後期修改。

合適的大小

03

保證一組圖標視覺上大小一致。畫icon之前，我們可以把表示最大尺寸的框畫出來，在這個框內，icon不要畫得太滿，要有適當留白。同時，為了視覺上的統一，圓要略大於方形。遇到傾斜的圖標，可以先正著畫好了再旋轉角度。

差異性（對比）

04

對於整套圖標設計而言，要放大圖標之間的差異性，減少相似性，讓圖標要表達的意思拉開差距，易於識別。

沿著UI的發展趨勢，icon的風格經過了各種各樣的變遷，從擬物到扁平、從靜到動，有的化繁為簡，有的更加多變有個性，不過道理仍舊是萬變不離其宗的。

icon設計看似簡單但是講究一點不少，既要表達準確，還要設計精確，相信一波一波的設計師都是在實戰中摸爬滾打過來的。

關注精彩內容，要先長按這裡哦~

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！