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

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

2019/08/21 14734評論區

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

往期回顧:

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

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

切圖基本規范

  1. 切圖的尺寸必須為偶數;
  2. 同一模塊內,切圖巨細應堅持一致;
  3. 如果有配景,盡量用平鋪的配景圖案來設計(減少法式體積);
  4. 可點擊的部件要把相關狀態都切圖輸出,好比:正常狀態、點擊狀態、弗成點擊狀態;
  5. 輸出的切圖應當盡可能的壓縮巨細,以降低 APP 的總巨細,提升用戶使用時的加載速度(推薦在線壓縮:);
  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 文件,可以提前知道動畫是否有問題,然后再交付給開發。

網址:

切圖命名規范

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 上傳在線標注,在設計源文件上切好圖片,開發人員可在線上下載,且有相應的代碼可用參考,分享鏈接即可。

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

歡迎添加作者微信交流:

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

發表評論 加載中....

評論加載中....

uisdc

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

您還沒有登錄

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

微信掃碼

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

把好文章收藏到微信

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