文件命名最詳細的規範——新手轉向資深的必經之路（下）

接著上一篇文章繼續整理文件命名的規範繼續，今天來講講Sketch的Artboard（畫板）命名和Layer（圖層）命名、Symbol（組件）的命名、導出圖片的處理方式。

Sketch文件的命名以及它的圖層的整理

2.Sketch的Artboard（畫板）命名

作為新手我們很容易出現這樣的Artboard的排布，如下圖。

我們可以發現，它的命名是由「代號-模塊-功能」這樣的結構而組成。先來解釋一下，為什麼會有代號這個存在，比如圖中的「MR-1」與「MR-4」。

因為真正定稿後的sketch是需要與開發工程師進行開會商討過稿的，一般這樣的會議，會將sketch文件投影到一個屏幕上。而開發童鞋們，有什麼問題需要指出的就直接說，「MR-1-1與MR-1-2有疑問」，而不用費力去說，「某某模塊從左數第一頁和第二頁有疑問」。如果是遠程會議，這樣的代號更方便團隊之間進行交流。所以一般都會為每個Artboard編一個碼，並且一個代號表達一個模塊，比方說上圖中「MR-2」表達的就是「ManualHL」的模塊。

另外Artboard命名完成之後，需要將所有的Artboard按照序列號排好，相同模塊內容的需要放在一起。如下圖

3.Layer（圖層）命名

Layer的命名，其實是涉及到單個Artboard的圖層的整理方式。整理思路是，按照頁面的內容先分幾個大塊，組成大的文件夾，然後再在每個文件夾下面將圖層順序排列好，按照圖層內容進行命名。大文件夾和layer的命名盡量以文件夾內容和layer內容為依據，如下圖Search的整理方式。

其中還涉及到icon的命名方式，icon最完整的命名方式為「模塊 類別功能_狀態」，比方說上圖中的放大鏡一樣的search icon，它就可以用search_icon_input_gray，來表述，當然如果整個方案中只有一個這樣的icon的話，覺得累贅也可以直接命名為icon_search。依情況而定，可以靈活變通。常用的模塊、類別、狀態如下圖。

4.Symbol組件的命名方式

symbol（組件）的出現大大提高了設計師使用sketch的效率，以前改一個顏色需要全局修改的任務現在一鍵全部搞定。沒有使用過sketch的童鞋可以先去嘗試一下。

而symbol的命名如果規範好了，也會給自己帶來很大的便利。一是在插入symbol的時候找起來特別方便，二是在導出圖片的時候會自動分類成文件夾歸納好。如下圖。

symbol在命名的時候會用「/」隔開去進行分類，比方說「icons/general/bringsensorclose」，意思就是在「icon」文件夾下建了一個子文件夾「general」，在「general」下有個icon名字叫bringsensorclose。導出後圖片會按照這樣的規則進行排列。並且在整理symbol的頁面時，也需要遵循Artboard的文件的整理方式，即將同一個類別的symbol放在一起。

5.導出圖片的處理

一般咱們在作圖的時候採用2倍的屏幕，多用750x1334px尺寸去進行方案的繪製，因為這個屏幕在市場上的佔有率是相對來說比較大的。而在導出icon圖片資源的時候呢，習慣上需要將@2x、@3x的圖片都導出，在sketch的右下角會有這樣的圖片導出設置，如下圖。

當然有的開發只要一倍的圖，所以需要提前跟開發商量後再進行導圖。當然如果圖片過多，可能佔用內存比較大，可以下載ImageOptim進行壓縮。

到這裡，文件命名的規範終於整理詳細了。大到版本號文件夾的整理，小到icon命名的規範，總結一下規律，原則就是以內容為出發點，在腦海中划出層級關係，進行歸納分類，方便自己也方便團隊其他人能順利找到自己的資源，讓合作效率更高。

Sophia 的 tips：

相關文章

職場設計教程搶先看～一枚愛折騰、愛健身的設計師妹紙~

詳情請關注微信公眾號：Sophia的玲瓏閣，獲取更多有關交互、健身及其它相關信息。

推薦閱讀：