前面已經(jīng)說完了工具圖標(biāo)相關(guān)的設(shè)計規(guī)范和方法，本章就開始進入下一個主題，關(guān)于裝飾圖標(biāo)的設(shè)計。

 

 

在裝飾圖標(biāo)中，就沒有工具圖標(biāo)那么嚴(yán)謹(jǐn)?shù)囊?guī)范需要遵循，也就意味著自由度越高，可以任意發(fā)揮。顯然，想要通過一篇文章掌握所有的裝飾圖標(biāo)視覺設(shè)計方法，并不現(xiàn)實，新手只要將精力聚焦在最常用的幾種圖標(biāo)風(fēng)格的設(shè)計上即可。

裝飾圖標(biāo)最主要的應(yīng)用區(qū)域，集中在首頁的快速入口上，也是今天多數(shù)應(yīng)用中會使用的組件。下面，我們會通過講解國內(nèi)主流應(yīng)用中的幾種裝飾圖標(biāo)的設(shè)計。

 

 

8.1 扁平插畫風(fēng)格

 

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

例如在肯德基客戶端首頁的服務(wù)分類中，使用的圖標(biāo)就是依據(jù)扁平插畫的形式設(shè)計的，有較多的色彩和完整的細(xì)節(jié)。

 

這類圖標(biāo)設(shè)計的并不困難，只要具備了工具圖標(biāo)的設(shè)計基礎(chǔ)，就可以很快學(xué)會并運用。它的設(shè)計特征是這樣的，先通過繪制具體的圖形輪廓，然后為這個輪廓內(nèi)添加細(xì)節(jié)，并對不同的面填充不同的色彩進行區(qū)分。

下面，我們通過講解幾個圖標(biāo)的設(shè)計過程，幫助大家學(xué)習(xí)這種設(shè)計風(fēng)格。

 

1. 優(yōu)惠券圖標(biāo)

 

通過模擬現(xiàn)實世界的優(yōu)惠券樣式，確定出基本的線性輪廓。

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

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

 

2. 店鋪圖標(biāo)

 

 

3. 我的卡包圖標(biāo)

 

 

 

8.2 漸變幾何背景風(fēng)格

 

和其它風(fēng)格比較，在快速入口中，線上案例應(yīng)用得最多的風(fēng)格其實是漸變幾何背景的設(shè)計方案，即在一個應(yīng)用了漸變色的背景上帖了一個線性或面性的圖標(biāo)。

這種風(fēng)格的設(shè)計，主要在于背景漸變色的應(yīng)用上，通常，在一組彩色快速入口的圖標(biāo)中，要讓它們的漸變色看起來自然和諧，是需要技巧的。

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

之后，再在上方置入圖標(biāo)的圖形，并為它們添加適當(dāng)?shù)年幱凹纯伞?/p>

 

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

 

 

8.3 炫彩漸變風(fēng)格

 

這是一個比較奇特的設(shè)計風(fēng)格，在過去只存在于飛機稿中，是一種單純?yōu)榱俗非笠曈X表現(xiàn)力的設(shè)計形式，通過高飽和的漸變、撞色，抓取瀏覽者的眼球。

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

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

案例1：

案例2：

 

案例3：

 

 

 

 

 

8.4 實物貼圖風(fēng)格

 

最后，講講實物貼圖的圖標(biāo)風(fēng)格。這種圖標(biāo)出現(xiàn)在涉及到實物產(chǎn)品的應(yīng)用中，例如電商應(yīng)用，智能硬件控制應(yīng)用等等。

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

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

 

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

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

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

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

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

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

 

 

 

 

 

 

 

本節(jié)我們開始講解最后一種類型的圖標(biāo)——啟動圖標(biāo)。在第一章我們已經(jīng)對啟動圖標(biāo)有了基礎(chǔ)的認(rèn)識，所以下圖再簡單回顧一遍。

想要在啟動圖標(biāo)設(shè)計上入門，就要先從規(guī)范開始學(xué)習(xí)，然后了解不同的風(fēng)格以及對應(yīng)風(fēng)格的設(shè)計過程。如果沒有比較明確的學(xué)習(xí)目標(biāo)，就會和學(xué)習(xí) LOGO 設(shè)計一樣無從下手。

 

 

9.1 啟動圖標(biāo)的設(shè)計規(guī)范

 

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

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

默認(rèn)的情況下，我們使用 1024 * 1024 尺寸來設(shè)計啟動圖標(biāo)，這個參數(shù)在 iOS 和 Android 中都適用。

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

第一，在手機硬件中，根據(jù)屏幕規(guī)格的不同，展示圖標(biāo)的實際像素量也不同，即圖標(biāo)的尺寸會發(fā)生改變。

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

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

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

應(yīng)該有同學(xué)這時候還會產(chǎn)生疑問，模版里的畫布就是一個正方形，但是大多數(shù)手機的 APP 圖標(biāo)使用的是圓角，所以，應(yīng)該如何制作這個圓角，以及它的相關(guān)參數(shù)呢？

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

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

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

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

在公眾號 超人的電話亭 中回復(fù) “啟動圖標(biāo)” 即可。

 

 

9.2 啟動圖標(biāo)的設(shè)計演示

 

9.2.1 圖標(biāo)形式

 

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

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

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

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

 

9.2.2 文字形式

 

 

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

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

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

比如要設(shè)計一個我的應(yīng)用，那么我可以取 “超人的電話亭” 的第一個字——超，作為圖標(biāo)上方的文字。然后我選用 “方正蘭亭大黑” 作為基礎(chǔ)字形，對它進行重構(gòu)即可。

最后建議，如果不是一些比較嚴(yán)肅或是傳統(tǒng)的題材，盡量不要選用宋體或是楷體進行設(shè)計。

 

9.2.3 擬物形式

 

雖然現(xiàn)在整體設(shè)計環(huán)境中，擬物已經(jīng)被扁平取代，但不代表它已經(jīng)消失，或是在形式上不合理。適當(dāng)?shù)臄M物設(shè)計會讓我們對應(yīng)用功能的認(rèn)識更清晰，且更有趣味性。

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

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

如果要設(shè)計一些更復(fù)雜的擬物圖形，可以通過多做擬物圖標(biāo)的教學(xué)會更有幫助。在今天扁平化圖形當(dāng)?shù)赖沫h(huán)境中，設(shè)計得精良的擬物圖標(biāo)往往可以在滿屏的扁平圖標(biāo)中脫穎而出，助于吸引用戶啟動應(yīng)用。

 

 

 

 

前面的章節(jié)，已經(jīng)系統(tǒng)的講解了圖標(biāo)的設(shè)計方法，相信認(rèn)真學(xué)習(xí)并實踐的同學(xué)，已經(jīng)可以設(shè)計出優(yōu)秀的圖標(biāo)了。

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

所以，最后一章，說的就是工具圖標(biāo)在項目中應(yīng)用的方法，我相信這是在網(wǎng)上很難找到的分享，建議仔細(xì)閱讀。

 

 

10.1 一套應(yīng)用中的圖標(biāo)規(guī)格

 

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

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

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

應(yīng)用內(nèi)的圖標(biāo)規(guī)格不同，可以用兩個屬性來劃分，大小和風(fēng)格。

 

10.1.1 圖標(biāo)的尺寸

 

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

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

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

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

 

• 48pt：分類、快速入口大圖標(biāo)

• 32pt：底部 TabBar 圖標(biāo)

• 24pt：常規(guī)工具圖標(biāo)

• 16pt：小型提示圖標(biāo)

 

定好了這 4 種規(guī)格，我們在后續(xù)的設(shè)計上才有明確的設(shè)計方向。再復(fù)習(xí)一遍，為什么我們需要先定尺寸再設(shè)計，而不是統(tǒng)一設(shè)計一套很大的圖標(biāo)進行縮小。

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

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

 

10.1.2 圖標(biāo)的風(fēng)格

 

圖標(biāo)風(fēng)格確認(rèn)完以后，下面就是確認(rèn)圖標(biāo)的風(fēng)格了，和尺寸一樣，我們要應(yīng)用什么風(fēng)格的圖標(biāo)，是需要在已經(jīng)具備視覺雛形的頁面中對比確定的，而不能提前開始設(shè)計。

在我的設(shè)計流程中，通常會將圖標(biāo)放在項目的最后再開始設(shè)計，原因就是圖標(biāo)的視覺樣式風(fēng)格是取決于所處位置和環(huán)境的，是先有界面樣式，再有圖標(biāo)風(fēng)格的。

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

通常，一種風(fēng)格會應(yīng)用在一種 “類別“ 的圖標(biāo)種。上放案例屬于比較理想的狀態(tài)，一種類別的圖標(biāo)對應(yīng)一種尺寸，但是在一些更復(fù)雜的環(huán)境種，往往會同一種尺寸下還會包括不同類別的圖標(biāo)。這點大家知道即可，我們會在后面的章節(jié)中有所涉及。

 

 

10.2 圖標(biāo)的不同狀態(tài)

 

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

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

 

還有，一些包含在控件內(nèi)的圖標(biāo)，也會跟隨控件狀態(tài)的變更發(fā)生變更。例如在賬號輸入框中，如果選中了輸入框，那么圖標(biāo)的色彩也得到變更，如果輸入框目前處于不可輸入狀態(tài)，那么圖標(biāo)也會對應(yīng)置灰。

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

 

 

10.3 圖標(biāo)的標(biāo)注和切圖

 

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

應(yīng)用圖標(biāo)的導(dǎo)出我們已經(jīng)在上一章提到過，所以下面還是以工具圖標(biāo)的說明為主。

 

10.3.1 圖標(biāo)的邊界

 

我們要回到第二章工具圖標(biāo)的規(guī)范中，當(dāng)我們確定出圖標(biāo)的尺寸時，不是要把圖形設(shè)計得正好撐滿這個尺寸，而是利用格線系統(tǒng)來定義它們的大小。

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

圖標(biāo)的距離是根據(jù)外部輪廓進行計算的！雖然這個輪廓我們?nèi)庋鄄豢梢姡膬?nèi)在規(guī)律可以幫助我們忽略一些不必要的小問題。

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

 

10.3.2 圖標(biāo)的畫布

 

現(xiàn)在有很多幫助我們進行標(biāo)注和切圖的協(xié)作工具，比如藍湖或是 Zeplin 等。我們只要將設(shè)計稿上傳，程序員可以自行獲取圖標(biāo)對應(yīng)的切圖。

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

所以，要在項目設(shè)計過程中，創(chuàng)建不同規(guī)格的畫布（Symbol）并將它們分類排列，不僅利于我們對以后圖標(biāo)的調(diào)用，也方便在最后批量導(dǎo)出切圖到對應(yīng)文件夾中。

 

10.3.3 圖標(biāo)的命名

 

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

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

下面我們簡單講講圖標(biāo)的命名規(guī)則。有很多新手和剛?cè)肼殘龅?UI 設(shè)計師會不明就里的強調(diào)圖標(biāo)一定要用英文命名，并且各種收集常見的英文命名詞匯，我首先要指出這種做法是錯誤的。

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

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

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

 

• 設(shè)置_錢包_高亮@1x.png

• 動態(tài)_評論_默認(rèn)@1x.png

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

 

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

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

10.3.4 圖標(biāo)的格式

 

上一章啟動圖標(biāo)的導(dǎo)出格式，會根據(jù)不同設(shè)備、場景導(dǎo)出不同的尺寸，并且使用 PNG 的格式。不要擔(dān)心，工具圖標(biāo)雖然也面臨設(shè)備不同的問題，但不需要導(dǎo)出這么多的規(guī)格。下面講講兩種圖標(biāo)的導(dǎo)出類型。

位圖格式

 

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

 

這個規(guī)格對于 iOS 還是 Android 都是通用的，雖然還有 3x 以上的設(shè)備，但是那些設(shè)備只要調(diào)用 3x 的規(guī)格即可。

雖然后面會提圖標(biāo)可以使用矢量格式導(dǎo)出，但對于使用了漸變、投影或者擬物風(fēng)格的圖標(biāo)，必須使用位圖的格式，否則無法完整記錄圖形的細(xì)節(jié)元素。

矢量格式

 

導(dǎo)出 3 種規(guī)格的圖標(biāo)很麻煩，而且位圖占用的空間往往較大。所以，iOS 和 Android 為了優(yōu)化這個問題，在之前的系統(tǒng)更新中都默認(rèn)支持了矢量格式的切圖文件：

 

• iOS 使用 PDF 的 1x 切圖

• Android 使用 SVG 的 1x 切圖

 

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

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

 

 

 

 

 

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

相信這已經(jīng)是全網(wǎng)最完整最詳細(xì)的圖標(biāo)教學(xué)了，希望各位能有所收獲，并能掌握入門圖標(biāo)設(shè)計的正確姿勢。如果喜歡我們的內(nèi)容的話，請多多分享和點贊對我們進行一些微小的鼓勵。

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

 

謝謝各位！