我，一名UI。

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

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

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

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

那么想要「像素級還原」設(shè)計稿，UI在前期出稿時應(yīng)該注意哪些點，才能輔助前端更好地進行設(shè)計落地呢？我總結(jié)了做UI這幾年來的幾點經(jīng)驗。

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

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

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

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

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

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

所以建議設(shè)計師一定要將可復(fù)用控件規(guī)范化，并且輸出文檔交付給前端開發(fā)人員。這樣也有助于我們提升走查時的效率。

把控顏色與間距問題

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

1. 顏色

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

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

我相信很多設(shè)計師應(yīng)該都知道，在 PS 中設(shè)計線上（自發(fā)光設(shè)備）作品稿，要將顏色模式調(diào)整為 RGB 。

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

所以切記一定要在 Sketch 中將顏色配置更改為 sRGB，否則落地界面會比設(shè)計稿更暗更臟一些。

2. 間距

間距也是影響落地效果的關(guān)鍵因素之一，我主要將間距分為「文本間距」和「控件間距」。

文本間距指的是，純文本與其他元素之間的間距。UI出稿時應(yīng)該注意文本行高可能導(dǎo)致前端的測量誤差。這句話是什么意思呢？

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

我以 Sketch 為例。當我們設(shè)置了一個28px的文本，Sketch 會默認給我們設(shè)置文本為40px行高。文本的上下會包含一定的空白像素。

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

面對行高的問題，我一般會在設(shè)計的過程中，輸出規(guī)范行高（可以是x倍行高，也可以是具體的行高值，如28px的多行文本行高為40px），和前端進行對接落地。

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

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

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

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

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

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

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

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

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

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

所以UI在出稿時就帶入「盒子模型」思維，合理地構(gòu)思好每一塊元素的布局，一方面可以幫助自己在輸出頁面時，布局更加合理；另一方面可以在前端落地時輔助前端準確還原。

結(jié)語

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

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

作者微信公眾號：「UCD耍家」