更新時(shí)間:2022-01-13 來(lái)源:黑馬程序員 瀏覽量:
命名規(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) 名稱中間不要有空格,使用下畫(huà)線進(jìn)行連接。
下面列舉了移動(dò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 | 用戶: 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 |
需要注意的是,雖然上表中展示的是一些常用元素的單詞,但是每個(gè)前端工程師有著自己的命名習(xí)慣,因此在實(shí)際工作中最好和前端工程師溝通確認(rèn)。
猜你喜歡:
移動(dòng)端ui設(shè)計(jì)與pc端的差別是什么?
UI設(shè)計(jì)流程:UI設(shè)計(jì)工作全過(guò)程