第一部分：

命名，是困擾很多 UI 設(shè)計師的常見問題之一。從我們開始在軟件中設(shè)計內(nèi)容時，就要對圖層、圖層文件夾進(jìn)行行命名，到對接開發(fā)的時候，還要對切圖進(jìn)行命名，再到管理我們的版本，項目文件目錄，命名技巧都是不容我們忽視的團(tuán)隊協(xié)作技能。

這類文章網(wǎng)上寫了不少，但很多課程里的同學(xué)去查看以后還是覺得無法在實際項目中應(yīng)用。這是因為，只學(xué)一些常用詞匯或命名格式，只是聊勝于無，無法真正加快我們的效率。

尤其在今天，越來越多的互聯(lián)網(wǎng)團(tuán)隊開始使用云服務(wù)同步項目文件，如 Dropbox、Google Driver、Synology、堅果云等等，這使得我們的項目文件還要暴露在所有團(tuán)隊成員的公共視線之中，命名已經(jīng)不是設(shè)計師一個人的事，重要性越發(fā)凸顯。

下面，我們來完整討論討論關(guān)于 UI 設(shè)計中文件命名的規(guī)范和要點。

首先從文件的命名開始，前面提到的 “適當(dāng)” 一詞，就是因為對 UI 文件進(jìn)行命名是沒有唯一標(biāo)準(zhǔn)的，如果只靠對命名的死記硬背，依舊會在項目中遭遇諸多阻力。

要知道，之所以需要命名，它的目的是為了方便我們——檢索，讓我們可以更高效的查找到指定的文件。

比如日常工作我們會發(fā)生如下的場景：

1. 需求方突然要你提供一年前某個版本迭代設(shè)計中被慘拒的稿子，重新進(jìn)行審核評估，你得從自己根目錄就有幾百個文件夾且毫無排序邏輯的移動硬盤中重新把它找出來……

2. 有天你臨時請假，同事打開你的電腦，得在你已經(jīng)被圖標(biāo)鋪滿的桌面上找到當(dāng)前項目文件和指定頁面……

3. 一個比較大的項目，進(jìn)入開發(fā)階段，前端同事們接受并解壓了切圖文件夾，看見里面包含了名稱是 “新的圖層、新的圖層(1)、 新的圖層(2) …… ” 的近 300 個 png 文件……

我們找到一個想要的文件，不是每次都在目錄中進(jìn)行遍歷，也就是全都看一遍看到想要為止的笨方法。如果沒有有效的檢索方式，那么任何人都只能在計算機(jī)海量的文件里裸泳，溺亡是遲早的。

所以命名要先從檢索文件的方式說起，主要包括以下幾種：

• 層級

• 排序

• 標(biāo)簽

• 搜索

層級檢索

層級檢索源自文件位置的層級結(jié)構(gòu)，可以說是所有接觸過計算機(jī)的人群里最樸素的文件收納方式，比如在我們熟悉的 Windows 存放一張照片，那么路徑大概是這樣的：

選擇硬盤 → 多媒體文件夾 → 照片文件夾 → 照片類型/日期文件夾

在 Windows 中，由于某些歷史遺留問題，表現(xiàn)形式都在鼓勵使用層級邏輯來存放文件。最顯著的莫過于硬盤分區(qū)，C 盤既然已經(jīng)被默認(rèn)分成了系統(tǒng)相關(guān)文件分區(qū)，那么 D、E、F 盤自然就應(yīng)該是劃分出游戲、學(xué)習(xí)、電影的分類。

而 Mac 系統(tǒng)弱化了硬盤分區(qū)的概念，在 Finder 中更多突出了對文件進(jìn)行標(biāo)記，高效主動查找功能 Spotlight ，也就是暗示你文件存在什么地方都無所謂。這是很多 PC 用戶剛剛切換到 Mac 不適應(yīng)的原因之一。

排序檢索

排序就是計算機(jī)文件排列的方法，無論是 PC 還是 Mac，在文件夾空白區(qū)域點擊右鍵，都可以看見排序方式的選項。有文件類型、名字首字母、創(chuàng)建日期、修改日期、大小等等。

在日常中我們使用這個排序功能最頻繁的原因，應(yīng)該是文件沒有對齊網(wǎng)格，所以使用排序功能幫我們快速整理。

而在一個文件非常多的目錄中，我們就可以通過使用不同排序方式來快速找到我們想要的文件。

比如 Windows 經(jīng)常會有 某.dll 引發(fā)錯誤的提示，我們要通過名字排序的方式在 win32 文件夾下面找到這個字母開頭的文件區(qū)域，再向下一個字母縮小搜索范圍，然后很快就能清楚這個 .dll 文件是否存在?；蛘撸覀兘鈮毫四硞€游戲，它的根目錄文件特別多，于是我們就會使用類型進(jìn)行排序快速找到 .exe 結(jié)尾的幾個啟動圖標(biāo)。

標(biāo)簽檢索

在 Mac 中，標(biāo)簽功能是被重點突出的，可以很方便的創(chuàng)建、分配標(biāo)簽給文件。這樣，我們就多了一個維度來查找文件。

比如一個項目名為 “超人的電話亭” 的 Sketch 文件因為版本或者功能的原因，要分別存放到不同的文件夾內(nèi)，沒有刻意使用層級系統(tǒng)進(jìn)行分類，那么如果有一天我需要找出并另外備份項目中所有的 Sketch 文件，那么就可以在一開始打上 “超人的電話亭” 標(biāo)簽，以后只要選中這個標(biāo)簽就可以立即篩選出這個項目的文件。

再到類似 Things、滴答、印象筆記、Bear、Eagle 等會包含大量目錄文件的應(yīng)用，都會提供標(biāo)簽這個檢索維度。

這個功能在 Windows 資源管理器中是可以忽略的……

主動檢索

主動檢索就是搜索，就是在輸入框中鍵入文字內(nèi)容，直接根據(jù)名稱或者標(biāo)簽、類型來查找你想要的文件。

這建立在我們對文件名稱已有一定了解的基礎(chǔ)上。例如想要快速找到之前切圖中的登錄按鈕，你可能就會直接輸入 “登錄” 或者 “按鈕” 這些關(guān)鍵信息。

而如果文件名本身沒有和內(nèi)容有任何關(guān)聯(lián)，或者這種關(guān)聯(lián)是混亂的，那么搜索自然無從談起。

文件命名總結(jié)

項目的文件命名，說到底叫什么、用什么英文簡寫、大小寫和符號都是次要的，我們是要通過命名這個步驟，加快前面 4 種檢索行為的效率，而不是為命名而命名。

并且，在一個團(tuán)隊中，大家使用的電腦系統(tǒng)不一定一致，開發(fā)使用 PC，那么你就不能強(qiáng)調(diào)文件中的標(biāo)簽。而如果使用公共網(wǎng)盤，那么不同網(wǎng)盤對排序的細(xì)節(jié)是有一定的區(qū)別的，都要經(jīng)過測試再做決定。

在我給大家提供的思路中，只已兩種檢索模式作為出發(fā)點，即層級和文字排序，因為我認(rèn)為它們具有最廣泛的適用性。

并且，好的命名系統(tǒng)一定是緊密結(jié)合項目文件管理方法的，它能幫助我們有強(qiáng)迫性的對文件進(jìn)行分類和刪除冗余的部分。即使任何一個人打開我們的項目，也能輕易找到目標(biāo)，才是我們追求的方向。

文件層級

項目開始時，要先規(guī)劃清楚，會出現(xiàn)哪些類型的文件，做出層級的劃分。

例如，在我過去的某個項目中，第一個版本文件包含的分類有 PRD文檔、Sketch 原型文件、Sketch 設(shè)計文件、其它設(shè)計文件、動畫源文件、參考圖片、應(yīng)用素材、導(dǎo)出展示圖、導(dǎo)出交互動畫、設(shè)計說明、切圖等等。

那么我們將他們分門別類，就可以得到下面這個樹狀圖：

那么，我們就可以以此在名稱為 V1.0 文件夾下方創(chuàng)建各級子文件夾了，之后將對應(yīng)的文件置入到指定層級文件夾中，就完成了我們初步的文件整理方式。

當(dāng)然，不同項目性質(zhì)和流程可能會有增減，最終確定的層級是需要自己整理的。即使一開始定義的不夠完整，那么隨著項目的深入，你可以直接在同級中插入新的文件夾即可。

而我們的命名系統(tǒng)，從這里就開始了！

文件夾命名

我習(xí)慣使用數(shù)字作為同一個目錄文件排序的方式，因為數(shù)字最容易被我們記憶，并且可以營造秩序感，減輕我們打開文件夾的焦躁。

上面是一般我會使用的文件夾命名方式，即使用——?NO._文件夾名稱。

因為默認(rèn)排序方式“按名稱”會自動根據(jù)數(shù)字遞增，那么文件的序列就能保持不變，使用幾天以后，這種數(shù)字序列就可以被我們有效的記憶。即使幾天后增加一個新的文件夾——?“8_活動文件”，也不會影響到前面已經(jīng)沉淀下來的習(xí)慣。

試想在你的手機(jī)上的微信啟動圖標(biāo)，用的次數(shù)足夠多時，我們其實記憶的就是它是第幾行第幾列，而不是根據(jù)圖標(biāo)樣式和應(yīng)用名一個個看過去。同時，這樣劃分的文件夾，任何項目相關(guān)的人員都會很清楚應(yīng)該如何查找自己需要的內(nèi)容。

畫布命名

在文件夾內(nèi)的文件，是否一樣需要有效的序列，也要根據(jù)文件的具體屬性來確定。如素材圖，有沒有特意命名都不是太重要，因為它們沒有記憶和反復(fù)提取的必要，保存下來只是做備份而已。

而界面展示圖，意義就不一樣了。多的有幾百個界面，少的也有二三十個，如果我們沒有任何命名和排序模式，那么看起來會非常累，找一個指定的頁面也非常累。

所以該如何做出有效命名，就要從設(shè)計界面時的目標(biāo)開始說起了。一般分為兩種情景，一種是比較大的工程，涉及到非常多的界面和模塊。另一種是以完整業(yè)務(wù)流程為準(zhǔn)的設(shè)計項目，那么它們的排序上就會有一定的差異，大致如下方所示：

模塊_子模塊_類型_狀態(tài)，演示:

設(shè)置模塊_個人資料_頭像裁切
啟動模塊_注冊_驗證碼填寫_驗證失敗

流程名_流程步驟頁_狀態(tài)，演示

發(fā)布流程_內(nèi)容填寫_照片編輯

購買流程_提交付款_成功

基本的文件命名，都會根據(jù)層級從上到下通過下劃線分割。之所以需要這樣的層級劃分，是因為我們可以用來命名頁面的詞匯是有限的，如果一個應(yīng)用中出現(xiàn)了很多都要稱呼為設(shè)置的下級頁面，那么最好要清楚它的從屬關(guān)系，是哪個頁面跳轉(zhuǎn)進(jìn)來的。

導(dǎo)出的界面圖片命名，實際上就是畫布的命名，以 Sketch 為例，設(shè)計還未導(dǎo)出的階段就要做出整理。Sketch 中有個關(guān)鍵功能是左上角的 Page 列表，我們可以通過創(chuàng)建不同的 Page 將整個 APP 的頁面進(jìn)行分類。例如下面的案例：

我將整個 APP 劃分成了 8 個大模塊，每個模塊前面都增加了一個序號，并且這個序號對應(yīng)我們的正常瀏覽和權(quán)重的順序，之后再對每個畫布進(jìn)行命名，這樣不會輕易搞混。

而在畫布的命名上，除了前面提到的下劃線層級以外，數(shù)字的排序依舊是要使用的。因為當(dāng)我們導(dǎo)出了大量的頁面以后，查看的習(xí)慣就是放大一張一張向后切換，而這個向后切換的過程是需要有明確排序的，不能看了第一頁是購買成功，切換下一頁就是啟動頁。

所以我導(dǎo)出的頁面命名畫風(fēng)是這樣的：

第一個數(shù)字是模塊序號，不僅快速表明所屬模塊，同時等于將所有頁面做出了分類。而在第二級開始對頁面做出命名，根據(jù)操作順序和權(quán)重，在頁面名字前面再增加一個序號。

比如社交模塊下的詳情頁，就可以這么表達(dá)：1_2詳情頁。

但詳情頁不會只有一個狀態(tài)，可能涉及到帶有評論的，不帶評論的?；蛘咴斍轫撓聦偎歇毩⒌脑u論頁面。那么我們就要再增加一個層級，正常情況導(dǎo)出去，文件的排序會受到文字首字母的干擾，m>p>y，于是實際排列就會是這樣的：

1_2詳情頁沒評論

1_2詳情頁評論詳情

1_2詳情頁有評論

如果評論只有一個狀態(tài)，但是包含下級頁面，那么可能命名后實際的排序就會變成下面這種情況，下級頁面排到前面：

1_2詳情頁評論詳情

1_2詳情頁

所以，為了解決這些混亂， 我會在詳情頁后面和下一級標(biāo)題前面都增加序號。比如：

1_2詳情頁1_1完整樣式

1_2詳情頁1_2沒有評論

1_2詳情頁2_1評論詳情頁默認(rèn)

1_2詳情頁2_2評論詳情頁空白

1_2詳情頁3_1點贊列表

1_2詳情頁4_1轉(zhuǎn)發(fā)列表

命名最多只需要保留4層即可，再長下去已經(jīng)回很明顯的干擾我們查看，并且中文實際應(yīng)用起來是比英文高效的，因為英文字符占位大多不如中文精簡。

雖然這么看起來命名似乎非常復(fù)雜，但只要適應(yīng)一下很快就能習(xí)慣并應(yīng)用自如。因為這種命名的方法除了在導(dǎo)出后可以按順序查找，還會強(qiáng)迫我們思考頁面的關(guān)系，并會根據(jù)這種關(guān)系來排列 Page 中的 Artbord，我的習(xí)慣是獨立頁面橫向排列，不同的狀態(tài)就縱向排列。

而不具備這種規(guī)律的復(fù)雜設(shè)計文件，會出現(xiàn)什么情況，借用上家公司拿到手的主要頁面源文件舉例（實際頁面數(shù)大概是這些的10倍）。雖然模塊有一定的分類，但是層級太碎片沒有邏輯，所以這些模塊的位置很難記憶，我們每次都要先花很多去定位到模塊位置，再瀏覽頁面內(nèi)容來找到想要的內(nèi)容。

再加上其中每個模塊，實際上都有一個獨立的 Sketch 存放更完整的設(shè)計文件，那么當(dāng)每次我們要查找、修改、覆蓋對應(yīng)的設(shè)計文件時，都需要消耗大量的精力。

產(chǎn)品、設(shè)計、前后端程序員都需要不定時查看源文件，如果為了這種缺乏體系的命名規(guī)則降低效率，長此以往，那造成的經(jīng)濟(jì)損失遠(yuǎn)超大家的想象。

畫布命名的規(guī)則，之所以要有邏輯和嚴(yán)謹(jǐn)，就是為了在任何情況下，我們都可以快速定位到源文件，對它們進(jìn)行說明或者修改。無論是給自己、其他設(shè)計、其他同事查看我們的內(nèi)容時，都可以很快摸清楚門路，不會像無頭蒼蠅一樣只能挨個查看。

結(jié)尾

好了上半部分就寫到這邊，命名的系統(tǒng)不是只為了命名而命名，而是結(jié)合我們文件管理的邏輯定義的一套檢索體系，所以，在死記硬背任何固定的命名模式前，你們先要多思考在一個項目中，文件、界面的層級關(guān)系。

下部分我們會再講關(guān)于切圖、圖層的命名，以及給大家一張完整的文件命名系統(tǒng)思維導(dǎo)圖做參考。

第二部分：

這一部分我們要討論的，是關(guān)于切圖的命名、圖層命名、版本管理的問題。

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

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

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

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

切圖分類

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

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

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

而最需要我們重點講解的就是圖標(biāo)部分，因為這里涉及到的下級分類最多也最復(fù)雜。比如我們看下面的這個案例：

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

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

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

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

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

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

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

切圖命名

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

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

Community_PostList_ DiscussPage_ShareIcon_Defult@1x.png

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

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

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

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

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

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

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

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

設(shè)置_錢包_高亮@1x.png

動態(tài)_評論_默認(rèn)@1x.png

登錄按鈕_點擊@2x.png

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

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

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

PS的圖層命名

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

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

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

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

Sketch / Adobe XD 圖層

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

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

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

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

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

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

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

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

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

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

無論是 SVN、GIT 的技術(shù)類管理方案，還是使用堅果云、Folio之類的第三方工具，會將本來不是太復(fù)雜的問題高度復(fù)雜化。這是因為造成我們文件版本變更迭代的事件太多了，使用這些方法不僅要大量精力維護(hù)，而且其中會有很多不可控的因素產(chǎn)生，造成混亂。

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

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

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

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

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

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

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

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

結(jié)尾

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

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

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

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

大家只要在公眾號后臺回復(fù)下方文字即可：

"文件命名"

感謝大家的收看！

第8期B端產(chǎn)品設(shè)計全能班開啟預(yù)約了~給彼此一個機(jī)會，現(xiàn)在就預(yù)約變強(qiáng)！?