2019-8-23 濤濤
當(dāng)界面設(shè)計定稿之后，設(shè)計師需要對圖標(biāo)進(jìn)行切片，提供給開發(fā)工程師。切圖與標(biāo)注是為了能夠滿足開發(fā)人員對于效果圖的高度還原需求，直接影響到工程師對設(shè)計效果的還原度，并且也是設(shè)計師重要的輸出物之一。合適、精準(zhǔn)的切圖可以最大限度地還原設(shè)計圖，起到事半功倍的效果。
通常我們只需要對 icon 與圖片進(jìn)行切圖即可，文字、線條和一些標(biāo)準(zhǔn)的幾何形狀是不需要切圖的，例如搜索框只需要在標(biāo)注中描述它的尺寸、圓角大小、背景色值、不透明度即可，開發(fā)工程師可以用代碼實(shí)現(xiàn)這種效果。
桌面圖標(biāo)切圖輸出
App 的桌面圖標(biāo)會被運(yùn)用在很多不同的地方，比如手機(jī)桌面、APP store、手機(jī)的設(shè)置列表，所以 app 桌面圖標(biāo)需要很多個不同尺寸的切圖輸出。兩個平臺對應(yīng)的桌面圖標(biāo)設(shè)計輸出尺寸也不盡相同，在輸出的時候要把雙平臺的尺寸全部輸出切圖。桌面圖標(biāo)切圖只需要提供直角的圖標(biāo)切圖即可，手機(jī)系統(tǒng)會自動生成圓角效果。
系統(tǒng)圖標(biāo)切圖輸出
一套圖適配雙平臺：iOS平臺（iPhone 6plus版本除外）和安卓平臺公用 44*44px 切圖素材，即可實(shí)現(xiàn)一套切圖適配兩個平臺的開發(fā)。
適配大屏幕：為了適配 iPhone 6plus、iPhone 7plus，單獨(dú)切一套比原有 44*44px 切圖大 1.5 倍的切圖，即 66*66px 大小的切圖。
APP內(nèi)功能圖標(biāo)
圖標(biāo)是可以有留白區(qū)域的，建議圖標(biāo)尺寸盡量不要過多。
圖片類切圖主要是指啟動頁、新手引導(dǎo)頁、默認(rèn)提示、廣告圖等需要完整切圖的圖片。同一類型的圖片切圖一般要保持同樣的尺寸大小，以便于工程師開發(fā)使用。另外一般這些切圖的文件較大，在切圖過程中需要控制切圖文件的大小。
全屏類切圖
局部類切圖
動效元素切圖一般是指在 app 中加載動效所需要的切圖元素。
gif 動圖切圖一般分為三種：
一是只需要給到 gif 圖動效的部分即可。
△ 城易logo
二是，導(dǎo)出序列圖片壓縮打包給開發(fā)人員。
三是導(dǎo)出 json 。
Airbnb 開發(fā)了一款動效神器：Lottie，這是一個將 After Effects 動畫提供給任意一個 iOS，macOS，Android 還有 React Native 原生 APP 的文件庫。這些動畫通過一個叫 Bodymovin 的開源 After Effects 插件，以 JSON 文件的形式進(jìn)行輸出。Lottie 通過 JSON 格式下載動畫數(shù)據(jù)并實(shí)時提供給開發(fā)者。
相關(guān)鏈接
如何導(dǎo)出json動畫文件
打開 AE，首選項(xiàng) – 常規(guī)，將允許腳本寫入文件和訪問網(wǎng)絡(luò)選項(xiàng)勾選上。
窗口 – 擴(kuò)展 – Bodymovin，選擇好合成和保存路徑后，點(diǎn)擊 Render 導(dǎo)出 data.jason 文件，再把該文件交給 iOS 開發(fā) （其他同理），具體如下圖：
這里設(shè)置選擇 Demo ，可以導(dǎo)出 html 文件，在瀏覽器查看動畫效果。選擇 Glyphs 將字體轉(zhuǎn)換成圖形形狀。
導(dǎo)出文件：
在線測試結(jié)果：可以直接上傳 json 文件，可以提前知道動畫是否有問題，然后再交付給開發(fā)。
網(wǎng)址：https://nicolasjengler.github.io/bodymovins-json-tester/dist/
1. 通用切圖命名：組件_類別_功能_狀態(tài)@2x.png
舉例：tabbar_icon_home_default@2x.png（對應(yīng)中文：標(biāo)簽欄_圖標(biāo)_主頁_默認(rèn)@2x.png）
2. 模塊特有切圖命名：模塊_類別_功能_狀態(tài)@2x.png
舉例：bill_icon_search_pressed@2x.png（對應(yīng)的中文為：賬單_圖標(biāo)_搜索_ 默認(rèn)@2x.png）
3. 常用英文單詞表
現(xiàn)如今市場已有很多設(shè)計交互的平臺，如：國內(nèi)的墨刀、藍(lán)湖、摹客等，國外的 Figma、invision 等，各自都有優(yōu)秀的特點(diǎn)，既滿足交互需求，又能有標(biāo)注切圖功能，選擇適合自己團(tuán)隊(duì)的工具與開發(fā)一起協(xié)作即可。
1. Figma
支持 sketch 導(dǎo)入，F(xiàn)igma 也像 Zeplin 一樣，標(biāo)注頁面間距與尺寸，并且支持各種圖片格式、尺寸、形態(tài)輸出，開發(fā)人員也有相應(yīng)的代碼可用參考，分享鏈接即可。
2. 墨刀
支持 sketch 上傳頁面至客戶端，分享鏈接即可。支持多種切圖格式下載，開發(fā)人員也有相應(yīng)的代碼可用參考，操作簡單清晰。
3. 藍(lán)湖
支持軟件 PS、sketch 上傳在線標(biāo)注，在設(shè)計源文件上切好圖片，開發(fā)人員可在線上下載，且有相應(yīng)的代碼可用參考，分享鏈接即可。
文章來源：優(yōu)設(shè)
藍(lán)藍(lán)設(shè)計的小編 http://www.wtxcl.cn