很可惜 T 。T 您現(xiàn)在還不是作者身份，不能自主發(fā)稿哦～
如有投稿需求，請把文章發(fā)送到郵箱tougao@appcpx.com，一經錄用會有專人和您聯(lián)系
咨詢如何成為春羽作者請聯(lián)系：鳥哥筆記小羽毛（ngbjxym）
本期文章來自：南山可
原文鏈接：
https://www.ui.cn/detail/449121.html
作者dribbble主頁：
https://dribbble.com/Asazzywei
前言
最近在接手同事的源文件后，發(fā)現(xiàn)文件內命名混亂，很難尋找到想要的目標界面或者控件、設計元素，只能按順序查看，設身處地的想象到別人接到我做的命名混亂的源文件會如何抓狂，于是查找資料整理了這篇文章。網上有很多類似講解命名規(guī)范之類的文章，大而全且細，但我向來重實用，輕理論，希望把最簡潔但核心的內容羅列出來，令大家可以在短時間內掌握規(guī)范命名的方法，提高自己的專業(yè)性。
考慮到UI崗位從業(yè)者的sketch普及率，因此以sketch為工作環(huán)境整理了這篇文章，望理解，也建議UI設計師跟隨潮流使用更高效易用的軟件來提高工作效率，降低協(xié)作成本。
目錄
一、畫板命名
二、圖層與組命名
三、控件命名（及各控件詳解）
四、切圖命名
一、畫板命名
畫板命名較簡單，我們需要做的是避免一些常規(guī)錯誤，盡量使畫板名稱規(guī)整易讀。在UI設計中，每個畫板對應著一個界面，中小項目畫板基本維持在數十個甚至更少，因此其命名較之動輒數百個的圖層要容易很多。那么具體如何命名呢？
整體遵循以下公式：
模塊（項目名）/一級分類/二級分類/狀態(tài)
針對不同情況我們一一解釋
當該界面層級最高時，我們只需要進行最簡單的命名如：
好貨商城（項目名）/首頁
好貨商城/分類
當界面層級不是最高時，我們需要再補充一個層級的名稱如：
好貨商城/首頁/搜索/input
好貨商城/首頁/搜索/regular
這個命名的意思是從首頁進入的搜索頁面，其中input則是指已經鍵入了內容。這種命名的優(yōu)點是可以清晰的闡述當前界面的來源，上一步操作是什么，父界面是什么，即通過命名傳達出交互邏輯。
應當避免重名及“某某某copy”此類情況；
二、圖層與組命名
Layer：零散的單個圖層只需以其自身屬性命名，如矩形、線條、圖片等。當該圖層有明確意義時，也可使用當前語義來命名，如矩形可以命名為bg(背景)，線條可以命名為section divide(分割線)，圖片可以命名為image(某某配圖)；
關于使用中英文的問題看個人喜好和習慣，英文當然最標準，但或許中文更易讀。事無絕對，選擇最適合的名字。例如banner這個詞，雖然是英文，但所有設計師都有對其有明確的認知，使用它必然利于提高協(xié)作效率。
圖層layer有多種情況 :
文字 （text）
圖片 （image）
線條 （line）
形狀（以矩形、圓形為主）
切圖（slice）
組件（symbol）
其中切圖和組件都有獨立的命名規(guī)則，在這里不做解釋。另外幾項則可以用默認的命名方式，即無需修改，或者僅在原本命名基礎上后綴數字。如line1、line2；矩形1、矩形2；當它們有明確語義時可以酌情命名，如矩形作為背景時可命名為bg，線作為分割線時可命名為section divide(分割線)；
概括來說，從高效角度講，單個圖層的命名不需要太過糾結，一方面因為其數量過多，一方面因為因為layer會嵌套進組，共享一個組的名字，該組的名字是工作中需要重點識別的地方。
Group：我們主要的命名工作實際上是組命名，大部分圖層都應成組，利于操作的同時減少篩選信息的成本,多個圖層組成的組才是我們需要重點命名的設計最小元素。
組命名遵循嵌套的原則，即一級組/二級組/三級組，一般以功能模塊為主要命名原則，例如小說首頁的主編推薦模塊，自然命名為主編推薦，如果是可復用的模塊則可以命名為card(Components：組件名稱)/主編推薦。
symbol本質上也是一個組，而且是我們進行UI設計時最常用的組的種類，用symbol組件利于我們減少總的組的層級，將組保持在二至三層，因此在點擊某個最小級別元素時只需要2次點擊即可選中。 提高效率和使用體驗。
針對大部分首屏設計較長，承載內容較多的情況，建議通過數字前綴來標明其上下順序。
界面中的所有設計元素都能夠且應該按照某種邏輯分門別類從而打組，應當避免出現(xiàn)落單圖層的情況，從而導致畫板的一級展開欄混亂不堪。另外不要出現(xiàn)group copy此類情況，這會顯得我們不夠專業(yè)，即便是復制的組件，我們也可以去添加一個數字后綴從而體現(xiàn)出一定邏輯性。
三、控件命名方式
控件或者說組件是我們如今設計中最常用到的設計元素的命名，尤其是sketch逐漸在UI設計領域普及的情況下，掌握基礎的原子設計理論，通過組件化設計元素可以提高設計效率、規(guī)范設計流程、減少后期維護成本。
在了解控件的命名方式之前，我們需要知道，在當下的設計環(huán)境下，控件已經不僅僅局限于各系統(tǒng)廠商的定義范圍，例如ios端的navigation bar、status bar。我們在日常工作中總會產出一些不在系統(tǒng)組件庫范圍內的設計元素組，例如眾所周知的金剛區(qū)入口，再如淘寶等電商類產品首頁承載各種運營活動的卡片區(qū)設計。我們可以籠統(tǒng)的概括其為內容容器，但總歸是要有更詳細的名字來定義和區(qū)分，這便產生了許多新的控件，這些新的控件的命名實際上可以由設計師自由決定。
因此簡單的結論就是，對于平臺級官方控件我們應當使用其規(guī)范的命名，本篇文章會盡量列出，你也可以在官方文檔查閱。對于非原生控件，根據項目協(xié)作需要或者根據提升自己工作效率的訴求，去酌情命名。例如針對首頁的一些內容性質的復用模塊，我會使用card作為前綴來命名，因為這類設計是受卡片設計趨勢啟發(fā)的。
除此之外我們還需要知道，組件之間是可以相互嵌套的，例如一個card組件中會有多個icon組件、navigation組件中包含status組件；
很多時候我們會把具有相關性的一些組件匯總成一個大組件，通過移動大組件來布局，效率要更高一些，也方便進行界面管理和查看全局效果；
整體命名規(guī)則為 ：性質/模塊/狀態(tài)(屬性) 例如 bar/status bar/black
這樣命名主要考慮到在sketch中作圖的效率，使用“/”符號可以將同類組件的不同模塊與不同狀態(tài)作區(qū)分及二級嵌套，在實際工作中方便篩選和調用。
下面羅列出常用的組件，參考了iOS組件庫及Ant design組件庫：
1. 后綴bar（欄）
狀態(tài)欄（status bar）
導航欄（navigation bar）
搜索欄（search bar）
標簽欄/菜單欄（tab bar）
工具欄（tool bar）
1.1 狀態(tài)欄+導航欄
在IOS系統(tǒng)控件中，狀態(tài)欄和導航欄是分開來的，但在日常設計中狀態(tài)欄和導航欄一般合并為一個navigation bar。
1.2 搜索欄
search bar 有時會與導航欄合并，有時會單獨排列在導航欄下方。另外在Ant design中，search bar被劃分在輸入信息類控件(data entry)
1.3 標簽欄/菜單欄
標簽欄是標簽導航中的核心控件，與之對應的是抽屜導航中的抽屜控件(drawer)，抽屜式導航最早運用于安卓系統(tǒng)，但在現(xiàn)今移動端設計邊界趨向融合，一切以高效易用為首要原則，平臺差異化則顯得次要。在谷歌2019 IO大會上公布的最新安卓系統(tǒng)，采用了與IOS一致的home bar側面證實了這一點。標簽欄又被稱作菜單欄、底部菜單欄等，主要功能是作為一級導航對信息進行分類，便于用戶在不同模塊切換。
除此之外還有一類特殊tab bar，即tabs與Segmented Control(在ios組件庫中稱為范圍欄scope bar)，功能為二級導航分類。
1.4 工具欄
工具欄是操作類功能的集合，主要承載各類操作。
2. UI視圖 (views)
2.1 模態(tài)類（modal）
概括來講，模態(tài)需要中斷當前進行的任務，去開啟另一個任務或者內容。一般通過遮罩的形式中斷當前頁面，彈出對話框或者浮層、活動視圖等。因此模態(tài)這種手段具有強制性，一般用在比較重要的功能或者比較重要的事項上比如警告。但也有一些新興的用法，例如通過模態(tài)視圖，在不打斷當前閱讀進度的情況下查看用戶評論或進行互動。收起模態(tài)視圖后可以繼續(xù)當前任務或接續(xù)閱讀進度。
警告框alert (注意彈框類可統(tǒng)稱為dialog)
彈出框/浮層（popovers）
模態(tài)視圖（modal）
模態(tài)底板(bottom sheets) 包括：1.操作列表（action sheet）2.活動視圖（Active view）3.內容底板（content sheet）
警告框/提示框
彈出框/浮層
標準彈出框一般為icon+文案的形式，但一些簡易彈出框為單純文字或icon的形式，每個選項一般承載一個功能語義。
模態(tài)視圖
傾向完成某個獨立任務時采用，此任務較重要且需要中斷上一級別的體驗，注意不是簡單的功能入口的集合，而是在模態(tài)視圖card上完成某個任務。
模態(tài)底板
此項控件都是由底部喚出，承載多種功能語義，應用范圍廣，場景多樣。操作列表源自IOS組件庫無需多說，常用來確認操作，如刪除；活動視圖多用于分享場景；內容模態(tài)則是后來興起的一種設計手段，其目的是不中斷當前體驗的同時滿足用戶的多樣交互需求。
2.2 非模態(tài)類
非模態(tài)視圖與模態(tài)視圖的區(qū)別是它將在幾秒時間后自動消失，不強制用戶執(zhí)行某種操作來收起。
輕量提示層（toast）
可操作提示層（snackbar）
輕量提示層
多用來表明狀態(tài)信息，且傾向成功的操作，例如分享成功、已收藏；優(yōu)點在于反饋輕量，既能傳達結果，又不會過于打擾。
可操作提示層（snackbar）
基本形式為文案+功能按鈕，即對狀態(tài)的解釋，及對應的可執(zhí)行操作，例如騰訊撤回消息后的snackbar提供了，你撤回一條消息這一狀態(tài)及重新編輯這一操作。
2.3 卡片類
卡片視圖(card view)是當前所有產品首頁設計都會用到的內容容器。一般會包含文字、背景、圖片、icon等元素。作為二級頁面的入口，以內容呈現(xiàn)為主、圖文混排等等。當然也有一些特殊卡片視圖，如可左右滑動的隱藏視圖 (slide view)
3. 表單類控件
表單類控件主要指涉及到信息輸入(Data entry)與信息展示(Data display)兩個方面的控件，主要形式是：列表(list)
3.1 輸入類(entry list)
輸入列表
輸入列表一般為單行l(wèi)ist，包括標題、輸入區(qū)、提示詞極限值等輔助信息；功能按鈕如刪除或隱藏輸入內容。注意list有多種狀態(tài)，命名時需要作區(qū)分如 “user name-list/regular”、“user name-list/input”，輸入類列表常用的狀態(tài)包括常規(guī)態(tài)、輸入態(tài)、不可用態(tài)、校驗態(tài)。
文本輸入框（TextareaItem）
包含輔助提示文案、內容輸入區(qū)(色塊或邊框)、極限值等；
檢查器類控件
包括時間或地址檢查器(picker)、滑塊檢查器(slidder)、步進器(stepper)圖片檢查器；
3.2展示列表（display list）
展示列表同樣為單行l(wèi)ist，包括icon/圖片、標題、副文案、箭頭指引。展示列表有時僅僅展示信息，如展示規(guī)則的展開列表設計，但大部分時間，展示列表都指向一個次級界面，例如設置中心的關于我們list，指向一個產品介紹的次級界面，微信的消息界面list，指向聊天界面。
展開列表與常規(guī)列表
可操作列表
由于其本質仍然是展示選項，因此歸類于展示列表
金剛區(qū)/網格列表（Grid）
網格列表本質上是一組入口的集合，和首頁金剛區(qū)相同，因此將其歸為一類，目前廣泛的應用于首頁及個人中心。當然也有很多其他用法， 這里不做贅敘。
4. 其他控件
包括一些不方便劃分的小型控件，如勾選框、開關、小紅點、加載控件、輪播點；
5. Icon及切圖命名方式
最常用的切圖實際上是icon，但切圖并不僅限于icon，同樣包括一些圖片類內容，一般為png格式。另外一些標準的icon可以輸出svg格式上傳至iconfont，便于提高開發(fā)效率，質量也較png要高很多。好吧偏題了，這里是講命名的。以我們使用sketch工作為例icon命名和切圖命名應當分開來考慮。
icon命名
icon命名主要考慮到在sketch文件中的命名方式，為了通過symbol的形式管理icon，我們通常需要用“/”來對icon進行分類，標準版格式遵循icon/模塊/功能-狀態(tài)這樣的邏輯，極簡版則是 icon/功能-狀態(tài)，這樣我們可以在控件庫一級一級的尋找到目標icon。
概括來說，icon規(guī)范命名是為了在sketch工作環(huán)境下提高效率及規(guī)范管理icon素材。
四、切圖命名
切圖命名的服務對象是開發(fā)人員，而不是設計師，因此對切圖命名要照顧開發(fā)同學的習慣或者規(guī)則。
這里說幾個大原則：
1.避免大小寫，有些開發(fā)語言無法識別大小寫的文件；
2.絕對不允許有空格；
3.切圖請用分隔符“_”而不是“/”，“/”符號是用來分級的，只適用于我們在軟件中管理圖標使用，不要命名在切圖上；
4.不允許有數字(話說在整理這篇文章之前我經常會加數字來表明邏輯關系)；
補充一點偏題的，我們設計稿經常會用regular、medium、bold三種粗細的文字，而在H5界面中，字體只有regular和bold兩種，即或者細或者粗，沒有中粗，大家一定記好，有機會要多多和開發(fā)溝通。
OK，按理說該整理一份控件列表方便大家查閱，但是靈機一動想到了張小龍前輩講過的最后一條原則，以上我說的都是錯的。不要被條條框框限制。
擁有扎實的整理技能VS有強烈的想整理好文件的意愿，這兩者里我認為后者更為重要，當你想要做某件事時你有無數方法去踐行。但更多時候我們是明知可以做卻不作為。
工作中場景多變，除非有很強的維護組件庫的需求，否則沒有足夠的時間與精力去規(guī)范每一個小細節(jié)的命名。另外在高效作圖期間有些人并不習慣被命名工作打斷思路，那我還寫這么多廢話干啥？
首先，在真正需要時，要有能拿的出手整理文件素材的能力。其次，涉及到項目協(xié)作時要考慮到他人體驗，要有共情思維，比如有同事管我要某個源文件時我不會立即丟過去，而是先打開整理一下圖層，當他接手時會體會到你的嚴謹性以及對他人的尊重。
最后，不看這篇文章，不了解匯總的控件的專業(yè)名詞，你就做不好命名了嘛?不是的，而是明知能做好命名，但卻不去做?；蛘呤菓?，或者是壞習慣，當你意識到這件事，本身就是很大的進步了。
感謝閱讀~
相關文章推薦閱讀：
文中觀點歸作者所有
更多精彩文章 請識別二維碼關注我們！
歡迎留言、點贊，分享！
因為好看，不吝推薦??
本文為作者獨立觀點，不代表鳥哥筆記立場，未經允許不得轉載。
《鳥哥筆記版權及免責申明》 如對文章、圖片、字體等版權有疑問，請點擊 反饋舉報
我們致力于提供一個高質量內容的交流平臺。為落實國家互聯(lián)網信息辦公室“依法管網、依法辦網、依法上網”的要求，為完善跟帖評論自律管理，為了保護用戶創(chuàng)造的內容、維護開放、真實、專業(yè)的平臺氛圍，我們團隊將依據本公約中的條款對注冊用戶和發(fā)布在本平臺的內容進行管理。平臺鼓勵用戶創(chuàng)作、發(fā)布優(yōu)質內容，同時也將采取必要措施管理違法、侵權或有其他不良影響的網絡信息。
一、根據《網絡信息內容生態(tài)治理規(guī)定》《中華人民共和國未成年人保護法》等法律法規(guī)，對以下違法、不良信息或存在危害的行為進行處理。
1. 違反法律法規(guī)的信息，主要表現(xiàn)為：
1)反對憲法所確定的基本原則；
2)危害國家安全，泄露國家秘密，顛覆國家政權，破壞國家統(tǒng)一，損害國家榮譽和利益；
3)侮辱、濫用英烈形象，歪曲、丑化、褻瀆、否定英雄烈士事跡和精神，以侮辱、誹謗或者其他方式侵害英雄烈士的姓名、肖像、名譽、榮譽；
4)宣揚恐怖主義、極端主義或者煽動實施恐怖活動、極端主義活動；
5)煽動民族仇恨、民族歧視，破壞民族團結；
6)破壞國家宗教政策，宣揚邪教和封建迷信；
7)散布謠言，擾亂社會秩序，破壞社會穩(wěn)定；
8)宣揚淫穢、色情、賭博、暴力、兇殺、恐怖或者教唆犯罪；
9)煽動非法集會、結社、游行、示威、聚眾擾亂社會秩序；
10)侮辱或者誹謗他人，侵害他人名譽、隱私和其他合法權益；
11)通過網絡以文字、圖片、音視頻等形式，對未成年人實施侮辱、誹謗、威脅或者惡意損害未成年人形象進行網絡欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法規(guī)禁止的其他內容；
2. 不友善：不尊重用戶及其所貢獻內容的信息或行為。主要表現(xiàn)為：
1)輕蔑：貶低、輕視他人及其勞動成果；
2)誹謗：捏造、散布虛假事實，損害他人名譽；
3)嘲諷：以比喻、夸張、侮辱性的手法對他人或其行為進行揭露或描述，以此來激怒他人；
4)挑釁：以不友好的方式激怒他人，意圖使對方對自己的言論作出回應，蓄意制造事端；
5)羞辱：貶低他人的能力、行為、生理或身份特征，讓對方難堪；
6)謾罵：以不文明的語言對他人進行負面評價；
7)歧視：煽動人群歧視、地域歧視等，針對他人的民族、種族、宗教、性取向、性別、年齡、地域、生理特征等身份或者歸類的攻擊；
8)威脅：許諾以不良的后果來迫使他人服從自己的意志；
3. 發(fā)布垃圾廣告信息：以推廣曝光為目的，發(fā)布影響用戶體驗、擾亂本網站秩序的內容，或進行相關行為。主要表現(xiàn)為：
1)多次發(fā)布包含售賣產品、提供服務、宣傳推廣內容的垃圾廣告。包括但不限于以下幾種形式：
2)單個帳號多次發(fā)布包含垃圾廣告的內容；
3)多個廣告帳號互相配合發(fā)布、傳播包含垃圾廣告的內容；
4)多次發(fā)布包含欺騙性外鏈的內容，如未注明的淘寶客鏈接、跳轉網站等，誘騙用戶點擊鏈接
5)發(fā)布大量包含推廣鏈接、產品、品牌等內容獲取搜索引擎中的不正當曝光；
6)購買或出售帳號之間虛假地互動，發(fā)布干擾網站秩序的推廣內容及相關交易。
7)發(fā)布包含欺騙性的惡意營銷內容，如通過偽造經歷、冒充他人等方式進行惡意營銷；
8)使用特殊符號、圖片等方式規(guī)避垃圾廣告內容審核的廣告內容。
4. 色情低俗信息，主要表現(xiàn)為：
1)包含自己或他人性經驗的細節(jié)描述或露骨的感受描述；
2)涉及色情段子、兩性笑話的低俗內容；
3)配圖、頭圖中包含庸俗或挑逗性圖片的內容；
4)帶有性暗示、性挑逗等易使人產生性聯(lián)想；
5)展現(xiàn)血腥、驚悚、殘忍等致人身心不適；
6)炒作緋聞、丑聞、劣跡等；
7)宣揚低俗、庸俗、媚俗內容。
5. 不實信息，主要表現(xiàn)為：
1)可能存在事實性錯誤或者造謠等內容；
2)存在事實夸大、偽造虛假經歷等誤導他人的內容；
3)偽造身份、冒充他人，通過頭像、用戶名等個人信息暗示自己具有特定身份，或與特定機構或個人存在關聯(lián)。
6. 傳播封建迷信，主要表現(xiàn)為：
1)找人算命、測字、占卜、解夢、化解厄運、使用迷信方式治?。?br /> 2)求推薦算命看相大師；
3)針對具體風水等問題進行求助或咨詢；
4)問自己或他人的八字、六爻、星盤、手相、面相、五行缺失，包括通過占卜方法問婚姻、前程、運勢，東西寵物丟了能不能找回、取名改名等；
7. 文章標題黨，主要表現(xiàn)為：
1)以各種夸張、獵奇、不合常理的表現(xiàn)手法等行為來誘導用戶；
2)內容與標題之間存在嚴重不實或者原意扭曲；
3)使用夸張標題，內容與標題嚴重不符的。
8.「飯圈」亂象行為，主要表現(xiàn)為：
1)誘導未成年人應援集資、高額消費、投票打榜
2)粉絲互撕謾罵、拉踩引戰(zhàn)、造謠攻擊、人肉搜索、侵犯隱私
3)鼓動「飯圈」粉絲攀比炫富、奢靡享樂等行為
4)以號召粉絲、雇用網絡水軍、「養(yǎng)號」形式刷量控評等行為
5)通過「蹭熱點」、制造話題等形式干擾輿論，影響傳播秩序
9. 其他危害行為或內容，主要表現(xiàn)為：
1)可能引發(fā)未成年人模仿不安全行為和違反社會公德行為、誘導未成年人不良嗜好影響未成年人身心健康的；
2)不當評述自然災害、重大事故等災難的；
3)美化、粉飾侵略戰(zhàn)爭行為的；
4)法律、行政法規(guī)禁止，或可能對網絡生態(tài)造成不良影響的其他內容。
二、違規(guī)處罰
本網站通過主動發(fā)現(xiàn)和接受用戶舉報兩種方式收集違規(guī)行為信息。所有有意的降低內容質量、傷害平臺氛圍及欺凌未成年人或危害未成年人身心健康的行為都是不能容忍的。
當一個用戶發(fā)布違規(guī)內容時，本網站將依據相關用戶違規(guī)情節(jié)嚴重程度，對帳號進行禁言 1 天、7 天、15 天直至永久禁言或封停賬號的處罰。當涉及欺凌未成年人、危害未成年人身心健康、通過作弊手段注冊、使用帳號，或者濫用多個帳號發(fā)布違規(guī)內容時，本網站將加重處罰。
三、申訴
隨著平臺管理經驗的不斷豐富，本網站出于維護本網站氛圍和秩序的目的，將不斷完善本公約。
如果本網站用戶對本網站基于本公約規(guī)定做出的處理有異議，可以通過「建議反饋」功能向本網站進行反饋。
(規(guī)則的最終解釋權歸屬本網站所有)