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

更新時間:2022年01月13日09時54分來源:傳智教育瀏覽次數:

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

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

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

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

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

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