網頁頁面設計的細節 更優雅的設計網頁(1)

文章描述：頁面是互聯網產品的體現層面，不僅講求外觀，而且會應對更新迅速的互聯網產品需求。要成為一名優異的開發者，經驗積累是必不可少的，而一部分經驗歸納起來正是在工作過程中的細節。下文介紹的即是在頁面開發流程中的多方面的細節內容，希望對這些細節內容的探討，可以幫

我們常以“整潔”，“易讀”，“親切”，“易于維護”，“復用性強”等來形容一些優異的開發者所寫的代碼。現在，對代碼的好評還有一個更為時尚的詞“優雅”，是不是聽起來覺得很親切呢？

頁面是互聯網產品的體現層面，不僅講求外觀，而且會應對更新迅速的互聯網產品需求。要成為一名優異的開發者，經驗積累是必不可少的，而一部分經驗歸納起來正是在工作過程中的細節。下文介紹的即是在頁面開發流程中的多方面的細節內容，希望對這些細節內容的探討，可以幫助各位頁面開發者做得更出色，以更優雅的姿態來書寫頁面。

從Photoshop開始

從UI設計稿到靜態頁面一般都稱作“切圖”。這個詞很容易令人聯想到Photoshop中的“切片工具”，但現在切片工具用得并不多，大部分在頁面中需要用到的視覺元素，都需要拼合到一個或多個單獨的圖片中。

視覺元素的星散和拼合

快速更新的互聯網產品需求使得UI設計師需要優先保證UI設計稿的視覺效果，也因此有時候沒有時間整頓UI設計稿源文件。所以，拿到手邊的UI設計稿，可能存在圖層缺少命名，分組紊亂等問題。

如何快速找到需要星散的視覺元素所在的圖層？這時候應該使用的是Photoshop的“主動選擇”。另外要注重的是，某些邊緣陰影及高光是由圖層樣式生成的，在選取這些部分時應選取旁邊的現實繪圖內容。

Photoshop的“移動工具“，在使用時勾選一個“主動選擇”的復選框即可。此外可以設置是主動選擇圖層照舊圖層所在的分組。

拼合是在一個新建立的psd源文件上進行，命名應當與好后輸出的圖片命名相同。拼應時應當使用網格做整潔的排列（快捷鍵Ctrl + ‘ 切換網格顯示）。整潔的拼圖不僅方便多人編輯，而且css代碼中的背景坐標定位會更加快捷（誰都喜好有規律的數字）。

在Photoshop的編輯→項中可以設置合適的網格尺寸。

為方便后續編輯，拼圖源文件應適當保留原UI設計稿圖層（如保留文本圖層，不做圖層合并，方便以后的文本更改），同時做好圖層命名和分組。此外，推薦在底部增添2個圖層：底色層和網格尺寸描述層。

底色層：Photoshop默認的透露表現透明區域的網格背景（和前面的尺寸標識的“網格”不同）中，子網格的邊線不容易看清。而加上一個鋪滿全畫布的底色，網格線就很容易辨識了。底色一般用純白色即可，對于部分顏色偏白的UI元素，可以填充黑色作為底色。底色層只是方便排列元素，在輸出圖片時，底色層設置為不可見再輸出。

網格尺寸描述層：空白圖層，采用“20×20”這種格式的命名，說明使用的網格尺寸大小。這樣，多人編輯時，可以方便別人很快的設置出適合編輯此拼圖源文件的的網格尺寸。

拼圖源文件一定要保存到開發目錄中，可以在images目錄中，單獨建立命名為_psd的目錄，然后相關的拼圖源文件都保存在這個目錄中。

對應的，在靜態頁中用作圖片占位和示意的一時圖片（如用戶頭像），可以保存在命名為_temp的目錄中。

gif與png-8圖片的雜邊

為什么gif和png-8格式的圖片存在雜邊？這是因為，gif和png-8格式的圖片使用的是索引顏色編碼，而索引顏色中，只存在全透明索引顏色（用來繪制全透明的像素點，也即空白點），而不存在半透明索引顏色。但是，一般的視覺元素的邊緣都存在半透明的像素點以形成視覺上的平滑過渡，這些半透明點要保留到gif和png-8，就必須指定用一種實色替代。這也就是Photoshop中的雜邊選項的意義。

Photoshop的這個顏色表中可以看到，只有這一個全透明索引色。

Photoshop中也可以選擇雜邊為“無”，這時半透明點會被丟棄，不再保留到輸出的圖像中。因為邊緣缺少用作過渡的像素點，這樣的圖像可能會有顯明的鋸齒，多數情況下效果不佳。

點擊“雜邊”旁邊的小箭頭，下拉菜單中即可以選擇“無”。

假如選擇一個顏色作為雜邊色，Photoshop在生成索引顏色表時會把圖像中的半透明像素點也考慮進去，并用合適的索引顏色（參考選定的雜邊色）替代這些半透明像素點。存在雜邊色的gif和png-8圖中的視覺元素，處于和雜邊色相同的背景色中的時候，效果好佳，所以雜邊色的選取應參考好終元素所在的背景。

假如有多種類別的背景而無法保證效果，應使用png-24。這里的png-24現實上基本都是png-32，即應包含透明度alpha通道。這樣表述也是因為在Photoshop中，只用了一個復選框的設置來區分png-24和png-32。

勾選“透明度”后，現實上保存的是png-32。

針對不支撐png-32的IE6，單獨輸出一個效果較差的png-8或gif，在一定程度上保證IE6的正常外觀。這也是針對不同瀏覽器的“漸進增強”開發思想的體現。

為IE6單獨保存的png-8圖。