細節改變書寫頁面

本文作者@EdwardUp 我們常以整齊，易讀，親切，易于維護，復用性強等來形容一些出色的/卓越的/優異的/杰出的的開發者所寫的代碼?，F在，對代碼的好評還有一個更為時尚的詞優雅，是不是聽起來覺得很親切呢?頁面是互聯網產品的表現層面，不僅講求外觀，而且會應對更新迅速的互聯網產品需求。要成為一名出色的/卓越的/優異的/杰出的的開發者，經驗積累是必不可少的，而一部分經驗歸納起來正是在工作過程中的細節。下文介紹的即是在頁面開發流程中的多方面的細節內容，希望對這些細節內容的探討，可以幫助各位頁面開發者做得更出色，以更優雅的姿態來書寫頁面。

從Photoshop開始

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

視覺元素的分離和拼合

快速更新的互聯網產品需求使得UI設計師需要優先保證UI設計稿的視覺效果，也因此有時候沒有時間整理UI設計稿源文件。所以，拿到手邊的UI設計稿，可能存在圖層缺少命名，分組混亂等問題。如何快速找到需要分離的視覺元素所在的圖層?這時候應該使用的是Photoshop的自動選擇。另外要注意的是，某些邊緣陰影及高光是由圖層樣式生成的，在選取這些部分時應選取旁邊的實際繪圖內容。Photoshop的移動工具，在使用時勾選一個自動選擇的復選框即可。此外可以設置是自動選擇圖層還是圖層所在的分組。拼合是在一個新建立的psd源文件上進行，命名應當與最后輸出的圖片命名相同。拼合時應當使用網格做整齊的排列(快捷鍵Ctrl + ‘ 切換網格顯示)。整齊的拼圖不僅方便多人編輯，而且css代碼中的背景坐標定位會更加快捷(誰都喜歡有規律的數字)。

為方便后續編輯，拼圖源文件應適當保留原UI設計稿圖層(如保留文本圖層，不做圖層合并，方便以后的文本更改)，同時做好圖層命名和分組。此外，推薦在底部增加2個圖層：底色層和網格尺寸描述層。底色層：Photoshop默認的表示透明區域的網格背景(和前面的尺寸標識的網格不同)中，子網格的邊線不容易看清。而加上一個鋪滿全畫布的底色，網格線就很容易辨識了。底色一般用純白色即可，對于部分顏色偏白的UI元素，可以填充黑色作為底色。底色層只是方便排列元素，在輸出圖片時，底色層設置為不可見再輸出。