前端讀者 | 爲何頁面跟設計稿差距這麼大？是啊！爲毛啊？

本文來自優設 @3年2班程遠；連接：https://www.uisdc.com/design-just-stay-design

在互聯網產品的研發流程中，頁面的視覺還原是很重要的一個步驟，也每每是問題最多的一個環節。若是一些細節問題在這個環節沒有被有效地發現並解決，那麼後續流程中再去解決這些問題的成本就會呈指數上升。

那麼今天咱們就來梳理一下，看看前端工程師自己以及上下游的角色之間，都會容易遇到哪些常見的問題。

設計師

設計師是最貼近產品體驗的人，可是術業有專攻，設計師每每更加註重視覺的表現，而容易犯一些美麗的錯誤：

一、以原生 APP 的體驗類比 H5 頁面設計

咱們都知道，原生 APP 的體驗很是流暢，界面也很是華麗，因此設計側也儘可能向原生 APP 的體驗靠攏。可是現實每每很殘酷，許多 APP 的體驗換到 H5 上實現就慘不忍睹，好比一個包含複雜操做的浮層，在各類低端機上能夠說是漏洞百出。因此這裏，建議設計師能夠多比照其餘 H5 網站的表現來進行設計，而不要常常比照 APP 的體驗。

二、設計稿都是最完美的狀態

是的，設計稿上面每每體現的都是最完美的狀態。而前端開發人員每每要考慮各類溢出狀態，多個超出、折行、撐開等等。這些狀況多數在設計稿上不會體現，每每要到開發過程當中再去確認細節，比較浪費時間。

三、活字用了非系統字體

所謂活字，就是直接以文本形式展現在頁面上，而不是用圖片模擬的文字。對於這部分字體，咱們通常會採用系統字體中的一種，不會由於幾個特殊字體而去加載一套中文字體文件。若是是英文字體，還能夠考慮在高級瀏覽器下的自定義字體，不過也要考慮優雅降級，以及字體的版權問題。因此老大問：爲毛跟設計稿不同？咱們只能說，沒這字體啊… 這裏建議，即便是設計稿，活字也要用系統字體，不然就是坑啊，看着好看又實現不了。

四、版本不清晰

設計出的稿子，每每是一段時間的規劃功能，再去跟產品確認。而產品通常會說，這個先不要，那個先不作。但當真正去掉以後，全部這些間距調整，顏色背景影響等等，仍是要再跟設計師確認。因此若是可能的話，應該每次需求只突出變動部分，而不是一個大而全的稿子。

五、這個應該這麼切

關於這個問題，已經無力吐槽了，這頁面真的不是切出來的。你說這麼切那麼切，你切個給我看看？分明是擼出來的嘛～

前端開發

前端開發，也有稱頁面仔，切圖仔，在還原設計的過程當中，容易遇到的問題就更多了：

一、不考慮溢出

關於溢出這裏有個基本的法則，就是隻要是動態輸出內容，或者有用戶輸入的，就必定要考慮溢出狀態的展現。文字溢出，列表溢出等等。當拿到設計稿時，確認好佈局以後，就是各類溢出狀態的確認了。

二、不分析設計稿就動手寫代碼

做爲新手拿到設計稿以後，每每都想很快寫代碼，由於寫代碼纔有快感。卻不知，頁面結構的分析就跟程序架構同樣重要，分析透徹才能兼顧各類狀況以及部分的需求變動，所謂磨刀不誤砍柴工，結構分析必定要先作的。

三、不考慮增刪元素的狀態

稍微大一點的公司，每每是多個需求並行，因此設計稿可能有超前的部分，或者中間因爲各類緣由實現不了的功能。做爲一個合格的前端工程師，在實現頁面的時候，就要作到一些可能變更的部分就算刪掉也不會對頁面形成大面積影響。

四、不考慮可維護性

能自適應的地方儘可能用自適應，以便應付需求變動。好比多個樓層，寬度調整，加個icon等等。舉個簡單例子，好比一個框框中間有個居中的按鈕，不少新手是直接用 margin-left 來定位的，這樣若是外層框框寬度調整，這個 margin-left 值就得跟着調整。雖然說調個寬度也不麻煩，可是當開發大型複雜頁面的時候，這些聯動的小改動也足夠搞死人了。

五、不仔細看設計稿

最多見的錯誤就是，設計稿上有邊框，可是顏色太淡沒看到。或者設計稿沒邊框，因爲迭代樣式，加了深色背景，忽略了邊框沒有去掉。還有一種狀況就是設計稿上的色塊是蓋住邊線的，可是實現的時候沒有蓋住，就致使那一部分看起來像凹進去同樣。

六、看出 1px 沒那麼難

不少新人都以爲要對齊 1px 的差距好難，聽上也有點吹毛求疵了。可是你想一想，假如你是設計師，辛辛苦苦作出來個設計稿，哪哪都對不齊，你不會以爲不爽？其實只要你認真仔細看，再加上一些練習，差幾像素幾乎一眼就能夠看出來。實在不行感受不肯定，能夠截圖到 PS 裏面放大，再用參考線對比。

七、不考慮可擴展性

不少時候我檢查頁面還原，無非是多加幾個項目，多填些文字先試試看，可是不少人這一關都過不了。加了項目，要麼就是沒有設置多行時候的下邊距，要麼就是再多一行邊框變了，或者結尾的項目又要單獨設置樣式。加了文字，就直接頂出去毀告終構。

好了，吐槽這麼多你們必定已經夠了，相信你們在工做流程中都會遇到各類各樣的細節問題，還有一些反反覆覆一遍又一遍遇到的問題，好比突然一陣捉急的跑來：這個頁面怎麼亂了啊啊啊，麻煩快看看~~~答：ctrl+0，你放大了…… So，你有沒有什麼想吐槽的呢？