前面已經說完了工具圖標相關的設計規范和方法，本章就開始進入下一個主題，關于裝飾圖標的設計。

 

 

在裝飾圖標中，就沒有工具圖標那么嚴謹的規范需要遵循，也就意味著自由度越高，可以任意發揮。顯然，想要通過一篇文章掌握所有的裝飾圖標視覺設計方法，并不現實，新手只要將精力聚焦在最常用的幾種圖標風格的設計上即可。

裝飾圖標最主要的應用區域，集中在首頁的快速入口上，也是今天多數應用中會使用的組件。下面，我們會通過講解國內主流應用中的幾種裝飾圖標的設計。

 

 

8.1 扁平插畫風格

 

裝飾圖標的主要作用是豐富視覺體驗，對于識別性的要求較弱，所以我們可以在這里應用更復雜的圖形和添加更多的細節。在這里的扁平插畫風格設計更具象，而不是像工具圖標一樣的抽象化，所以完整的采用扁平插畫的設計是沒問題的。

例如在肯德基客戶端首頁的服務分類中，使用的圖標就是依據扁平插畫的形式設計的，有較多的色彩和完整的細節。

 

這類圖標設計的并不困難，只要具備了工具圖標的設計基礎，就可以很快學會并運用。它的設計特征是這樣的，先通過繪制具體的圖形輪廓，然后為這個輪廓內添加細節，并對不同的面填充不同的色彩進行區分。

下面，我們通過講解幾個圖標的設計過程，幫助大家學習這種設計風格。

 

1. 優惠券圖標

 

通過模擬現實世界的優惠券樣式，確定出基本的線性輪廓。

但作為裝飾圖標來說，這樣的設計目前有點簡陋，左側空出了大量的留白，所以我們要考慮如何增加細節來豐富這個區域。于是，使用 % 號就可以比較好的標示折扣。

最后，開始為圖標填色。因為在這套圖標中，紅色是主要基調，所以我們不能大面積的使用其它顏色，于是就將其中一側進行留白處理，只修改了它描邊的色彩。并且還在票據兩側的連接處添加了一個用來標示陰影的豎線。

 

2. 店鋪圖標

 

 

3. 我的卡包圖標

 

 

 

8.2 漸變幾何背景風格

 

和其它風格比較，在快速入口中，線上案例應用得最多的風格其實是漸變幾何背景的設計方案，即在一個應用了漸變色的背景上帖了一個線性或面性的圖標。

這種風格的設計，主要在于背景漸變色的應用上，通常，在一組彩色快速入口的圖標中，要讓它們的漸變色看起來自然和諧，是需要技巧的。

例如有四個圖標，首先要定義出不同的色相，然后再對它們應用相同的漸變模式。例如，使用相同的漸變角度，然后在漸變的起始色使用該色相，在結尾使用不同明度、飽和度的色彩。

之后，再在上方置入圖標的圖形，并為它們添加適當的陰影即可。

 

如果在這個基礎上，還想再添加細節，那么就可以在上方的圖形中添加一些折疊的陰影效果，強化立體感。

 

 

8.3 炫彩漸變風格

 

這是一個比較奇特的設計風格，在過去只存在于飛機稿中，是一種單純為了追求視覺表現力的設計形式，通過高飽和的漸變、撞色，抓取瀏覽者的眼球。

這類風格的設計，在確定了圖形以后，就是為它們填充高飽和度的漸變色。和扁平插畫比較不同的是，色彩的填充不是用來描繪物體的顏色，而僅僅是視覺表現的一種方法，所以顏色的添加追求的不是 “合理”，而是純粹的 “好看”。

并且，通常這類圖標還會使用前兩年開始流行的彩色投影，增加界面本身的層次感。下面，我們也通過 3 個案例，為大家演示一下這類圖標設計的過程。

案例1：

案例2：

 

案例3：

 

 

 

 

 

8.4 實物貼圖風格

 

最后，講講實物貼圖的圖標風格。這種圖標出現在涉及到實物產品的應用中，例如電商應用，智能硬件控制應用等等。

這類設計看起來很簡單，只要畫出一個幾何的背景，并建立蒙版將實物圖置入進去即可，但還是有不少新手會犯的錯誤，下面我們主要說說常見的問題有哪些。

第一，就是物體的透視。和工具圖標一樣，我們要盡可能的保證整組圖標中圖形的形狀和透視可以統一，如果實物圖采用的透視不一致，那么空間的對立感就更強，也有更容易被用戶覺察到的違和感。

 

第二，形體和比例。當我們采用實物照片時，該物體完整的形狀我們往往不能控制，但切記的是，不是物體本身是什么形狀我們都要完整的置入進去。

比如如果入口中有口紅和香水兩種，口紅是細長的而香水是圓形，那么我們可以做的就是要放大口紅，最終只展示它的局部，否則它們的對比會完全失衡。

第三，圖形的質感。實物的圖形，還有一個非常重要的細節，就是它們的質感。這種質感指的不是物體本身的材質，而是攝影、后期產生的質感。如下圖的對比，同一件商品，手機直出的圖，和經過商品精修的圖，展現出來的質感是完全不一樣的。

如果強行將有精修痕跡和普通照片摳出來的商品放到一起，也只能給用戶產生巨大的違和感。所以，如果提供給我們的素材本身質感不同，那么我們就要在 PS 中對它們進行調試，盡可能保證它們的一致。

第四，前后對比。因為是攝影圖，所以圖形本身包含的細節會非常豐富，而且色彩也可能比較多。在采用了幾何背景時，就要保證它能更好的襯托主體物。如果使用較強的顏色，或是太多細節，就會導致前后元素的分離度不足，無法凸顯物體本身。所以，多數采用這種風格的設計案例中，背景用色都使用飽和度偏低的配色。

只要能保證不犯上面 4 種錯誤，那么設計這類圖標時，就能保證最終的效果不會太差。

 

 

 

 

 

 

 

本節我們開始講解最后一種類型的圖標——啟動圖標。在第一章我們已經對啟動圖標有了基礎的認識，所以下圖再簡單回顧一遍。

想要在啟動圖標設計上入門，就要先從規范開始學習，然后了解不同的風格以及對應風格的設計過程。如果沒有比較明確的學習目標，就會和學習 LOGO 設計一樣無從下手。

 

 

9.1 啟動圖標的設計規范

 

說到啟動圖標的規范，首先會想到的，就是 iOS 提供的圖標柵格。通過這個柵格，會規范圖形的尺寸，以及所處的位置。

這個模板和工具圖標的使用方法類似，我們在后面的案例進一步講解。接著，來說明一個更重要的問題，就是啟動圖標畫布的尺寸。

默認的情況下，我們使用 1024 * 1024 尺寸來設計啟動圖標，這個參數在 iOS 和 Android 中都適用。

之所以使用這么大的尺寸，是由屏幕分辨率的差異和使用場景導致的。

第一，在手機硬件中，根據屏幕規格的不同，展示圖標的實際像素量也不同，即圖標的尺寸會發生改變。

例如在 1x 的屏幕中，圖標使用 60×60px，在 2x 的屏幕中，就使用 120×120pt，3x 則是 180×180。

第二，不同設備和顯示場景里，應用的圖標尺寸也不一樣。對于一個真實的項目來說，圖標不是只放在手機上運行，無論 iOS 和 Android 的 APP 都可以在 PAD 上安裝，圖標尺寸規格就不同。并且，在網頁或者手機應用商店里，也需要展示啟動圖標，顯示的規格和真實應用列表中又不同。

所以，在 iOS 官方的圖標模版中，我們會看見里面羅列了非常多的圖標尺寸，我們只需要設計第一個 1024 規格的，將這個圖標置入到 PS 的智能對象，或者 Sketch 的 Symbol 中，就可以一次性生成所有尺寸，不需要我們自己手動調整各種規格的圖標輸出。

應該有同學這時候還會產生疑問，模版里的畫布就是一個正方形，但是大多數手機的 APP 圖標使用的是圓角，所以，應該如何制作這個圓角，以及它的相關參數呢？

真實項目中，除非項目的特定要求**，只需要提交正方形的圖形即可**，之后無論是 APP Store，還是多數安卓應用商店，都會自動對該圖形進行裁切，生成符合自己系統的圓角圖標。

如果我們想要在設計出正方形圖形后預覽真實的效果，就可以用我們準備的 PSD 模版，將正方形置入到模版中即可。

在設計已經確認以后，我們就要導出這些圖標。因為啟動圖標有很多擬物的設計或會使用真實的攝影素材，所以應用商店提交的格式會選用位圖格式而不是矢量格式，所以導出啟動圖標，只需要導出對應尺寸的 PNG 即可。

在規范中我們提到的這些素材和模版，我們提前整理出來了，獲取方法：

在公眾號 超人的電話亭 中回復 “啟動圖標” 即可。

 

 

9.2 啟動圖標的設計演示

 

9.2.1 圖標形式

 

在一些比較基礎的應用類型中，通常會直接使用工具圖標的圖形設計啟動圖標。因為基礎的 APP 服務大多有表意極其清晰的工具圖標與之對應，例如郵箱、計算器、音樂、地圖等類型應用，企業往往在使用一些抽象的品牌化圖形與表意更清晰的工具圖標中選擇后者。

工具圖標的設計其實很簡單，就是在畫板中完成兩種元素的設計，一個是背景，一個是上方圖標。

背景的設計，有比較常見的就兩種類型，純色、漸變。而上方圖標的設計里，包含的類型就是我們前面講過的幾種常見的工具圖標。所以你看，只要將它們組合，就可以很輕松的設計出符合主流特征的啟動圖標。

所以，如果我們要設計一款筆記應用，那么就可以先畫一個線性的筆記圖標，然后再將它置入格線模版中確認大小，再分別為它們上色，就可以完成設計了。

 

9.2.2 文字形式

 

 

文字形式的設計，背景和上方一樣，也只使用純色和漸變，但這種設計的主要難點在與字體的設計上。

想要放文字，大家首先想到的肯定是直接用字體打進去，但是切記，字體的商業版權問題是不能視而不見的。選擇字體前，一定要關注該字體是否是免費，百度或者官網都可以查詢。或者一開始就在免費字庫中挑選，如思源黑、思源宋、王漢宗系列等等。

如果覺得直接使用字庫文字太沒有設計感，那可以選擇做一次字體的二次創作，對于新手來說簡單一點。即一開始挑選一個合適的字體，然后在 AI 中對該字體進行臨摹，再對細節進行重新加工，比如襯線的調整，壁畫粗細的調整等等。

比如要設計一個我的應用，那么我可以取 “超人的電話亭” 的第一個字——超，作為圖標上方的文字。然后我選用 “方正蘭亭大黑” 作為基礎字形，對它進行重構即可。

最后建議，如果不是一些比較嚴肅或是傳統的題材，盡量不要選用宋體或是楷體進行設計。

 

9.2.3 擬物形式

 

雖然現在整體設計環境中，擬物已經被扁平取代，但不代表它已經消失，或是在形式上不合理。適當的擬物設計會讓我們對應用功能的認識更清晰，且更有趣味性。

還是老慣例，我們從簡單的擬物設計入手。目前擬物的領域中，使用最普遍的風格也是新手最容易學習的風格，即 “輕擬物” 的設計。這種風格需要刻畫的細節相對較少，更易于我們掌握，只要能用好漸變即可。

比如，iOS 的官方應用——文件，圖標的形式就符合輕擬物的特征。簡單分析一遍，即在確定完輪廓后，通過漸變填充來表示物體本身的高光和陰影，并添加投影來制造立體感。

如果要設計一些更復雜的擬物圖形，可以通過多做擬物圖標的教學會更有幫助。在今天扁平化圖形當道的環境中，設計得精良的擬物圖標往往可以在滿屏的扁平圖標中脫穎而出，助于吸引用戶啟動應用。

 

 

 

 

前面的章節，已經系統的講解了圖標的設計方法，相信認真學習并實踐的同學，已經可以設計出優秀的圖標了。

但是，在 UI 設計中，圖標不是孤立存在的。我們學習圖標的設計，不是為了畫一組套圖，然后上傳到設計平臺中分享或求贊，而是要在真實的項目中發揮作用。如果不了解圖標應用到項目中的知識點，那么真實的圖標設計水平就會在項目設計過程中被損耗。

所以，最后一章，說的就是工具圖標在項目中應用的方法，我相信這是在網上很難找到的分享，建議仔細閱讀。

 

 

10.1 一套應用中的圖標規格

 

圖標是一個應用不能或缺的組成元素，在應用的界面中隨處可見。也因為圖標的常見性，我們往往需要在一個應用應用多套圖標，這和崇尚簡約的第一印象是有背離的。

很多新手，都以為我們只要設計一套大而全的圖標，在項目中對應提取即可。但有很多場景，如果只使用一種圖標類型，那么效果會非常差勁。比如 ，我們看看下面的淘寶設置頁，前后包含了 6 種以上的圖標。是太復雜了沒錯，但如果我們把圖標都替換成同一套呢？

可以看見，右側替換后的案例，效果非常的不理想，缺乏對比和趣味性。交互規則中說：如無必要，勿增實體，但對于圖標的使用來說，這就是必要。

應用內的圖標規格不同，可以用兩個屬性來劃分，大小和風格。

 

10.1.1 圖標的尺寸

 

大小就是圖標的尺寸規格，有些界面的元素權重低，圖標的尺寸就小，有些權重高的則反之。比如在 Apple Music 的播放界面，播放快進等按鈕，作為頁面最重要的按鈕，尺寸非常大，其它可以點擊的圖標次之，而表示音量的兩個按鈕則最小。

確定圖標尺寸，是我們在項目中進行圖標設計的第一件事。但尺寸的確定，不是我們憑空制定出來的，我們要先構建出實際的 “場景“ 進行分析，即先完成了界面的高保真原型或交互原型。

下方是我自己課程中給學生做的原型演示，在構建了這樣的頁面以后，我會在原型中檢查，我總共用了多少種圖標的尺寸，它們分別會應用在哪些場景中，然后整理出來。如果出現了一些覺得沒有必要的，可以將它們進行調整合并成一種尺寸。

所以，在這個案例中，我整理出了 4 種圖標的尺寸：

 

• 48pt：分類、快速入口大圖標

• 32pt：底部 TabBar 圖標

• 24pt：常規工具圖標

• 16pt：小型提示圖標

 

定好了這 4 種規格，我們在后續的設計上才有明確的設計方向。再復習一遍，為什么我們需要先定尺寸再設計，而不是統一設計一套很大的圖標進行縮小。

因為圖標要盡可能滿足像素對齊的要求，通過縮小的圖標往往在細節上會發生錯位、模糊、丟失等問題。且在大畫布上設計圖標和一開始就在小畫布中設計，兩者在過程中得到的視覺反饋是完全不一樣的，先在大畫布畫完，再縮小到 16pt、12pt 的規格時往往會顯得太復雜，或描邊太粗。

所以，新手盡量不要犯這種初級的錯誤。

 

10.1.2 圖標的風格

 

圖標風格確認完以后，下面就是確認圖標的風格了，和尺寸一樣，我們要應用什么風格的圖標，是需要在已經具備視覺雛形的頁面中對比確定的，而不能提前開始設計。

在我的設計流程中，通常會將圖標放在項目的最后再開始設計，原因就是圖標的視覺樣式風格是取決于所處位置和環境的，是先有界面樣式，再有圖標風格的。

在常規情況下，如果一個應用中有多套圖標，那么普通的中小尺寸圖標使用一般的線性或面性風格即可。而在分類、快速入口這些具備裝飾性、大尺寸的類型中，就應該使用一些更激進的設計風格。比如下圖是 58 同城客戶端應用圖標案例：

通常，一種風格會應用在一種 “類別“ 的圖標種。上放案例屬于比較理想的狀態，一種類別的圖標對應一種尺寸，但是在一些更復雜的環境種，往往會同一種尺寸下還會包括不同類別的圖標。這點大家知道即可，我們會在后面的章節中有所涉及。

 

 

10.2 圖標的不同狀態

 

圖標在一個產品中，除了充當裝飾以外，往往也可以作為按鈕來使用。每個應用中都有大量的圖標可以進行點擊和交互，比如底部導航欄，頭部的消息圖標、發布圖標等等。

當一個圖標能被操作后，那么我們就要注意到它的狀態變化。從導航欄圖標舉例，常規的選中狀態是更換色彩，但也有越來越多的應用會在選中狀態采取不同的設計風格，通過更豐富的樣式表現來提升可看性。比如淘寶、QQ 的底部導航欄。

 

還有，一些包含在控件內的圖標，也會跟隨控件狀態的變更發生變更。例如在賬號輸入框中，如果選中了輸入框，那么圖標的色彩也得到變更，如果輸入框目前處于不可輸入狀態，那么圖標也會對應置灰。

合格的 UI 設計師會充分考慮到圖標所變換的各種狀態，并在提交給開發的過程中會進行詳細的說明、歸類。以及，充分運用 Sketch 等軟件中的組件功能，提升項目的效率和最后的產出成果。

 

 

10.3 圖標的標注和切圖

 

在我們完成了界面和圖標的設計以后，要提交我們的設計給開發人員。其中，包含我們的標注和切圖。拋開其它設計元素不談，我們就講講圖標的切圖需要遵循哪些規范，它和字體都是在這個過程中最容易出錯的地方。

應用圖標的導出我們已經在上一章提到過，所以下面還是以工具圖標的說明為主。

 

10.3.1 圖標的邊界

 

我們要回到第二章工具圖標的規范中，當我們確定出圖標的尺寸時，不是要把圖形設計得正好撐滿這個尺寸，而是利用格線系統來定義它們的大小。

很多新人會在這個過程中產生疑惑，那么在標注的過程中，我們標注的到底是圖形到其它元素的距離，還是圖標外輪廓到別的圖形的距離。所以，要重點強調：

圖標的距離是根據外部輪廓進行計算的！雖然這個輪廓我們肉眼不可見，但它包含的內在規律可以幫助我們忽略一些不必要的小問題。

所以，要讓標注有效，就一定不要偷懶只把圖標置入畫布中，而沒有透明矩形背景。

 

10.3.2 圖標的畫布

 

現在有很多幫助我們進行標注和切圖的協作工具，比如藍湖或是 Zeplin 等。我們只要將設計稿上傳，程序員可以自行獲取圖標對應的切圖。

在這裁切一些特定元素時很好用，但通過線上頁面導出圖標的方法，是非常不牢靠的。我們說過，一個應用中可能出現多種規格的圖標，所以合理的圖標切圖，要根據不同的規格進行導出和整理 (如下圖)，而不是讓程序員自己在線上工具中下載，這樣不僅操作起來困難，而且圖標間不同的狀態難以被輕易獲取。

所以，要在項目設計過程中，創建不同規格的畫布（Symbol）并將它們分類排列，不僅利于我們對以后圖標的調用，也方便在最后批量導出切圖到對應文件夾中。

 

10.3.3 圖標的命名

 

涉及到切圖的導出，我們也就不得不提圖標命名相關的規范了，我之前寫過一篇關于命名相關的文章中有比較詳細的提到圖標命名的方法，大家有空可以擴展閱讀：

https://www.zhihu.com/question/20800182/answer/522552729

下面我們簡單講講圖標的命名規則。有很多新手和剛入職場的 UI 設計師會不明就里的強調圖標一定要用英文命名，并且各種收集常見的英文命名詞匯，我首先要指出這種做法是錯誤的。

因為涉及到整個應用的圖標系統時，會出現大量寓意 “抽象” 的圖標，比如在我上方案例中，有一個啟動圖標的中文名是 “中二”，那么這個詞應該如何翻譯？即使不受制于英文水平的發揮，但是你寫的英文不代表開發人員能看得懂，而大量抽象詞匯的堆積最后導致命名無法成為有效的索引條件，因為沒人看得懂，開發每次需要查找一個圖標的時候依舊是通過縮略圖而不是命名。

所以，在內部沒有具體的命名規范，亦或是程序員沒有特殊要求的情況下，我更建議使用中文命名系統，因為國內多數程序員的習慣會將獲取的圖標進行二次命名（所以你做的英文命名到頭來還是會被改掉），所以不要做無用功，學會 “說人話”。

命名的格式可以分成 3 級，格式大致為：模塊_名稱_狀態@1x，比如下面的案例：

 

• 設置_錢包_高亮@1x.png

• 動態_評論_默認@1x.png

• 登錄_按鈕_點擊@2x.png

 

當然，這不是唯一準確的命名方式，我們可以根據實際場景自由調整，但大家要牢記，圖標的命名是為了方便我們查找、檢索的，而不是使用一堆英文和簡寫感動自己。

最后，圖標 Symbol 的命名，要和圖標的命名保持一致，這樣才能起到事半功倍的效果。

10.3.4 圖標的格式

 

上一章啟動圖標的導出格式，會根據不同設備、場景導出不同的尺寸，并且使用 PNG 的格式。不要擔心，工具圖標雖然也面臨設備不同的問題，但不需要導出這么多的規格。下面講講兩種圖標的導出類型。

位圖格式

 

最常用的導出格式就是位圖 PNG 格式，因為顯示器顯示倍率的不同，所以我們要導出 1x、2x、3x 三種倍率規格的圖片，即設計了 16pt 的圖標的話，我們需要導出 16pt、32pt、48pt 三種尺寸。并在導出的文件名后綴上標有 @1x、@2x、@3x 的標注。

 

這個規格對于 iOS 還是 Android 都是通用的，雖然還有 3x 以上的設備，但是那些設備只要調用 3x 的規格即可。

雖然后面會提圖標可以使用矢量格式導出，但對于使用了漸變、投影或者擬物風格的圖標，必須使用位圖的格式，否則無法完整記錄圖形的細節元素。

矢量格式

 

導出 3 種規格的圖標很麻煩，而且位圖占用的空間往往較大。所以，iOS 和 Android 為了優化這個問題，在之前的系統更新中都默認支持了矢量格式的切圖文件：

 

• iOS 使用 PDF 的 1x 切圖

• Android 使用 SVG 的 1x 切圖

 

當然，如果使用矢量格式導出，那么切記在分類文件夾的時候 ，要將 iOS 和 Android 分開保存，而不是混合在一起。

完成以上步驟，我們就完成了一個項目中所有和圖標相關的工作，可以放松一下了…

 

 

 

 

 

這里就是本系列圖標相關文章的真正結尾了，雖然還有不少干貨可以寫，但實在是寫不動了，真的一滴也沒有了…前后耗費的時間加上助手至少超過 100 小時，有大量配圖是獨立設計的。

相信這已經是全網最完整最詳細的圖標教學了，希望各位能有所收獲，并能掌握入門圖標設計的正確姿勢。如果喜歡我們的內容的話，請多多分享和點贊對我們進行一些微小的鼓勵。

后面，我們還會將本系列文章合成成一篇完整的 PDF 文件提供下載和保存，以及錄制對應的系列教學視頻，敬請關注"超人的電話亭"獲取后續更新以及其它干貨。

 

謝謝各位！