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

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

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

一.文件管理

1.盡量少的PSD文件：

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

2.合理命名文件：

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

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

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

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

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

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

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

4.將UI元素制成模板：

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

    這點正在試驗中。

5.將文件同時保存在云端：

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

二.圖層管理

1.合理的圖層命名：

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

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

    tips：點擊圖“圖層”面板右邊的擴展——面板選項，可以把拷貝圖層時的后綴去掉，并且圖層效果不擴展。

2.合理使用圖層分組：

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

3.圖層（組）順序：

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

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

4.圖層復(fù)合：

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

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

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

5.刪除不必要的圖層：

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

    PS：雖然可以直接刪除隱藏圖層和空圖層，但是這個操作可能會刪掉哪些我們主動隱藏的狀態(tài)圖層，所以建議在項目完成，即進行項目存檔前都使用手動的方法來刪除隱藏圖層。

三.視覺

1.不要強行拉伸：

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

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

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

2.輔助線與對齊：

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

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

    還要回靈活運用面板上的對齊功能喲：

    來個參考線插件GuideGuide(http://guideguide.me/)：

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

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

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

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

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

智能對象的好處已無需贅言，誰用誰知道；但僅有一點，不推薦在同一個文件當(dāng)中使用過多智能對象；

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

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

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

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

四.文字

1.字體：

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

    推薦團隊內(nèi)共享一個文字庫。

2.字號和行高：

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

3.文本框：

    文本框大小合適即可，不要超過布局長度；且若要設(shè)置字體不同屬性時（顏色，字體，字號等），請拆分為單獨的文本框進行設(shè)置。

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