首頁(yè)電商視覺(jué)設(shè)計(jì)技術(shù)文章正文

切片命名規(guī)則是什么?【UI設(shè)計(jì)師必知】

更新時(shí)間:2022年01月13日09時(shí)54分來(lái)源:傳智教育瀏覽次數(shù):

命名規(guī)則是為了團(tuán)隊(duì)能夠有一個(gè)統(tǒng)一規(guī)則，在和前端工程師進(jìn)行交接時(shí)，規(guī)范的命名對(duì)于團(tuán)隊(duì)協(xié)同有著極大的推動(dòng)作用。通常為切片命名時(shí)會(huì)遵循以下幾個(gè)規(guī)則。

(1) 命名采用英文小寫(xiě)，不要有大寫(xiě)字母出現(xiàn)。

(2) 出現(xiàn)較多層級(jí)時(shí)，最好遵循命名的通用規(guī)范“模塊_類(lèi)別_功能-狀態(tài)@2x.png",按照由大范圍逐步縮小范圍進(jìn)行命名，例如，命名一個(gè)屬于標(biāo)簽欄內(nèi)部，默認(rèn)狀態(tài)下的搜索按鈕。英文命名為: tab_button_search_nor@2x.png，對(duì)應(yīng)中文則是:標(biāo)簽欄_按鈕_搜索_默認(rèn)狀態(tài)@2x.png。

(3) 名稱(chēng)中間不要有空格，使用下畫(huà)線進(jìn)行連接。

下面列舉了移動(dòng)端界面一些常用元素的英文名稱(chēng)，具體如下。

移動(dòng)端App命名常用單詞
啟動(dòng)頁(yè)面: default	導(dǎo)航欄: nav	左側(cè)導(dǎo)航: leftbar	工具欄: tool
標(biāo)簽欄: tab	背景: bg	按鈕: button	照片: photo
圖片: img	圖標(biāo): icon	個(gè)人資料: porfile	用戶(hù): user
彈出: pop	返回: back	刷新: refresh	刪除: delete
編輯: edit	下載: download	內(nèi)容: content	廣告: banner
登錄: login	注冊(cè): register	標(biāo)題: title	提示信息: msg
鏈接: link	注釋: note	標(biāo)志: logo	主頁(yè): home
搜索: search	輸人: input	復(fù)選框: chb	下拉: cbb
單選框: rb	收藏: collect	按鈕文字: btntext	信息: info
列表: list	設(shè)置: set	更多: more	取消: cancel
按鈕常態(tài): nor	按鈕選中: sel	按鈕突出: hig	按鈕不可用: dis