Sketch在作圖應用（與Photoshop同理）的時候，為了省事，可能將頁面內圖層的順序都隨意擺放，有時候實在太多了就進行群組，英文叫group進行命名，這是一個默認的狀態，會出現group1、2、3、4...的無限分組。合理的命名和分組將會更加直觀的進行編輯和查找（不同公司不同工程師有著自己不同命名規範和習慣，只要切片名稱不變，大多有跡可循，開發看都不看直接替換就可以）。

APP作圖尺寸

默認我們採用@2x來作圖，在sketch新建畫板的時候就有顯示，但是為了後期更好的輸出和開發有默契的對接，有些同學提出試用@1X作圖可以更好地輸出切圖。（750x1334的尺寸應用更普遍）

一.文件整理

如圖，漸漸地發現，這樣隨意的不做法在做方案的時候看似節約了時間，實際上是浪費了時間。

設計師沒有一稿過的情況，方案都是PM、同組成員、開發商量後一步步定義，並且還有可能拿出以前的文件進行參考。那麼對於文件來說，總是需要尋找、選定以及修改各個版本以及各個圖層。

針對個人來說，整理好單個文件以及項目組的文件，是一件非常重要的事情。文件夾整理不好也會給別人帶來不必要的困擾。

二.整理方法

1.命名規則

Sketch的命名以「項目名字功能塊版本號_修改日期」，比如10月1日做的「京智辦公1.0」版本首頁，那麼他的命名就是「京智辦公_index_1.0_1001」加上日期為了方便自己和他人查看哪個最新版本（也可建立在文件內存不大的同一Sektch文件中的不同頁面）。

2.Artboard命名

作為新手我們很有可能會出現下圖的情況：

此時內心的想法是？？？？

合理的圖層模塊命名方式「代號_模塊_功能」這樣的結構組成。（一般以英文命名，規範可查看「切圖與標註文章」）

解釋一下代號的存在，比如圖中「J-1」。

定稿之後的Sketch是需要與開發進行過稿，而開發有什麼問題會直接提，「J-1」有疑問，而不用費力去說哪個模塊有什麼疑問。我們公司大多遠程會議，這樣的代號將更方便團隊之間的交流。

Artboard命名成功後，需要按照代碼序列號排列好，相同內容的模塊內容需要放在一起。

還有一點注意的是，在Sektch文件里，為了將頁面跳轉流程表示的更加清晰，設計師會在最頂層頁面額外加一Artboard，主要用來畫流線圖，和一些信息備註（文字規範、顏色規範、下劃線規範之類的）。

2.Layer命名

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

其中還會涉及到icon的命名方式，icon最完整的命名方式為「模_類別_功能_狀態」，比如說一個放大鏡一樣的icon，她就可以用「search_icon_input_gray」來表述，當然，若方案中只有一個這樣的icon，也可直接命名為"icon_search",依情況而定。

常用模塊、類別、狀態如下：

模塊：登錄頁面sigup&login

公共common

發現find

搜索search

消息message

消息流feed

添加add

通知notification

我me

類別：導航欄nav

按鈕btn

菜單欄tab

圖標icon

背景圖片bg

默認圖片def

狀態：選中態selected

不可點disable

按下pressed

正常normal

4.Symbol命名&使用情況

symbol的出現大大提高了設計師使用Sketch的效率，以前改一個顏色需要全局修改的任務現在一鍵搞定。

而symbol的命名如果規範好了，也會給自己帶來很大的便利。一是在插入symbol的時候找起來特別方便，二是在導出圖片的時候回自動分類成文件夾歸納好（此類情況只適用於頁面多且重複率高的時候，同理，在頁面大不相同的時候建立symbol是沒有很大的必要的）。

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

5.導出圖片和切片處理

一般在做圖的時候採用2倍的屏幕，多用750x334px尺寸進行方案的繪製，因為這個在屏幕在市場上佔有率是相對比較大的。而在導出icon圖片資源的時候，會有系統自帶的iOS和Android預設，也可以自己增加預設。這個時候當開發需要一倍圖的時候，需要提前和開發商量後再進行導圖，如果圖片過多，可能佔用的內存過大，可以下載IamgeOptim進行壓縮(IamgeOptim是前段必備的一款圖片壓縮工具，尤其是對PNG、JPEG、GIF此類圖片整理，整合了 Win、Linux上圖片處理工具的特色功能；軟體還提供了Workflow來配合在Finder 右鍵中對圖片進行快速處理)。


推薦閱讀：
相关文章