@窒息紅Leon?：以前可能會(huì)覺(jué)得，設(shè)計(jì)師應(yīng)該是自由、隨性、充滿創(chuàng)意的。但在實(shí)際工作中，尤其是互聯(lián)網(wǎng)產(chǎn)品方面的設(shè)計(jì)師，因?yàn)樾枰芾碜约旱墓ぷ魑臋n并且和同事協(xié)作溝通，設(shè)計(jì)流程中的嚴(yán)謹(jǐn)與規(guī)范顯得尤為重要 >>>

本文為作者授權(quán)優(yōu)設(shè)發(fā)布，未經(jīng)作者本人授權(quán)請(qǐng)勿轉(zhuǎn)載，謝謝 ：）

作者微信公眾號(hào)：zhenlei_pd，歡迎同學(xué)們關(guān)注唷。

不幸的是，我這大半年的設(shè)計(jì)工作中都不夠重視這件事；而幸運(yùn)的是，現(xiàn)在醒悟還不晚。

想看同學(xué)的面試經(jīng)驗(yàn)？戳：《畢業(yè)季專題第二期！揭秘天貓交互設(shè)計(jì)師面試過(guò)程》

圖層管理、命名規(guī)范、Style Guide 等等都是再重要不過(guò)的內(nèi)容，每一步偷下的懶，日后都要花費(fèi)數(shù)倍的時(shí)間去填坑。

這是我月初時(shí)候設(shè)計(jì)稿某一版的圖層截圖。

可以看到，毫無(wú)邏輯可言，僅僅從這張圖看來(lái)，根本沒(méi)有辦法把設(shè)計(jì)內(nèi)容和圖層、命名結(jié)合起來(lái)，更不要提理解和管理了。Group 都保留了默認(rèn)命名，無(wú)法理解含義；中文英文混合，大小寫混合，無(wú)法正常閱讀；邏輯層次混亂，取圖層、選定圖層都比較困難；沒(méi)有使用 Symbol 功能（或智能對(duì)象），對(duì)樣式的管理為零。

很多時(shí)候，如果需要在界面中添加一條分割線，你會(huì)怎么做？也許你會(huì)直接快捷鍵拉一個(gè)線條，確定長(zhǎng)度和角度后放置到指定位置，就完事兒了。那么，這條線的名字就叫做「Line」，下次復(fù)制的時(shí)候，新的線條名字就變成了「Line Copy 2」。如果再切換到別的頁(yè)面或者創(chuàng)建其他組件，一個(gè)混亂的圖層就逐漸成型了。

圖層混亂最大的問(wèn)題就是迭代煩瑣，包括設(shè)計(jì)層面的圖層修改和合作層面的切圖等。

一般，一個(gè)項(xiàng)目的設(shè)計(jì)圖最少也有幾十頁(yè)，多的可能會(huì)有上百頁(yè)。如果我在每個(gè)頁(yè)面中都采用不規(guī)范的做法新建「分割線」，比如都采用了 200pt 寬，純黑色的線條，加在一起可能有百來(lái)?xiàng)l這樣的線。當(dāng)項(xiàng)目評(píng)審后，要求把線條的顏色改成灰色，你就會(huì)默念「真是日了狗了」。想想很容易明白，如果不使用 Symbol 進(jìn)行樣式管理，每一個(gè)線條都要重新編輯一次，還要確保不遺漏、不出錯(cuò)，工作量絕對(duì)驚人。

再說(shuō)切圖，按照上面這張圖的命名方法，直接切圖給開(kāi)發(fā)，對(duì)方基本是看不懂這個(gè)規(guī)則的，結(jié)果就是根本找不到需要的內(nèi)容在文件夾里的什么位置。而且，編碼過(guò)程中的每一個(gè)組件也可能是一個(gè)對(duì)象，也需要對(duì)其命名，比如「separator_leftview_long」等，如果你的切圖命名為「Line Copu 2」，請(qǐng)問(wèn)同事是什么心情呢？

所以，這次我花費(fèi)了大量的時(shí)間把設(shè)計(jì)稿從頭到尾整理了一遍，把所有用到的字體樣式、圖層樣式、常用組件都采用 Symbol 進(jìn)行統(tǒng)一管理，并且確保了所有頁(yè)面中同一個(gè)組件具備完全一致的命名和樣式。

頁(yè)面名稱方面，使用「模塊_內(nèi)容_備注」的形式進(jìn)行命名，如下圖所示：

層次方面，讓圖層和視覺(jué)順序相對(duì)應(yīng)，圖層本身的命名也采用「類型_位置_備注」的形式進(jìn)行標(biāo)注。比如「bar_project_leftview_segnav_selected」指的就是一個(gè)條塊，位于 project 模塊下的左視圖次級(jí)導(dǎo)航頁(yè)面中，功能是標(biāo)識(shí)選中的效果。

對(duì)于經(jīng)常用到的組件如 icon、分割線、按鈕等，使用 Symbol 和字體樣式進(jìn)行統(tǒng)一管理，并且把它們羅列在 Style Guide 中，一方面便于查找，另一方面切圖的時(shí)候只要輸出一份就可以了。如下圖所示：

這樣，無(wú)論要求改動(dòng)哪個(gè)內(nèi)容，都可以「牽一發(fā)動(dòng)全身」，極大避免了重復(fù)性工作。

切圖方面，@1x 和 @2x 分別存放，對(duì)于樣式類經(jīng)常需要復(fù)用的內(nèi)容可以單獨(dú)導(dǎo)出，然后每個(gè)模塊獨(dú)有的內(nèi)容就單獨(dú)羅列出來(lái)，這樣工程師可以結(jié)合設(shè)計(jì)稿很快地找到所需要的內(nèi)容。

PS：本次合作的工程師說(shuō)，@1x 是不需要在命名時(shí)單獨(dú)注釋的，@2x 則要在文件名尾標(biāo)出。我第一次還特意手動(dòng)添上了@1x，多此一舉，倒也學(xué)會(huì)了這個(gè)小要求。

至于標(biāo)注方面，使用 Zeplin 后真的方便了很多，原本要花不少時(shí)間的工作可以避免了，開(kāi)發(fā)也表示看起來(lái)更加舒暢。

也許今天這篇文章對(duì)于很多有經(jīng)驗(yàn)的設(shè)計(jì)師來(lái)說(shuō)是不值一提的小事，因?yàn)榇_實(shí)這都是基本的工作規(guī)范。但是對(duì)于新人來(lái)說(shuō)，不犯錯(cuò)可能就不知道這些內(nèi)容的重要性，所謂吃一塹長(zhǎng)一智，做的細(xì)致，只會(huì)讓你更加專業(yè)。

今天收到了最近這幾個(gè)月來(lái)聽(tīng)到的最大的表?yè)P(yáng)，就是「比我們公司的設(shè)計(jì)專業(yè)多了」，繼續(xù)加油！

作者微信公眾號(hào)：

招聘風(fēng)暴月來(lái)了，來(lái)看看怎么找到工作！

心血合集！你的工作就它承包了！
《畢業(yè)生求職指南！手把手幫你從零開(kāi)始找到工作！》

自學(xué)時(shí)刻到，我們一起來(lái)禱告！
《超贊！設(shè)計(jì)師完全自學(xué)指南》

給自己打氣！來(lái)看看90后的大學(xué)生活！
《這才是大學(xué)生活！90后設(shè)計(jì)師的成長(zhǎng)記事錄》

作者：@窒息紅Leon

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量96萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：