在互聯(lián)網(wǎng)產(chǎn)品的研發(fā)流程中，頁(yè)面的視覺(jué)還原是很重要的一個(gè)步驟，也往往是問(wèn)題多的一個(gè)環(huán)節。如果一些細節問(wèn)題在這個(gè)環(huán)節沒(méi)有被有效地發(fā)現并解決，那么后續流程中再去解決這些問(wèn)題的成本就會(huì )呈指數上升。

那么今天我們就來(lái)梳理一下，看看前端工程師本身以及上下游的角色之間，都會(huì )容易遇到哪些常見(jiàn)的問(wèn)題。

設計師

設計師是貼近產(chǎn)品體驗的人，但是術(shù)業(yè)有專(zhuān)攻，設計師往往更加注重視覺(jué)的表現，而容易犯一些美麗的錯誤：

1，以原生 APP 的體驗類(lèi)比 H5 頁(yè)面設計

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

2，設計稿都是的狀態(tài)

是的，設計稿上面往往體現的都是的狀態(tài)。而前端開(kāi)發(fā)人員往往要考慮各種溢出狀態(tài)，多個(gè)超出、折行、撐開(kāi)等等。這些情況多數在設計稿上不會(huì )體現，往往要到開(kāi)發(fā)過(guò)程中再去確認細節，比較浪費時(shí)間。

3，活字用了非系統字體

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

4，版本不清晰

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

5，這個(gè)應該這么切

關(guān)于這個(gè)問(wèn)題，已經(jīng)無(wú)力吐槽了，這頁(yè)面真的不是切出來(lái)的。你說(shuō)這么切那么切，你切個(gè)給我看看？分明是擼出來(lái)的嘛～

前端開(kāi)發(fā)

前端開(kāi)發(fā)，也有稱(chēng)頁(yè)面仔，切圖仔，在還原設計的過(guò)程中，容易遇到的問(wèn)題就更多了：

1，不考慮溢出

關(guān)于溢出這里有個(gè)基本的法則，就是只要是動(dòng)態(tài)輸出內容，或者有用戶(hù)輸入的，就一定要考慮溢出狀態(tài)的展示。文字溢出，列表溢出等等。當拿到設計稿時(shí)，確認好布局之后，就是各種溢出狀態(tài)的確認了。

2，不分析設計稿就動(dòng)手寫(xiě)代碼

作為新手拿到設計稿之后，往往都想很快寫(xiě)代碼，因為寫(xiě)代碼才有快感。殊不知，頁(yè)面結構的分析就跟程序架構一樣重要，分析透徹才能兼顧各種情況以及部分的需求變更，所謂磨刀不誤砍柴工，結構分析一定要先做的。

3，不考慮增刪元素的狀態(tài)

稍微大一點(diǎn)的公司，往往是多個(gè)需求并行，所以設計稿可能有超前的部分，或者中間由于各種原因實(shí)現不了的功能。作為一個(gè)合格的前端工程師，在實(shí)現頁(yè)面的時(shí)候，就要做到一些可能變動(dòng)的部分就算刪掉也不會(huì )對頁(yè)面造成大面積影響。

4，不考慮可維護性

能自適應的地方盡量用自適應，以便應付需求變更。比如多個(gè)樓層，寬度調整，加個(gè)icon等等。舉個(gè)簡(jiǎn)單例子，比如一個(gè)框框中間有個(gè)居中的按鈕，很多新手是直接用 margin-left 來(lái)定位的，這樣如果外層框框寬度調整，這個(gè) margin-left 值就得跟著(zhù)調整。雖說(shuō)調個(gè)寬度也不麻煩，但是當開(kāi)發(fā)大型復雜頁(yè)面的時(shí)候，這些聯(lián)動(dòng)的小改動(dòng)也足夠搞死人了。

5，不仔細看設計稿

常見(jiàn)的錯誤就是，設計稿上有邊框，但是顏色太淡沒(méi)看到。或者設計稿沒(méi)邊框，由于迭代樣式，加了深色背景，忽略了邊框沒(méi)有去掉。還有一種情況就是設計稿上的色塊是蓋住邊線(xiàn)的，但是實(shí)現的時(shí)候沒(méi)有蓋住，就導致那一部分看起來(lái)像凹進(jìn)去一樣。

6，看出 1px 沒(méi)那么難

很多新人都覺(jué)得要對齊 1px 的差距好難，聽(tīng)上也有點(diǎn)吹毛求疵了。但是你想想，假如你是設計師，辛辛苦苦做出來(lái)個(gè)設計稿，哪哪都對不齊，你不會(huì )覺(jué)得不爽？其實(shí)只要你認真仔細看，再加上一些練習，差幾像素幾乎一眼就可以看出來(lái)。實(shí)在不行感覺(jué)不確定，可以截圖到 PS 里面放大，再用參考線(xiàn)對比。

7，不考慮可擴展性

很多時(shí)候我檢查頁(yè)面還原，無(wú)非是多加幾個(gè)項目，多填些文字先試試看，但是很多人這一關(guān)都過(guò)不了。加了項目，要么就是沒(méi)有設置多行時(shí)候的下邊距，要么就是再多一行邊框變了，或者結尾的項目又要單獨設置樣式。加了文字，就直接頂出去毀了結構。

好了，吐槽這么多大家一定已經(jīng)夠了，相信大家在工作流程中都會(huì )遇到各種各樣的細節問(wèn)題，還有一些反反復復一遍又一遍遇到的問(wèn)題，比如忽然一陣捉急的跑來(lái)：這個(gè)頁(yè)面怎么亂了啊啊啊，麻煩快看看~~~答：ctrl+0，你放大了...... So，你有沒(méi)有什么想吐槽的呢？

http://ezekroy.com/jianzhanzhishi/7524.html 設計一直過(guò)不了稿怎么辦