溫馨提示：建議閱讀時(shí)間9分鐘。文末還為大家準(zhǔn)備了網(wǎng)易云音樂Android視覺規(guī)范一份，進(jìn)行學(xué)習(xí)與參考，記得領(lǐng)取哦~

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

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

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

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

不論是從應(yīng)用場(chǎng)景還是視覺效果來講，圖標(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)視覺類型，也不知道該如何搭建起一套產(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)我們主要先來說一說應(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)品的視覺風(fēng)格隨意創(chuàng)造規(guī)范，但應(yīng)用圖標(biāo)需要符合平臺(tái)的上架規(guī)定，我們必須要遵守平臺(tái)規(guī)范。

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

所以在設(shè)計(jì)應(yīng)用圖標(biāo)時(shí)，不用過分拘泥于某一方平臺(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è)像素等情況，以保證邊緣顯示的銳利。而單純的縮放并不能解決這些問題。

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

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

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

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

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

· 線型圖標(biāo)：通過線條勾勒出來的圖標(biāo)。

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

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

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

· 漸變圖標(biāo)：采用漸變色填充的圖標(biāo)。

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

· 線面混合圖標(biāo)：線型與面型的結(jié)合。

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

· 扁平圖標(biāo)：采用扁平插畫形式的圖標(biāo)。

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

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

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

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

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

· 2.5D圖標(biāo)：2.5D立體圖標(biāo)。

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

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

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

我主要來講一講平臺(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)的視覺風(fēng)格。

我們來看一組示例：

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

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

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

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

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

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

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

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

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

四、總結(jié)

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

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

我是Howie，我們下期見。

---

---

- 粉絲福利 -

關(guān)注【UCD耍家】公眾號(hào)，后臺(tái)回復(fù)“701”可領(lǐng)取網(wǎng)易云音樂Android視覺規(guī)范

總結(jié)

以上是生活随笔為你收集整理的el-table 树形表格 自定义展开图标_耍好控件 | 产品图标体系是如何炼成的？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。