前端頁面如何做到和設計稿一比一完美實現？

01-14

碼農一枚，前後端都做，都不專業，請問前端如何實現1:1實現，想了解以下幾方面
1、字體、顏色、間距、尺寸如果把握
2、瀏覽器兼容、如何兼顧低版本瀏覽器但是不丟失過多效果
3、js css img 的框架結構
4、js css命名如果規範統一

設計稿如果是一個能完全描述設計意圖的「函數」，那才有可能做完全的還原。而現在的情況是設計師給出這個函數上的幾個點，我們在反覆迭代溝通中做「擬合」，不存在完全還原的可能。

話說回來如果設計師能完全表達出設計意圖，那要麼他可以自己開發，要麼工程師可以開發出工具幫他自動生成代碼。

幾乎不可能，也沒有必要完全一致。

自薦一篇文章如何還原像素級別的設計稿

首先沒有必要。高度還原可以。

其實要想做到高度還原設計稿和設計師有很大的關係。

字體、顏色、間距、尺寸如果把握：

一般專業的設計師做圖的時候會非常注意這些，他們會有自己的一套設計風格，儘管是在單個頁面下，每個地方的字體、顏色、間距、尺寸都不是隨意設定的，這些在你開發的時候應該能感受的到，這時要想高度還原其實並不是難事。

如果你遇到一個不怎樣的設計師，那麼最好的辦法就是早點和她溝通，因為她們不懂技術，最終做的圖可能不怎麼規範，可能會導致切圖不好切（無論是你切還是她切），導出2倍圖發現有問題（可能會有毛邊或者全部給的都是錯圖），整體風格不統一（包括顏色、間距、尺寸），這些都會對你的開發帶來很大的困擾，

瀏覽器兼容、如何兼顧低版本瀏覽器但是不丟失過多效果：

不知道你所說的不丟失過多效果是指什麼，如果是想在一些過時瀏覽器下顯示現代瀏覽器的一些圓角，CSS3動畫之類的，那麼真的完全沒有必要，但要保證基本的頁面布局不要亂套除了IE8以下的應該不是問題。

js css img 的框架結構：

這個你應該指的是開發的時候吧，其實這個和團隊有很大的關係，只要共同約束好就好了，如果是你一個人開發的話最好保證每個項目都是一樣的結構，不要這個項目的結構是（js,css,img），另外一個又是（scripts,styles,images）。

普通Web開發的話可以參考：

h5bp/html5-boilerplate · GitHub

yeoman/generator-webapp · GitHub

yeoman/generator-gulp-webapp · GitHub

js css命名如何規範統一：

總的原則是：樣式和行為的命名要區分開來，具體還是要團隊制定一個規範。

給兩個參考：

CSS Guidelines (2.1.3)

airbnb/javascript · GitHub

個人之見。

你需要的是一套前端框架。

一個好的設計師，會主動與你一起制定標準，或者使用你的標準來設計。

這個標準，就是前端框架。

字體、顏色、間距、尺寸、顏色、動態效果，都預先制定在框架裡面了。

設計師能從框架裡面直接把想要的東西拖出來。組合成為設計稿。

前端開發同時也能從框架裡面將需要的代碼拖出來，組合為產品。

你們共同制定了框架之後，工作流程就變成這個樣子：

設計師在草圖上用手畫出了一個框，然後旁邊拉了一個箭頭寫上：「這裡要一個藍色的大號按鈕，鏈接到首頁」

然後你看到草圖，在記事本裡面寫下：

& 返回首頁&

這裡，btn（按鈕基本樣式） btn-large（大號按鈕的尺寸） btn-blue（按鈕的顏色）就是你們之前商量好的按鈕的樣式，以及命名規範。

這樣一起工作一段時間之後，就會變成這樣：

設計師和前端一起討論、繪製草圖，設計師和前端一起寫代碼，一起調試、一起那啥那啥。

設計師開始使用代碼設計新奇的按鈕樣式，並且卸載了Photoshop（開玩笑的），前端開始專註於javascript實現各種交互功能，並且開始研究如何和後端默契配合。

在我們團隊，交互設計師和UI設計師之間，使用手繪流程草圖交流，UI設計師和前端開發使用手繪界面草圖交流，前端開發和後端開發使用手繪邏輯草圖交流。

每個月要用好多好多的筆〒▽〒哭······

Photoshop這種拖慢工作效率的軟體，我重裝系統之後一直沒裝。

哦··我其實是一個設（qian）計（duan）。

·························································································

一個好的UI設計師，一定能看懂html以及css

一個好的UI設計師，不會喜歡使用Photoshop來給你輸出設計稿，並要求你要完全一樣。

一個好的前端，一定懂設計。

..................................................................................................................

另外：客戶或者用戶，根本不在意你的成品與設計稿有幾個像素的差距，甚至大多數的客戶或者用戶，根本不在意你界面有多漂亮多藝術感十足，人家要的是清晰明確的表達，簡單明了的閱讀，秒開的速度，以及一萬年不崩潰的可靠。

一個只能把界面做漂亮的設計師，所做的事情，根本┻━┻︵╰(‵□′)╯︵┻━┻不重要！

四年前，我做韓國外包確實是這麼要求的，IE6-8一像素都不能差。其實不難，只要人多，反覆測試，基本沒問題。但是話說回來，在國內基本沒用！！

記得10年前後在NHN做前端重構的時候，我們的團隊也是這麼要求的，基本上IE6~8（那會兒還沒有9）、Chrome、Firefox、Safari、Opera都要求，截屏瀏覽器覆蓋到設計稿上，調整透明度50%，比對像素。當時的UEX部門分為設計團隊、重構團隊、JS團隊。設計團隊的同學是不管也不需要懂技術問題的，但是我們必須能夠1px不差的還原出來，因為有的是遊戲類活動單頁，如果差一個像素，或是哪個瀏覽器沒兼容到，就會出現「斷裂」現象。JS團隊的同學更是強悍，JS team leader需要有自己重新編寫jquary的能力，基本上在國內是頂尖的。100%還原設計稿倒不是很難，就看你有沒有耐心。看得出來題主是有怨言的，好的東西需要千錘百鍊出來的。要知道當時的測試團隊可是嚴格到無以復加的地步的。有的人以為沒有必要，那就看你站在什麼立場了，如果你想鍛煉自己的技藝，那就別怕麻煩。

~~~~~~~~~~~~~~~~~~~~~~~~~~~裝B的分割線~~~~~~~~~~~~~~~~~~~~~~~~~~

有必要補充一句，只有高質量的設計，才配得上高質量的製作，完畢，起立，鼓掌，啪啪啪

與設計師溝通，理解設計意圖。

梳理設計意圖的過程，可以發現很多潛在問題。例如少了三態

當你讀懂整個設計意圖之後，還原出來的重構稿，在大方向上的間距、對齊、留白都很自自然然的達到像素級別。

剩下的就是一些修飾性元素，根據不同的理解，再輔以絕對定位進行還原。

贊，我喜歡「實現」這詞，演繹為「設計理念實現」。

不要太糾結像素級的還原，放過一兩像素的差異吧。前端更應該做的是設計理念實現，圍繞產品目標去思考，這樣的設計能否表達出產品理念，還有什麼東西補充的？是否還可以通過更簡單的交互設計來實現，或是能否通過動畫元素讓其目標更突出。前端是產品的理念demo的最後把關，更應該重點投在設計理念的實現。

找個美工啊

設計稿自己設計的

CSS肯定考慮了肯定能設計出來

有的人認為美工就是平面設計

其實非也

美工=平面設計+網頁前端

比較難實現，現在ui設計師給到我們手上的設計圖，基本上也就是一些原型，不會去標註具體的像素，要自己測量，多多少少都會有誤差，想做到更完美必須花更多時間，對於比較挑剔的顧客我會把ui給的圖當作背景，然後去做重合對比，做到和背景圖重疊起來為止。

至於瀏覽器兼容，度娘一下，基本上很多問題都能解決，不過現在也很少考慮IE8以下瀏覽器了，感覺解脫阿！

設計用html，css畫的就可以，但設計師沒這水平

當然可以，邊設計邊算尺寸，layout 方式沒把握的找工程師問清楚，然後詳細標註

設計稿-&>數據-&>框架-&>樣式

但是一般都是設計稿-&>框架-&>樣式

漏了的那一步，就是香酥雞實現的關鍵。

這一步需要設計師和工程師通力合作，將圖像設計稿提煉成樣式數據。

騰訊前端團隊做的一個工具，可以將設計稿墊在網頁下方進行設計

AlloyDesigner——For Fast Web Development

據我所知，hao123就是 1:1完美實現。到像素級。

圖+CSS，我還真想不到有什麼實現不了的。：）就在於你肯不肯時間夠不夠。

站在設計師的角度

，在設計之初，需要和技術溝通，了解後端技術實現的大致邏輯。

，如果只做設計層面，不做前端開發，至少對前端技術的熟悉程度不能低於對後端技術的了解。

，在越來越扁平化、輕設計的趨勢下，對前端設計的方法和思路其實有一些創造性的東西可以嘗試。比如我們團隊目前直接從高保真的原型圖進入前端開發（跳過設計圖，額外做一些少量的元素設計）

，設計稿本身要高保真，不要認為開發同學可以心領神會你的意圖。

站在技術角度

可能問題會稍微多點，編碼思維和設計思維，有時不太容易跳出來。不過時時想著技術為產品服務，應該能發現不少問題。

一般設計圖到最後的頁面相似度在90%以上就行了因為還有10%要麼是在製作的過程中發現另外一種方式來展示更合理要麼就是這個效果是雞肋並不需要這樣表現而刪掉有時候設計的人畫出來的東西和前端實現的人對前端頁面的想法是不一樣的所以才會出現這百分之幾的誤差

做過設計的前端。或者設計師自己寫。我就是

1比1是啥意思？考慮誤差么？