為什么頁面跟設計稿差距這么大？是??！為毛?。?/h1>

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

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

設計師

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

1，以原生 APP 的體驗類比 H5 頁面設計

我們都知道，原生 APP 的體驗非常流暢，界面也非常華麗，所以設計側也盡量向原生 APP 的體驗靠攏。但是現實往往很殘酷，許多 APP 的體驗換到 H5 上實現就慘不忍睹，比如一個包含復雜操作的浮層，在各種低端機上可以說是漏洞百出。所以這里，建議設計師可以多比照其他 H5 網站的表現來進行設計，而不要經常比照 APP 的體驗。

2，設計稿都是最完美的狀態

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

3，活字用了非系統字體

所謂活字，就是直接以文本形式展示在頁面上，而不是用圖片模擬的文字。對于這部分字體，我們一般會采用系統字體中的一種，不會因為幾個特殊字體而去加載一套中文字體文件。如果是英文字體，還可以考慮在高級瀏覽器下的自定義字體，不過也要考慮優雅降級，以及字體的版權問題。所以老大問：為毛跟設計稿不一樣？我們只能說，沒這字體啊… 這里建議，即使是設計稿，活字也要用系統字體，否則就是坑啊，看著好看又實現不了。

4，版本不清晰

設計出的稿子，往往是一段時間的規劃功能，再去跟產品確認。而產品一般會說，這個先不要，那個先不做。但當真正去掉之后，所有這些間距調整，顏色背景影響等等，還是要再跟設計師確認。所以如果可能的話，應該每次需求只突出變更部分，而不是一個大而全的稿子。

5，這個應該這么切

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

(編輯：小酷)

 

上一篇：PS教程！教你繪制一枚經典的寫實日歷圖標
下一篇：PS海報教程！手把手教你臨摹一張絢麗的藝術海報