起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識產品圖標體系是如何煉成的？
本文從認知層面上，談了談圖標的搭建和管理，來看看產品圖標體系是如何煉成的~
前不久我在講標簽欄專題的時候，有聊到過一次圖標（可回顧：《了解圖標規范，用Lottie動畫讓圖標落地》。前文已提及到部分規范，本文將直接引用，為防止新讀者理解脫節，建議先看前文）。
那一次因為主題的緣故，不能偏題太遠，所以對圖標本身的講解我沒有進行太多的剖析，更多是在講標簽欄圖標的切圖、對接前端落地等項目實操的手法。于是有部分讀者在后臺給我留言，讓我再全面地講解一次圖標。
所以這一期我將分三個步驟來總結一下一個產品圖標體系的誕生。
一、認識：圖標的分類
不論是從應用場景還是視覺效果來講，圖標的種類都是非常繁多的。所以對于圖標的分類，其實需要落實到具體的分類標準。
如果是基于 iOS 和 Material Design 平臺規范，兩大平臺僅從應用場景將圖標分為了：應用圖標（App/Product Icon）、系統圖標（System Icons）。這并不難理解。
但據我所知，讓大家更加感到糾結的其實是自定義圖標（Custom Icons）。不清楚當下流行的圖標視覺類型，也不知道該如何搭建起一套產品圖標體系。所以我將對兩種分類標準下的圖標都進行一次總結。
1.1 應用場景分類下的圖標
應用場景分類下的圖標我們主要先來說一說應用圖標（App Icon）。
因為應用圖標和我們在App界面內自定義的圖標不同，App內的圖標我們可以根據產品的視覺風格隨意創造規范，但應用圖標需要符合平臺的上架規定，我們必須要遵守平臺規范。
實際上iOS和MD規范中的應用圖標視覺規范其實還是有所差異的，但因為在國內很少有項目會獨立設計雙平臺應用，所以大多數時候我們還是會一圖適用雙平臺。
所以在設計應用圖標時，不用過分拘泥于某一方平臺規范，只需要注意簡單借助輔助網格。最重要的還是不同終端要求的不同輸出尺寸。
應用圖標不僅僅出現在桌面上，iOS還會在通知欄、Spotlight、設置等地方；安卓也會在狀態欄、消息push中出現。這些場景下的應用圖標尺寸根據設備的不同，顯示的尺寸也是不同的。為了保證應用圖標的顯示效果，需要單獨對每個尺寸進行調整，盡可能避免出現半個像素等情況，以保證邊緣顯示的銳利，而單純的縮放并不能解決這些問題。
所以我總結了一份iOS應用圖標尺寸清單：
安卓的應用圖標，因為雜屏原因，且圖標應用場景繁多，整理起來過于繁瑣，并且Android 8.0之后，應用圖標還支持Z軸適配法，這一系列的內容整理出來完全可以新開一個文章再詳解了……后續我一定會再專門開一期文章講解Z軸適配法，所以原諒我考慮到篇幅原因就不再贅述了。
一般安卓開發遇到特定場景，會和UI進行溝通確定。
1.2 視覺效果分類下的圖標
在日常進行產品UI設計時，我們更多會涉及到設計各式各樣自定義視覺風格的圖標。許多小伙伴認為圖標類別太多，難以具象地描述它們。實際上目前常見的圖標類別大致可分為8種：
（1）線型圖標：通過線條勾勒出來的圖標
在越來越以“Less is More”為審美的時代，線性圖標已經普及到了許多的應用程序中。一般通過描邊粗細、圖標細節來打造產品圖標的區別。
（2）面型圖標：采用填充和負空間結構的圖標
面型相對于線型來說更加具有視覺重量，更容易吸引用戶的關注，識別度也更強。所以面型圖標經常被設計師用于區分線型圖標的選中狀態。
（3）漸變圖標：采用漸變色填充的圖標
漸變圖標算是面型圖標的一個分支，但因為細節豐富，彌散陰影的運用更偏向于年輕化，和傳統的面型圖標還是有所區別，所以常被單獨作為一種分類定義。
（4）線面混合圖標：線型與面型的結合
線面混合圖標因為視覺層級更加豐富，所以顯得更加活潑。通常用于打造視覺調性。
（5）扁平圖標：采用扁平插畫形式的圖標
扁平圖標對于普通的面型圖標，更加注重細節表現，視覺層級豐富，所以常用于營造產品氛圍和視覺調性。
（6）擬物風格圖標：通過光影模擬真實物體質感的圖標
擬物風格圖標一般都會在節日活動或游戲中更為常見，更加有氣氛烘托。并且更貼近現實物體的真實只敢，所以可以降低用戶的認知成本。
（7）實物貼圖圖標：采用真實攝影物體的圖標
和擬物風格相似，但實物貼圖圖標更加直接地采用真實的攝影作品。一般常用于電商和超市、生鮮類產品。
（8）2.5D圖標：2.5D立體圖標。
2017-2018年左右，2.5D圖標曾在UI界刮起一陣風，所以有不少設計師認為這將成為未來圖標的一個趨勢，但是這陣風好像很快又刮停了……可能是因為設計成本過高，且風格過于鮮明，難以被許多產品駕馭。
二、動手：圖標的設計
前面說到的圖標類型非常多，要在一篇文章中一一剖析每一種類型的圖標設計確實挺難，并且復雜的圖標設計其實是考驗設計師的想法和軟件的使用能力，要專攻這一塊的話，網上的案例一搜一大把。所以我就不再做過多的講解了。
我主要來講一講平臺規范中提到的線型、面型圖標的設計。
如果按照MD規范，圖標的組成結構有：描邊、端點、圓角、負空間、內邊距與安全邊距幾個部分。
除了安全邊距MD規范規定始終應保持2dp之外，我們改變其他任意的一個的組成結構，都可以影響到一個圖標的視覺風格。
我們來看一組示例：
之所以一套圖標能夠保持視覺統一，就是因為保證了以上拆解出的圖標組成結構細節統一。當你發現你搭建的圖標體系，視覺風格總是有所差異的時候，不妨再檢查一下這些細節。
三、管理：圖標的命名
制作完成的圖標，有些可能會復用于多個頁面，有些可能只應用于特定的頁面中。并且有一些圖標我們會輸出為位圖，有一些圖標我們又使用線上矢量圖標庫來維護，導致我們的圖標管理起來特別麻煩。
曾經還是UI小白的我，百度過一套切圖命名模式，大致是“模塊_類別_功能_狀態”。并且文中給出了一堆常用單詞，最后經過組裝，通常命名后的文件名是“customer_settings_clearcache_selected@2x.png”這樣的一長串英文。
文件名冗長，且對于英語不是非常熟練的我來說，每次命名文件還要附帶打開一個翻譯軟件。翻譯出來的英文，還可能不滿足開發人員的命名習慣，導致他們要找很久的圖標文件。
后來在日常工作中，我慢慢結除了一套我自己的命名與管理方式，不敢說專業，但希望能夠幫助大家維護圖標文件更加方便。
首先我會針對不同的端分為不同的文件夾，如“iOS”、“Android”、“Web”、“小程序”。
然后以中文按照“模塊_名稱_狀態”三級命名即可。通常這樣命名的圖標文件為“設置_清理緩存_選中@2x.png”，沒有狀態區別的圖標或沒有特定模塊可復用的圖標，還可以再省去一級，這樣的命名明了簡單，易用易查找。
過來人告訴大家：千萬不要為了形式化的命名規范而做規范，一方面加大了自己的工作量，另一方面卻根本沒有輔助開發更方便地找到圖標文件。真是一種吃力不討好的做法。
四、總結
本文淺談了圖標的搭建與管理，更多是在認知層面上。
圖標輔助網格視覺規范與輸出倍率我在之前的文章中已經講解過了，在本文中沒有再贅述。還是建議想更多了解圖標方面知識的朋友，結合兩篇文章一起閱讀，結合實操，可以學習得更加全面。
作者：UCD耍家；公眾號：UCD耍家（ID：ucdplayer）
本文由 @UCD耍家 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
