網頁設計師PSD設計文件的圖層管理

經驗分享：網頁設計與重構那些事兒【基礎篇】

時間：2013-09-03 00:19 來源：騰訊MXD 做者：Lerroy

　　做爲設計師，最關心的也許就是排版好很差看、圖片美不美觀、視覺炫不炫，咱們儘量的去把設計稿作的最漂亮，而後就把碩大的PSD文件就直接發給重構了，卻不知這個時候重構正在恨你：我擦，這麼大的PSD，還木有打開!原本就開了各類瀏覽器編輯器神馬的又要打開苕大的PSD文件，機子要卡死了!!!機子卡死就算了吧，打開一看，我去，幾百個圖層呀!好吧幾百個圖層也就算了，爲何我明明拖動按鈕，卻把各類連七八糟的圖層拖進來了，根本找不到我要的圖層!!

　　瞧瞧多麼恐怖的事情，可是也許咱們只要管理好PSD圖層就能夠改變這種抱怨。

　　對於圖層管理，這多是你們比較容易忽視的操做習慣，特別是初學者或者新人，也可能有人說：這有什麼值得一提的?!作好設計稿就好了，其餘交給重構吧!咱們看多了程序員層次分明的代碼，規範有序的文檔，認爲圖層命名不是咱們要乾的事情—-其實否則，下面有幾個緣由：

　　1)使用PSD的羣體：設計師本人、客戶、工程技術人員(程序員)、新人接手等。

　　2)PSD圖層太多，當時記得，時間一長容易忘記。

　　3)項目設計過程不免有需求更改、修改建議，致使設計稿須要反覆修改，雜亂的圖層結構是否是讓你更添一愁呢?

　　4)做爲一名網頁重構工做者，會直接面對你的PSD文件，無序的圖層及命名使人抓狂。。。。

　　看來管理好圖層真的很重要。

　　話說講以前看下這張圖，一塊兒感覺下這樣的圖層面板，PS：裏面的人物(藝名：主席)，年會上的照片。這相片很應景有木有，還有下面的嚇尿的小Q。

　　切換一下，再看下這裏。美女就不解釋了。。。

　　話說咱們要對圖層進行管理，合理命名就是關鍵了。先看下命名與圖層排列：

　　看一個案例，設計稿與HTML頁面的的名稱對應位置圖。能夠看下左邊代碼的幾個節點，用顏色作了區分，顏色對應了右邊的模塊，最外面的紅色(wrapper)是這個頁面的外套，對應PSD上就是整個頁面;接下來紫色(header)，對應PSD上的頭部(LOGO+導航);同理：綠色、黃色。能夠發現基本是從上到下的順序，固然還有例外的狀況，這裏就不說了。看個直觀感覺就能夠了。

　　我本身不怎麼喜歡連接圖層(右圖紅色區域)，我更喜歡分組(左圖)，按照每一個功能快來建組，若是本身喜歡你就用吧~~

　　剛纔看了HTML代碼和對應PSD的簡單案例，你們也許發現規律了，爲了方便操做，建議按照模塊名稱來命名，圖層的順序與頁面上看到的元素順序一致：從上到下，從左到右。

　　可能有人問：PSD上圖層的名字是隨便寫的嗎?其實不是，命名是參考高級語言編程語法來進行的，我的比較喜歡用駱駝規則或者下劃線規則，若是還要分個勝負的話，我更喜歡駱駝規則。

　　除了第一個邏輯點首字母小寫外，其他邏輯點首字母都大寫，見示例。

　　網頁裏經常使用的模塊名稱：

　　直接看圖和對應的中英文名稱：整個頁面(wrap/wrapper)

　　頭部(header)

　　主導航(mainNav),若是整個頁面只有一個導航就用「導航(nav)」

　　頁腳，或者叫版權(footer)

　　麪包屑(breadCrumb),日常叫慣了麪包屑，其實它的來歷是有一個故事的，具體故事就不講了，本身百度下吧。

　　搜索(search)

　　登陸(login)… 等等。

　　瞭解了圖層命名，也許你的PSD圖層已經幾百個了，該對圖層管理管理了。

　　1)什麼是模塊化

　　2)模塊化調用、複用

　　3)效率和輸出

　　模塊化的定義，每一個模塊完成一個特定的子功能，全部的模塊按某種方法組裝起來，成爲一個總體，完成整個系統所要求的功能。在系統的結構中，模塊是可組合、分解和更換的單元。

　　貌似文字有點複雜，模塊化是程序設計裏面的詞語，咱們這裏就能夠簡化下：按照視覺功能塊組建一個PSD圖層分組，相似前面說的頭部(header)、登陸(login)、搜索(search)等。

　　模塊化組建後，能夠在各個頁面做爲公共組件來使用，就沒必要要把相同的圖層再設計組合一遍了，直接把這個分組拖進來就是了。

　　模塊化在門戶官網的項目設計中尤其重要，特別顯效率，後面還有講到。

　　雖然咱們對圖層命名了，天然會耽誤一些設計時間，可能有人以爲效率變低了嘛?! 我本身以爲一方面這是一個設計師的職業習慣問題，另外一方面這並不耽誤你提高效率，當遇到大型門戶網站設計時，你會發現這是多麼的好用。

　　我的經驗，當你開始關注你的PSD圖層結構的時候，其實對圖層面板上每一個圖層究竟是什麼內容並不關心，因此我比較喜歡這麼作：

　　在圖層選項那裏把圖層預覽改成「無」，這樣圖層面板就清爽了，有的都是結構，一目瞭然。

　　迴歸正題：舉幾個梨子。你們對比看左右兩邊的內容及圖層變化：基本規則是模塊化命名、從上到下、從左到右。

　　以前作的案例都是如此。

　　前面說了智能對象在大型網站設計上會極大的提高效率，若是不信能夠繼續看：

　　簡單的說就是智能對象反覆放大縮小時候不會失真出現鋸齒和模糊變形，固然前提是放大的尺寸不要超過轉換成智能對象以前的尺寸大小。

　　大型官網設計中不少模塊是須要反覆使用的，一般的作飯是有幾個就改幾個，不停的複製，拖放，不停的複製樣式、粘貼樣式。累不累啊你。。。

　　能夠這樣支招：在同一個頁面若是有不少元素是同樣的，能夠把這個元素轉換成智能對象，之後若是有改動在圖層上雙擊這個智能對象進去編輯下保存就能夠了，該頁面的該類型的元素就都改過來了。若是相同的元素不是在一個頁面，可使用「替換內容」指令，見下圖：

　　公共模塊使用智能對象，批量修改，批量替換，高效快捷。在智能對象所在圖層右鍵，在彈出菜單中選擇「替換內容」，將預先保存在你項目目錄中的PSB文件替換到PSD中來;這裏須要注意，你所存放的psb文件須要放在你的項目目錄下，由於默認狀況下雙擊智能對象時，打開的只是暫存盤裏的psb文件，並非你所在項目下的psb文件。

　　另外在作物料展現的時候智能對象的使用也能夠很方便，不會破壞原有大圖，在印刷品的設計也能夠很方便。

　　比喻這個例子：須要把WSD的LOGO按照手提袋的透視關係調整尺寸角度，一般狀況咱們就是直接那一張圖貼上去而後調啊調的，好不容易調整好了。結果換袋子了，是另外一個方向的透視，苦逼的咱們又得按照新袋子的透視來調整LOGO，累不累啊你。。。

　　其實上面那個LOGO已是智能對象了，如上圖，咱們再雙擊下圖層進去看看：

　　這個就是原始LOGO文件了，無缺無損，可人兒的。

　　還有一個地方用智能對象也很提高效率，作客戶端的時候常常會須要輸出N多的icon尺寸，這是一個快捷的辦法，原理跟剛纔同樣。固然這樣的縮放icon在精細度上沒有純手工的來得好。只供一個思路哈。

　　小結一下：智能對象在多頁面的、多重複公共模塊、VI物料包裝展現的時候會顯著提高效率。

　　另外一個話題：與重構有關的，有時候 設計師也不斷的抱怨頁面仔作出的頁面沒有設計稿上的好看，不是間距大了就是間距小了，不是字體小了就是字體大了，不是圖片壓縮的太厲害就是壓根圖片切少 了，或者動畫也不是咱們想要的效果。。。。，越到這些我不能全怪他們，咱們也有責任，畢竟他們不是設計，可是我我的的觀點是重構須要一些PS技巧或設計理論，在設計師沒有時間走查頁面的時候也能輸出比較高質量的頁面。

　　市面上大大小小的瀏覽器幾十種，常見的大體也有十來種，因爲每一個瀏覽器自身渲染頁面的差別，並非同一個頁面在全部瀏覽器上看到的都同樣，我大體用90%的還原度來衡量吧，也可能有些設計師要求重構100%還原，那我表示那位重構至關苦逼，保證頁面跟設計稿90%一致，有很多工做須要設計師和重構共同參與的，比喻設計師在時間容許的狀況下作好標註，哪一個地方多少像素，用什麼顏色值，高度是多少等標註在頁面上。

　　重構者不關關注代碼自己，也能夠跳出代碼看看視覺表現層，若是確實對幾像素看不出來，能夠截圖放在psd上作對比，這個方法很容易本身發現問題，成本也比較低。

　　在表格作網頁時期，圖片和圖標幾乎都是單個的，加載一張圖片就是一次http請求，服務器就要讀取一次，頻繁的讀取再加上大量的用戶不斷的訪問，極可能讓服務器承受不起而掛機。所以須要儘量的減小http請求，合併背景圖是一個頗有效的辦法。

　　一般背景圖的輸出質量百分比能夠調在60-80%，對比較重要的icon、圖片能夠調爲100%輸出高質量圖片。

　　在網頁加載過程當中，或由於網速緣由圖片暫時沒有加載出來而出現短期空白，建議給該區域預先定義好背景色，以提示用戶該區域是有內容的。

　　鼠標停在圖片上時，適當的添加title或者alt，以方便用戶在圖片加載失敗時能夠知道這張圖片是幹什麼用的。

　　按需加載，異步加載，相似蘋果官網上不少地方用到了異步加載，好處是提升主要頁面的加載速度，用戶須要的時候才加載其餘附件頁面。

　　少用CSS濾鏡，如今應該不多人用了，基本都是採用優雅降級或提示用戶升級瀏覽器。

　　網站上線前壓縮CSS和JS文件，注意記得備份。

　　我喜歡用這個詞，雖然本身並無達到代碼優雅，作到代碼優雅還須要不斷的努力，一些細節足夠讓專家看到你是否具有職業化素養，這裏就不班門弄斧了，仍是看圖吧~~~~~~。