爲何前端實現的頁面跟設計師的設計稿的差異那麼大？

設計師

設計師是最貼近產品體驗的人，可是術業有專攻，設計師每每更加註重視覺的感覺，而容易犯一些美麗的錯誤：

 

一、以原生 APP 的體驗類比 H5 頁面設計

咱們都知道，原生 APP 的體驗很是流暢，界面也很是華麗，因此設計師也儘可能向原生 APP 的體驗靠攏。可是理想很豐滿，現實很骨感，許多 APP 的體驗換到 H5 上實現就慘不忍睹。因此我建議設計師能夠多比照其餘 H5 網站的表現來進行設計，而不要常常比照 APP 的體驗。

 

二、設計稿展示的都是最理想的狀態

設計師給咱們的設計稿上面展示的都是最理想的狀態，而實際狀況是至關複雜的。設計稿上面反映不出各類溢出，字體折行，分辨率大小的區別。而這些狀況每每都是在前端開發工程師的開發過程當中纔會暴露出來，這時候再去確認這方面的細節，就比較浪費時間了。因此設計師必定要在設計的時候就須要全方位的考慮到這些客觀存在的現實因素。用個人話來講就是：設計圖是死的，現實是多變的。

 

三、活字用了非系統字體

所謂活字，就是直接以文本形式展現在頁面上，可能隨時會由於實際狀況改變，又或者是從接口裏請求回來的內容實時渲染的，而不是圖片上那種確定不會改變的文字。對於這部分字體，咱們通常會採用系統字體中的一種，不會由於幾個特殊字體而去加載一套中文字體文件。若是是英文字體，還能夠考慮在高級瀏覽器下的自定義字體，不過也要考慮優雅降級，以及字體的版權問題。因此常常會遇到前端作完了，設計師或者項目經理跑過來一看，就很生氣的跟前端工程師說：爲毛跟設計稿不同？這時候我只能呵呵，你他媽用的字體系統根本沒有，難道由於你這幾個字我還要去加載一套字體文件麼？得不償失啊。因此啊，設計師不只要有美感，還得有正常人的思惟，不能以爲全部人都是搞藝術的啊。不然就是坑啊，看着好看卻不能實現，這裏的不能不是能力上不能，而是從網站的性能上來說不能夠那麼去作啊。

 

前端開發工程師

下面就是前端工程師們容易忽略的問題了，不論是前端開發仍是頁面仔或者切圖仔，都須要考慮到下面的這些問題。下面咱們來看看都有哪些問題吧。

 

一、不考慮溢出

關於溢出這裏有個基本的法則，就是隻要是動態輸出內容，或者有用戶輸入的，就必定要考慮溢出狀態的展現。文字溢出，列表溢出等等。當拿到設計稿時，確認好佈局以後，就是各類溢出狀態的確認了。

 

二、不分析設計稿就動手寫代碼

不少前端工程師有一個很很差的毛病，拿到設計圖就開始作，總感受只有代碼寫完了本身的事情纔是真正的完成了。他們忽略了一個很重要的環節，那就是先看，先確認，先溝通。寫代碼必定要注意細節和結構性，拿到設計圖首先分析應該怎麼作，應該有哪些模塊，哪些模塊能夠通用，必定要通過設計以後再動手去寫。所謂磨刀不誤砍柴工，結構分析必定要先作的。

 

三、不考慮增刪元素的狀態

稍微大一點的公司，每每是多個需求並行，因此設計稿可能有超前的部分，或者中間因爲各類緣由實現不了的功能。做爲一個合格的前端工程師，在實現頁面的時候，就要作到一些可能變更的部分就算刪掉也不會對頁面形成大面積影響。

 

四、不考慮可維護性

能自適應的地方儘可能用自適應，以便應付需求變動。好比多個樓層，寬度調整，加個icon等等。舉個簡單例子，好比一個框框中間有個居中的按鈕，不少新手是直接用 margin-left 來定位的，這樣若是外層框框寬度調整，這個 margin-left 值就得跟着調整。雖然說調個寬度也不麻煩，可是當開發大型複雜頁面的時候，這些聯動的小改動也足夠搞死人了。

 

五、不仔細看設計稿

最多見的錯誤就是，設計稿上有邊框，可是顏色太淡沒看到。或者設計稿沒邊框，因爲迭代樣式，加了深色背景，忽略了邊框沒有去掉。還有一種狀況就是設計稿上的色塊是蓋住邊線的，可是實現的時候沒有蓋住，就致使那一部分看起來像凹進去同樣。

 

六、1px也很重要

不少新人都以爲要對齊 1px 的差距好難，聽上也有點吹毛求疵了。可是你想一想，假如你是設計師，辛辛苦苦作出來個設計稿，哪哪都對不齊，你不會以爲不爽？其實只要你認真仔細看，再加上一些練**，差幾像素幾乎一眼就能夠看出來。實在不行感受不肯定，能夠截圖到 PS 裏面放大，再用參考線對比。

 

七、不考慮可擴展性

不少時候我檢查頁面還原，無非是多加幾個項目，多填些文字先試試看，可是不少人這一關都過不了。加了項目，要麼就是沒有設置多行時候的下邊距，要麼就是再多一行邊框變了，或者結尾的項目又要單獨設置樣式。加了文字，就直接頂出去毀告終構。