Hi，小伙伴們，Q 什伍最近花了兩周時間，整理了這篇關于圖標設計的文章解析，分享給大家。

圖標是 UI 視覺體系中最基礎的部分，它在 UI 設計師的日常工作中應用非常廣泛。一個好圖標已經足夠讓設計師呈現他的價值。了解清楚圖標的設計分類，設計應用，正確的設計方法，才能將圖標設計穩穩的拿捏，提升自己。關于圖標設計的文章網上已經有很多。他們也是通過無數的實踐和理解將設計知識總結出來給大家。但讀文章僅限于“讀”，更多是需要自己補充總結再寫出來，完善自己的設計體系。這篇文章主要講一下圖標的設計要點和設計方法，幫助“入門級設計師”能更規范地上手圖標設計。

本文主要圍繞四個方面進行講解：

圖標的設計分類

1. 圖標類型

從微觀角度來看，圖標的主要組成元素包括線、面、顏色、文字等，元素可以組合的常見圖標類型共分為線性、面性、線面結合、文字四種。

線性圖標

主要是通過元素“線“去延伸，基于線的粗細大小、端點類型、圓角、描邊、顏色等基礎屬性塑造成型。常用于調性簡潔的產品設計，如移動端的標題欄、頁面的次要功能設計；B 端后臺業務類產品。細分有“單色、多色、漸變色、透明度/疊加、斷點”五種類型。

面性圖標

相比較線性圖標應用場景更加豐富，視覺表現力更強、更突出，常用于主要功能圖標，細分“單色、多色、漸變色、透明度/疊加”四種類型。

線面圖標

線和面相結合而成的一種類型圖標，這種圖標的比較難駕馭，一般產品的主要功能設計都會比較克制。市面上這種類型圖標的應用比較少。這種圖標的設計也是非常考驗設計師的設計功底，細分“單色、多色、漸變色、透明度/疊加”四種類型。

文字圖標

通過文字表達圖標語義的一種設計類型。常用語學習類，工具類和語義特殊難表達的功能。

2. 圖標風格

可以基于圖標類型，通過設計技法、軟件等創新設計出不同風格的圖標

毛玻璃效果

通過元素疊加背景虛化的方式形成的玻璃模糊質感，毛玻璃風格圖標層次豐富、通透感強。

相關教程：

2.5D

也稱等軸側風格，通過軸側拉伸的設計手法，表現形式十分突出有震撼力。

新擬態

利用光影原理融合背景形成的一種立體感的效果。應用場景比較受限制，對背景顏色依賴性比較高。

關于這個風格的前世今生：

輕質感

通過內外陰影、投影、漸變設計手法等增強圖標的層次感和飽和度。

扁平

設計組成元素簡單干凈，外形突出，信息轉達直觀

卡通

主要是使用插畫的設計手法，常用于可愛、溫暖特性的產品。

擬物寫實

辨識度極高，貼近真實生活。這類圖標設計細節非常多。

實物貼圖

用實際具體的物品來表達，如得物的鞋類商品及使用鞋的商品，盒馬果蔬類商品就是用水果和蔬菜去表達。這類圖標更貼合業務，表達簡單易懂。

C4D

屬于 3D 設計軟件延伸出來的一種新的風格。圖標質感很強，表現力豐富。

IP 形象

常用于產品底部 tab“首頁”功能和 logo 的啟動圖標上，主要便于增加產品的辨識度。

3. 圖標狀態

主要分為靜態和動態，靜態圖標位置比較固定，處于靜止狀態。動態圖標如電商類金剛區的某些功能圖標會有動畫 gif 效果。

圖標的設計應用

1. 業務和設備類型

業務類型常見的主要為 B、C 端業務，設備類型常見為移動端、網頁端，其他覆蓋的終端設備和業務不做過多贅述。圖標的設計應用主要想重點介紹這幾年比較主流的 B 端網頁類大廠項目，案例如下所示，這三款產品基本都使用了比較流行的幾款風格圖標：C4D、2.5D、新擬態。這些風格的主要特點就是專業，嚴謹、科技感、震撼力強?，F下 B 端 C 化已經成為了新的趨勢，越來越多新的設計風格也會逐步融入到 B 端的業務中。

2. 應用場景

應用場景這說明舉例主要以移動端為主，常應用于功能、啟動、導航、氛圍感圖標。其他應用場景這里就不一一舉例了。

圖標的設計規范

1. 尺寸要求

為了保持圖標元素的平衡感，通常需要使用基礎的網格尺寸來進行繪制圖標，常用的網格繪制尺寸為：16、24、36、48、64、128、512、1024。網格尺寸并不是固定的，在設計中也會存在特殊的尺寸，圖標系統包括網格尺寸和圖標元素兩部分，這里規定的尺寸是網格尺寸，而并不是圖標元素的尺寸大小。

2. 設計方法

圖標的設計規范使用 keyline 柵格規范，通過這種規范作為設計指導，來保持圖標視覺上的一致性和平衡感，在 UI 界面設計中，網格整個大小必須是 4 或 8 的倍數（根據安卓和 iOS 設計規范，安卓定義是 8 的倍數，iOS 是 4 的倍數），以此保證不同尺寸下的適配問題，使用 24*24px 的網格尺寸時，需要預留 2px 的出血線。如果有其他尺寸的圖標，如 48*48px，可在 24*24px 的基礎上增加一倍，根據自己設計的需要以此類推。

3. 命名規范

圖標命名需要規范化，因為最終都需要提供技術人員合進代碼中，代碼中一般基本全是英文命名，所以在命名前最好和技術人員統一規范，這里說明我使用中文字代替。真實項目中以英文命名為準，規范的圖標命名可以提高團隊的協作效率，個人一般習慣命名順序為：類型_位置_功能_狀態_大小。其中類型和位置可以調整，狀態和大小也可以調整，關于圖標“大小”屬性有時候在特定場景下可以省略。例如 iOS 自帶大小的后綴：@1X，@2X，@3X。

4. 導出分析

將圖標輸出給技術人員時，需要了解圖標的輸出方式，圖標輸出的格式按種類分為矢量和位圖格式，位圖導出格式通常有 PNG、JPG，矢量導出為 svg，gif 圖標是矢量和位圖都可以使用的一種格式。

圖標輸出尺寸區域需要盡量保持 1:1，輸出元素包括可見圖標元素和不可見的圖標區域，在設計過程中，可以在 keyline 柵格規范中設計圖標元素，讓可見的圖標元素在視覺上保持一致。將不可見的圖標區域設計成 1:1 尺寸輸出給程序，這樣的做法不僅是為了規范化頁面中的圖標位置，同時也是幫助技術人員更有效率的進行開發。

位圖輸出方式 1：切片工具（軟件 sketch）

將圖標元素打組，如下圖中的“記錄”，圖標底部增加一個 1:1 矩形，作為定位使用，設置不透明度為 0，代替網格，使用「切片工具」按照矩形尺寸進行拉伸選擇區域，如網格區域尺寸為“80*80px”，然后將切片和“記錄”打組，切片放置于圖標元素的下面，選中切片，在右側工具欄中進行導出，勾選“切片”設置中的“Esport group contents only”選項進行圖標導出。ps 如果這個圖標是在畫板中利用切片切圖，直接可以將畫板大小設置為對應網格尺寸?？梢允÷跃匦危珜嶋H應用還是根據自己的需要為準。

位圖輸出方式 2：畫板導出（軟件 sketch）

將整個畫板尺寸設置為網格設計尺寸，網格區域元素設置不透明度為 0，導出圖標如下，不透明區域會和圖標元素一起切取。

位圖輸出方式 1：切片工具（軟件 Figma）

將圖標元素打組，如下圖中的“記錄”，使用「切片工具」按照網格尺寸進行拉伸選擇區域，如網格區域尺寸為“80*80px”，將畫板填充色隱藏，導出預覽。切片在畫板切圖操作應用解釋同 sketch。

位圖輸出方式 2：畫板導出（軟件 Figma）

將整個畫板尺寸設置為網格設計尺寸，在網格區域將畫板填充色隱藏或不透明度設置為 0，導出預覽。導出圖標如下，不透明區域會和圖標元素一起切取。

矢量輸出方式和規范

矢量圖標以“SVG”格式導出，團隊協作圖標輸出經常會將圖標導出存放在矢量圖標庫，然后技術人員可以自己隨時獲取更改圖標色值：導出矢量圖標時，需要上傳相關平臺圖標庫，例如目前最普及的圖標庫 iconfont，對于矢量圖標的輸出上傳都有一定規范要求，如下所示：

GIF 圖標說明

關于 gif 圖標的設計也是有位圖和矢量兩種方式，位圖 gif 一般也是通過導出幀圖片排序，轉給技術人員，進行編碼形成動畫圖標；矢量的 gif 是通過 ae 和相關插件輔助導出 json 文件轉給技術人員進行編碼，一般適合 MG 動畫效果。gif 的相關內容涉及比較廣泛。這里只針對 gif 圖標做簡單說明，詳細的內容點后面有時間會再做總結。

圖標的設計案例

1. 確定圖標設計風格

任何一款應用，頁面場景都會有很多，但產品的風格主要體現在首頁設計上，從首頁設計去洞察產品的整體形象。不一樣的業務或功能對應風格圖標的使用都會不一樣，首先主要區域圖標的設計一定是契合產品的調性，例如工具類產品講究的是簡單易懂，其次同類型的產品下還可以進行業務區分，比方工具類（生活支付工具、學習工具、記賬工具、存儲工具等）。

2. 關鍵詞的語義和延伸

關鍵詞延伸可以進行劃分為主要關鍵詞和間接關鍵詞，主要關鍵詞（如 A1、A2、A3….），主要關鍵詞A1可以再延伸間接關鍵詞（如A1-1、A1-2、A1-3…），如果腦洞夠大，還可以進行三級關鍵詞類推。

3. 圖標設計自檢事項

識別

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

（1）語義識別

語義識別的理解就是當用戶看到這個圖標之后，很清晰的知道這個是干什么的。如下方按照網格規范臨摹的支付寶的首頁的主功能圖標。掃一掃，首付款、出行、卡包；例如“掃一掃”圖標，平常用戶在掃碼頁面時，都會有一個二維碼顯示區域，中間有一條線在區域內掃描，基于這樣的用戶習慣和認知，掃一掃圖標就很好的傳遞這是掃描二維碼的意思

（2）視覺識別

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

• 圖標顏色：

明度相近的色相顏色不能在一起使用，比如右邊的亮青色和白色，放在一起就會顯得圖標很扎眼，視覺原則中強調白底黑字，就是為了做對比，突出重點。

• 復雜程度

在設計前，我們一定考慮圖標的使用場景，自己做設計稿的時候和真實場景圖標的應用還是有很大差別，例如下列一組底部 tab 的導航圖標，在圖標尺寸比較小的場景中，一定要確保圖標的簡潔，避免過多的元素干擾，要便于用戶記憶和識別。

• 類型搭配

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

統一性

圖標統一性：在圖標設計的時候，我們需要注意圖標表達的一致性，可以從以下幾點去注意；圓角大小，描邊粗細，描邊斷點細節，視覺統一，角度，間距，圖標數據小數點；

• 圓角大小

圓角大小的細節很容易被忽略，因為他的成形和描邊形式的選取也有很大的關聯，描邊方式有內描邊、居中描邊、外描邊。描邊的大小會根據基線來擴展。

• 描邊粗細

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

• 斷點類型

斷點類型選擇也是需要根據場景去使用，平頭斷點比較生硬，圓頭斷點比較可愛活潑。如下圖所示：

• 視覺統一

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

• 圖標角度

角度也是統一性中常見的基本要素，一般根據相應的倍數規范進行角度變化。

• 圖標元素間距

圖標中的元素上下、左右之間的距離需統一對稱。

• 圖標數據小數點

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

美感

• 飽滿

飽滿度的提升也能體現圖標的精致感，這也是考慮圖標視覺識別的一個重要因素。根據網格系統，通常也是按照圖標元素在固定矩形柵格中的位置比例來看整體效果，再判斷是否飽滿。如之前做的一個充值的圖標，增加面積，增大圓角。

• 透析感

圖標透析感的體現在于圖標之間的間距，描邊粗細，導致的空間留白是否合適，好的透析感圖標設計會讓圖標更加有靈性，不會讓用戶看了之后覺得沉悶壓抑，如下案例支付寶線性圖標描邊大小的對比，面性圖標為自己項目設計的。

風格

圖標風格：圖標的形式主要是屬性形式和表現形式兩種

• 屬性

圖標設計是會需要先去根據對應圖標的基本屬性進行的造型繪制，給圖標定型，首先語義表達上要精準，其次要根據具體業務和場景確定圖標骨骼基調。如下案例：

• 表現

圖標表現形式在文章第一部分進行過詳細的描述和分類。就是通過什么樣的表達形式或技法去將造型塑造的更貼合場景。

在比如這組面型圖標通過形式組合、留白、增加透氣感、豐富層次感。

品牌關聯性

品牌形象現在已經是提升用戶產品認知的一個重要手段，品牌需要通過不斷的積累才能發揮更大的價值，品牌宣傳也是一個比較長期的行為，所以現在很多圖標設計也在融入這些元素。

品牌顏色：顏色是最基礎的表現元素，圖標設計也會考慮品牌顏色，給品牌傳播賦能。如下案例支付寶。

品牌 logo，不管是文字和圖形、ip 形象，都可以在圖標設計中進行體現和場景相結合，如下案例：美團、餓了么、盒馬、飛豬

關于圖標設計的分享總結到此就結束了，感謝大家的閱覽，希望能幫到大家對圖標有更全面的認識！

UI 設計視覺指南-圖標篇就算完結了，咱們下篇文章見。