超全面的 UI 工作流程指南(六):切圖標注 - 優設網 - UISDC

超全面的 UI 工作流程指南(六):切圖標注

2019/08/21 14856評論區

編者按:完整的 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 格式下載動畫數據并實時提供給開發者。

相關鏈接

如何導出json動畫文件

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

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

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

導出文件:

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

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

切圖命名規范

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

舉例:[email protected](對應中文:標簽欄_圖標_主頁_默認@2x.png)

2. ??樘賾星型濟耗?開類別_功能_狀態@2x.png

舉例:[email protected](對應的中文為:賬單_圖標_搜索_ 默認@2x.png)

3. 常用英文單詞表

標注軟件

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

1. Figma

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

2. 墨刀

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

3. 藍湖

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

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

歡迎添加作者微信交流:

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.utsvcz.com.cn/cut-label

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

sketch 界面設計 版式設計 排版布局 職場 優設專訪 設計師干貨 優設大課堂 設計達人 配色 web前端開發 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 設計規范 海報設計 設計趨勢 用戶體驗設計 動效設計 平面設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里