手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

UI中切圖與命名規(guī)范,收藏!

2019-3-14    用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

規(guī)范的命名方式可以提高開發(fā)人員的開發(fā)效率和整個(gè)開發(fā)團(tuán)隊(duì)的友好合作,減少溝通成本。結(jié)合經(jīng)驗(yàn)與收錄的資料,分享給大家。

一. 切圖命名英文縮寫的三個(gè)要求


1.較短的單詞可通過(guò)去掉“元音”形成縮寫

2. 較長(zhǎng)的單詞可取單詞的頭部幾個(gè)字母形成縮寫

3.還有一些特定的英文單詞縮寫


二. 命名規(guī)則


切圖命名以模塊為前綴,如:模塊_類別_功能_狀態(tài).png


模塊:

登陸頁(yè)面(login) 公共(common) 需求a(need) 需求b(demand) 發(fā)現(xiàn)(discover) 消息(message)    我(me)


類別:

導(dǎo)航欄(nav) 菜單欄(tab) 按鈕(btn)  圖標(biāo)(icon)  背景圖片(bg)  默認(rèn)圖片(def)


狀態(tài):

selected(選中) disabled(不可點(diǎn)) pressed(按下) normal(一般)


舉例說(shuō)明:

IOS:

以750*1334為基稿設(shè)計(jì),按實(shí)際項(xiàng)目開發(fā)為標(biāo)準(zhǔn),需切出@2x和@3兩套圖,把在公共頁(yè)面中的導(dǎo)航欄里面有一個(gè)按鈕(40x60px)的選中狀態(tài)切圖,直接輸出的切圖為@2x圖,@2x的1.5倍圖為@3x。


輸出成果為:

common_nav_btn_back_s@2x.png(40x60)和common_nav_btn_back_s@3x.png(80x120);

意思為:公共_導(dǎo)航_按鈕_返回_選中


Android:

以720*1280為基稿設(shè)計(jì),由于尺寸不同且多樣,需要切多套圖適配不同機(jī)器,分別為mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi,直接輸出的切圖為xhdpi;它們分別對(duì)應(yīng)的倍數(shù)關(guān)系為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);


命名示列:

啟動(dòng)  (default):    

default.png   啟動(dòng)圖片;

default_logo.png   啟動(dòng)logo


登陸(login):

login_bg.png   登陸背景圖片

login_logo.png   登陸logo

login_input_n.png   輸入框

login_input_s.png   輸入框選中狀態(tài)

login_btn_n.png    登錄按鈕

login_btn_s.png    登錄按鈕選中狀態(tài)


注冊(cè)(register):

login_register_rb_n.png    單選框按鈕

login_register_rb_s.png    單選框按鈕選中狀態(tài)


導(dǎo)航欄(nav):

common_nav_btn_menu_n.png    菜單按鈕

common_nav_btn_menu_s.png    菜單按鈕選中狀態(tài)

common_nav_btn_back_n.png    返回按鈕

common_nav_btn_back_s.png    返回按鈕選中狀態(tài)

common_nav_btn_close_n.png    關(guān)閉按鈕

common_nav_btn_close_s.png    關(guān)閉按鈕選中狀態(tài)

common_nav_btn_eidt_n.png    編輯按鈕

common_nav_btn_eidt_s.png    編輯按鈕選中狀態(tài)

common_nav_btn_delete_n.png    刪除按鈕

common_nav_btn_delete_s.png    刪除按鈕選中狀態(tài)

common_nav_btn_message_n.png    消息按鈕

common_nav_btn_message_s.png    消息按鈕選中狀態(tài)

common_nav_btn_search_n.png    搜索按鈕

common_nav_btn_search_s.png    搜索按鈕選中狀態(tài)


列表(list):

hpcollege_list_collect.png    列表頁(yè)收藏按鈕


左側(cè)導(dǎo)航欄(leftbar):

leftbar_info.png     個(gè)人中心


菜單(tab):

common_tab_need_n.png     需求a按鈕

common_tab_need_s.png     需求a按鈕選中狀態(tài)

common_tab_find_n.png     發(fā)現(xiàn)按鈕

common_tab_find_s.png     發(fā)現(xiàn)按鈕選中狀態(tài)

common_tab_demand_n.png    需求b按鈕

common_tab_demand_s.png    需求b按鈕選中狀態(tài)

common_tab_me_n.png    我的按鈕

common_tab_me_s.png    我的按鈕選中狀態(tài)


首頁(yè)(home):

home_bg.png     首頁(yè)背景

home_banner.png     首頁(yè)廣告圖


點(diǎn)9圖(.9):

rounded rectangle.9.png    圓角矩形


常用詞語(yǔ):

selected:選中/s

pressed:按下/pre

disabled:不可點(diǎn)/d

normal:正常/n

common:公共

default:登錄頁(yè)

discover:發(fā)現(xiàn)

message:消息

me:我

navigation  bar:導(dǎo)航欄/nav

tab:菜單欄

button:按鈕/btn

icon:圖標(biāo)

background-image:背景圖片/bg

default-image:默認(rèn)圖片/def

cut-off  rule:分割線/cor

login:登陸

register:注冊(cè)

list:列表

home:首頁(yè)

banner:廣告

browse:瀏覽

details:詳情

like:喜歡

dislike:不喜歡

search:搜索

content:內(nèi)容

collect:收藏

eidt:編輯

comment:評(píng)論

message:提示信息/msg

ranked:排名

location:定位

tags:標(biāo)簽

left:左

right:右

center:中

popup:彈出/pop

image:圖片/img

viedio:視頻/vd

audio:音頻/ad

title:標(biāo)題/tit

address:地址/add

number:人數(shù)

time:時(shí)間

sustem:系統(tǒng)

refresh:刷新

user:用戶

more:更多

border:邊框

next:下一步

sign:簽到

code:密碼

clear:清除

scroll:滾動(dòng)條

hover:鼠標(biāo)停留

common:公共

hot:熱點(diǎn)

zoomin:放大

zoomout:縮小

service:服務(wù)

presonal  data:個(gè)人資料/Pdata

male:男性

female:女性

report:舉報(bào)

input:輸入/ip

dropdown  menu:下拉菜單/ddm

radio button:?jiǎn)芜x框/rb

check  box:復(fù)選框/cb

progressbar:進(jìn)度條/pbar

download:下載

arrow:箭頭

share:分享

upload:上傳

release:發(fā)布

tabbar:標(biāo)簽欄

autonym:實(shí)名

藍(lán)設(shè)計(jì)www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔