網頁設計與重構那些事兒

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

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

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

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

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

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

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

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

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

　　1)PSD圖層命名

　　2)模塊化管理你的圖層

　　3)智能對象的使用

　　4)重構也需關注設計

　　5)Q&A

　　話說講之前看下這張圖，一起感受下這樣的圖層面板，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圖層結構的時候，其實對圖層面板上每個圖層到底是什麼內容並不關心，所以我比較喜歡這麼做：

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

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