設計師
設計師是最貼近產品體驗的人，但是術業有專攻，設計師往往更加注重視覺的感受，而容易犯一些美麗的錯誤：
1、以原生 APP 的體驗類比 H5 頁面設計
我們都知道，原生 APP 的體驗非常流暢，界面也非常華麗，所以設計師也盡量向原生 APP 的體驗靠攏。但是理想很豐滿，現實很骨感，許多 APP 的體驗換到 H5 上實現就慘不忍睹。所以我建議設計師可以多比照其他 H5 網站的表現來進行設計，而不要經常比照 APP 的體驗。
2、設計稿展現的都是最理想的狀態
設計師給我們的設計稿上面展現的都是最理想的狀態，而實際情況是相當復雜的。設計稿上面反映不出各種溢出，字體折行，分辨率大小的區別。而這些情況往往都是在前端開發工程師的開發過程中才會暴露出來，這時候再去確認這方面的細節，就比較浪費時間了。所以設計師一定要在設計的時候就需要全方位的考慮到這些客觀存在的現實因素。用我的話來說就是：設計圖是死的，現實是多變的。
3、活字用了非系統字體
所謂活字，就是直接以文本形式展示在頁面上，可能隨時會因為實際情況改變，又或者是從接口里請求回來的內容實時渲染的，而不是圖片上那種肯定不會改變的文字。對於這部分字體，我們一般會采用系統字體中的一種，不會因為幾個特殊字體而去加載一套中文字體文件。如果是英文字體，還可以考慮在高級瀏覽器下的自定義字體，不過也要考慮優雅降級，以及字體的版權問題。所以經常會遇到前端做完了，設計師或者項目經理跑過來一看，就很生氣的跟前端工程師說：為毛跟設計稿不一樣？這時候我只能呵呵，你他媽用的字體系統根本沒有，難道因為你這幾個字我還要去加載一套字體文件么？得不償失啊。所以啊，設計師不僅要有美感，還得有正常人的思維，不能覺得所有人都是搞藝術的啊。否則就是坑啊，看着好看卻不能實現，這里的不能不是能力上不能，而是從網站的性能上來講不可以那么去做啊。
前端開發工程師
下面就是前端工程師們容易忽略的問題了，不管是前端開發還是頁面仔或者切圖仔，都需要考慮到下面的這些問題。下面我們來看看都有哪些問題吧。
1、不考慮溢出
關於溢出這里有個基本的法則，就是只要是動態輸出內容，或者有用戶輸入的，就一定要考慮溢出狀態的展示。文字溢出，列表溢出等等。當拿到設計稿時，確認好布局之后，就是各種溢出狀態的確認了。
2、不分析設計稿就動手寫代碼
很多前端工程師有一個很不好的毛病，拿到設計圖就開始做，總感覺只有代碼寫完了自己的事情才是真正的完成了。他們忽略了一個很重要的環節，那就是先看，先確認，先溝通。寫代碼一定要注意細節和結構性，拿到設計圖首先分析應該怎么做，應該有哪些模塊，哪些模塊可以通用，一定要經過設計之后再動手去寫。所謂磨刀不誤砍柴工，結構分析一定要先做的。
3、不考慮增刪元素的狀態
稍微大一點的公司，往往是多個需求並行，所以設計稿可能有超前的部分，或者中間由於各種原因實現不了的功能。作為一個合格的前端工程師，在實現頁面的時候，就要做到一些可能變動的部分就算刪掉也不會對頁面造成大面積影響。
4、不考慮可維護性
能自適應的地方盡量用自適應，以便應付需求變更。比如多個樓層，寬度調整，加個icon等等。舉個簡單例子，比如一個框框中間有個居中的按鈕，很多新手是直接用 margin-left 來定位的，這樣如果外層框框寬度調整，這個 margin-left 值就得跟着調整。雖說調個寬度也不麻煩，但是當開發大型復雜頁面的時候，這些聯動的小改動也足夠搞死人了。
5、不仔細看設計稿
最常見的錯誤就是，設計稿上有邊框，但是顏色太淡沒看到。或者設計稿沒邊框，由於迭代樣式，加了深色背景，忽略了邊框沒有去掉。還有一種情況就是設計稿上的色塊是蓋住邊線的，但是實現的時候沒有蓋住，就導致那一部分看起來像凹進去一樣。
6、1px也很重要
很多新人都覺得要對齊 1px 的差距好難，聽上也有點吹毛求疵了。但是你想想，假如你是設計師，辛辛苦苦做出來個設計稿，哪哪都對不齊，你不會覺得不爽？其實只要你認真仔細看，再加上一些練**，差幾像素幾乎一眼就可以看出來。實在不行感覺不確定，可以截圖到 PS 里面放大，再用參考線對比。
7、不考慮可擴展性
很多時候我檢查頁面還原，無非是多加幾個項目，多填些文字先試試看，但是很多人這一關都過不了。加了項目，要么就是沒有設置多行時候的下邊距，要么就是再多一行邊框變了，或者結尾的項目又要單獨設置樣式。加了文字，就直接頂出去毀了結構。