命名，是困擾很多 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ā)生如下的場景：

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

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

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

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

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

• 層級
• 排序
• 標(biāo)簽
• 搜索

1. 層級檢索

層級檢索源自文件位置的層級結(jié)構(gòu)，可以說是所有接觸過計算機的人群里最樸素的文件收納方式，比如在我們熟悉的 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)的原因之一。

2. 排序檢索

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

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

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

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

3. 標(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)簽這個檢索維度。

關(guān)于Eagle 的詳細(xì)介紹：《這款國人開發(fā)的Eagle，堪稱收集和管理素材靈感的最佳利器！》

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

4. 主動檢索

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

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

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

5. 文件命名總結(jié)

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

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

二、文件的命名系統(tǒng)

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

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

1. 文件層級

項目開始時，要先規(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)，從這里就開始了！

2. 文件夾命名

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

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

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

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

3. 畫布命名

在文件夾內(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)出后可以按順序查找，還會強迫我們思考頁面的關(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)濟損失遠(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)注作者的微信公眾號：「超人的電話亭」

圖片素材作者：Evgeniy Dolgov

「高效整理文件」

• 《用標(biāo)簽代替文件夾！教你更高效的圖片素材管理術(shù)》
• 《超高效！輕松3步幫你掌握實用的設(shè)計資源整理術(shù)》
• 《提高工作效率！可能是最全面細(xì)致的設(shè)計文件命名規(guī)范》