如期而至，這是標簽欄控件總結(jié)的第二期。這一期真是掏空職業(yè)經(jīng)驗，希望對你的工作有所幫助。

這一期我們來聊一聊標簽欄中的關鍵元素——圖標。

圖標其實存在于界面中的許多地方，但因為這一期主要分析標簽欄，所以我會借標簽欄中較主流的圖標樣式，總結(jié)一套圖標制作與落地方法。這些方法在圖標制作過程中都是相通的，大家可以舉一反三。

標簽欄圖標規(guī)范

1. 圖標樣式

圖標具體樣式風格的定義是非常主觀的，網(wǎng)絡上也流傳著許多的教程教大家如何設計五花八門的圖標，所以在這里我就不再贅述了。我主要來總結(jié)一下基礎的標簽欄圖標一般有哪些樣式變化。

我調(diào)研了諸多的應用程序，發(fā)現(xiàn)主流的 APP 標簽欄樣式變化，大致分為以下五種。其中占比最多的是「由線型轉(zhuǎn)面型」。

調(diào)研的應用程序中，所有使用到線性圖標的應用程序，都將描邊粗細限制在 1pt-2pt 之間。

2. 圖標視覺大小

上一期我們講到，iOS 定義了一套標簽欄圖標的尺寸規(guī)范。

iOS 在這里所定義的尺寸并不是圖標文件最后輸出的尺寸，而是給設計師作圖時，針對不同圖標形狀的參考尺寸，目的是為了讓圖標的視覺大小看上去一致。

那么為什么 iOS 會根據(jù)不同的圖標形狀給出不同的圖標尺寸呢？因為 50px×50px 的正方形比 50px×50px 的圓形面積更大，所以正方形的視覺大小也會大于圓形。為了統(tǒng)一圖標的視覺大小，正方形要做適當?shù)拿娣e收縮處理。（矩形同理）

于是我們看到許多平臺都推出了圖標輔助網(wǎng)格規(guī)范 1。其實如果遵從「面積相等」原理，理論上所有的圖標網(wǎng)格都應該由下面這一套推理公式得出（以Material Design 標準圖標網(wǎng)格為例）：

但實際情況是，不同平臺的圖標輔助網(wǎng)格規(guī)范建議尺寸都有一定的差異。原因就在于，雖然有時候我們參考「面積相等」原則對圖標視覺尺寸進行了規(guī)范，但項目落地后發(fā)現(xiàn)視覺上可能還是有一些不協(xié)調(diào)，所以最終設計師還是會憑借自己的主觀判斷再進行微調(diào)。

記?。汉玫脑O計作品是理性的設計理論與設計師本身感性的碰撞結(jié)果，二者缺一不可。

3. 圖標輸出尺寸

iOS 規(guī)定標簽欄圖標的輸出尺寸統(tǒng)一為 31pt×28pt；Material Design 規(guī)定標簽欄圖標的輸出尺寸統(tǒng)一為 24dp×24dp。

但我們發(fā)現(xiàn)，在借助了圖標網(wǎng)格解決了圖標視覺大小的問題之后，每一個不同形狀的圖標，尺寸其實是不同的。為了方便前端落地，我們在輸出切圖文件時，要保持每一個圖標文件的輸出尺寸是相同的。該怎么辦呢？

于是我們將一組圖標都放置在一個比圖標本身略大的相同尺寸容器中。而圖標與這個容器之間的空白像素，正好也幫助我們規(guī)避了圖標落地后，切圖邊緣像素可能被截斷的現(xiàn)象發(fā)生，所以我們稱這個區(qū)域為「安全邊距」。

對于安全邊距的規(guī)定：Material Design 全平臺規(guī)定圖標的安全間距統(tǒng)一 2dp；iOS 則根據(jù)不同的圖標使用場景給出的不同的圖標網(wǎng)格和圖標安全間距 2。

靜態(tài)圖標

標簽欄的圖標一般分為靜態(tài)圖標和動態(tài)圖標兩種。

靜態(tài)圖標的實現(xiàn)方法相對容易，可以與前端溝通確定本次項目交付的標簽欄圖標文件是采用位圖還是矢量圖。如果是位圖建議交付 .png 格式文件；如果是矢量圖建議交付 .svg 格式文件。

1. 位圖圖標

使用位圖時請注意以下兩點：

不同項目環(huán)境輸出的切圖套數(shù)不同

• 交付 iOS 原生的標簽欄圖標切圖需要 @1x/@2x/@3x 三種倍率的切圖文件；
• 交付 Android 原生的標簽欄圖標切圖需要 @1.5x/@2x/@3x/@4x 四種倍率的切圖文件（@0.75x 和 @1x 切圖層分別用于 ldpi 和 mdpi 分辨率設備，但這些設備現(xiàn)在幾乎已退出市場，所以可不考慮，但最終視項目真實需求確定。）；
• 交付 web 項目的切圖需要試情況而定，一般常用 @2x 切圖，因為 @2x 向下適配 @1x、向上適配 @3x，都不會產(chǎn)生太大的圖片失真。但有時候前端小哥會要求用到其他倍率切圖，所以最終以具體需求而定。

請注意：這里我所提到的倍率全都是「絕對倍率」，這個概念非常關鍵。

「絕對倍率」指的是：以上所有的倍率都是針對 @1x 設計稿下的輸出倍率尺寸。而當你使用 @2x 作圖時，為了保證「絕對倍率」不變，你的切圖輸出倍率就應該設置為 @0.5x/@1x/@1.5x 。

如果你在 @2x下作圖，卻依然保持輸出 @1x/@2x/@3x 的切圖，那你輸出的文件尺寸最終其實是 @2x/@4x/@6x。

有一點繞的話，我們以 Sketch 導出位圖切圖為例：

所以如果你日常使用的是 Sketch，也是用 Sketch 原生導出工具，那你的切圖預設應該根據(jù)你的作圖尺寸而定，見下表：

如果你日常使用的是 PS，用 Cutterman 切圖，那么 Cutterman 會自動識別你當前的畫板，然后根據(jù)它的寬（橫屏情況下是高）來設定它的基準分辨率。那么你在任何情況下輸出 @1x/@2x/@3x 的切圖，其實都是「絕對倍率」，不用像 Sketch 當中一樣換算。前提是「設置當前畫布為：Auto（自動識別）」。

假設你在 @2x 下作圖，執(zhí)意不管不顧「絕對倍率」，又忘了交代前端人員手動處理切圖尺寸的話，那你所有的切圖尺寸實際都是設計稿所需圖標尺寸的2倍。就算前端小哥幫你手動處理了切圖尺寸，每一張切圖所包含的像素信息，都比項目真實所需的要多很多，完全就是在徒增所需切圖文件的大小。

注意切圖文件大小

切記，公司的線上項目中，用戶從服務器下載的每一單位的流量都是要公司花錢的，所以許多項目管理者都是很在意控制線上文件大小的。于是壓縮切圖是 UI 必備的技能之一。

雖然圖標的文件大小一般只有幾 KB，但是項目大了難免積少成多，所以在真實項目中，不管任何切圖我都會手動壓縮一次。

這里推薦一個壓縮 .png 文件大小，但幾乎不會產(chǎn)生失真的免費網(wǎng)站 tinypng3（是我曾經(jīng)深愛的一位前端小哥推薦給我的，在此表示感謝）。

2. 矢量圖

位圖切圖會面臨交付的倍率圖過多、容易失真、文件大小難控制等問題，但對于矢量圖，這些問題都得到了解決。目前.svg矢量圖落地也在項目中越來越流行了。UI 可以在 Sketch 或 Ai 中制作。

一般與前端人員對接有在線圖標庫對接與本地文件對接兩種。

在線矢量圖標庫有很多，國內(nèi)比較流行的是阿里巴巴矢量圖標庫-iconfont?；本地對接就是直接將文件發(fā)送給前端人員，他們會自行進行項目文件的管理與調(diào)用。

如果 .svg 切圖輸出后，與設計稿中樣式不符，請注意排查以下三點：

svg 不支持漸變顏色填充；

• svg 不支持描邊，請將所有的描邊輪廓化。Sketch 中可通過「圖層-輪廓化」；AI 中可通過「對象－路徑－輪廓化描邊」；
• 要確保一組圖標的文件尺寸一致，需在圖標下方增加一個透明方形，和圖標一同導出。

動態(tài)圖標

為了提升用戶體驗和產(chǎn)品趣味性，動效微交互的標簽欄圖標也越來越流行了。

動效在前端落地的方法其實有很多：

• 前端代碼直接實現(xiàn)：代碼是很強大的，但通常用代碼直接寫復雜動效會很浪費項目時間。簡單維度的動效如位移、透明度、大小變化等可以借助代碼，但復雜動效就不要去打擾前端小哥了；
• 直接剛 gif：這已經(jīng)是老舊技術時代的動畫解決方案了，文件大且請求文件也需要時間，有時候無法給用戶及時的觸控反饋。再者它是位圖的原因，在高分辨率屏幕上縮放容易失真。
• png 序列幀：我們知道，動畫是一張一張的靜態(tài)圖交替變化形成的。如果將每一幀動畫都拆分成一張圖片，就有了 png 序列幀。所以一套動畫的 png 序列幀往往非常多，文件大小自然就變大了。所以后來也有團隊引進了雪碧圖的方式，但文件大小依然不樂觀。并且同樣是位圖的原因，高分辨率屏幕容易失真。
• Facebook Pop/Rebound/Keyframes/Facebook Pop/Rebound 是 Facebook 給 iOS 和 Android 提供的常用動畫預設，是較早將動效代碼化的開源技術方案，但動畫效果預設只有彈簧/衰減等一些簡單樣式。后來 Facebook 又推出了 Keyframes，允許設計師自己在 Ae 中自定義動畫并導出，然后交付給前端人員。
• Lottie 動畫：和 Facebook Keyframes 相同，都是結(jié)合 Ae 輸出動畫代碼。但是 Lottie 更厲害的地方在于，它比起 Facebook Keyframes 來支持的 Ae 樣式更多，例如蒙版、遮罩、修剪路徑等等。

所以綜上所述，落地標簽欄動態(tài)圖標，目前最高效可行的還是 Lottie 動畫。

1. Lottie的背景

Lottie 是 Airbnb 開源的一個跨平臺動畫庫。表現(xiàn)層面它是一張圖片，但實現(xiàn)的方式是通過代碼，所以它是矢量的。很花式的動畫也可以把文件大小做到非常小。

UI 與前端對接是通過交付一個 json 代碼文件。

如果這是你第一次接觸 Lottie，再好不過的體驗方法就是玩一玩阿里提供的一站式動畫平臺：犸良動畫 5。它最底層采用的技術就是 Lottie，只是被阿里二次封裝了許多預設的動畫效果，你可以自定義其中的元素與參數(shù)，然后試著導出你的第一個 json 文件。

2. Lottie如何上手

接下來是簡單粗暴的 UI 與前端對接實現(xiàn) Lottie 動畫落地的全步驟參考。在此之前，想要全方位了解 Lottie 的相關信息，請參閱 Lottie 官方說明文檔 6。

步驟一：安裝 Ae 和 bodymovin

制作 Lottie 動畫，首先你必需兩個工具：Ae 和 bodymovin 插件。

Ae 最低版本要求為 Ae CC2014。又因為據(jù)很多設計師反饋，目前 bodymovin 在漢化后的 Ae 中使用會出現(xiàn)諸多問題，所以后面的教程都是基于 Ae 英文版。如果你漢化了Ae，最好在需要制作 Lottie 動畫時取消漢化。

然后獲取 bodymovin7。bodymovin 插件更新至今，版本已非常多，并不一定最新版就適用于你當前的項目，因為前端使用的 bodymovin 解析包可能無法解析你用最新版 bodymovin 插件輸出的 json 文件。

一旦確定使用 Lottie，前端人員會在 GitHub 查詢 Lottie 相關文檔的，所以 UI 只需要配合前端確定一下合適的 bodymovin 插件版本就可以了。最終走查時，一定要確保當前 bodymovin 輸出的動畫在項目所需要運行的所有環(huán)境中可運行，才說明 UI 使用的 bodymovin 插件和前端使用的 bodymovin 解析包版本是兼容的。

獲取了 bodymovin 后，將 bodymovin 拖入到 ZXP Installer8 中，ZXP Installer 會自動識別插件安裝到 Ae。

安裝完成后，就可以在 AE 的「窗口-擴展」中看到 bodymovin 啦。

步驟二：將 Sketch 或 Ai 中的文件導入 Ae

如果你技術嫻熟，當然也可以直接在 Ae 中繪制圖案動畫。但如果你還是習慣先在其他軟件中繪制好基礎圖案，再到 Ae 中制作動畫，那你需要了解如何將圖案導入 Ae。

Ai 和 Ae 都是 Adobe 旗下的工具，所以 Ae 是可以完美解析 .ai 文件的，如果你是使用 Ai 作圖，可直接存儲為 .ai 文件，再在 Ae 中打開。

如果你使用的是 Sketch，可以先導出為 .svg，再用 Ai 打開該 .svg 文件，轉(zhuǎn)換存儲格式為 .ai，最后到 Ae 中打開。

當然，Sketch 還有直接和 Ae 對接的插件，AEUX（前身 Sketch2AE）9。需要在 Sketch 和 Ae 中同時安裝 AEUX 插件，Sketch 負責傳送，Ae 負責接收。具體的使用方法可以在官網(wǎng)教程中查看，我就不再贅述了。

步驟三：制作動效并輸出

和靜態(tài)圖標同理，為了保證落地時圖標視覺大小一致，一組動效圖標輸出的文件尺寸應該是相同的。所以在你制作動畫之前需要確定合成文件的尺寸。Lottie 官方建議：因為 Lottie 輸出的是矢量動畫，所以建議以 @1x 輸出動效，前端人員在任何屏幕上放大并不會失真。

在制作之前請務必詳細閱讀 Lottie 所支持的 Ae 參數(shù)文檔10，以免辛苦做出的動效，前端無法解析。特別提醒：原生環(huán)境中 bodymovin 是不支持解析 Ae 表達式的。

完成制作動效后，就可以通過 bodymovin 導出動效了。

步驟四：預覽與交付

導出完成后在你的目的地文件夾中將存在一個 .json 文檔，如果你的動效中還使用了位圖，系統(tǒng)還會自動生成一個 images 文件夾。這些都是你需要交付給與你對接的前端開發(fā)人員的文件。

.json 文件中記錄的動效代碼 UI 不需要過多關心，但是其中兩個信息你是一定要了解的。它們是你與前端對接溝通和獲悉文件信息的一些關鍵參數(shù)。

UI 自檢動效或其他相關人員需要預覽動效的時候，可以用 LottieFiles11，拖入 .json 文件即可預覽。iOS 和 Android 還可以下載 LottieFiles APP，掃描預覽頁中的二維碼即可在移動端預覽。

總結(jié)

整個制作圖標的流程我已經(jīng)全部整理出來了。首先要注意圖標的規(guī)范，然后制作位圖、矢量、動效圖標時的注意點，我?guī)缀醢盐以谡鎸嶍椖恐胁冗^的坑都告訴大家了。剩下的創(chuàng)造性的環(huán)節(jié)就交給你了。

文章來源：優(yōu)設網(wǎng)     作者：UCD耍家

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務