經過一段時間帶團隊的經驗，發(fā)現(xiàn)文件命名有點讓人抓狂，忍不住更新了一篇文章，講一下大家公認的規(guī)則，其中不僅包括切圖的命名規(guī)則，還包括文件組織標準。

文件組織的好處

當我談論某件事時，我喜歡先解釋原因或者我自己的經歷，以便每個人都能更清楚地看到它并知道我為什么做某事。

剛開始工作的時候，為了節(jié)省時間，我把所有的圖層都隨機擺放了（這是針對軟件講解的，做應用程序也是一樣）。有時候圖層太多，我就把它們分組，有點像我昨天發(fā)的開源項目源文件。如下圖：

但后來我逐漸發(fā)現(xiàn)，這種隨意的做法，在制定計劃的過程中，看似節(jié)省了時間，實則浪費時間。

為什么這么說呢？因為作為設計師，基本上沒有一稿可寫，都是和 PM、同部門其他設計師、開發(fā)人員商量后一步步確定的。所以肯定會有反復修改的情況，可能會參考以前版本的文件。所以對于文件，你總是需要去尋找、選擇、更改每個版本號、每個層級。如果一直浪費時間在尋找上，那真的不值得，也毫無意義。

所以對于個人來說，整理好個人文件和項目團隊文件非常重要，這樣可以提高你的時間利用率。

后來我加入了一個更大、更規(guī)范的公司，參與的項目也越來越多，文件管理也從個人找自己的文件，變成了團隊找團隊的文件，團隊找團隊的公用文件，有時跨項目還會有公用的功能塊，也就是說有些文件是共享的，這樣文件管理就變得更規(guī)范、更重要了。你能想象到每個人都像無頭蒼蠅一樣到處找文件，在亂七八糟的層級中尋找需要修改的層級嗎？

另外，有些軟件非常依賴文件的組織方式，例如運動原型軟件中的圖層是按照一定的規(guī)則排列的，插件導入后就會是這樣的。如下圖所示，左邊是的圖層順序，右邊是的圖層順序。

這種軟件設計的好處是修改完文件后可以很方便的導出。如果你的同事把工作搞得一團糟，那你還要自己做這份工作，真的好想罵人。但反過來也是一樣，如果你自己的文件整理得不好，也會給別人帶來麻煩。久而久之，別人就不喜歡跟你合作了。

當我們回顧工作情景的時候，我們就會知道我們應該做什么。

如何組織文件夾

一般都會用大文件夾作為項目最原始的管理方式，我們以千尋租房項目為例，首先大文件夾就以項目名稱“千尋租房”命名，首先我來說明一下需要管理多個版本，并且需要涉及UI和UX的工作內容，文件組織方式如下圖所示。

一般而言，一個項目涉及以下內容：

01 ：low-fi（低保真渲染）文件的地址；

02 Flow：Hi-fi（高保真效果圖）地址；

03 UI Kits：輸出的圖片資源地址（比如icon）；

04：不是產品文檔，而是APP內需要的一些文件，如《服務條款》；

05 App圖標：各平臺所需的APP圖標尺寸圖及源文件，尺寸隨時備齊（請參考iOS相關規(guī)范）；

06 視頻：如果有視頻文件則放置視頻；

07：專門準備的（即用來介紹APP功能的頁面，需要上傳到各個APP發(fā)布平臺），因為平臺太多，有時候各個平臺指定的尺寸不太一樣sketch修改畫板顏色，所以專門為其準備一個文件夾；

08啟動卡：因為在UI層面花費的時間比較多，所以一般放在改版的最后，所以也可以單獨列出來。

作為一名設計師，我接觸最多的是 01、02、03，所以我把它們放在最前面。這也是文件夾編號的原因。所以你可以看到從 01 到 08，序號是根據它們的使用頻率和重要性排序的。

為什么不區(qū)分03版本呢？因為對于同一個APP，當從1.0升級到2.0時，圖標可能會延續(xù)1.0版本的一部分，所以有一部分是公共的。如果再分類，程序員在查找的時候就要搜索多個子文件夾，不太方便。設計師只需要告訴程序員使用的圖片名稱，程序員直接按照單個圖標路徑提取就可以了。當然這只是解決方案之一。

每個版本可以進一步分類為功能塊子文件夾，例如上圖中的子文件夾。

用來存放歷史文件，對于設計師來說，歷史文件不能丟，不知道什么時候老板會說“我們回頭看第一版吧”，你懂的~

以上是針對工作內容比較全面的同學設計的文件整理方式，如果有些同學工作內容比較集中，比如單獨做UI或者UX，文件整理方式也可以如下，因為內容比較簡單，所以只需要通過版本號來區(qū)分即可。

文件夾的命名方式為“項目名+版本號”，例如千尋租房項目1.0版本，則命名為“千尋租房1.0”，若有同級別的2.0版本，則在其下再創(chuàng)建一個名為“千尋租房2.0”的文件夾。那么無論你要找的是哪個版本的文件，都可以一目了然的找到。

命名文件并組織其圖層

1. 命名規(guī)則

如上圖所示，命名方式為“項目名稱 功能塊 版本號_修改日期”。例如千尋租房首頁1.0版是5月5日制作的，那么它的名字就是“千尋租房”。加上日期是為了方便別人和自己查看哪個是最新版本，有時候在查找歷史文件的時候也可以幫助回憶。

還有一點，做項目的時候，一般都會給項目起一個英文代號（特別是跨國項目，為了方便不同文化的人溝通），所以命名的時候經常會用英文。（如果英文不好，用翻譯器或者有道翻譯也是不錯的選擇，根據我的經驗，三個月就習慣了。）

2. 命名（畫板）

作為新手我們很容易出現(xiàn)這樣的安排，如下圖所示。

那我們來看看一個成熟設計師的布局和命名，如下圖。

我們可以發(fā)現(xiàn)它的命名是由“代碼-模塊-功能”的結構構成的，我們先解釋一下為什么會有代碼，例如圖中的“MR-1”、“MR-4”。

因為最終稿需要和開發(fā)工程師開會討論。一般這樣的會議都會把文檔投影到屏幕上，如果開發(fā)人員有疑問，可以直接說“關于MR-1-1和MR-1-2有疑問”sketch修改畫板顏色，而不是說“關于左邊第一頁和第二頁的模塊有疑問”。如果是遠程會議，這樣的代碼更方便團隊之間的溝通。所以一般會給每個人分配一個代碼，一個代碼代表一個模塊。比如上圖中的“MR-2”就代表“”的模塊。

另外，命名完成后，需要將所有模塊按照序號進行排序，相同的模塊內容需要放在一起。如下圖：

另外需要注意的是，為了讓頁面跳轉流程更加清晰，設計師會在最頂層額外增加一個，主要用于繪制流線和一些信息注釋，如下圖：Flow&Note。

3. 圖層命名

圖層的命名其實涉及到各個圖層的組織方式，其思路是將頁面按照內容分成幾個大塊，形成大文件夾，再將圖層按順序排列在每個文件夾下面，并按照圖層內容進行命名。大文件夾和圖層的命名盡量以文件夾內容和圖層內容為準，如下圖的組織方式所示。

這里就涉及到圖標的命名了，圖標最全的命名方式就是“模塊-類別-功能-狀態(tài)”，比如上圖這種像放大鏡的圖標，可以表示為ay。當然如果整個解決方案只有一個這樣的圖標，也可以直接命名為繁瑣的，看情況而定，可以靈活掌握。常用的模塊、類別、狀態(tài)如下圖所示。

4. 組件命名

組件的出現(xiàn)大大提高了設計師的效率，以前改一個顏色需要全局修改，現(xiàn)在一鍵就可以了，沒用過的小伙伴可以先試試。

如果命名規(guī)范了，也會給大家?guī)砗艽蟮姆奖?。一是插入的時候查找起來很方便，二是導出圖片的時候會自動歸類到文件夾中。如下圖。

命名時，以“/”分隔類別，例如“icons//”表示在“icon”文件夾下建立子文件夾“”，“”下有一個名為“”的圖標。導出后，圖片會按照這個規(guī)則排列。而且在組織頁面時，也需要遵循文件的組織方式，即把同一個類別放在一起。

5. 導出圖像的處理

一般我們在繪制的時候都是使用2x的屏幕，并且使用更多的尺寸來繪制方案，因為這個屏幕的市場占有率比較大。在導出圖標圖片資源的時候，習慣上是同時導出@2x和@3x的圖片的。右下角會有這樣的圖片導出設置，如下圖。

當然有的開發(fā)商只需要兩倍的圖片數量，所以在做圖之前需要提前跟開發(fā)商商量好，當然如果圖片太多可能會占用內存很大，所以可以下載壓縮一下。

至此，文件命名標準終于詳細梳理出來了。從版本號文件夾的組織方式到圖標命名標準?？偨Y一下規(guī)則，原則就是以內容為出發(fā)點，在腦海里畫出層級關系，并進行分類，方便自己和其他團隊成員順利找到自己的資源，讓合作更加高效。

當天精選

======================================

如有侵權請聯(lián)系刪除！