關于UI界面的切圖命名規范，U妹覺得關鍵是在于團隊能夠有一個統一的規則，所以這里只介紹一種通用的命名規則，當然大家也可以根據自己的實際情況去制定，這里只提供一種方法與思路，僅供參考。

規范的命名方式可以提高開發人員的的開發效率和整個開發團隊的友好合作。U妹覺得要盡可能用最少的字符而又能完整的表達標識符的含義。

一、切圖命名英文縮寫的3個原則

1.較短的單詞可以通過去掉“元音”形成縮寫

2.較長的單詞可去單詞的頭部幾個字母形成縮寫

3.還有一些約定成俗的英文單詞縮寫

二、命名規則

模塊_類別_功能_狀態.png

U妹舉個例子：nav_button_search_default.png

釋義為：導航_按鈕_搜索_默認.png

啟動界面

啟動圖片 default.png

啟動logo default.png

如：default.png\defoult@2x.png\default-568@2x.png

登錄界面

登錄背景 ? ?login_bg.png

登錄logo ? login_logo.png

輸入框 ? ? ? login_input.png

輸入框選中狀態 ? ? ? login_input_pre.png

登錄按鈕? ? ? ?login_btn.png

登錄按鈕選中狀態? login_btn_pre.png

導航欄按鈕 (nav) 命名

nav_功能描述.png

如：nav_menu.png\nav_menu_pre.png(同按鈕選中前后兩種狀態命名 )

按鈕命名(btn可重復使用按鈕)

一般 ? normal ? btn_xxx_normal.png

點擊 ?highlight btn_xxx_highlight.png

不能點擊 ?disabled? btn_xxx_disable.png

按下 ?pressed btn_xxx_pressed.png

選中 ?selected btn_xxx_selected.png 做為復數選擇出現機會不高

btn_功能屬性或色彩均可.png

如：btn_blue.png\btn_blue.9.png ? 藍色按鈕

其他命名

圖標 icon_xxx.png

圖片 pic_xxx.png或是img_xxx.png

照片 pho_xxx.png

左側導航 命名 leftbar_功能描述.png

如：leftbar_info.png\leftbar_info_pre.png ? 個人中心

底部選項卡按鈕(TabBar)

命名 Tab_功能描述.png

如：tab_set.Png\nav_set_pre.png ?設置

主頁命名

命名 home_功能屬性＋描述.png

如：home_menu_recommended.png ?熱門推薦

ps：描述可用英文或拼間開頭字母組合等

列表頁命名規則

命名 List_功能屬性＋描述.png

如：list_menu_collect.png ?列表頁收藏按鈕

UI文件命名規范常用詞

常用狀態

正常 normat

按下 pressed

選中 selected

禁用 disabled

已訪問 visited

懸停 hover

控件＆部件

控件：較獨立的可操作界面元素

部件：描述屬于某控件一部分

按鈕(可點) Btn

圖標 Icon不可點、非點擊主體、圖案部件

標記 Sign? 列表

List? 菜單 Menu

視圖 View

面板 Panel

薄板 Sheet

底部彈出菜單 欄 Bar

狀態欄 StatusBar

導航欄 NaviBar

標簽欄? TabBar

工具欄 ToolBar

切換開關 Switch

滑動器 Slider

單選框 Radio

復選框 CheckBox

背景 Bg

蒙版、遮罩 Mask

收藏 collect

評論 comment

廣告 ad

時間 time

音頻 audio

視頻 viedio

不喜歡 dilike

用戶 user

首頁 hone

排名 ranked

搜索 search

標志 logo

進度條 progress bar

默認圖片 def_

分隔圖片 seg_

選擇 sel_

關閉 close

返回 back

編輯 eidt

內容 content

左 ?中 ?右 left ?center ? right

提示信息 msg

個人資料 porfile

彈出 pop

刪除 delete

下載 download

登錄 login

注冊 regsiter

標題title

注釋 note

鏈接 link

圖片 image(img)

刷新 refresh

常用補充描述

頂部 Top

中間 Middle

底部 Bottom

第一 First

第二 Second

最后 Last

頁頭 Header

頁腳 ?Footer

您可以選擇一種方式贊助本站支付寶轉賬贊助

分享到各大網站

總結

以上是生活随笔為你收集整理的delphi控件切图界面闪烁_一份最详尽全面的UI界面切图命名规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。