超全面的 UI 工作流程指南（六）：切圖標注

編者按：完整的 UI 設計流程到底是怎樣的？從需求到產品上線，要經歷多少個階段，每個階段有哪些應該掌握的基礎知識，本次優設獨家專題為你從零開始梳理出 UI 工作流程，適合新手閱讀學習。

往期回顧：

• 《超全面的 UI 設計工作流程指南（一）：需求分析》
• 《超全面的 UI 工作流程指南（二）：原型設計》
• 《超全面的 UI 工作流程指南（三）：視覺設計》
• 《超全面的 UI 工作流程指南（四）：設計規范》
• 《超全面的 UI 工作流程指南（五）：設計評審》

當界面設計定稿之后，設計師需要對圖標進行切片，提供給開發工程師。切圖與標注是為了能夠滿足開發人員對于效果圖的高度還原需求，直接影響到工程師對設計效果的還原度，并且也是設計師重要的輸出物之一。合適、精準的切圖可以最大限度地還原設計圖，起到事半功倍的效果。

通常我們只需要對 icon 與圖片進行切圖即可，文字、線條和一些標準的幾何形狀是不需要切圖的，例如搜索框只需要在標注中描述它的尺寸、圓角大小、背景色值、不透明度即可，開發工程師可以用代碼實現這種效果。

切圖基本規范

1. 切圖的尺寸必須為偶數；
2. 同一模塊內，切圖大小應保持一致；
3. 如果有背景，盡量用平鋪的背景圖案來設計（減少程序體積）；
4. 可點擊的部件要把相關狀態都切圖輸出，比如：正常狀態、點擊狀態、不可點擊狀態；
5. 輸出的切圖應當盡可能的壓縮大小，以降低 APP 的總大小，提升用戶使用時的加載速度（推薦在線壓縮：https://tinypng.com）；
6. 所有的變形字體把它當成 icon 來切；
7. 切圖輸出格式：png-24；
8. 重復的東西只切一個。

切圖輸出類型

1. 圖標切圖輸出

桌面圖標切圖輸出

App 的桌面圖標會被運用在很多不同的地方，比如手機桌面、APP store、手機的設置列表，所以 app 桌面圖標需要很多個不同尺寸的切圖輸出。兩個平臺對應的桌面圖標設計輸出尺寸也不盡相同，在輸出的時候要把雙平臺的尺寸全部輸出切圖。桌面圖標切圖只需要提供直角的圖標切圖即可，手機系統會自動生成圓角效果。

系統圖標切圖輸出

一套圖適配雙平臺：iOS平臺（iPhone 6plus版本除外）和安卓平臺公用 44*44px 切圖素材，即可實現一套切圖適配兩個平臺的開發。

適配大屏幕：為了適配 iPhone 6plus、iPhone 7plus，單獨切一套比原有 44*44px 切圖大 1.5 倍的切圖，即 66*66px 大小的切圖。

APP內功能圖標

圖標是可以有留白區域的，建議圖標尺寸盡量不要過多。

2. 圖片類切圖輸出

圖片類切圖主要是指啟動頁、新手引導頁、默認提示、廣告圖等需要完整切圖的圖片。同一類型的圖片切圖一般要保持同樣的尺寸大小，以便于工程師開發使用。另外一般這些切圖的文件較大，在切圖過程中需要控制切圖文件的大小。

全屏類切圖

局部類切圖

3. 動效元素切圖

動效元素切圖一般是指在 app 中加載動效所需要的切圖元素。

gif 動圖切圖一般分為三種：

一是只需要給到 gif 圖動效的部分即可。

△ 城易logo

二是，導出序列圖片壓縮打包給開發人員。

三是導出 json 。

Airbnb 開發了一款動效神器：Lottie，這是一個將 After Effects 動畫提供給任意一個 iOS，macOS，Android 還有 React Native 原生 APP 的文件庫。這些動畫通過一個叫 Bodymovin 的開源 After Effects 插件，以 JSON 文件的形式進行輸出。Lottie 通過 JSON 格式下載動畫數據并實時提供給開發者。

相關鏈接

• Lottie官方：Lottie 官方地址
• bodymovin：GitHub 地址（安裝方法：http://www.czdes.cn/lottie-make-loading-animation）
  如若安裝不成功，可在下面的網址中下載其他版本插件：bodymovin版本地址：https://github.com/bigxixi/bodymovin_cn
• lottie-ios：GitHub 地址
• lottie-android：GitHub 地址

如何導出json動畫文件

打開 AE，首選項 - 常規，將允許腳本寫入文件和訪問網絡選項勾選上。

窗口?- 擴展?- Bodymovin，選擇好合成和保存路徑后，點擊 Render 導出 data.jason 文件，再把該文件交給 iOS 開發 （其他同理），具體如下圖：

這里設置選擇 Demo ，可以導出 html 文件，在瀏覽器查看動畫效果。選擇 Glyphs 將字體轉換成圖形形狀。

導出文件：

在線測試結果：可以直接上傳 json 文件，可以提前知道動畫是否有問題，然后再交付給開發。

網址：https://nicolasjengler.github.io/bodymovins-json-tester/dist/

切圖命名規范

1. 通用切圖命名：組件_類別_功能_狀態@2x.png

舉例：tabbar_icon_home_default@2x.png（對應中文：標簽欄_圖標_主頁_默認@2x.png）

2. 模塊特有切圖命名：模塊_類別_功能_狀態@2x.png

舉例：bill_icon_search_pressed@2x.png（對應的中文為：賬單_圖標_搜索_ 默認@2x.png）

3. 常用英文單詞表

標注軟件

現如今市場已有很多設計交互的平臺，如：國內的墨刀、藍湖、摹客等，國外的 Figma、invision 等，各自都有優秀的特點，既滿足交互需求，又能有標注切圖功能，選擇適合自己團隊的工具與開發一起協作即可。

1. Figma

支持 sketch 導入，Figma 也像 Zeplin 一樣，標注頁面間距與尺寸，并且支持各種圖片格式、尺寸、形態輸出，開發人員也有相應的代碼可用參考，分享鏈接即可。

2. 墨刀

支持 sketch 上傳頁面至客戶端，分享鏈接即可。支持多種切圖格式下載，開發人員也有相應的代碼可用參考，操作簡單清晰。

3. 藍湖

支持軟件 PS、sketch 上傳在線標注，在設計源文件上切好圖片，開發人員可在線上下載，且有相應的代碼可用參考，分享鏈接即可。

注：本系列文章為優設獨家專題，請勿轉載。

歡迎添加作者微信交流：