我，一名UI。

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

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

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

拋開(kāi)前端開(kāi)發(fā)過(guò)程中的疏忽不談（工作中人人都有犯迷糊的時(shí)候），因?yàn)橹辽龠€有設(shè)計(jì)走查環(huán)節(jié)可以填補(bǔ)一些細(xì)節(jié)遺漏（關(guān)鍵是在設(shè)計(jì)走查的過(guò)程中可以增進(jìn)彼♂此感♂情）。

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

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

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

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

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

當(dāng)UI將可復(fù)用的控件規(guī)范化之后，前端可以在樣式庫(kù)中寫(xiě)一個(gè)標(biāo)準(zhǔn)的控件樣式，然后在不同的頁(yè)面中進(jìn)行調(diào)用，原理類(lèi)似于我們?cè)?Sketch 中搭建 Symbol。

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

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

把控顏色與間距問(wèn)題

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

1. 顏色

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

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

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

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

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

2. 間距

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

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

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

我以 Sketch 為例。當(dāng)我們?cè)O(shè)置了一個(gè)28px的文本，Sketch 會(huì)默認(rèn)給我們?cè)O(shè)置文本為40px行高。文本的上下會(huì)包含一定的空白像素。

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

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

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

出圖時(shí)也該遵守「盒子模型」

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

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

舉一個(gè)真實(shí)界面示例，我們?cè)跒g覽器中打開(kāi)「開(kāi)發(fā)者模式」可以看到網(wǎng)頁(yè)的樣式代碼以及當(dāng)前界面是如何通過(guò)「盒子模型」來(lái)布局的。

前端并不能簡(jiǎn)單的像UI畫(huà)圖時(shí)一樣，隨意地拖放一個(gè)可見(jiàn)元素到某一個(gè)位置。他們要通過(guò)把每一個(gè)元素裝進(jìn)一個(gè)「盒子」中，再去界面中定位它所處的位置。

那么了解了「盒子模型」，對(duì)于UI出稿時(shí)又有什么用呢？

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

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

「盒子」的運(yùn)用幾乎在頁(yè)面中無(wú)處不在。

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

結(jié)語(yǔ)

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

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

延伸閱讀：

歡迎大家關(guān)注作者微信公眾號(hào)：「UCD耍家」