一個優(yōu)質(zhì)的產(chǎn)品往往需要多個部門的通力合作才能完成，作者根據(jù)自身工作經(jīng)歷，從三個方面介紹設(shè)計師怎么輔助產(chǎn)品落地稿實現(xiàn)“像素級還原”，希望對你有幫助。

每一名認(rèn)真對待自己產(chǎn)品的項目人員，心里應(yīng)該都有一個前端能「像素級還原」設(shè)計稿的夢想。但精準(zhǔn)還原設(shè)計稿其實并不是前端獨自美麗的事，也需要UI前期做好配合。

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

那么想要「像素級還原」設(shè)計稿，設(shè)計師在前期出稿時應(yīng)該注意哪些點，才能輔助前端更好地進(jìn)行設(shè)計落地呢？

我總結(jié)了工作中這幾年來的幾點經(jīng)驗。

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

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

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

其實前端也面臨和設(shè)計師同樣的問題。當(dāng)UI將可復(fù)用的控件規(guī)范化之后，前端可以在樣式庫中寫一個標(biāo)準(zhǔn)的控件樣式，然后在不同的頁面中進(jìn)行調(diào)用，原理類似于我們在 Sketch 中搭建 Symbol。

如果UI忽略規(guī)范，前端在不知道有可復(fù)用組件的情況下，很可能每一次都要手動書寫控件代碼。寫的代碼越多，遺漏掉細(xì)節(jié)和犯錯的可能性越大，導(dǎo)致效率降低。

最關(guān)鍵的是，對于今后的迭代，前端又得一個頁面一個頁面修改。所以建議設(shè)計師一定要將可復(fù)用控件規(guī)范化，并且輸出文檔交付給前端開發(fā)人員，這樣也有助于我們提升走查時的效率。

二、把控顏色與間距問題

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

1. 顏色

首先顏色也是需要規(guī)范化的組件之一，主色、輔色、常用漸變色要統(tǒng)一色值，中性色使用規(guī)范（例如分割線、頁面背景等）也要標(biāo)準(zhǔn)化。

道理和前面提到的一致，前端是可以將色值寫進(jìn)樣式庫里的，這樣做可以有效避免不同頁面中存在色值偏差。

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

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

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

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

2. 間距

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

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

這句話是什么意思呢？首先我們要理解什么是行高（line-height），我以 Sketch 為例，當(dāng)我們設(shè)置了一個28px的文本，Sketch 會默認(rèn)給我們設(shè)置文本為40px行高，文本的上下會包含一定的空白像素。

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

所以我一般會在設(shè)計的過程中，將單行文本的行高都調(diào)整回來，28px的行高就為28px，不要用行高內(nèi)的空白像素妨礙前端書寫正確的間距值?！?/p>

而多行文本我會輸出規(guī)范行高（可以是x倍行高，也可以是具體的行高值，如28px的多行文本行高為40px），而控件間距就是我接下來要講到的「盒子模型」了。

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

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

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

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

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

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

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

我舉一個示例，如果我們不使用「盒子」，當(dāng)我們在做一個表單時，前端并不知道UI是如何定義每一個Lable之間的間距的。

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

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

四、結(jié)語

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

這是我長期以往和前端打交道，總結(jié)出來的一些UI輔助前端落地應(yīng)該注意的點，希望能夠幫助到大家。

最重要的是：工作的過程中，犯錯不可怕，犯錯之后不總結(jié)才可怕。遇事不甩鍋，想想自己有沒有能夠做得更優(yōu)秀的地方，對自己未嘗不是一件好事。

#專欄作家#

UCD耍家，公眾號：UCD耍家（ID：ucdplayer），人人都是產(chǎn)品經(jīng)理專欄作家。

本文由 @UCD耍家 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議