「小白DAY7」細談設計稿還原

按道理來說，做重構切頁面那本來就是要還原設計稿啊，沒話說。但是如果設計師真的細究到0px還原，那還真不是個小事。

作者：結一-IMWeb成員

@IMWeb前端社區，若未授權禁止轉載

首先一個網站落到PS中，都是圖片或文字（附加對圖片或文字進行相關處理），而對應到重構來說就是一個個元素，所以要做到還原設計稿，主要要解決下面這三個問題：

• 元素大小
• 元素與元素之間的間距
• 元素在頁面的位置

下面對上面問題一一詳細展開

元素大小

先來說下元素大小的問題，對於圖片類的來說我們就要獲取圖片在PS中的正確大小，這一般來說百分之八十都沒什麼問題，除了一些設計師進行過特殊處理加工各層疊加等效果的需要費點時間搞定；而對於文字來說，那就是文字大小了，但是還有個不能忽略的字體問題，同一個大小不同字體可能相差十萬八千里。

總結起來就是兩點：保證圖片跟設計稿一樣大小；保證字體大小及類型一致。

對於第一點為了準確性及效率，我們可以採用 Cutterman這個PS插件；而第二點我們就得使用規範去約定，約定網站常規字體類型及大小

元素之間的間距

既然網站從視覺上表現出來的就是圖片與文字，那麼間距總體來說就是分為三種情況了：圖片與圖片的距離，圖片與文字的距離，文字與文字的距離。

為了得到元素之間的間距，首先我們得有個工具來測量，當然PS默認提供了標尺這個工具來供我們測量，但是實際使用起來還是有點麻煩的，效率不怎麼高，而QQ提供的截圖效率是快了，不過精準度方面就有點欠缺了，如果真要仔細考究起來那就得使用其他更精準效率也高效的工具了，這裡推薦下Markman。

看起來挺完美的，我們用Markman一標，間距就搞定了。事實是視覺上的圖片與圖片的間距確實就是這麼簡單，但是換到有文字的時候這招就不怎麼靈驗了，因為文字還有個行高。而行高也是個很複雜的事，光這個行高問題就可以寫一篇文章了，這裡就不再細敘，具體可參看：

• 深入理解CSS中的行高——簡版
• 深入理解CSS中的行高——ppt詳細版（要翻牆）

所以如果要解決這個間距的問題，還得讓設計師設計的時候就考慮到行高這一因素，然後你還要熟記常規行高的半行間距（半行間距不同瀏覽器還可能表現不一樣），標記的尺寸再減去這個半行間距就是實際的間距。

總之這個問題（圖片與文字的間距，文字與文字的間距）細究起來是非常令人抓狂的。

元素在頁面的位置

這個相對於前面的來說應該是最簡單的問題了，熟練運用各種布局技術一般就能解決百分之九十九的問題了，當然也還有些特別不合理的，那就需要改交互了。總之這個問題是可以通過技術來解決的問題，所以不是問題。

為了準備的跟蹤是否還原，我們還有比對工具來查看效果（原理都是把PS圖片遮蓋在上面，設置一個半透明效果），

• perfect pixel
• Alloy Designer

仔細研究下就會發現這些都與layout相關，而與paint相關的還原起來還是比較簡單的（各種取色器網上大把的有，PS裡面的當然是最準的了）。

寫在最後

那麼是不是就完了呢？我們是不是要追溯下設計稿本身呢？如果設計師設給的稿子本來就是經不起推敲的呢？

假設我們設計師給的稿子都是認真完成的，我們還可能面臨以下問題：

• 設計師水平本身不在同一條水平線上，不同的設計師審美效果不太一樣。
• 設計師的像素真的是完美的嗎，出現小數點像素怎麼辦？
• 設計師的有些設計到底是故意為之還是出了點小差？
• 移動端各種手機尺寸，只給一個標準的，其他自由發揮怎麼搞？

所以最後如果要細究到0像素還原，最艱難的問題只有兩個：文字的問題；完美的設計稿。

若你閱讀該文中有什麼疑問，歡迎在下方評論區留言，我們會選擇部分問題解答

推薦閱讀：