一名出設計稿的時候莺奸，連一像素的視覺分割線都要糾結好幾次的UI丑孩；一名走查設計落地時總是心懷不甘覺得前端落地可以再完美一點的UI；一名很愛前端小哥但是也和他們相愛相殺的UI灭贷。

不論你是不是和我一樣温学，至少我相信每一名認真對待自己設計作品的UI設計師，心里應該都有一個前端能「像素級還原」自己設計稿的夢想甚疟，畢竟那是我們艱苦奮斗的勞動成果仗岖。

但精準還原設計稿其實并不是前端獨自美麗的事，也需要UI前期做好配合览妖。

拋開前端開發(fā)過程中的疏忽不談（工作中人人都有犯迷糊的時候）轧拄，因為至少還有設計走查環(huán)節(jié)可以填補一些細節(jié)遺漏（關鍵是在設計走查的過程中可以增進彼♂此感♂情）。

那么想要「像素級還原」設計稿讽膏，UI在前期出稿時應該注意哪些點檩电，才能輔助前端更好地進行設計落地呢？總結了做UI這幾年來的幾點經驗府树。

可復用控件規(guī)范化

站在設計師的角度俐末，為什么我們要輸出設計規(guī)范、控件規(guī)范與交互規(guī)范奄侠？

因為只有當可復用控件規(guī)范化之后卓箫，在與其他設計師協(xié)同的過程中才不會出現(xiàn)太大的設計偏差。就算你不需要與其他設計師協(xié)同垄潮，規(guī)范也可以幫助你避免在出稿的過程中忘記可復用控件的各種參數(shù)烹卒，導致多個頁面的相同控件樣式或交互不一致闷盔。

其實前端也面臨和設計師同樣的問題。

當UI將可復用的控件規(guī)范化之后旅急，前端可以在樣式庫中寫一個標準的控件樣式逢勾，然后在不同的頁面中進行調用，原理類似于我們在 Sketch 中搭建 Symbol坠非。

如果UI忽略規(guī)范，前端在不知道有可復用組件的情況下果正，很可能每一次都要手動書寫控件代碼炎码。寫的代碼越多，遺漏掉細節(jié)和犯錯的可能性越大秋泳，導致效率降低潦闲。最關鍵的是，對于今后的迭代迫皱，前端又得一個頁面一個頁面修改歉闰。

所以建議設計師一定要將可復用控件規(guī)范化，并且輸出文檔交付給前端開發(fā)人員卓起。這樣也有助于我們提升走查時的效率和敬。（歡迎加入UI ps免費資料分享群892500388）

把控顏色與間距問題

在我走查的經驗多了以后，發(fā)現(xiàn)最容易造成落地頁面與設計稿視覺差異的戏阅，其實就是顏色與間距昼弟。不要小看這兩個細節(jié)元素，把控不好它們會讓落地頁面效果大打折扣奕筐。

1. 顏色

首先顏色也是需要規(guī)范化的組件之一舱痘，主色、輔色离赫、常用漸變色要統(tǒng)一色值芭逝，中性色使用規(guī)范（例如分割線、頁面背景等）也要標準化渊胸。道理和前面提到的一致旬盯，前端是可以將色值寫進樣式庫里的，這樣做可以有效避免不同頁面中存在色值偏差翎猛。

除去規(guī)范這一點瓢捉，UI設計師一定要注意前期出稿的顏色模式。否則很可能落地界面與設計稿會存在顏色偏差办成。

我相信很多設計師應該都知道泡态，在PS 中設計線上（自發(fā)光設備）作品稿，要將顏色模式調整為 RGB 迂卢。

但在我的工作經驗中發(fā)現(xiàn)很多設計師并不知道Sketch 也有顏色配置一說某弦。一般我們在 Sketch 中新建一個文件時桐汤，Sketch 會默認顏色模式為「非托管」，「非托管」模式下的色彩顯示會比自放光設備更加艷麗明亮靶壮。

所以切記一定要在Sketch 中將顏色配置更改為 sRGB怔毛，否則落地界面會比設計稿更暗更臟一些。（歡迎加入UI ps免費資料分享群892500388）

2. 間距

間距也是影響落地效果的關鍵因素之一腾降，我主要將間距分為「文本間距」和「控件間距」拣度。

文本間距指的是，純文本與其他元素之間的間距螃壤。UI出稿時應該注意文本行高可能導致前端的測量誤差抗果。這句話是什么意思呢？

首先我們要理解什么是行高（line-height）奸晴。

我以Sketch 為例冤馏。當我們設置了一個28px的文本，Sketch 會默認給我們設置文本為40px行高寄啼。文本的上下會包含一定的空白像素逮光。

如果UI不設定行高規(guī)范，落地過程中就會出現(xiàn)以下問題：

面對行高的問題墩划，我一般會在設計的過程中涕刚，輸出規(guī)范行高（可以是x倍行高，也可以是具體的行高值乙帮，如28px的多行文本行高為40px）副女，和前端進行對接落地。（歡迎加入UI ps免費資料分享群892500388）

而控件間距就是我接下來要講到的「盒子模型」了蚣旱。

出圖時也該遵守「盒子模型」

沒有前端知識基礎的UI設計師碑幅，你不需要完全了解前端是怎么通過代碼來落地你的設計稿的，但你一定要知道什么是「盒子模型」塞绿。

「盒子模型」是前端的基礎知識沟涨。它大概的含義就是：我們把界面中的每一個元素都看做一個矩形「盒子」，每個「盒子」都具有自己的樣式屬性（包含但不限于邊距异吻、描邊裹赴、填充等），并且與其他的「盒子」保持相對的位置關系（包含但不限于上下左右及包含關系）诀浪。

舉一個真實界面示例棋返，我們在瀏覽器中打開「開發(fā)者模式」可以看到網(wǎng)頁的樣式代碼以及當前界面是如何通過「盒子模型」來布局的。

前端并不能簡單的像UI畫圖時一樣雷猪，隨意地拖放一個可見元素到某一個位置睛竣。他們要通過把每一個元素裝進一個「盒子」中，再去界面中定位它所處的位置求摇。

那么了解了「盒子模型」射沟，對于UI出稿時又有什么用呢殊者？

當你摸清了前端是如何布局實現(xiàn)你的設計稿后，你在作圖的過程中就會開始懂得站在落地的角度思考問題验夯，善用「盒子」猖吴，將界面中每一塊布局「盒子化」。

我舉一個示例挥转，如果我們不使用「盒子」海蔽，當我們在做一個表單時，前端并不知道UI是如何定義每一個Lable之間的間距的绑谣。比如UI是以上一個Lable的icon距下一個Lable的icon來決定它們的相對位置的党窜，可前端在測量時可能測量的是上一個Lable的文本距下一個Lable的文本的間距，然后將這一個間距套用在他也不知道應該設置為多高的「盒子」當中域仇。

「盒子」的運用幾乎在頁面中無處不在刑然。

所以UI在出稿時就帶入「盒子模型」思維寺擂，合理地構思好每一塊元素的布局暇务，一方面可以幫助自己在輸出頁面時，布局更加合理怔软；另一方面可以在前端落地時輔助前端準確還原垦细。（歡迎加入UI ps免費資料分享群892500388）

結語

一個優(yōu)質的項目落地是各部門協(xié)同合作的成果，就像我們玩游戲挡逼，后期高質量的輸出也需要前期優(yōu)秀的輔助來打鋪墊括改。

這是我長期以往和前端打交道，總結出來的一些UI輔助前端落地應該注意的點家坎，希望能夠幫助到大家嘱能。最重要的是：工作的過程中，犯錯不可怕虱疏，犯錯之后不總結才可怕惹骂。遇事不甩鍋，想想自己有沒有能夠做得更優(yōu)秀的地方做瞪，對自己未嘗不是一件好事~

聲明：本文不是原創(chuàng)是轉載