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

接著上一篇文章《新手轉(zhuǎn)向資深的必經(jīng)之路——交互文件命名的最詳細(xì)規(guī)范（上）》繼續(xù)整理文件命名的規(guī)范繼續(xù)，今天來(lái)講講Sketch的Artboard（畫(huà)板）命名和Layer（圖層）命名、Symbol（組件）的命名、導(dǎo)出圖片的處理方式。

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

2. Sketch的Artboard（畫(huà)板）命名

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

然后，我們?cè)賮?lái)看看一個(gè)成熟的設(shè)計(jì)師它的Artboard的排布與命名，如下圖：

我們可以發(fā)現(xiàn)，它的命名是由“代號(hào)-模塊-功能”這樣的結(jié)構(gòu)而組成。先來(lái)解釋一下，為什么會(huì)有代號(hào)這個(gè)存在，比如圖中的“MR-1”與“MR-4”。

因?yàn)檎嬲ǜ搴蟮膕ketch是需要與開(kāi)發(fā)工程師進(jìn)行開(kāi)會(huì)商討過(guò)稿的，一般這樣的會(huì)議，會(huì)將sketch文件投影到一個(gè)屏幕上。而開(kāi)發(fā)童鞋們，有什么問(wèn)題需要指出的就直接說(shuō)，“MR-1-1與MR-1-2有疑問(wèn)”，而不用費(fèi)力去說(shuō)，“某某模塊從左數(shù)第一頁(yè)和第二頁(yè)有疑問(wèn)”。如果是遠(yuǎn)程會(huì)議，這樣的代號(hào)更方便團(tuán)隊(duì)之間進(jìn)行交流。所以一般都會(huì)為每個(gè)Artboard編一個(gè)碼，并且一個(gè)代號(hào)表達(dá)一個(gè)模塊，比方說(shuō)上圖中“MR-2”表達(dá)的就是“ManualHL”的模塊。

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

還有一點(diǎn)需要注意的是，在sketch文件里面，為了將頁(yè)面跳轉(zhuǎn)流程表示得更加清晰，設(shè)計(jì)師會(huì)在最頂層加一個(gè)額外的Artboard，主要用來(lái)畫(huà)流程線，和一些信息備注。如下圖Flow&Note的Artboard。

3. Layer（圖層）命名

Layer的命名，其實(shí)是涉及到單個(gè)Artboard的圖層的整理方式。整理思路是，按照頁(yè)面的內(nèi)容先分幾個(gè)大塊，組成大的文件夾，然后再在每個(gè)文件夾下面將圖層順序排列好，按照?qǐng)D層內(nèi)容進(jìn)行命名。大文件夾和layer的命名盡量以文件夾內(nèi)容和layer內(nèi)容為依據(jù)，如下圖Search的整理方式。

其中還涉及到icon的命名方式，icon最完整的命名方式為“模塊 類別功能_狀態(tài)”，比方說(shuō)上圖中的放大鏡一樣的search icon，它就可以用search_icon_input_gray，來(lái)表述，當(dāng)然如果整個(gè)方案中只有一個(gè)這樣的icon的話，覺(jué)得累贅也可以直接命名為icon_search。依情況而定，可以靈活變通。常用的模塊、類別、狀態(tài)如下圖。

4. Symbol組件的命名方式

symbol（組件）的出現(xiàn)大大提高了設(shè)計(jì)師使用sketch的效率，以前改一個(gè)顏色需要全局修改的任務(wù)現(xiàn)在一鍵全部搞定。沒(méi)有使用過(guò)sketch的童鞋可以先去嘗試一下。

而symbol的命名如果規(guī)范好了，也會(huì)給自己帶來(lái)很大的便利。一是在插入symbol的時(shí)候找起來(lái)特別方便，二是在導(dǎo)出圖片的時(shí)候會(huì)自動(dòng)分類成文件夾歸納好。如下圖。

symbol在命名的時(shí)候會(huì)用“/”隔開(kāi)去進(jìn)行分類，比方說(shuō)“icons/general/bringsensorclose”，意思就是在“icon”文件夾下建了一個(gè)子文件夾“general”，在“general”下有個(gè)icon名字叫bringsensorclose。導(dǎo)出后圖片會(huì)按照這樣的規(guī)則進(jìn)行排列。并且在整理symbol的頁(yè)面時(shí)，也需要遵循Artboard的文件的整理方式，即將同一個(gè)類別的symbol放在一起。

5. 導(dǎo)出圖片的處理

一般咱們?cè)?strong>作圖的時(shí)候采用2倍的屏幕，多用750x1334px尺寸去進(jìn)行方案的繪制，因?yàn)檫@個(gè)屏幕在市場(chǎng)上的占有率是相對(duì)來(lái)說(shuō)比較大的。而在導(dǎo)出icon圖片資源的時(shí)候呢，習(xí)慣上需要將@2x、@3x的圖片都導(dǎo)出，在sketch的右下角會(huì)有這樣的圖片導(dǎo)出設(shè)置，如下圖。

當(dāng)然有的開(kāi)發(fā)只要一倍的圖，所以需要提前跟開(kāi)發(fā)商量后再進(jìn)行導(dǎo)圖。當(dāng)然如果圖片過(guò)多，可能占用內(nèi)存比較大，可以下載ImageOptim進(jìn)行壓縮。

到這里，文件命名的規(guī)范終于整理詳細(xì)了。大到版本號(hào)文件夾的整理，小到icon命名的規(guī)范，總結(jié)一下規(guī)律，原則就是以內(nèi)容為出發(fā)點(diǎn)，在腦海中劃出層級(jí)關(guān)系，進(jìn)行歸納分類，方便自己也方便團(tuán)隊(duì)其他人能順利找到自己的資源，讓合作效率更高。

Sophia的tips：真正的高手，細(xì)節(jié)都做的很好！

相關(guān)閱讀

《文件命名最詳細(xì)的規(guī)范——新手轉(zhuǎn)向資深的必經(jīng)之路（上）》

專欄作家

Sophiallg，微信公眾號(hào)：Sophia的玲瓏閣，人人都是產(chǎn)品經(jīng)理專欄作家。一枚愛(ài)折騰，愛(ài)健身的交互設(shè)計(jì)妹紙。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。