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

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

設(shè)計(jì)師

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

1，以原生 APP 的體驗(yàn)類比 H5 頁(yè)面設(shè)計(jì)

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

2，設(shè)計(jì)稿都是的狀態(tài)

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

3，活字用了非系統(tǒng)字體

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

4，版本不清晰

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

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

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

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

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

1，不考慮溢出

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

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

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

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

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

4，不考慮可維護(hù)性

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

5，不仔細(xì)看設(shè)計(jì)稿

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

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

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

7，不考慮可擴(kuò)展性

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

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