在互聯(lián)網(wǎng)產(chǎn)品的研發(fā)過(guò)程中，頁(yè)面的視覺恢復(fù)是一個(gè)非常重要的步驟，通常是一個(gè)有很多問題的環(huán)節(jié)。如果在這個(gè)鏈接中沒有有效地發(fā)現(xiàn)和解決一些細(xì)節(jié)，那么在后續(xù)過(guò)程中解決這些問題的成本將呈指數(shù)級(jí)增長(zhǎng)。

所以今天我們來(lái)梳理一下前端工程師本身和上下游角色之間容易遇到的常見問題。

設(shè)計(jì)師

設(shè)計(jì)師是接近產(chǎn)品體驗(yàn)的人，但專業(yè)從事藝術(shù)行業(yè)，設(shè)計(jì)師往往更注重視覺表現(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ù)雜操作的浮層，可以說(shuō)是各種低端機(jī)器的漏洞。所以這里，建議設(shè)計(jì)師可以多比照其他H設(shè)計(jì)網(wǎng)站的性能，而不是經(jīng)常比較APP的體驗(yàn)。

2.設(shè)計(jì)稿處于狀態(tài)

是的，設(shè)計(jì)草案通常反映了所有的狀態(tài)。而前端開發(fā)人員往往要考慮各種溢出狀態(tài)，多個(gè)超出、折疊、開放等。這些情況大多不會(huì)反映在設(shè)計(jì)草案中，通常需要在開發(fā)過(guò)程中確認(rèn)細(xì)節(jié)，這是浪費(fèi)時(shí)間。

3.活字使用非系統(tǒng)字體

所謂活字，就是直接以文字的形式顯示在頁(yè)面上，而不是用圖片模擬的文字。對(duì)于這部分字體，我們通常使用系統(tǒng)字體中的一個(gè)，不會(huì)因?yàn)閹讉€(gè)特殊字體而加載一套中文字體文件。如果是英文字體，也可以考慮高級(jí)瀏覽器下的自定義字體，但也要考慮優(yōu)雅降級(jí)和字體版權(quán)。所以老板問:毛和設(shè)計(jì)稿不一樣嗎？我們只能說(shuō)沒有這個(gè)字體。...這里建議，即使是設(shè)計(jì)稿，活字也要用系統(tǒng)字體，否則就是坑，看起來(lái)好看，實(shí)現(xiàn)不了。

4.版本不清楚

設(shè)計(jì)的手稿通常是一段時(shí)間的規(guī)劃功能，然后與產(chǎn)品確認(rèn)。產(chǎn)品通常會(huì)說(shuō)，這不是第一個(gè)，那不是第一個(gè)。但當(dāng)真正刪除時(shí)，所有這些間距調(diào)整、顏色背景影響等，或與設(shè)計(jì)師確認(rèn)。所以如果可能的話，每個(gè)需求都應(yīng)該只突出變化部分，而不是一個(gè)大而完整的手稿。

5.這個(gè)應(yīng)該這樣切

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

前端開發(fā)

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

不考慮溢出

這里有一個(gè)基本的溢出規(guī)則，即只要是動(dòng)態(tài)輸出內(nèi)容或用戶輸入，就必須考慮溢出狀態(tài)的顯示。文本溢出、列表溢出等。當(dāng)獲得設(shè)計(jì)草案并確認(rèn)布局時(shí)，確認(rèn)各種溢出狀態(tài)。

2.不分析設(shè)計(jì)稿析設(shè)計(jì)稿

作為一個(gè)新手，在獲得設(shè)計(jì)草案后，他經(jīng)常想快速編寫代碼，因?yàn)榫帉懘a有樂趣。眾所周知，頁(yè)面結(jié)構(gòu)的分析與程序架構(gòu)一樣重要。只有通過(guò)徹底的分析，我們才能考慮到各種情況和一些需求變化。所謂磨刀不誤砍柴工，必須先做結(jié)構(gòu)分析。

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

稍大一點(diǎn)的公司往往有多個(gè)平行的需求，所以設(shè)計(jì)草案可能有先進(jìn)的部分，或由于各種原因無(wú)法實(shí)現(xiàn)的功能。作為一名合格的前端工程師，在實(shí)現(xiàn)頁(yè)面時(shí)，即使刪除了可能的部分，也不會(huì)對(duì)頁(yè)面產(chǎn)生很大的影響。

不考慮可維護(hù)性

為了應(yīng)對(duì)需求變化，盡應(yīng)需求變化的地方。例如，調(diào)整多層的寬度，增加一層icon等等。舉個(gè)簡(jiǎn)單的例子，比如框架中間有一個(gè)中間按鈕，很多新手直接用margin-left這樣，如果調(diào)整外框的寬度，就可以定位margin-left值得調(diào)整。雖然調(diào)整寬度并不麻煩，但當(dāng)開發(fā)大型復(fù)雜頁(yè)面時(shí)，這些聯(lián)動(dòng)的小變化就足以殺死人。

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

常見的錯(cuò)誤是設(shè)計(jì)草案上有一個(gè)框架，但顏色太淺，看不見。或者設(shè)計(jì)草案沒有框架，由于迭代風(fēng)格，添加了深色背景，忽略了框架沒有被刪除。另一種情況是，設(shè)計(jì)草案上的色塊覆蓋了邊線，但沒有覆蓋，導(dǎo)致那部分看起來(lái)凹陷。

6，看出1px沒那么難

很多新人覺得對(duì)齊1px差距太難了，聽起來(lái)有點(diǎn)挑剔。但想想看，如果你是一個(gè)設(shè)計(jì)師，努力制作一個(gè)設(shè)計(jì)草案，到處都對(duì)，你不會(huì)感到不舒服嗎？事實(shí)上，只要你仔細(xì)看，再加上一些練習(xí)，幾乎一眼就能看到幾乎像素。真的感覺不確定，你可以截圖PS放大內(nèi)部，然后用參考線進(jìn)行比較。

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

大多數(shù)時(shí)候，我檢查頁(yè)面恢復(fù)，只是添加更多的項(xiàng)目，填寫更多的文本來(lái)嘗試，但很多人不能通過(guò)這個(gè)水平。添加一個(gè)項(xiàng)目，要么在多行時(shí)沒有設(shè)置下邊距，要么更多的邊界改變，要么在項(xiàng)目的結(jié)尾設(shè)置一個(gè)單獨(dú)的風(fēng)格。添加文本，直接出去破壞結(jié)構(gòu)。

好了，吐槽這么多大家肯定夠了。相信大家在工作過(guò)程中都會(huì)遇到各種細(xì)節(jié)，還有一些問題一遍又一遍的遇到，比如突然急著跑來(lái)跑去:這個(gè)頁(yè)面怎么亂？~~~答：ctrl0，你放大了...So，你有什么要吐槽的嗎？