web前端界面切圖命名規(guī)范方法
時間：2023-09-09 23:12:01 | 來源：網(wǎng)站運營
時間：2023-09-09 23:12:01 來源：網(wǎng)站運營
web前端界面切圖命名規(guī)范方法：
Marry men 2018-12-10 11:06:07
8701
收藏 21
文章標(biāo)簽： 圖標(biāo)命名
命名規(guī)范這個是 老生常談 的一個問題，不管是切圖、還是CSS、JS以及建立文件夾都是如此，此次整理了一篇關(guān)于切圖命名的文章，除了學(xué)習(xí)切圖命名之外，更多的是要理解命名的思路方向思維，并非全抄即可
我看到過很多小伙伴的切圖命名，大多數(shù)人和新手是用拼音命名的
還有部分小伙伴更是要逆天了，是這樣命名的
以漢子命名的，（我和我的小伙伴都驚呆了），U妹很擔(dān)心你會被開發(fā)同事打拼音的命名方式也是可以用的，但在開發(fā)同事眼里，只會顯得你很Low，很不專業(yè)。
而真正規(guī)范的命名是這樣子的
規(guī)范的命名方式可以提高開發(fā)人員的開發(fā)效率和整個開發(fā)團隊的友好合作。建議要竟可能用最少的字符而又能完整的表達標(biāo)識符的含義。
一、 切圖命名英文縮寫的3個原則1. 較短的單詞可通過去掉“元音”形成縮寫
2. 較長的單詞可取單詞的頭部幾個字母形成縮寫
3. 還有一些約定俗成的英文單詞縮寫
4. 所有拼寫全為小寫英文字母
二、命名規(guī)則模塊_類別_功能_狀態(tài).pngU妹舉個栗子：nav_button_search_default.png
釋義為：導(dǎo)航_按鈕_搜索_默認.png
| 啟動界面 |
|---|
| 啟動圖片 | default.png |
| 啟動logo | default_logo.png |
| 如：default.png defoult@2x.png defauLt-512@2x.png |
| 登錄界面（login） |
|---|
| 登錄背景 | login_bg.png |
| 登錄logo | login_logo.png |
| 輸入框 | login_input.png |
| 輸入框選中狀態(tài) | login_input_pre.png |
| 登錄按鈕 | login_btn.png |
| 登錄按鈕選中狀態(tài) | login_btn_pre.png |
| 導(dǎo)航欄按鈕 (nav) |
|---|
| 命名 | nav_功能描述.png |
| 如：nav_menu.png av_menu_pre.png（同按鈕選中前后兩種狀態(tài)命名 ） |
| 按鈕命名（btn可重復(fù)使用按鈕) |
|---|
| 一般 normal | btn_xxx_normal.png |
| 點擊 highlighted | btn_xxx_highlighted.png |
| 不能點擊 disabled | btn_xxx_disable.png |
| 按下 pressed | btn_xxx_pressed.png |
| 選中 selected | btn_xxx_selected.png |
| 做為復(fù)數(shù)選擇出現(xiàn)機會不高 |
| btn_功能屬性或色彩均可.png 如：btn_blue.png tn_blue.9.png 藍色按鈕 |
| 其他命名 |
|---|
| 圖標(biāo) | icon_xxx.png |
| 圖片 | pic_xxx.png或是img_xxx.png |
| 照片 | pho_xxx.png |
| 左側(cè)導(dǎo)航 |
|---|
| 命名 | leftbar_功能描述.png |
| 如：leftbar_info.png leftbar_info_pre.png 個人中心 |
| 底部選項卡按鈕（TabBar） |
|---|
| 命名 | Tab_功能描述.png |
| 如：tab_set.Png av_set_pre.png 設(shè)置 |
| 主頁命名 |
|---|
| 命名 | home_功能屬性＋描述.png |
| 如：home_menu_recommended.png 熱門推薦 ps：描述可用英文或拼間開頭字母組合等 |
| 列表頁命名規(guī)則 |
|---|
| 命名 | list_功能屬性＋描述.png |
| 如：list_menu_collect.png 列表頁收藏按鈕 |
| UI文件命名規(guī)范常用詞 |
|---|
| 常用狀態(tài) | 正常 | normal |
| 按下 | pressed |
| 選中 | selected |
| 禁用 | disabled |
| 已訪問 | visited |
| 懸停 | hover |
| 控件＆部件 控件：較獨立的可操作界面元素部件：描述屬于某控件一部分 | 按鈕（可點） | btn |
| 圖標(biāo) | icon不可點、非點擊主體、圖案部件 |
| 標(biāo)記 | sign |
| 列表 | list |
| 菜單 | menu |
| 視圖 | view |
| 面板 | panel |
| 薄板 | sheet 底部彈出菜單 |
| 欄 | bar |
| 狀態(tài)欄 | statusBar |
| 導(dǎo)航欄 | naviBar |
| 標(biāo)簽欄 | tabBar |
| 工具欄 | toolBar |
| 切換開關(guān) | switch |
| 滑動器 | slider |
| 單選框 | radio |
| 復(fù)選框 | checkBox |
| 背景 | bg |
| 蒙版、遮罩 | mask |
| 收藏 | collect |
| 評論 | comment |
| 廣告 | ad |
| 時間 | time |
| 音頻 | audio |
| 視頻 | viedio |
| 不喜歡 | dislike |
| 用戶 | user |
| 首頁 | home |
| 排名 | ranked |
| 搜索 | search |
| 標(biāo)志 | logo |
| 進度條 | progress bar |
| 默認圖片 | def_ |
| 分隔圖片 | seg_ |
| 選擇 | sel_ |
| 關(guān)閉 | close |
| 返回 | back |
| 編輯 | eidt |
| 內(nèi)容 | content |
| 左 中 右 | left center right |
| 提示信息 | msg |
| 個人資料 | porfile |
| 彈出 | pop |
| 刪除 | delete |
| 下載 | download |
| 登錄 | login |
| 注冊 | regsiter |
| 標(biāo)題 | title |
| 注釋 | note |
| 鏈接 | link |
| 圖片 | image（img） |
| 刷新 | refresh |
| 常用補充描述 | 頂部 | top |
| 中間 | middle |
| 底部 | bottom |
| 第一 | first |
| 第二 | second |
| 最后 | last |
| 頁頭 | header |
| 頁腳 | footer |
三、 總結(jié)關(guān)于切圖命名規(guī)范就到這里了，最后還是想和大家說，有什么不懂的、不明白的地方，要多去和開發(fā)的同事請教和溝通，這樣才能省時省力，事半功倍，更加高效的完成工作。
來自于 漿糊之家
看到 感覺不錯分享給大家
關(guān)鍵詞：命名,規(guī)范,方法,界面
在線咨詢