中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

接著上一篇文章《新手轉向資深的必經之路——交互文件命名的最詳細規范（上）》繼續整理文件命名的規范繼續，今天來講講Sketch的Artboard（畫板）命名和Layer（圖層）命名、Symbol（組件）的命名、導出圖片的處理方式。

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

2. Sketch的Artboard（畫板）命名

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

然后，我們再來看看一個成熟的設計師它的Artboard的排布與命名，如下圖：

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

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

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

還有一點需要注意的是，在sketch文件里面，為了將頁面跳轉流程表示得更加清晰，設計師會在最頂層加一個額外的Artboard，主要用來畫流程線，和一些信息備注。如下圖Flow&Note的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：真正的高手，細節都做的很好！

相關閱讀

《文件命名最詳細的規范——新手轉向資深的必經之路（上）》

專欄作家

Sophiallg，微信公眾號：Sophia的玲瓏閣，人人都是產品經理專欄作家。一枚愛折騰，愛健身的交互設計妹紙。

本文原創發布于人人都是產品經理，未經許可，禁止轉載。