網(wǎng)頁設計與重構那些事兒【基礎篇】

作為設計師，最關心的也許就是排版好不好看、圖片美不美觀、視覺炫不炫，我們盡可能的去把設計稿做的最漂亮，然后就把碩大的PSD文件就直接發(fā)給重構了，殊不知這個時候重構正在恨你：

我擦，這么大的PSD，還木有打開！本來就開了各種瀏覽器編輯器神馬的又要打開苕大的PSD文件，機子要卡死了?。?！機子卡死就算了吧，打開一看，我去，幾百個圖層呀！好吧幾百個圖層也就算了，為甚麼我明明要拖動按鈕，各種連七八糟的圖層也拖進來了，根本找不到我要的圖層??！

 

 

瞧瞧多么恐怖的事情，但是也許我們只要管理好PSD圖層就可以改變這種抱怨。

對于圖層管理，這可能是大家比較容易忽視的操作習慣，特別是初學者或者新人，也可能有人說：這有什么值得一提的？！做好設計稿就行了，其他交給重構吧！我們看多了程序員井井有條的代碼，規(guī)范有序的文檔，認為圖層命名不是我們要干的事情----其實不然，下面有幾個原因：

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

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

2）項目設計過程難免有需求更改、修改建議，導致設計稿需要反復修改，雜亂的圖層結(jié)構是不是讓你更添一愁呢？

3）作為一名網(wǎng)頁重構工作者，會直接面對你的PSD文件，無須的圖層及命名令人抓狂。。。。

 

 

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

 

(應酷友 上PPT)

 

 

1）PSD圖層命名

2）模塊化管理你的圖層

3）智能對象的使用

4）重構也需關注設計

5）Q&A

 

 

 

話說講之前看下這張圖，一起感受下這樣的圖層面板，PS：里面的人物（藝名：主席），年會上的照片。這相片很應景有木有，還有下面的嚇尿的小Q。

 

 

 

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

 

 

 

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

 

 

看一個案例，設計稿與HTML頁面的的名稱對應位置圖?？梢钥聪伦筮叴a的幾個節(jié)點，用顏色做了區(qū)分，顏色對應了右邊的模塊，最外面的紅色（wrapper）是這個頁面的外套，對應PSD上就是整個頁面；接下來紫色（header），對應PSD上的頭部（LOGO+導航）；同理：綠色、黃色。可以發(fā)現(xiàn)基本是從上到下的順序，當然還有例外的情況，這里就不說了。看個直觀感受就可以了。

 

 

我自己不怎么喜歡鏈接圖層（右圖紅色區(qū)域），我更喜歡分組（左圖），按照每個功能快來建組，如果自己喜歡你就用吧~~

 

 

剛才看了HTML代碼和對應PSD的簡單案例，大家也許發(fā)現(xiàn)規(guī)律了，為了方便操作，建議按照模塊名稱來命名，圖層的順序與頁面上看到的元素順序一致：從上到下，從左到右。

 

 

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

 

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

 

 

網(wǎng)頁里常用的模塊名稱：

 

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

 

頭部（header）

 

主導航（mainNav）,如果整個頁面只有一個導航就用“導航（nav）”

 

 

頁腳，或者叫版權（footer）

 

 

面包屑（breadCrumb）,平常叫慣了面包屑，其實它的來歷是有一個故事的，具體故事就不講了，自己百度下吧。

 

 

搜索（search）

 

登錄（login）…  等等。

 

 

了解了圖層命名，也許你的PSD圖層已經(jīng)幾百個了，該對圖層管理管理了。

 

1）什么是模塊化

2）模塊化調(diào)用、復用

3）效率和輸出

 

 

模塊化的定義，每個模塊完成一個特定的子功能，所有的模塊按某種方法組裝起來，成為一個整體，完成整個系統(tǒng)所要求的功能。在系統(tǒng)的結(jié)構中，模塊是可組合、分解和更換的但愿。

貌似文字有點復雜，模塊化是程序設計里面的詞語，我們這里就可以簡化下：按照視覺功能塊組建一個PSD圖層分組，類似前面說的頭部（header）、登錄（login）、搜索（search）等。

 

 

模塊化組建后，可以在各個頁面作為公共組件來使用，就不必要把相同的圖層再設計組合一遍了，直接把這個分組拖進來就是了。

模塊化在門戶官網(wǎng)的項目設計中尤為重要，特別顯效率，后面還有講到。

 

雖然我們對圖層命名了，自然會耽誤一些設計時間，可能有人覺得效率變低了嘛？！ 我自己覺得一方面這是一個設計師的職業(yè)習慣問題，另一方面這并不耽誤你提升效率，當遇到大型門戶網(wǎng)站設計時，你會發(fā)現(xiàn)這是多么的好用。

 

 

個人經(jīng)驗，當你開始關注你的PSD圖層結(jié)構的時候，其實對圖層面板上每個圖層到底是什么內(nèi)容并不關心，所以我比較喜歡這么做：

在圖層選項那里把圖層預覽改為“無”，這樣圖層面板就清爽了，有的都是結(jié)構，一目了然。

 

回歸正題：舉幾個梨子。大家對比看左右兩邊的內(nèi)容及圖層變化：基本規(guī)則是模塊化命名、從上到下、從左到右。

 

 

 

 

 

 

 

之前做的案例都是如此。

 

 

 

 

前面說了智能對象在大型網(wǎng)站設計上會極大的提升效率，如果不信可以繼續(xù)看：

 

 

簡單的說就是智能對象反復放大縮小時候不會失真出現(xiàn)鋸齒和模糊變形，當然前提是放大的尺寸不要超過轉(zhuǎn)換成智能對象之前的尺寸大小。

 

 

大型官網(wǎng)設計中很多模塊是需要反復使用的，通常的做飯是有幾個就改幾個，不停的復制，拖放，不停的復制樣式、粘貼樣式。累不累啊你。。。

可以這樣支招：在同一個頁面如果有很多元素是一樣的，可以把這個元素轉(zhuǎn)換成智能對象，以后如果有改動在圖層上雙擊這個智能對象進去編輯下保存就可以了，該頁面的該類型的元素就都改過來了。如果相同的元素不是在一個頁面，可以使用“替換內(nèi)容”指令，見下圖：

 

 

公共模塊使用智能對象，批量修改，批量替換，高效快捷。在智能對象所在圖層右鍵，在彈出菜單中選擇“替換內(nèi)容”，將預先保存在你項目目錄中的PSB文件替換到PSD中來；這里需要注意，你所存放的psb文件需要放在你的項目目錄下，因為默認情況下雙擊智能對象時，打開的只是暫存盤里的psb文件，并不是你所在項目下的psb文件。

 

 

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

 

 

比喻這個例子：需要把WSD的LOGO按照手提袋的透視關系調(diào)整尺寸角度，通常情況我們就是直接那一張圖貼上去然后調(diào)啊調(diào)的，好不容易調(diào)整好了。結(jié)果換袋子了，是另一個方向的透視，苦逼的我們又得按照新袋子的透視來調(diào)整LOGO，累不累啊你。。。

 

 

其實上面那個LOGO已經(jīng)是智能對象了，如上圖，我們再雙擊下圖層進去看看：

 

 

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

 

 

還有一個地方用智能對象也很提升效率，做客戶端的時候經(jīng)常會需要輸出N多的icon尺寸，這是一個快捷的辦法，原理跟剛才一樣。當然這樣的縮放icon在精細度上沒有純手工的來得好。只供一個思路哈。

 

 

小結(jié)一下：智能對象在多頁面的、多重復公共模塊、VI物料包裝展示的時候會顯著提升效率。

 

 

 

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

 

 

市面上大大小小的瀏覽器幾十種，常見的大致也有十來種，由于每個瀏覽器自身渲染頁面的差異，并不是同一個頁面在所有瀏覽器上看到的都一樣，我大致用90%的還原度來衡量吧，也可能有些設計師要求重構100%還原，那我表示那位重構相當苦逼，保證頁面跟設計稿90%一致，有不少工作需要設計師和重構共同參與的，比喻設計師在時間允許的情況下做好標注，哪個地方多少像素，用什么顏色值，高度是多少等標注在頁面上。

 

 

重構者不關關注代碼本身，也可以跳出代碼看看視覺表現(xiàn)層，如果確實對幾像素看不出來，可以截圖放在psd上做對比，這個方法很容易自己發(fā)現(xiàn)問題，成本也比較低。

 

 

在表格做網(wǎng)頁時期，圖片和圖標幾乎都是單個的，加載一張圖片就是一次http請求，服務器就要讀取一次，頻繁的讀取再加上大量的用戶不斷的訪問，很可能讓服務器承受不起而掛機。因此需要盡可能的減少http請求，合并背景圖是一個很有效的辦法。

通常背景圖的輸出質(zhì)量百分比可以調(diào)在60-80%，對比較重要的icon、圖片可以調(diào)為100%輸出高質(zhì)量圖片。

在網(wǎng)頁加載過程中，或因為網(wǎng)速原因圖片暫時沒有加載出來而出現(xiàn)短時間空白，建議給該區(qū)域預先定義好背景色，以提示用戶該區(qū)域是有內(nèi)容的。

鼠標停在圖片上時，適當?shù)奶砑?/span>title或者alt，以方便用戶在圖片加載失敗時可以知道這張圖片是干什么用的。

按需加載，異步加載，類似蘋果官網(wǎng)上很多地方用到了異步加載，好處是提高主要頁面的加載速度，用戶需要的時候才加載其他附件頁面。

少用CSS濾鏡，現(xiàn)在應該很少人用了，基本都是采用優(yōu)雅降級或提示用戶升級瀏覽器。

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

 

 

 

我喜歡用這個詞，雖然自己并沒有達到代碼優(yōu)雅，做到代碼優(yōu)雅還需要不斷的努力，一些細節(jié)足夠讓專家看到你是否具備職業(yè)化素養(yǎng)，這里就不班門弄斧了，還是看圖吧~~~~~~。