本文從認(rèn)知層面上，談了談圖標(biāo)的搭建和管理，來(lái)看看產(chǎn)品圖標(biāo)體系是如何煉成的~

前不久我在講標(biāo)簽欄專題的時(shí)候，有聊到過(guò)一次圖標(biāo)（可回顧：《了解圖標(biāo)規(guī)范，用Lottie動(dòng)畫(huà)讓圖標(biāo)落地》。前文已提及到部分規(guī)范，本文將直接引用，為防止新讀者理解脫節(jié)，建議先看前文）。

那一次因?yàn)橹黝}的緣故，不能偏題太遠(yuǎn)，所以對(duì)圖標(biāo)本身的講解我沒(méi)有進(jìn)行太多的剖析，更多是在講標(biāo)簽欄圖標(biāo)的切圖、對(duì)接前端落地等項(xiàng)目實(shí)操的手法。于是有部分讀者在后臺(tái)給我留言，讓我再全面地講解一次圖標(biāo)。

所以這一期我將分三個(gè)步驟來(lái)總結(jié)一下一個(gè)產(chǎn)品圖標(biāo)體系的誕生。

一、認(rèn)識(shí)：圖標(biāo)的分類

不論是從應(yīng)用場(chǎng)景還是視覺(jué)效果來(lái)講，圖標(biāo)的種類都是非常繁多的。所以對(duì)于圖標(biāo)的分類，其實(shí)需要落實(shí)到具體的分類標(biāo)準(zhǔn)。

如果是基于 iOS 和 Material Design 平臺(tái)規(guī)范，兩大平臺(tái)僅從應(yīng)用場(chǎng)景將圖標(biāo)分為了：應(yīng)用圖標(biāo)（App/Product Icon）、系統(tǒng)圖標(biāo)（System Icons）。這并不難理解。

但據(jù)我所知，讓大家更加感到糾結(jié)的其實(shí)是自定義圖標(biāo)（Custom Icons）。不清楚當(dāng)下流行的圖標(biāo)視覺(jué)類型，也不知道該如何搭建起一套產(chǎn)品圖標(biāo)體系。所以我將對(duì)兩種分類標(biāo)準(zhǔn)下的圖標(biāo)都進(jìn)行一次總結(jié)。

1.1 應(yīng)用場(chǎng)景分類下的圖標(biāo)

應(yīng)用場(chǎng)景分類下的圖標(biāo)我們主要先來(lái)說(shuō)一說(shuō)應(yīng)用圖標(biāo)（App Icon）。

因?yàn)閼?yīng)用圖標(biāo)和我們?cè)贏pp界面內(nèi)自定義的圖標(biāo)不同，App內(nèi)的圖標(biāo)我們可以根據(jù)產(chǎn)品的視覺(jué)風(fēng)格隨意創(chuàng)造規(guī)范，但應(yīng)用圖標(biāo)需要符合平臺(tái)的上架規(guī)定，我們必須要遵守平臺(tái)規(guī)范。

實(shí)際上iOS和MD規(guī)范中的應(yīng)用圖標(biāo)視覺(jué)規(guī)范其實(shí)還是有所差異的，但因?yàn)樵趪?guó)內(nèi)很少有項(xiàng)目會(huì)獨(dú)立設(shè)計(jì)雙平臺(tái)應(yīng)用，所以大多數(shù)時(shí)候我們還是會(huì)一圖適用雙平臺(tái)。

所以在設(shè)計(jì)應(yīng)用圖標(biāo)時(shí)，不用過(guò)分拘泥于某一方平臺(tái)規(guī)范，只需要注意簡(jiǎn)單借助輔助網(wǎng)格。最重要的還是不同終端要求的不同輸出尺寸。

應(yīng)用圖標(biāo)不僅僅出現(xiàn)在桌面上，iOS還會(huì)在通知欄、Spotlight、設(shè)置等地方；安卓也會(huì)在狀態(tài)欄、消息push中出現(xiàn)。這些場(chǎng)景下的應(yīng)用圖標(biāo)尺寸根據(jù)設(shè)備的不同，顯示的尺寸也是不同的。為了保證應(yīng)用圖標(biāo)的顯示效果，需要單獨(dú)對(duì)每個(gè)尺寸進(jìn)行調(diào)整，盡可能避免出現(xiàn)半個(gè)像素等情況，以保證邊緣顯示的銳利，而單純的縮放并不能解決這些問(wèn)題。

所以我總結(jié)了一份iOS應(yīng)用圖標(biāo)尺寸清單：

安卓的應(yīng)用圖標(biāo)，因?yàn)殡s屏原因，且圖標(biāo)應(yīng)用場(chǎng)景繁多，整理起來(lái)過(guò)于繁瑣，并且Android 8.0之后，應(yīng)用圖標(biāo)還支持Z軸適配法，這一系列的內(nèi)容整理出來(lái)完全可以新開(kāi)一個(gè)文章再詳解了……后續(xù)我一定會(huì)再專門開(kāi)一期文章講解Z軸適配法，所以原諒我考慮到篇幅原因就不再贅述了。

一般安卓開(kāi)發(fā)遇到特定場(chǎng)景，會(huì)和UI進(jìn)行溝通確定。

1.2 視覺(jué)效果分類下的圖標(biāo)

在日常進(jìn)行產(chǎn)品UI設(shè)計(jì)時(shí)，我們更多會(huì)涉及到設(shè)計(jì)各式各樣自定義視覺(jué)風(fēng)格的圖標(biāo)。許多小伙伴認(rèn)為圖標(biāo)類別太多，難以具象地描述它們。實(shí)際上目前常見(jiàn)的圖標(biāo)類別大致可分為8種：

（1）線型圖標(biāo)：通過(guò)線條勾勒出來(lái)的圖標(biāo)

在越來(lái)越以“Less is More”為審美的時(shí)代，線性圖標(biāo)已經(jīng)普及到了許多的應(yīng)用程序中。一般通過(guò)描邊粗細(xì)、圖標(biāo)細(xì)節(jié)來(lái)打造產(chǎn)品圖標(biāo)的區(qū)別。

（2）面型圖標(biāo)：采用填充和負(fù)空間結(jié)構(gòu)的圖標(biāo)

面型相對(duì)于線型來(lái)說(shuō)更加具有視覺(jué)重量，更容易吸引用戶的關(guān)注，識(shí)別度也更強(qiáng)。所以面型圖標(biāo)經(jīng)常被設(shè)計(jì)師用于區(qū)分線型圖標(biāo)的選中狀態(tài)。

（3）漸變圖標(biāo)：采用漸變色填充的圖標(biāo)

漸變圖標(biāo)算是面型圖標(biāo)的一個(gè)分支，但因?yàn)榧?xì)節(jié)豐富，彌散陰影的運(yùn)用更偏向于年輕化，和傳統(tǒng)的面型圖標(biāo)還是有所區(qū)別，所以常被單獨(dú)作為一種分類定義。

（4）線面混合圖標(biāo)：線型與面型的結(jié)合

線面混合圖標(biāo)因?yàn)橐曈X(jué)層級(jí)更加豐富，所以顯得更加活潑。通常用于打造視覺(jué)調(diào)性。

（5）扁平圖標(biāo)：采用扁平插畫(huà)形式的圖標(biāo)

扁平圖標(biāo)對(duì)于普通的面型圖標(biāo)，更加注重細(xì)節(jié)表現(xiàn)，視覺(jué)層級(jí)豐富，所以常用于營(yíng)造產(chǎn)品氛圍和視覺(jué)調(diào)性。

（6）擬物風(fēng)格圖標(biāo)：通過(guò)光影模擬真實(shí)物體質(zhì)感的圖標(biāo)

擬物風(fēng)格圖標(biāo)一般都會(huì)在節(jié)日活動(dòng)或游戲中更為常見(jiàn)，更加有氣氛烘托。并且更貼近現(xiàn)實(shí)物體的真實(shí)只敢，所以可以降低用戶的認(rèn)知成本。

（7）實(shí)物貼圖圖標(biāo)：采用真實(shí)攝影物體的圖標(biāo)

和擬物風(fēng)格相似，但實(shí)物貼圖圖標(biāo)更加直接地采用真實(shí)的攝影作品。一般常用于電商和超市、生鮮類產(chǎn)品。

（8）2.5D圖標(biāo)：2.5D立體圖標(biāo)。

2017-2018年左右，2.5D圖標(biāo)曾在UI界刮起一陣風(fēng)，所以有不少設(shè)計(jì)師認(rèn)為這將成為未來(lái)圖標(biāo)的一個(gè)趨勢(shì)，但是這陣風(fēng)好像很快又刮停了……可能是因?yàn)樵O(shè)計(jì)成本過(guò)高，且風(fēng)格過(guò)于鮮明，難以被許多產(chǎn)品駕馭。

二、動(dòng)手：圖標(biāo)的設(shè)計(jì)

前面說(shuō)到的圖標(biāo)類型非常多，要在一篇文章中一一剖析每一種類型的圖標(biāo)設(shè)計(jì)確實(shí)挺難，并且復(fù)雜的圖標(biāo)設(shè)計(jì)其實(shí)是考驗(yàn)設(shè)計(jì)師的想法和軟件的使用能力，要專攻這一塊的話，網(wǎng)上的案例一搜一大把。所以我就不再做過(guò)多的講解了。

我主要來(lái)講一講平臺(tái)規(guī)范中提到的線型、面型圖標(biāo)的設(shè)計(jì)。

如果按照MD規(guī)范，圖標(biāo)的組成結(jié)構(gòu)有：描邊、端點(diǎn)、圓角、負(fù)空間、內(nèi)邊距與安全邊距幾個(gè)部分。

除了安全邊距MD規(guī)范規(guī)定始終應(yīng)保持2dp之外，我們改變其他任意的一個(gè)的組成結(jié)構(gòu)，都可以影響到一個(gè)圖標(biāo)的視覺(jué)風(fēng)格。

我們來(lái)看一組示例：

之所以一套圖標(biāo)能夠保持視覺(jué)統(tǒng)一，就是因?yàn)楸ＷC了以上拆解出的圖標(biāo)組成結(jié)構(gòu)細(xì)節(jié)統(tǒng)一。當(dāng)你發(fā)現(xiàn)你搭建的圖標(biāo)體系，視覺(jué)風(fēng)格總是有所差異的時(shí)候，不妨再檢查一下這些細(xì)節(jié)。

三、管理：圖標(biāo)的命名

制作完成的圖標(biāo)，有些可能會(huì)復(fù)用于多個(gè)頁(yè)面，有些可能只應(yīng)用于特定的頁(yè)面中。并且有一些圖標(biāo)我們會(huì)輸出為位圖，有一些圖標(biāo)我們又使用線上矢量圖標(biāo)庫(kù)來(lái)維護(hù)，導(dǎo)致我們的圖標(biāo)管理起來(lái)特別麻煩。

曾經(jīng)還是UI小白的我，百度過(guò)一套切圖命名模式，大致是“模塊_類別_功能_狀態(tài)”。并且文中給出了一堆常用單詞，最后經(jīng)過(guò)組裝，通常命名后的文件名是“customer_settings_clearcache_selected@2x.png”這樣的一長(zhǎng)串英文。

文件名冗長(zhǎng)，且對(duì)于英語(yǔ)不是非常熟練的我來(lái)說(shuō)，每次命名文件還要附帶打開(kāi)一個(gè)翻譯軟件。翻譯出來(lái)的英文，還可能不滿足開(kāi)發(fā)人員的命名習(xí)慣，導(dǎo)致他們要找很久的圖標(biāo)文件。

后來(lái)在日常工作中，我慢慢結(jié)除了一套我自己的命名與管理方式，不敢說(shuō)專業(yè)，但希望能夠幫助大家維護(hù)圖標(biāo)文件更加方便。

首先我會(huì)針對(duì)不同的端分為不同的文件夾，如“iOS”、“Android”、“Web”、“小程序”。

然后以中文按照“模塊_名稱_狀態(tài)”三級(jí)命名即可。通常這樣命名的圖標(biāo)文件為“設(shè)置_清理緩存_選中@2x.png”，沒(méi)有狀態(tài)區(qū)別的圖標(biāo)或沒(méi)有特定模塊可復(fù)用的圖標(biāo)，還可以再省去一級(jí)，這樣的命名明了簡(jiǎn)單，易用易查找。

過(guò)來(lái)人告訴大家：千萬(wàn)不要為了形式化的命名規(guī)范而做規(guī)范，一方面加大了自己的工作量，另一方面卻根本沒(méi)有輔助開(kāi)發(fā)更方便地找到圖標(biāo)文件。真是一種吃力不討好的做法。

四、總結(jié)

本文淺談了圖標(biāo)的搭建與管理，更多是在認(rèn)知層面上。

圖標(biāo)輔助網(wǎng)格視覺(jué)規(guī)范與輸出倍率我在之前的文章中已經(jīng)講解過(guò)了，在本文中沒(méi)有再贅述。還是建議想更多了解圖標(biāo)方面知識(shí)的朋友，結(jié)合兩篇文章一起閱讀，結(jié)合實(shí)操，可以學(xué)習(xí)得更加全面。

作者：UCD耍家；公眾號(hào)：UCD耍家（ID：ucdplayer）

本文由 @UCD耍家 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議