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

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

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

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

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

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

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

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

“關于趨勢，我們覺得保持圖标的簡單和基本特征是非常重要的，我們遵循這個趨勢”——DryIcons

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

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

MBE風格

線框風格

扁平色塊風格

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

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

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

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

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

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

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

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

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

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

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

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

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

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

像素對齊

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

圖标柵格設計法便于像素對齊

柵格法圖标設計

多用布爾運算

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

合适的大小

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

差異性（對比）

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

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

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

我是小勇，一個熱愛音樂的大男孩兒！

xiaoyuyong_920

PS視覺教程（xiaoyong920922）

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