我，一名UI。

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

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

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

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

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

可復用控件規範化

站在設計師的角度，為什麼我們要輸出設計規範、控件規範與交互規範？

因為只有當可復用控件規範化之後，在與其他設計師協同的過程中才不會出現太大的設計偏差。就算你不需要與其他設計師協同，規範也可以幫助你避免在出稿的過程中忘記可復用控件的各種參數，導致多個頁面的相同控件樣式或交互不一致。

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

當UI將可復用的控件規範化之後，前端可以在樣式庫中寫一個標準的控件樣式，然後在不同的頁面中進行調用，原理類似於我們在 Sketch 中搭建 Symbol。

如果UI忽略規範，前端在不知道有可復用組件的情況下，很可能每一次都要手動書寫控件代碼。寫的代碼越多，遺漏掉細節和犯錯的可能性越大，導致效率降低。最關鍵的是，對於今後的迭代，前端又得一個頁面一個頁面修改。

所以建議設計師一定要將可復用控件規範化，並且輸出文檔交付給前端開發人員。這樣也有助於我們提升走查時的效率。

把控顏色與間距問題

在我走查的經驗多了以後，發現 最容易造成落地頁面與設計稿視覺差異的，其實就是顏色與間距。不要小看這兩個細節元素，把控不好它們會讓落地頁面效果大打折扣。

1. 顏色

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

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

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

但在我的工作經驗中發現很多設計師並不知道 Sketch 也有顏色配置一說。一般我們在 Sketch 中新建一個文件時，Sketch 會默認顏色模式為「非託管」，「非託管」模式下的色彩显示會比自放光設備更加艷麗明亮。

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

2. 間距

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

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

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

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

如果UI不設定行高規範，落地過程中就會出現以下問題：

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

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

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

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

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

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

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

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

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

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

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

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

結語

一個優質的項目落地是各部門協同合作的成果，就像我們玩遊戲，後期高質量的輸出也需要前期優秀的輔助來打鋪墊。

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

延伸閱讀：

閱讀文章 >>

歡迎大家關注作者微信公眾號：「UCD耍家」

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五註冊開戶_UI 設計師如何像素級還原設計稿？來看高手的總結！