1. 程式人生 > >安卓的切圖規範

安卓的切圖規範

Android UI 切圖命名規範、標註規範及單位描述

很多UI設計師做APP切圖都會有兩套,一套是Android的,一套是IOS的。IOS我這邊暫不作講解,因為我本人也不是開發IOS。這裡整理一下我在Android開發中總結的一些有利於本人開發的一些資源圖片命名規則,並將其中有價值傳播給大家。 (PS:本人有時拿到UI切圖,看到名稱確實是不知道這個圖是用來幹嘛和放在哪裡的,還得跑過去問UI。。所以,一個好的命名規則可以讓我們開發節省不少的時間。)

本文參考目錄:

 

  • 字首
  • 位置、元件、用途
  • 字尾
  • 尺寸字型顏色標註
  • 注意事項
  • dp和px的關係

 

字首

字首是一種簡單記憶、節約成本的純文字標記語言,使用字首能快速知道切圖是用作那一元件類別,好的字首也無非就以下幾種:

字首 原始 說明 示例
ic icon 主要用於佈局和子佈局的圖示 ic_launcher
bg background 要用於佈局和子佈局的背景 bg_welcome
btn button 主要用於按鈕的表示,有時會在ic和btn之間猶豫,簡單的區分即是功能檢視,如果一個view執行的時back或者confirm或者cancel的功能,則命名上則應該使用btn btn_ok
di divider 主要用於分隔線,包括列表、普通佈局中的線 di_item
img image 主要用於靜態圖片 img_avatar
cl color 主要用於顏色 cl_white

位置、元件、用途

一般情況下,所切的圖片用於哪個位置、哪個元件,就需要加上這些來命名(緊跟字首),這樣一來,就很清楚切圖作用了:

位置標識 說明 示例
common 公共標識 img_common_bg(共同背景)
tab 選項卡 ic_tab_setting (設定)
notify 狀態列、通知欄 btn_notify_download (通知欄下載按鈕)
dialog 對話方塊 bg_dialog_blur (模糊化的對話方塊背景)
menu 選單 bg_menu_save (儲存選單背景)
anim 用於動畫 img_anim_loading01 (loading幀動畫第一幀)
pop 用於彈出框 img_pop_bg (彈出框背景,區別於dialog)
mask 用於遮罩層 img_dialog_mask (對話方塊上層遮罩)
circle 圓圈 img_circle_avatar (圓形頭像)

字尾

字尾一般是來表示切圖的顏色、透明度、狀態等資訊:

字尾 說明 示例
normal 預設狀態 btn_cancel_normal (取消按鈕預設狀態時)
pressed 按下狀態 btn_cancel_pressed (取消按鈕按下狀態時)
focused 獲得焦點 btn_cancel_focused (取消按鈕獲得焦點、高亮時)
selected 選中狀態 btn_cancel_selected (取消按鈕選中時)
enabled 不能點選 btn_cancel_enabled (取消按鈕不可用時)
white 白色 bg_white (白色)
tra 透明度 bg_banner_green_tra30 (banner中綠色背景指定30%透明)
level 層次、水平 img_status_level60 (狀態為60的時候)
bg 用於字尾背景 當不在字首命名時,新增到字尾命名

通過上述介紹,一般遇到的情況也就這麼一些,只需要按照字首+位置用途+字尾就差不多了,這裡列舉一些比較好的命名:

命名 說明
btn_download_start_green_normal 綠色開始下載按鈕預設狀態
img_setting_bg 設定頁面全背景
ic_menu_save_gray_normal 選單中灰色儲存按鈕預設狀態
img_notify_wlan_level20 狀態列中wifi訊號強度為20的時候
ic_share_qzone_pressed QQ空間分享圖示選中時

尺寸字型顏色標註

尺寸:1、畫布大小定位 720 x 1280 或 1080 x 1920,72 dpi等; 

2、只使用偶數單位的尺寸,比如 96 px 的列表項高度,16 px 的邊距,64 px 的圖示邊長; 

3、只使用偶數單位 24 pt,28 pt,36 pt等字型大小; 

4、設計完成以後,所有尺寸的 px 值除以 2(需要約定的倍數) 作為 dp 數值交給工程師; 

5、所有字型的 pt 值除以 2 (需要約定的倍數)作為 sp 數值交給工程師; 

6、所有切圖變成三份,分別是原始大小、縮小 1.5 倍,縮小 2 倍,分別作為 xhdpi,hdpi,mdpi 的資源交給工程師;

字型:只需要全域性標出共用字型即可,特殊字型特殊標註。顏色:顏色值一般使用十六進位制表示,如 #FFFFFF, #90FFFFFF 其中90兩位代表透明度。透明度計算: 

FF 代表不透明,7F代表半透明,00代表不透明注意事項

不使用特殊符號開頭: 如 — _ @ 等

  • 不使用阿拉伯數字開頭
  • 不在任何位置使用特殊符號包括中文符號和中劃線
  • 命名分隔符統一為下劃線
  • 九宮格圖片檔案拓展名為 .9.png
  • 字尾狀態名最好為全拼,如normal

dp和px的關係

1、android手機有一些初始的解析度:

密度 ldpi mdpi hdpi xhdpi xxhdpi xxxhdpi
密度值 120 160 240 320 480 640
解析度 240x320 320x480 480x800 720x1280 1080x1920 2160x3840

2、在android中,以320x480解析度為基準螢幕,即密度值為160時,1dp=1px: 

3、切圖包的存放位置(以當前48dp為例):

對應dp 48dp 48dp 48dp 48dp 48dp 48dp
對應px 36px 48px 72px 96px 144px 192px
資料夾 ldpi mdpi hdpi xhdpi xxhdpi xxxhdpi

4、常用設計尺寸解析度: 

5、多種螢幕解析度規則: 

6、描述間距或長度時使用dp: 

7、描述字號大小時使用sp: 

 

自動切圖工具推薦

摹客iDoc

在這裡向UI設計師,前端推薦一款好用的國產自動切圖神器-摹客iDoc,一款更快更簡單的產品協作設計平臺,智慧標註、一鍵切圖、多樣批註、互動原型、全貌畫板、團隊管理,從產品到開發,只要一個文件。

特色點:

UI設計師

①完成設計一鍵上傳

②支援Sketch、PS、XD的設計原稿和設計圖

③標註和切圖自動生成,再不用手工做

產品經理

①多種批註樣式,更好的表達想法和意見

②快速製作互動原型,支援多種動畫特效

③支援多種的原型(Axure、Justinmind、Mockplus)和各類文件,直接線上預覽

前端工程師

①輕鬆檢視智慧標註。還可顯示百分比標註,一次選擇多個圖層並智慧標註

②自動獲取切圖,可下載多個或全部切圖

③各種平臺適配自動呈現

④一鍵檢視頁面中的重複元素

⑤樣式程式碼自動匯出

文末福利

設計師雙11福利,智慧標註和一鍵切圖工具,免費升級前往:

https://idoc.mockplus.cn/get-idoc

憑免費體驗碼 thomas 即可獲得,強烈推薦給用PS,Sketch和Adobe XD的夥伴。

原文連結:https://blog.csdn.net/myLoverIsYou_web/article/details/80486357