最全的圖標設計指南，設計師必備

Sponsor

今天是是一篇關于各種圖標設計指南和技巧對的分享，包括圖標風格、圖標功能、圖標設計技巧、圖標設計教程、圖標網站素材推薦。

目錄：
1. 圖標風格：線性圖標、面性圖標、雙色線面、漸變色圖標、毛玻璃、不透明、輕擬物/微扁平
2. 圖標功能：應用圖標、金剛區圖標、功能圖標、標簽欄圖標
3. 圖標設計技巧視覺一致：像素對齊、識別度、線面統─、描邊統一、斷點技巧
4. 圖標設計教程：毛玻璃
5. 圖標網站素材推薦：flaticon、iconfont、iconsdb、icons8、iconfinder、thenounproject

一、圖標風格

1.1 線性圖標

線性圖標特點簡潔、干練、識別度較高，視覺降噪，無更多干擾性適用于APP標簽欄、功能模塊及后臺系統側邊欄等

1.2 面性圖標

面性圖標更能強化產品本身特性，視覺更豐富飽滿，吸引用戶注意力適用于APP標簽欄、金剛區及后臺系統側邊欄等

1.3 雙色線面圖標

雙色圖標的兩種色調一般是運用品牌色進行制作，突出圖標特性的同時，又能強調品牌調性適用于APP金剛區及功能區等

1.4 漸變色圖標

漸變色圖標的色彩更能吸引用戶注意力，主色調運用品牌色，結合不透明圖標等更具設計感適用于APP金剛區及功能區等

1.5 毛玻璃

毛玻璃圖標是近兩年比較流行的風格，很多APP金剛區及個人中心都采用了毛玻璃/磨砂玻璃圖標適用于APP金剛區及功能區等

1.6 不透明圖標

不透明圖標為某部分調整不透明度得到有層次感的圖標，更年輕、簡約適用于APP標簽欄、功能模塊

1.7 輕擬物/微扁平

輕擬物圖標介于扁平與立體圖標之間，有一點質感又不是很立體，更大程度的還原事物本身適用于游戲、外賣、IP衍生等APP金剛區及功能區等

二、圖標功能

2.1 應用圖標

通俗的說為APP產品的logo，也叫啟動圖標，應用于桌面圖標,ios應用商店等多個地方。該圖標簡潔易理解，能夠明確表達產品定位及核心功能，有名稱首字、全稱、IP、首字母、及符號等多種格式構成

2.2 金剛區圖標

金剛區圖標作為APP產品的重中之重，用戶點擊、提升轉化率的關鍵，在風格、表意、品牌感、設計感等多個方面應反復斟酌細化

2.3 功能圖標

功能圖標為了提升用戶可讀性，圖標相對于文字識別度極高，用戶反應時間短，同時也能提升版面簡潔性及設計感，有更多留白，增加呼吸感

2.4 標簽欄圖標

APP底部用于切換頁面的圖標，有線性、面性及其他形式，分為點擊態/選中態，未點擊態/未選中狀態，圖標顏色為品牌色或品牌色與輔助色結合

三、圖標設計技巧

3.1 視覺一致

根據米勒-萊爾錯覺，在做設計圖時，不能單純的靠軟件自帶的左對齊、右對齊等方式達到物理對齊，盡可能的調整元素，使之視覺對齊

3.2 像素對齊

ps這類位圖軟件作圖時，容易造成圖標模糊，解決辦法:使用直接選擇工具選中虛掉的兩個錨點ctrl+t，再按鍵盤的上下左右鍵調整下位置，圖標就會變得清晰

3.3 識別度

圖標是弱化實物的表現結果，需簡潔明了，易識別，畫圖標時，應去掉冗余的元素，用基本的形狀保留最基礎的部分，讓圖標更易理解

3.4 線面統一

在整組圖標中，利用一致性自檢圖標是否符合整體調性。包含圖標顏色、線性/面性圖標、描邊粗細、大小、形狀等多方面

3.5 描邊粗細統一

在整組圖標中，利用一致性自檢圖標是否符合整體調性。包含圖標顏色、線性/面性圖標、描邊粗細、大小、形狀等多方面

3.6 斷點技巧1

圖標由幾個元素組成時，斷點優先選擇在連接處，讓整個圖標看起來更自然和諧

3.7 斷點技巧2

分析圖標復雜度，復雜度較低的部分，通過斷點來增加圖標復雜度，以達到更高的平衡感

3.8 斷點技巧3

針對對稱圖標，避免在對稱處(正中間)斷點，會顯得比較死板，稍微不對稱更柔和自然

四、毛玻璃圖標設計教程

4.1 拆分圖層并繪制基本圖形

由矩形、圓、鋼筆工具繪制基本圖形。山和太陽(左邊的兩個形狀）命名圖層1;大矩形(第3個形狀)命名為圖層2;最右邊矩形命名為圖層3

4.2 填充顏色和疊放

圖層1色值(FFFFFF)，圖層2色值(FFECE7)，圖層3色值(FC7856-FFBAA9)同時進行位置疊放

4.3 復制圖層

復制圖層3(漸變背景層)，放于圖層2(大矩形)的上面

4.4 高斯模糊并剪切蒙版

把剛復制的圖層進行高斯模糊（模糊值20，不透明度90%，僅做參考)，左圖把剛剛高斯模糊的圖層跟圖層2（淺橙色的大矩形)進行剪切蒙版，如右圖

4.5 調整圖層顏色及投影/合并圖層

調整圖層1(山和太陽)色值為FFF3FO，并添加投影把調整好的圖層1(山和太陽)與圖層2，3(圖標背景)疊放合并，得到右圖

4.6 添加細節

為了使圖標細節更豐富，更有質感，對比度更強，增加了1px的描邊。圖層2(大矩形)漸變描邊色值:FFE8E3-FFD3C7。圖層3(小矩形)漸變描邊色值:FC7856-FFB9A8

4.7 整套效果圖添加細節

按照上述步驟，可作出整套毛玻璃圖標

五、設計師必備圖標網站

作者 | 陳亞
來源 | 站酷（chenya.zcool.com.cn）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。