首頁技術(shù)文章正文

ui設(shè)計命名規(guī)范:切片命名規(guī)則

更新時間:2022-01-13 來源:黑馬程序員 瀏覽量:

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

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

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

(3) 名稱中間不要有空格,使用下畫線進(jìn)行連接。

下面列舉了移動端界面一些常 用元素的英文名稱,具體如下。


移動端App命名常用單詞

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

需要注意的是,雖然上表中展示的是一些常用元素的單詞,但是每個前端工程師有著自己的命名習(xí)慣,因此在實際工作中最好和前端工程師溝通確認(rèn)。



猜你喜歡:

移動端ui設(shè)計與pc端的差別是什么?

UI設(shè)計的四個基本原則是什么?

UI設(shè)計流程:UI設(shè)計工作全過程

UI設(shè)計行業(yè)常見術(shù)語有哪些?

黑馬程序員UI/UE課程

分享到:
在線咨詢 我要報名
和我們在線交談!