2021-4-21 周周
如期而至，這是標(biāo)簽欄控件總結(jié)的第二期。這一期真是掏空職業(yè)經(jīng)驗，希望對你的工作有所幫助。
這一期我們來聊一聊標(biāo)簽欄中的關(guān)鍵元素——圖標(biāo)。
圖標(biāo)其實存在于界面中的許多地方，但因為這一期主要分析標(biāo)簽欄，所以我會借標(biāo)簽欄中較主流的圖標(biāo)樣式，總結(jié)一套圖標(biāo)制作與落地方法。這些方法在圖標(biāo)制作過程中都是相通的，大家可以舉一反三。
1. 圖標(biāo)樣式
圖標(biāo)具體樣式風(fēng)格的定義是非常主觀的，網(wǎng)絡(luò)上也流傳著許多的教程教大家如何設(shè)計五花八門的圖標(biāo)，所以在這里我就不再贅述了。我主要來總結(jié)一下基礎(chǔ)的標(biāo)簽欄圖標(biāo)一般有哪些樣式變化。
我調(diào)研了諸多的應(yīng)用程序，發(fā)現(xiàn)主流的 APP 標(biāo)簽欄樣式變化，大致分為以下五種。其中占比最多的是「由線型轉(zhuǎn)面型」。
調(diào)研的應(yīng)用程序中，所有使用到線性圖標(biāo)的應(yīng)用程序，都將描邊粗細(xì)限制在 1pt-2pt 之間。
2. 圖標(biāo)視覺大小
上一期我們講到，iOS 定義了一套標(biāo)簽欄圖標(biāo)的尺寸規(guī)范。
iOS 在這里所定義的尺寸并不是圖標(biāo)文件最后輸出的尺寸，而是給設(shè)計師作圖時，針對不同圖標(biāo)形狀的參考尺寸，目的是為了讓圖標(biāo)的視覺大小看上去一致。
那么為什么 iOS 會根據(jù)不同的圖標(biāo)形狀給出不同的圖標(biāo)尺寸呢？因為 50px×50px 的正方形比 50px×50px 的圓形面積更大，所以正方形的視覺大小也會大于圓形。為了統(tǒng)一圖標(biāo)的視覺大小，正方形要做適當(dāng)?shù)拿娣e收縮處理。（矩形同理）
于是我們看到許多平臺都推出了圖標(biāo)輔助網(wǎng)格規(guī)范 1。其實如果遵從「面積相等」原理，理論上所有的圖標(biāo)網(wǎng)格都應(yīng)該由下面這一套推理公式得出（以Material Design 標(biāo)準(zhǔn)圖標(biāo)網(wǎng)格為例）：
但實際情況是，不同平臺的圖標(biāo)輔助網(wǎng)格規(guī)范建議尺寸都有一定的差異。原因就在于，雖然有時候我們參考「面積相等」原則對圖標(biāo)視覺尺寸進(jìn)行了規(guī)范，但項目落地后發(fā)現(xiàn)視覺上可能還是有一些不協(xié)調(diào)，所以最終設(shè)計師還是會憑借自己的主觀判斷再進(jìn)行微調(diào)。
記?。汉玫脑O(shè)計作品是理性的設(shè)計理論與設(shè)計師本身感性的碰撞結(jié)果，二者缺一不可。
3. 圖標(biāo)輸出尺寸
iOS 規(guī)定標(biāo)簽欄圖標(biāo)的輸出尺寸統(tǒng)一為 31pt×28pt；Material Design 規(guī)定標(biāo)簽欄圖標(biāo)的輸出尺寸統(tǒng)一為 24dp×24dp。
但我們發(fā)現(xiàn)，在借助了圖標(biāo)網(wǎng)格解決了圖標(biāo)視覺大小的問題之后，每一個不同形狀的圖標(biāo)，尺寸其實是不同的。為了方便前端落地，我們在輸出切圖文件時，要保持每一個圖標(biāo)文件的輸出尺寸是相同的。該怎么辦呢？
于是我們將一組圖標(biāo)都放置在一個比圖標(biāo)本身略大的相同尺寸容器中。而圖標(biāo)與這個容器之間的空白像素，正好也幫助我們規(guī)避了圖標(biāo)落地后，切圖邊緣像素可能被截斷的現(xiàn)象發(fā)生，所以我們稱這個區(qū)域為「安全邊距」。
對于安全邊距的規(guī)定：Material Design 全平臺規(guī)定圖標(biāo)的安全間距統(tǒng)一 2dp；iOS 則根據(jù)不同的圖標(biāo)使用場景給出的不同的圖標(biāo)網(wǎng)格和圖標(biāo)安全間距 2。
標(biāo)簽欄的圖標(biāo)一般分為靜態(tài)圖標(biāo)和動態(tài)圖標(biāo)兩種。
靜態(tài)圖標(biāo)的實現(xiàn)方法相對容易，可以與前端溝通確定本次項目交付的標(biāo)簽欄圖標(biāo)文件是采用位圖還是矢量圖。如果是位圖建議交付 .png 格式文件；如果是矢量圖建議交付 .svg 格式文件。
使用位圖時請注意以下兩點(diǎn)：
不同項目環(huán)境輸出的切圖套數(shù)不同
請注意：這里我所提到的倍率全都是「絕對倍率」，這個概念非常關(guān)鍵。
「絕對倍率」指的是：以上所有的倍率都是針對 @1x 設(shè)計稿下的輸出倍率尺寸。而當(dāng)你使用 @2x 作圖時，為了保證「絕對倍率」不變，你的切圖輸出倍率就應(yīng)該設(shè)置為 @0.5x/@1x/@1.5x 。
如果你在 @2x下作圖，卻依然保持輸出 @1x/@2x/@3x 的切圖，那你輸出的文件尺寸最終其實是 @2x/@4x/@6x。
有一點(diǎn)繞的話，我們以 Sketch 導(dǎo)出位圖切圖為例：
所以如果你日常使用的是 Sketch，也是用 Sketch 原生導(dǎo)出工具，那你的切圖預(yù)設(shè)應(yīng)該根據(jù)你的作圖尺寸而定，見下表：
如果你日常使用的是 PS，用 Cutterman 切圖，那么 Cutterman 會自動識別你當(dāng)前的畫板，然后根據(jù)它的寬（橫屏情況下是高）來設(shè)定它的基準(zhǔn)分辨率。那么你在任何情況下輸出 @1x/@2x/@3x 的切圖，其實都是「絕對倍率」，不用像 Sketch 當(dāng)中一樣換算。前提是「設(shè)置當(dāng)前畫布為：Auto（自動識別）」。
假設(shè)你在 @2x 下作圖，執(zhí)意不管不顧「絕對倍率」，又忘了交代前端人員手動處理切圖尺寸的話，那你所有的切圖尺寸實際都是設(shè)計稿所需圖標(biāo)尺寸的2倍。就算前端小哥幫你手動處理了切圖尺寸，每一張切圖所包含的像素信息，都比項目真實所需的要多很多，完全就是在徒增所需切圖文件的大小。
注意切圖文件大小
切記，公司的線上項目中，用戶從服務(wù)器下載的每一單位的流量都是要公司花錢的，所以許多項目管理者都是很在意控制線上文件大小的。于是壓縮切圖是 UI 必備的技能之一。
雖然圖標(biāo)的文件大小一般只有幾 KB，但是項目大了難免積少成多，所以在真實項目中，不管任何切圖我都會手動壓縮一次。
這里推薦一個壓縮 .png 文件大小，但幾乎不會產(chǎn)生失真的免費(fèi)網(wǎng)站 tinypng3（是我曾經(jīng)深愛的一位前端小哥推薦給我的，在此表示感謝）。
位圖切圖會面臨交付的倍率圖過多、容易失真、文件大小難控制等問題，但對于矢量圖，這些問題都得到了解決。目前.svg矢量圖落地也在項目中越來越流行了。UI 可以在 Sketch 或 Ai 中制作。
一般與前端人員對接有在線圖標(biāo)庫對接與本地文件對接兩種。
在線矢量圖標(biāo)庫有很多，國內(nèi)比較流行的是阿里巴巴矢量圖標(biāo)庫-iconfont?；本地對接就是直接將文件發(fā)送給前端人員，他們會自行進(jìn)行項目文件的管理與調(diào)用。
如果 .svg 切圖輸出后，與設(shè)計稿中樣式不符，請注意排查以下三點(diǎn)：
svg 不支持漸變顏色填充；
為了提升用戶體驗和產(chǎn)品趣味性，動效微交互的標(biāo)簽欄圖標(biāo)也越來越流行了。
動效在前端落地的方法其實有很多：
所以綜上所述，落地標(biāo)簽欄動態(tài)圖標(biāo)，目前最高效可行的還是 Lottie 動畫。
Lottie 是 Airbnb 開源的一個跨平臺動畫庫。表現(xiàn)層面它是一張圖片，但實現(xiàn)的方式是通過代碼，所以它是矢量的。很花式的動畫也可以把文件大小做到非常小。
UI 與前端對接是通過交付一個 json 代碼文件。
如果這是你第一次接觸 Lottie，再好不過的體驗方法就是玩一玩阿里提供的一站式動畫平臺：犸良動畫 5。它最底層采用的技術(shù)就是 Lottie，只是被阿里二次封裝了許多預(yù)設(shè)的動畫效果，你可以自定義其中的元素與參數(shù)，然后試著導(dǎo)出你的第一個 json 文件。
接下來是簡單粗暴的 UI 與前端對接實現(xiàn) Lottie 動畫落地的全步驟參考。在此之前，想要全方位了解 Lottie 的相關(guān)信息，請參閱 Lottie 官方說明文檔 6。
步驟一：安裝 Ae 和 bodymovin
制作 Lottie 動畫，首先你必需兩個工具：Ae 和 bodymovin 插件。
Ae 最低版本要求為 Ae CC2014。又因為據(jù)很多設(shè)計師反饋，目前 bodymovin 在漢化后的 Ae 中使用會出現(xiàn)諸多問題，所以后面的教程都是基于 Ae 英文版。如果你漢化了Ae，最好在需要制作 Lottie 動畫時取消漢化。
然后獲取 bodymovin7。bodymovin 插件更新至今，版本已非常多，并不一定最新版就適用于你當(dāng)前的項目，因為前端使用的 bodymovin 解析包可能無法解析你用最新版 bodymovin 插件輸出的 json 文件。
一旦確定使用 Lottie，前端人員會在 GitHub 查詢 Lottie 相關(guān)文檔的，所以 UI 只需要配合前端確定一下合適的 bodymovin 插件版本就可以了。最終走查時，一定要確保當(dāng)前 bodymovin 輸出的動畫在項目所需要運(yùn)行的所有環(huán)境中可運(yùn)行，才說明 UI 使用的 bodymovin 插件和前端使用的 bodymovin 解析包版本是兼容的。
獲取了 bodymovin 后，將 bodymovin 拖入到 ZXP Installer8 中，ZXP Installer 會自動識別插件安裝到 Ae。
安裝完成后，就可以在 AE 的「窗口-擴(kuò)展」中看到 bodymovin 啦。
步驟二：將 Sketch 或 Ai 中的文件導(dǎo)入 Ae
如果你技術(shù)嫻熟，當(dāng)然也可以直接在 Ae 中繪制圖案動畫。但如果你還是習(xí)慣先在其他軟件中繪制好基礎(chǔ)圖案，再到 Ae 中制作動畫，那你需要了解如何將圖案導(dǎo)入 Ae。
Ai 和 Ae 都是 Adobe 旗下的工具，所以 Ae 是可以完美解析 .ai 文件的，如果你是使用 Ai 作圖，可直接存儲為 .ai 文件，再在 Ae 中打開。
如果你使用的是 Sketch，可以先導(dǎo)出為 .svg，再用 Ai 打開該 .svg 文件，轉(zhuǎn)換存儲格式為 .ai，最后到 Ae 中打開。
當(dāng)然，Sketch 還有直接和 Ae 對接的插件，AEUX（前身 Sketch2AE）9。需要在 Sketch 和 Ae 中同時安裝 AEUX 插件，Sketch 負(fù)責(zé)傳送，Ae 負(fù)責(zé)接收。具體的使用方法可以在官網(wǎng)教程中查看，我就不再贅述了。
步驟三：制作動效并輸出
和靜態(tài)圖標(biāo)同理，為了保證落地時圖標(biāo)視覺大小一致，一組動效圖標(biāo)輸出的文件尺寸應(yīng)該是相同的。所以在你制作動畫之前需要確定合成文件的尺寸。Lottie 官方建議：因為 Lottie 輸出的是矢量動畫，所以建議以 @1x 輸出動效，前端人員在任何屏幕上放大并不會失真。
在制作之前請務(wù)必詳細(xì)閱讀 Lottie 所支持的 Ae 參數(shù)文檔10，以免辛苦做出的動效，前端無法解析。特別提醒：原生環(huán)境中 bodymovin 是不支持解析 Ae 表達(dá)式的。
完成制作動效后，就可以通過 bodymovin 導(dǎo)出動效了。
步驟四：預(yù)覽與交付
導(dǎo)出完成后在你的目的地文件夾中將存在一個 .json 文檔，如果你的動效中還使用了位圖，系統(tǒng)還會自動生成一個 images 文件夾。這些都是你需要交付給與你對接的前端開發(fā)人員的文件。
.json 文件中記錄的動效代碼 UI 不需要過多關(guān)心，但是其中兩個信息你是一定要了解的。它們是你與前端對接溝通和獲悉文件信息的一些關(guān)鍵參數(shù)。
UI 自檢動效或其他相關(guān)人員需要預(yù)覽動效的時候，可以用 LottieFiles11，拖入 .json 文件即可預(yù)覽。iOS 和 Android 還可以下載 LottieFiles APP，掃描預(yù)覽頁中的二維碼即可在移動端預(yù)覽。
整個制作圖標(biāo)的流程我已經(jīng)全部整理出來了。首先要注意圖標(biāo)的規(guī)范，然后制作位圖、矢量、動效圖標(biāo)時的注意點(diǎn)，我?guī)缀醢盐以谡鎸嶍椖恐胁冗^的坑都告訴大家了。剩下的創(chuàng)造性的環(huán)節(jié)就交給你了。
1. 位圖圖標(biāo)
2. 矢量圖
1. Lottie的背景
2. Lottie如何上手
文章來源：優(yōu)設(shè)網(wǎng) 作者：UCD耍家
藍(lán)藍(lán)設(shè)計( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.cqzjtgb.com