新手必備！PS管理與規(guī)范V1.0

這是一個(gè)重要卻容易被忽視的領(lǐng)域，很多人都沒(méi)有文檔規(guī)范和管理意識(shí)；作為一個(gè)設(shè)計(jì)師，建立文檔規(guī)范和管理意識(shí)，除了能提高自己的工作效率，同時(shí)也對(duì)團(tuán)隊(duì)協(xié)作有很大的助力。

    本文只做拋磚引玉只用~希望各位看官提出建議和意見(jiàn)，共同完善。既然只是V1，就不用在意界面了哇…

一.文件管理

1.盡量少的PSD文件：

    例如在Web當(dāng)中，若要展示同一個(gè)頁(yè)面的不同展開內(nèi)容，應(yīng)該在同一個(gè)PSD文件中做好不同內(nèi)容，然后再根據(jù)需要顯示/隱藏圖層組（圖層復(fù)合），而不是另存為一個(gè)PSD當(dāng)中：

2.合理命名文件：

    合理有序并且?guī)в姓Z(yǔ)義的文件命名可以方便、直觀的管理你的源文件，并且在與其他人合作的時(shí)候不會(huì)讓他想把你砍死。

    上面右圖來(lái)自真實(shí)案例，這堆PSD如果不打開或者使用bridge之類的軟件的話天知道里面是啥，識(shí)別性非常低；

    推薦使用的命名方法是“頁(yè)面層級(jí)+頁(yè)面內(nèi)容+子層層級(jí)+頁(yè)面內(nèi)容”，中間使用下橫線相隔，而不推薦使用駝峰（識(shí)別性不高）或者空格（輸出圖片會(huì)自動(dòng)加上中橫線-），如“8_購(gòu)物_4商品信息”。當(dāng)然，根據(jù)個(gè)人習(xí)慣可以做相應(yīng)調(diào)整，只要達(dá)到易識(shí)別管理的目的即可。

3.設(shè)計(jì)文件的迭代：

    做設(shè)計(jì)的都知道，反復(fù)的修改有時(shí)候是不可避免的，當(dāng)你花了很多時(shí)間改了N次之后對(duì)方又說(shuō)要回上一版甚至第一版，如果沒(méi)有保留之前的文件…請(qǐng)吐血重做吧。

    推薦：以較大改動(dòng)為限，使用一個(gè)文件夾來(lái)保存被飛掉的設(shè)計(jì)稿，然后再根據(jù)實(shí)際日期存放當(dāng)期做出修改的文件。例如，上面左圖，140510表示14年5月10日交給客戶的第一稿，打開文件夾之后看到輸出效果圖+源文件。

    此方法亦可用來(lái)保存已經(jīng)完成的項(xiàng)目文件；之所以使用效果圖+源文件的形式來(lái)保存文件，一是確保方便查看圖片文件而不需要PS或者bridge來(lái)查看PSD文件，二是減小體積——?jiǎng)h除無(wú)用圖層，隱藏剩余圖層（可以用動(dòng)作批量實(shí)現(xiàn)喲~），然后壓縮文件，可以減小50%甚至90%+的體積。

4.將UI元素制成模板：

    不管是網(wǎng)站還是手機(jī)，UI當(dāng)中有很多內(nèi)容是既定并且可復(fù)用的，建立一個(gè)統(tǒng)一的模板對(duì)開發(fā)人員來(lái)說(shuō)很有益，也會(huì)減少很多于開發(fā)人員的溝通問(wèn)題。

    這點(diǎn)正在試驗(yàn)中。

5.將文件同時(shí)保存在云端：

    UI更新，特別是在程序已經(jīng)在開發(fā)中時(shí)所作的改動(dòng)都應(yīng)該盡早的給到程序員，所以良好的組間協(xié)作就要求了設(shè)計(jì)圖必須及時(shí)傳達(dá)給相關(guān)人員；這點(diǎn)需要與其他組的成員合作，達(dá)成規(guī)范，像代碼迭代一樣的在云端更新UI并且附上更改說(shuō)明是個(gè)不錯(cuò)的辦法。

二.圖層管理

1.合理的圖層命名：

    不要嫌麻煩；在圖層數(shù)量較少的時(shí)候可以使用直接選擇工具來(lái)選擇圖層，但是一旦文件變大，圖層層次變多，要找到一個(gè)特定圖層可能就會(huì)變得困難了；對(duì)每一個(gè)圖層進(jìn)行精確命名可以有效防止混亂，迅速對(duì)目標(biāo)圖層進(jìn)行定位；像“圖層1 副本”、“矩形 1”這種圖層名字要嚴(yán)格禁止。

    如果andriod和ios已經(jīng)進(jìn)行分開設(shè)計(jì)，則直接使用兩平臺(tái)的命名規(guī)范；如果使用同一份設(shè)計(jì)稿，則推薦ios端；即便不使用平臺(tái)規(guī)范命名，至少也要具有語(yǔ)義。

    tips：點(diǎn)擊圖“圖層”面板右邊的擴(kuò)展——面板選項(xiàng)，可以把拷貝圖層時(shí)的后綴去掉，并且圖層效果不擴(kuò)展。

2.合理使用圖層分組：

    圖層分組可以幫你理清文件結(jié)構(gòu)，配合合理的圖層命名能讓你的選擇右鍵菜單和搜索名字更好用；同時(shí)，給元素復(fù)用提供了極大便利。

3.圖層（組）順序：

    圖層（組）順序應(yīng)該遵循“從上到下，從新到舊，位置相近，圖層相鄰”的原則；嚴(yán)格的遵守前三點(diǎn)會(huì)使你的文件擁有嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)，體現(xiàn)出個(gè)人良好的職業(yè)素養(yǎng)。

    嗯~看著自己整齊的文件不覺(jué)得很爽嗎~？

4.圖層復(fù)合：

    然后到圖層復(fù)合；功能上這也沒(méi)啥好說(shuō)的，因?yàn)榭梢杂涗泩D層/組的狀態(tài)，所以再保存過(guò)一次記錄之后，圖層復(fù)合非常適宜展示同一頁(yè)面的不同功能狀態(tài)。缺點(diǎn)在于圖層混合只會(huì)記錄可視性、位置與外觀，其他信息不會(huì)保存（例如圖層/組順序），并且刪除圖層之后會(huì)在右邊出現(xiàn)小警告符…哪里能忍！

    推薦一個(gè)管理圖層復(fù)合的小插件，composer（http://www.jasonforal.com.zcool.cn/composer/）：

    協(xié)助管理圖層復(fù)合，簡(jiǎn)單粗暴；不過(guò)由于不支持2014 CC，我已經(jīng)用不了了= =。

5.刪除不必要的圖層：

    在設(shè)計(jì)的過(guò)程中有時(shí)候會(huì)不可避免的產(chǎn)生多余圖層，但是在儲(chǔ)存或者與其他人進(jìn)行合作的時(shí)候應(yīng)該將多余的圖層刪掉，只保留不同狀態(tài)的圖層。而且多余圖層會(huì)讓文件增大許多，同時(shí)導(dǎo)致打開速度變慢。

    PS：雖然可以直接刪除隱藏圖層和空?qǐng)D層，但是這個(gè)操作可能會(huì)刪掉哪些我們主動(dòng)隱藏的狀態(tài)圖層，所以建議在項(xiàng)目完成，即進(jìn)行項(xiàng)目存檔前都使用手動(dòng)的方法來(lái)刪除隱藏圖層。

三.視覺(jué)

1.不要強(qiáng)行拉伸：

    能保持矢量的盡量保持矢量，并且在變形操作時(shí)保持其比例，避免出現(xiàn)變形。

    PS CC已經(jīng)自帶形狀圓角工具，但是在多次圖層操作之后（我嚼著是CTRL+T的原因）可能會(huì)出現(xiàn)莫名其妙不能用的狀態(tài)，所以還是推薦裝一個(gè)圓角插件CornerEditor：

地址如下：http://www.zcool.com.cn/article/ZODEyMTY=.html#，功能簡(jiǎn)單易懂，改個(gè)圓角還是很方便的。

2.輔助線與對(duì)齊：

    做設(shè)計(jì)的都是強(qiáng)迫癥，對(duì)齊網(wǎng)格，對(duì)齊像素，對(duì)齊任何一切可以對(duì)齊的東西——“這里移過(guò)去一點(diǎn)點(diǎn)”，哈哈哈哈。

    對(duì)齊的基本方法就是使用參考線，并打開智能參考線；

    還要回靈活運(yùn)用面板上的對(duì)齊功能喲：

    來(lái)個(gè)參考線插件GuideGuide(http://guideguide.me/)：

    一份良好的PSD文件至少應(yīng)該包含基本的參考線——外邊距、元素分塊、元素間隔；數(shù)據(jù)化的設(shè)計(jì)可以使實(shí)現(xiàn)有章可循，并且便于交接和后期維護(hù)；當(dāng)然，輔助線的位置和數(shù)量可以酌情改變和增減。

3.根據(jù)情況使用內(nèi)描邊或外描邊：

    如下圖，前者為內(nèi)描邊，直角并清晰；后者為外描邊，會(huì)出現(xiàn)虛化的圓角。在進(jìn)行客戶端切圖的時(shí)候可能會(huì)對(duì)實(shí)現(xiàn)效果產(chǎn)生影響，所以，邊緣銳利的情況下推薦使用內(nèi)描邊。

4.非破壞性設(shè)計(jì)：

    常用的非破壞性設(shè)計(jì)技巧有：智能對(duì)象、蒙版、剪切組、調(diào)整圖層等；

智能對(duì)象的好處已無(wú)需贅言，誰(shuí)用誰(shuí)知道；但僅有一點(diǎn)，不推薦在同一個(gè)文件當(dāng)中使用過(guò)多智能對(duì)象；

    擴(kuò)展：如下圖，PS默認(rèn)界面的左下角有兩組數(shù)字：

    其中左邊代表合并所有圖層后的、未壓縮的圖像數(shù)據(jù)大小；右邊代表所有未經(jīng)壓縮的內(nèi)容（包括圖層、通道、路徑等）的數(shù)據(jù)大小。換個(gè)思路說(shuō)，就是內(nèi)存占用；更詳細(xì)內(nèi)容請(qǐng)百度。

    雖然智能對(duì)象的復(fù)制不會(huì)像標(biāo)準(zhǔn)圖層那樣生成真正的多倍像素內(nèi)容，只是充當(dāng)了“源”的角色（即左邊數(shù)字不會(huì)增加），但右邊的數(shù)字還是會(huì)增加，使文件打開速度和操作明顯變慢；所以，對(duì)于智能對(duì)象的使用仍然要適量，不要直接將一張幾M甚至十幾M的圖直接丟進(jìn)PS里面弄成智能對(duì)象，或者圖方便什么都使用智能對(duì)象。

    后面幾個(gè)也沒(méi)啥說(shuō)的…不涉及具體操作；謹(jǐn)慎的使用柵格化或者合并圖層，使文件處于方便編輯的狀態(tài)。

四.文字

1.字體：

    盡量使用系統(tǒng)自帶字體如黑體、宋體等，或者使用常用字體如蘋果麗黑等；如果使用非常用字體，最好將使用的特殊字體加以記錄甚至打包放置另外一個(gè)文件夾中以備用；有時(shí)候找字體真的很煩…

    推薦團(tuán)隊(duì)內(nèi)共享一個(gè)文字庫(kù)。

2.字號(hào)和行高：

    字號(hào)只在設(shè)計(jì)中使用整數(shù)，雙數(shù)，如12、14、16像素的字號(hào)；減少單號(hào)字號(hào)的使用頻率，禁止使用帶小數(shù)的字號(hào)；如無(wú)特殊情況，段落行高至少應(yīng)為字號(hào)的1.5倍。

3.文本框：

    文本框大小合適即可，不要超過(guò)布局長(zhǎng)度；且若要設(shè)置字體不同屬性時(shí)（顏色，字體，字號(hào)等），請(qǐng)拆分為單獨(dú)的文本框進(jìn)行設(shè)置。

    文本框如果過(guò)大，可能會(huì)造成誤選中；拆分文本框方便查看文本屬性。