上一篇《萬字干貨！可能是最全面的UI 設(shè)計(jì)師文件命名規(guī)范（一）》我們討論了 UI設(shè)計(jì)中文件命名的規(guī)范和要點(diǎn)，這一部分我們要討論的是關(guān)于切圖的命名、圖層命名、版本管理的問題。

一、切圖的部分

切圖是什么，很多新人可能還是比較懵懂。簡單講解，任何 UI 類的設(shè)計(jì)圖，要通過代碼還原成軟件界面時(shí)，沒辦法通過代碼寫出來的圖形，就需要設(shè)計(jì)師導(dǎo)出對(duì)應(yīng)的圖形文件，給代碼做補(bǔ)充。

比如你現(xiàn)在用手機(jī)看這篇文章所在的瀏覽器或 APP，上方任何圖標(biāo)都要通過導(dǎo)出的切圖顯示。

而一個(gè)完整的應(yīng)用要導(dǎo)出的切圖是有很多種類型的。從圖形本身的含義或者是文件的格式。首先說圖形的類型，包含有背景圖、插畫素材、動(dòng)畫素材、序列幀、圖標(biāo)、LOGO 等等。

所以了解怎么命名之前，我們先要知道切圖的基本屬性和規(guī)則。

1. 切圖分類

圖形種類不少，而且切圖的數(shù)量可能比較龐大，所以大家一定要先認(rèn)同一個(gè)觀點(diǎn)，只依靠命名的方式就能解決所有檢索問題的可能性幾乎為零。我們還是要依靠文件夾的層級(jí)劃分進(jìn)行協(xié)助。

比如數(shù)量最多的圖標(biāo)、序列幀，勢(shì)必要單獨(dú)為它們創(chuàng)建一個(gè)文件夾，不能混合到一個(gè)目錄中。如果有其它某種類型的圖形數(shù)量也較多，那么都應(yīng)該先為它們創(chuàng)建一個(gè)獨(dú)立的文件夾。

例如我以前某項(xiàng)目中的切圖文件夾劃分是這樣的：

而最需要我們重點(diǎn)講解的就是圖標(biāo)部分，因?yàn)檫@里涉及到的下級(jí)分類最多也最復(fù)雜。比如我們看下面的這個(gè)案例：

從右上角到中間的分類底部的導(dǎo)航，出現(xiàn)了好幾種不同的圖標(biāo)類型。這是我們?cè)谠O(shè)計(jì)一套 APP 時(shí)經(jīng)常會(huì)發(fā)生的情況，即一套圖標(biāo)規(guī)格沒有辦法滿足我們的視覺場(chǎng)景需要。于是，這套項(xiàng)目就出現(xiàn)了多套圖標(biāo)的規(guī)格。

再看看下面支付寶服務(wù)類型界面，圖標(biāo)數(shù)量多，如「搜索」、「設(shè)置」這類功能圖標(biāo)有非常大的差別，把它們放到一個(gè)文件夾下面明顯是不合適的。

所以文件的劃分上，就要清晰。如果是以尺寸劃分的，那么就用尺寸來命名文件夾，如果是類型的，那就按類型劃分。比如下面的兩種分類：

這些都比較好理解，但是，在所有細(xì)節(jié)從屬上，還有一個(gè)優(yōu)先級(jí)更高的問題，就是我們切圖面向的手機(jī)系統(tǒng)。如果使用了兩個(gè)平臺(tái)獨(dú)立的設(shè)計(jì)，或是針對(duì)平臺(tái)導(dǎo)出矢量格式文件時(shí)，那么在最頂層就應(yīng)該劃分出 iOS 和 Android 兩個(gè)文件夾，把文件分開導(dǎo)出，便于不同的前端工程師檢索。

這里我們集中在只使用一套設(shè)計(jì)，并且只導(dǎo)出 PNG 的狀態(tài)，不可能避免的要面對(duì)分辨率倍數(shù)的問題，即 @1x、@2x、@3x 的文件名后綴。我的結(jié)論就是不建議大家再為它們創(chuàng)建獨(dú)立的文件夾。

iOS 開發(fā)中，是直接選取同一個(gè)文件的3種分辨率，拖進(jìn) Xcode 中即可，那么分文件夾就要多次跳轉(zhuǎn)非常影響效率，如下圖所示。而 Android 開發(fā)中，雖然程序目錄會(huì)劃分出 hdpi、xhdpi、xxhpi 等文件夾，但這個(gè)操作不需要設(shè)計(jì)師來做，程序員會(huì)自己復(fù)制出三種分辨率然后改名再置入開發(fā)的項(xiàng)目文件夾中。

根據(jù)以上的說明，完成切圖的分類，那么就可以為我們后續(xù)的具體命名提供基礎(chǔ)環(huán)境了。

2. 切圖命名

前面之所以鋪墊這么多現(xiàn)在才提分類，就是因?yàn)樵O(shè)計(jì)師導(dǎo)出的切圖命名有個(gè)最重要的標(biāo)準(zhǔn)——說人話。

網(wǎng)上最常見完整的切圖命名模式大致是這樣的：模塊_頁面_下級(jí)頁面_類型_狀態(tài)，而且會(huì)給出一堆英語的常用單詞供大家使用，那么最后的效果一般是這樣的：

Community_PostList_ DiscussPage_ShareIcon_Defult@1x.png

相信大家已經(jīng)發(fā)現(xiàn)問題了，這種命名實(shí)在太長了。不止是層級(jí)太多，且英文的字?jǐn)?shù)難以控制。雖然很多時(shí)候有一些廣泛應(yīng)用的元素如導(dǎo)航、標(biāo)題、背景之類的都有簡寫 (Nav、Tit、Bg)，但至少會(huì)有一半的詞匯你會(huì)發(fā)現(xiàn)它們是沒有簡寫方式的。

而且，英語不是我們的母語，大多數(shù)人英語好點(diǎn)也就4、6級(jí)水平。如果一個(gè)抽象、不常見的詞語，如 「拼團(tuán)」、「發(fā)紅包」、「種草」、「拔草」，確定你們?cè)~典查的英語詞組是合理的嗎，這些東西簡寫就更看不懂。

再者，開發(fā)命名之所以使用英語，是因?yàn)樵诖a里不能使用中文，如果直接用拼音的也太不敬業(yè)了。我們的標(biāo)注是沒有必要給自己框定這樣的限制的，或者強(qiáng)行認(rèn)為只有標(biāo)注英文看起來才專業(yè)。強(qiáng)行英文的結(jié)果就是導(dǎo)致你自己以后看不懂，別人也看不懂。

有的人可能還會(huì)講，命名就是要根據(jù)開發(fā)的習(xí)慣來。這里再解釋一件事，就是除非切圖命名這個(gè)規(guī)范是經(jīng)團(tuán)隊(duì)商議，由開發(fā)整理給你的，不然不要企圖認(rèn)為自己的英文命名具有普適性。

多數(shù)開發(fā)人員有自己命名的習(xí)慣，你的習(xí)慣和他的不可能完全匹配上，所以正常項(xiàng)目中程序員會(huì)根據(jù)他們自己或開發(fā)團(tuán)隊(duì)的習(xí)慣命名，那就有另一套體系，我們的命名只是為了讓他們能快速找到指定的文件而已。

所以，前面的文件夾分類就是幫助我們分割不同類型的圖標(biāo)，讓我們的命名可以更簡潔精準(zhǔn)，邏輯更連貫，降低查找圖標(biāo)所需要的檢索成本。這時(shí)在每個(gè)文件夾中，切圖的命名就可以只用3級(jí)以內(nèi)搞定。即：

• 模塊_名稱_狀態(tài)

在真實(shí)環(huán)境下，使用的名稱基本就是：

• 設(shè)置_錢包_高亮@1x.png
• 動(dòng)態(tài)_評(píng)論_默認(rèn)@1x.png
• 登錄按鈕_點(diǎn)擊@2x.png

緊跟交流中使用的習(xí)慣來制定，這樣的命名才是簡單易懂易用。只是純形式化又復(fù)雜的命名規(guī)范，只會(huì)倒逼程序員通過放大切圖縮略圖來查找指定的圖形。

二、圖層的部分

圖層命名放到切圖后面來說，就是因?yàn)槲覀儗?duì)圖層的命名首先要根據(jù)切圖的需要制定，養(yǎng)成保證導(dǎo)出的時(shí)候不需要對(duì)切圖文件有額外的命名修改，圖層命名直接可用。

雖然大家都推崇在設(shè)計(jì)文件中命名要細(xì)致，恨不得每個(gè)圖層都寫上清楚的圖層命名，但我要在這邊給出不同的意見。

1. PS的圖層命名

先講使用 PS ，命名是非常的。原因和 PS 的操作邏輯有非常大的關(guān)系，難以用鼠標(biāo)直接在畫布中選中指定的內(nèi)容。比如下圖這種比較常見的 PS合成場(chǎng)景。

這種場(chǎng)景起碼有幾百個(gè)圖層組合而成，而這么多圖層中，還有大量的光影效果層覆蓋在手表上方。如果我要用鼠標(biāo)直接在畫布中選定手表，那基本只會(huì)選擇到手表上方的高光層，還不清楚是哪層高光。所以，選中和調(diào)整 PS 圖層內(nèi)容都要直接從圖層列表中查找。

而這種情況不把圖層命名清楚，那源文件只會(huì)是大型車禍現(xiàn)場(chǎng)。隨著圖層堆疊的數(shù)量增加，到后面你每做一個(gè)改動(dòng)都會(huì)非常艱難。刪除無效圖層、修改前后關(guān)系、對(duì)某個(gè)部分的所有圖層進(jìn)行調(diào)色處理……

所以在 PS 中命名多細(xì)致都不過分，因?yàn)檫@樣自己才能看的懂，別人才明白怎么修改你的源文件。

2. Sketch / Adobe XD 圖層

但是，在現(xiàn)在新的 UI設(shè)計(jì)工具中，環(huán)境就發(fā)生了變化。需要我們進(jìn)行細(xì)致命名的絕對(duì)條件已經(jīng)不存在了。

UI 的設(shè)計(jì)沒有那么多不可見并堆疊的圖層，按住 Ctrl 或 Command鍵，你幾乎可以選中任何看的見的圖層，這時(shí)候?qū)D層列表的依賴也就遠(yuǎn)遠(yuǎn)沒有 PS 那么深。

而且，一個(gè) UI 項(xiàng)目的頁面和零碎的元素實(shí)在是太多了，如果真以細(xì)致到每個(gè)圖層都不會(huì)出現(xiàn)默認(rèn)新建圖層字樣的地步，需要耗費(fèi)極其龐大的精力去維護(hù)，而這個(gè)維護(hù)的結(jié)果可以增加的團(tuán)隊(duì)效率并不顯著。

因?yàn)闊o論是你自己還是別人，修改文件的時(shí)候直接用鼠標(biāo)去選中對(duì)應(yīng)圖層就可以了，你命不命名對(duì)操作都沒有太多直接的影響。當(dāng)然，我們還要有一個(gè)好的習(xí)慣，就是不要依賴隱藏的圖層，盡量使用一個(gè)新的畫布來表現(xiàn)不同的狀態(tài)。

基于這樣的性質(zhì)，在 Sketch 或 XD 的文件中，只建議大家做出適當(dāng)?shù)拿僮鳎挥锰m結(jié)于形式的細(xì)節(jié)，要把每個(gè)圖層都想命名的無用強(qiáng)迫癥，應(yīng)用在對(duì)整個(gè)項(xiàng)目文件的管理和思考上。

第一，我們要能在畫板根目錄上，編組所有層級(jí)最高的模塊/組件，命名這部分的內(nèi)容。下級(jí)中相對(duì)重要的模塊文件夾，也可以適當(dāng)增加命名。

第二，盡可能的將類似圖標(biāo)、LOGO這些必然要導(dǎo)出的圖形，制作成 Symbol，并做好清晰的命名。

第三，Sketch 中如果將一個(gè)完整的組件做成了 Symbol，那么要對(duì)其中文字圖層的命名做出清晰的排序和命名，這樣才能正常更改其中的內(nèi)容。

當(dāng)然，圖層和命名和前面關(guān)于切圖的命名有一樣的要求，就是——說人話。圖層名可以顯示的字符比文件夾列表模式可以顯示得少得多，很多喜歡用英文命名的源文件，經(jīng)常圖層名長到只顯示了一半就「…」，這樣的命名更沒有意義。

三、版本的管理

最后，就是關(guān)于版本管理的問題了，網(wǎng)上有層出不窮的關(guān)于怎么管理版本的方法，這里奉勸各位，希望借助外力和工具的版本管理方式，都是不切實(shí)際的。

無論是 SVN、GIT 的技術(shù)類管理方案，還是使用堅(jiān)果云、Folio之類的第三方工具，會(huì)將本來不是太復(fù)雜的問題高度復(fù)雜化。這是因?yàn)樵斐晌覀兾募姹咀兏氖录嗔耍褂眠@些方法不僅要大量精力維護(hù)，而且其中會(huì)有很多不可控的因素產(chǎn)生，造成混亂。

在我過去的項(xiàng)目經(jīng)驗(yàn)里，只推薦一種關(guān)于版本管理的方式，那就還是文件夾和命名，簡單的才是管理復(fù)雜最有效的方法。

即每次遇到設(shè)計(jì)文件、文檔需要更新替換，或是大改動(dòng)（不是只加新的內(nèi)容進(jìn)去），那么就在同級(jí)目錄中，創(chuàng)建一個(gè)版本回收文件夾，復(fù)制一份當(dāng)前的文件進(jìn)去，再開始修改。

每個(gè)復(fù)制進(jìn)回收站的文件，命名都要做下修改，方便后面可能的查找。通常命名的格式為——日期_版本簡單說明_，效果如下：

這樣不僅自己操作起來方便，而且其他人也可以很容易的訪問查找你的指定歷史版本。得益于目前 UI 文件體積的精簡，一個(gè) Sketch 文件通常幾十 MB 就能搞定，所以記錄很多版本也無所謂。當(dāng)然，如果項(xiàng)目出現(xiàn)比較大型的 PSD 或者視頻文件，那么對(duì)于版本的管理就盡可能的精簡而不是多多益善，否則會(huì)在共享和傳輸上造成極大的壓力。

而除了具體到某個(gè)文件的版本管理以外，還要考慮一個(gè)更高層級(jí)的管理，即項(xiàng)目版本。相信很多人有這樣的經(jīng)歷，在開始后面的版本時(shí)都創(chuàng)建新的文件夾和設(shè)計(jì)文件，于是在幾個(gè)版本過后要反復(fù)在幾個(gè)項(xiàng)目之間切換查找頁面。

所以，我的方式是設(shè)計(jì)第一個(gè)版本是 v1.0，那么在開始 v2.0 版本時(shí)，直接復(fù)制一份原版本的文件夾出來。這樣，不僅保留完整的 v1.0 所有項(xiàng)目文件，文件夾層級(jí)可以保留下來。

復(fù)制完成后，只要再將除了界面設(shè)計(jì)源文件以外的其它文檔、切圖等文件全部刪除即可。保留設(shè)計(jì)文件，目的就是要保持最新版本設(shè)計(jì)文件的集中和唯一性。所有和項(xiàng)目相關(guān)的設(shè)計(jì)文件都集中在一個(gè)目錄下，才有利于我們的更新和協(xié)作。

要說一個(gè)題外話，在我過去的項(xiàng)目中，非常在意設(shè)計(jì)文件唯一性的標(biāo)準(zhǔn)。當(dāng)一個(gè)產(chǎn)品團(tuán)隊(duì)有幾個(gè)設(shè)計(jì)師，程序員直接查看源文件的標(biāo)注，如果源文件不具備唯一性，項(xiàng)目調(diào)整中每個(gè)人電腦上都存了幾個(gè)版本，且各自添加了新的內(nèi)容進(jìn)去，不能直接覆蓋合并，最后只能演變成一場(chǎng)開發(fā)災(zāi)難。

結(jié)尾

以上就是我對(duì)于項(xiàng)目文件管理和命名完整的經(jīng)驗(yàn)和思考，經(jīng)過了好幾年的試驗(yàn)和改進(jìn)，我相信它可以應(yīng)付絕大多數(shù)的情況與協(xié)同需要。

還要牢記，這些看似麻煩的過程，不只是做了給我們自己使用，還要方便所有項(xiàng)目的成員，這種能力一樣是一個(gè) UI設(shè)計(jì)師應(yīng)該保有的專業(yè)素養(yǎng)之一。

最后極度推薦大家使用同步云盤進(jìn)行工作協(xié)同，首要推薦的是使用自建的云盤群輝 Nas，然后是國內(nèi)現(xiàn)在勢(shì)頭正盛的堅(jiān)果云。如果是比較國際化的團(tuán)隊(duì)，那么無論是 Dropbox 或者 GoogleDrive 都可以，傳統(tǒng)的 QQ傳輸或是移動(dòng)硬盤拷貝，都已經(jīng)不適應(yīng)今天的生產(chǎn)力需求。

如果光靠上面文字描述，對(duì)整體的管理和命名還是無法起到清晰記憶作用的話，我另外準(zhǔn)備了一張完整的思維導(dǎo)圖。

高清大圖請(qǐng)前往百度云下載，鏈接：https://pan.baidu.com/s/1GsDeB9aM6vXc0J4l3ZgukQ，密碼：xtnc

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」

圖片素材作者：Evgeniy Dolgov

「超全面！設(shè)計(jì)新手必備的切圖指南」

• 《UI實(shí)戰(zhàn)教程！從零開始做APP 系列之切圖標(biāo)注篇》
• 《UI新手必備！iOS+Android的切圖與標(biāo)注方法》
• 《基礎(chǔ)知識(shí)！寫給UI設(shè)計(jì)新手的切圖命名規(guī)則手冊(cè)》
• 《新手福利！超全面的UI設(shè)計(jì)切圖規(guī)范指南》