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

 

 

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

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

 

 

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

 

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

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

 

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

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

 

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

 

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

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

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

 

2. 店鋪圖標(biāo)

 

 

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

 

 

 

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

 

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

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

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

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

 

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

 

 

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

 

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

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

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

案例1：

案例2：

 

案例3：

 

 

 

 

 

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

 

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

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

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

 

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

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

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

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

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

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

 

 

 

 

 

 

 

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

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

 

 

9.1 啟動(dòng)圖標(biāo)的設(shè)計(jì)規(guī)范

 

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

這個(gè)模板和工具圖標(biāo)的使用方法類似，我們?cè)诤竺娴陌咐M(jìn)一步講解。接著，來(lái)說(shuō)明一個(gè)更重要的問(wèn)題，就是啟動(dòng)圖標(biāo)畫布的尺寸。

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

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

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

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

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

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

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

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

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

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

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

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

 

 

9.2 啟動(dòng)圖標(biāo)的設(shè)計(jì)演示

 

9.2.1 圖標(biāo)形式

 

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

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

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

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

 

9.2.2 文字形式

 

 

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

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

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

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

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

 

9.2.3 擬物形式

 

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

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

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

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

 

 

 

 

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

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

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

 

 

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

 

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

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

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

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

 

10.1.1 圖標(biāo)的尺寸

 

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

確定圖標(biāo)尺寸，是我們?cè)陧?xiàng)目中進(jìn)行圖標(biāo)設(shè)計(jì)的第一件事。但尺寸的確定，不是我們憑空制定出來(lái)的，我們要先構(gòu)建出實(shí)際的 “場(chǎng)景“ 進(jìn)行分析，即先完成了界面的高保真原型或交互原型。

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

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

 

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

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

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

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

 

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

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

所以，新手盡量不要犯這種初級(jí)的錯(cuò)誤。

 

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)具備視覺雛形的頁(yè)面中對(duì)比確定的，而不能提前開始設(shè)計(jì)。

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

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

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

 

 

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

 

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

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

 

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

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

 

 

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

 

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

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

 

10.3.1 圖標(biāo)的邊界

 

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

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

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

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

 

10.3.2 圖標(biāo)的畫布

 

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

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

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

 

10.3.3 圖標(biāo)的命名

 

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

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

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

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

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

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

 

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

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

• 登錄_按鈕_點(diǎn)擊@2x.png

 

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

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

10.3.4 圖標(biāo)的格式

 

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

位圖格式

 

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

 

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

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

矢量格式

 

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

 

• iOS 使用 PDF 的 1x 切圖

• Android 使用 SVG 的 1x 切圖

 

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

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

 

 

 

 

 

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

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

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

 

謝謝各位！