一. 切圖命名英文縮寫的三個要求
1.較短的單詞可通過去掉“元音”形成縮寫
2. 較長的單詞可取單詞的頭部幾個字母形成縮寫
3.還有一些特定的英文單詞縮寫
二. 命名規則
切圖命名以模塊為前綴,如:模塊_類別_功能_狀態.png
模塊:
登陸頁面(login) 公共(common) 需求a(need) 需求b(demand) 發現(discover) 消息(message) 我(me)
類別:
導航欄(nav) 菜單欄(tab) 按鈕(btn) 圖標(icon) 背景圖片(bg) 默認圖片(def)
狀態:
selected(選中) disabled(不可點) pressed(按下) normal(一般)
舉例說明:
IOS:
以750*1334為基稿設計,按實際項目開發為標準,需切出@2x和@3兩套圖,把在公共頁面中的導航欄里面有一個按鈕(40x60px)的選中狀態切圖,直接輸出的切圖為@2x圖,@2x的1.5倍圖為@3x。
輸出成果為:
common_nav_btn_back_s@2x.png(40x60)和common_nav_btn_back_s@3x.png(80x120);
意思為:公共_導航_按鈕_返回_選中
Android:
以720*1280為基稿設計,由于尺寸不同且多樣,需要切多套圖適配不同機器,分別為mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi,直接輸出的切圖為xhdpi;它們分別對應的倍數關系為1、1.5、2、3、4。
輸出成果為:
common_nav_btn_back_s_mdpi.png(20x30)、
common_nav_btn_back_s_hdpi.png(30x45)、
common_nav_btn_back_s_xhdpi.png(40x60)、
common_nav_btn_back_s_xxhdpi.png(60x90)、common_nav_btn_back_s_xxxhdpi.png(80x120);
命名示列:
啟動 (default):
default.png 啟動圖片;
default_logo.png 啟動logo
登陸(login):
login_bg.png 登陸背景圖片
login_logo.png 登陸logo
login_input_n.png 輸入框
login_input_s.png 輸入框選中狀態
login_btn_n.png 登錄按鈕
login_btn_s.png 登錄按鈕選中狀態
注冊(register):
login_register_rb_n.png 單選框按鈕
login_register_rb_s.png 單選框按鈕選中狀態
導航欄(nav):
common_nav_btn_menu_n.png 菜單按鈕
common_nav_btn_menu_s.png 菜單按鈕選中狀態
common_nav_btn_back_n.png 返回按鈕
common_nav_btn_back_s.png 返回按鈕選中狀態
common_nav_btn_close_n.png 關閉按鈕
common_nav_btn_close_s.png 關閉按鈕選中狀態
common_nav_btn_eidt_n.png 編輯按鈕
common_nav_btn_eidt_s.png 編輯按鈕選中狀態
common_nav_btn_delete_n.png 刪除按鈕
common_nav_btn_delete_s.png 刪除按鈕選中狀態
common_nav_btn_message_n.png 消息按鈕
common_nav_btn_message_s.png 消息按鈕選中狀態
common_nav_btn_search_n.png 搜索按鈕
common_nav_btn_search_s.png 搜索按鈕選中狀態
列表(list):
hpcollege_list_collect.png 列表頁收藏按鈕
左側導航欄(leftbar):
leftbar_info.png 個人中心
菜單(tab):
common_tab_need_n.png 需求a按鈕
common_tab_need_s.png 需求a按鈕選中狀態
common_tab_find_n.png 發現按鈕
common_tab_find_s.png 發現按鈕選中狀態
common_tab_demand_n.png 需求b按鈕
common_tab_demand_s.png 需求b按鈕選中狀態
common_tab_me_n.png 我的按鈕
common_tab_me_s.png 我的按鈕選中狀態
首頁(home):
home_bg.png 首頁背景
home_banner.png 首頁廣告圖
點9圖(.9):
rounded rectangle.9.png 圓角矩形
常用詞語:
selected:選中/s
pressed:按下/pre
disabled:不可點/d
normal:正常/n
common:公共
default:登錄頁
discover:發現
message:消息
me:我
navigation bar:導航欄/nav
tab:菜單欄
button:按鈕/btn
icon:圖標
background-image:背景圖片/bg
default-image:默認圖片/def
cut-off rule:分割線/cor
login:登陸
register:注冊
list:列表
home:首頁
banner:廣告
browse:瀏覽
details:詳情
like:喜歡
dislike:不喜歡
search:搜索
content:內容
collect:收藏
eidt:編輯
comment:評論
message:提示信息/msg
ranked:排名
location:定位
tags:標簽
left:左
right:右
center:中
popup:彈出/pop
image:圖片/img
viedio:視頻/vd
audio:音頻/ad
title:標題/tit
address:地址/add
number:人數
time:時間
sustem:系統
refresh:刷新
user:用戶
more:更多
border:邊框
next:下一步
sign:簽到
code:密碼
clear:清除
scroll:滾動條
hover:鼠標停留
common:公共
hot:熱點
zoomin:放大
zoomout:縮小
service:服務
presonal data:個人資料/Pdata
male:男性
female:女性
report:舉報
input:輸入/ip
dropdown menu:下拉菜單/ddm
radio button:單選框/rb
check box:復選框/cb
progressbar:進度條/pbar
download:下載
arrow:箭頭
share:分享
upload:上傳
release:發布
tabbar:標簽欄
autonym:實名