優(yōu)秀的設計能夠有效地傳達產品價值，但也離不開技術的落地支持。隨著市場環(huán)境變化與行業(yè)水平的提升，越來越多設計師開始意識到：設計稿還原的重要性。

 

但是在配合過程中，設計與研發(fā)思維的偏差也逐漸體現：“這個需求做不了，那個間距調不好”……設計稿落地后，往往要經過多輪測試和“小板凳”對接，才能達到預期效果。

可以說，在每一位UI設計師的成長過程中，設計稿還原，是一個必定經歷 且 難以解決的問題。

 

如何更好的實現設計還原度，減少重復工作呢？不妨試試換個角度，學習用開發(fā)的思維來做設計。

整篇文章分為以下五個部分：
 

 

 

“元素位置”的標注是設計驗收時與開發(fā)人員的必爭之地。

面對它的時候，設計師應站在開發(fā)的角度，用動態(tài)視角的思維，對界面中元素位置進行合理的動態(tài)布局，輸出正確的位置標注，減少開發(fā)人員多次返工的窘境。

 

一、絕對位置與相對位置

我們常說的“位置”是代表元素在界面內X軸與Y軸的坐標，同一元素會因為在不同的機型中呈現出不同的位置，大致會分為兩種：1. 絕對位置；2. 相對位置。

就如初中物理學到的“運動與靜止的相對性”，一艘船在海面航行，海岸是參照物，船相對于海岸是相對位置，海上的燈塔是絕對位置。

 

1. 絕對位置

絕對位置：屏幕是參照物，元素的位置相對屏幕固定，不會受其他元素的影響。

比如：常見的導航欄、底部Tab欄，吸底按鈕和懸浮按鈕。

 

2. 相對位置

相對位置：元素位置不固定，會隨著頁面尺寸或其他元素的影響而改變。

比如：支付寶的列表流。列表的間距固定，當刪除一個列表時，下面的列表位置自動上移。（如下圖）

 

 

二、位置標注的注意點

在做位置標注的時候，要有蓋樓思維。什么是蓋樓思維呢？

 

設計并列關系的模塊，即相似的“樓層”，元素以模塊的形式疊加成一棟樓。

在做標注的時候，通過分析元素與元素之間的相關性作出標注，標注元素位于所在樓層的位置。它能同時適用在整個制作設計稿的過程中。

比如：列表流、多個卡片或多行金剛區(qū)，只需標注某一層中元素的位置關系即可。（如下圖）

 

 

三、絕對位置與相對位置的標注方法

對于位置的標注，并不是把元素的坐標點、上下左右間距都標注出來。而是根據元素與元素之間的關系，決定是否標注為絕對位置或相對位置，并對其進行明確清晰的標注以便開發(fā)人員能更好更快的還原。

 

絕對位置的標注采用百分比標注或固定位置標注。

 

相對位置采用普通像素標注即可。（如下圖）

 

 

常見的的設計標注文件中，組件間距大致可以分為兩種：

1. 頁邊距；

2. 內容塊之間的間距；

 

一、頁邊距

指內容到屏幕邊緣的距離，也叫安全距離。

同時，在36氪的界面中還可發(fā)現一個小細節(jié)：右側圖標并沒有貼著安全區(qū)域。這是因為在圖標尺寸較小的情況下，為了保證其易點擊性，會在其四周填入空白像素，使可點擊熱區(qū)面積大于圖標的視覺尺寸。（如下圖）

在設計的過程中，我們應該使用常用的頁邊距，如32px、30px、24px、20px。

同時需保持所有界面中頁邊距的一致性，減少和開發(fā)人員的溝通成本。

 

 

二、內容塊間距

主要分為兩種：塊外間距和塊內間距。

通常情況下，會根據格式塔中的“相近原則”，使塊內間距小于塊外間距，保證內容塊的親密性以及塊與塊之間的分隔感。（如下圖）

 

我們先著重來說說塊外間距。

在開發(fā)過程中，開發(fā)人員往往需要使用模塊開發(fā)，這時就需要用到塊外間距。在標注塊外間距的時候，需要設計師和開發(fā)人員保持思維的統(tǒng)一，這樣才能保證頁面的還原度。

 

如何使用塊外間距進行頁面搭建呢？一般來說，常見的有四種方法：

1. 給定間距，自上而下進行適配。這種方式容易導致下面布局擁擠，不常用。

2. 給定間距，從上下向中間方向適配。一般可以基本做到適配各個尺寸，但容易出現布局不協(xié)調的現象。

 

以上兩種方法不是很好用，基本已淘汰。

3. 確定各元素中心點位于畫板的比例位置，按比例確定位置。這個方法可以完美適配出優(yōu)美的布局。（如下圖）

 

4. 把畫板分割成幾塊，所有元素在各個區(qū)域居中。

這是最符合開發(fā)思維的適配方案，也是還原效果比較好的適配方案。

具體的做法是固定上下區(qū)域，中間間隔區(qū)域自適應。單獨劃分的區(qū)域可以直接給定高度數值，或者給定比例。（如下圖）

 

 

3和4是比較常用的高度適配方法，尤其是第4種，酷狗和QQ音樂都是采用第4種方法進行適配。（如下圖）

 

塊內間距的標注涉及到文字、圖標等內容會在后面章節(jié)進行說明，此處省略。
 

總而言之，為了避免設計師和開發(fā)人員在間距上產生問題，一方面在設計的過程中，我們保持統(tǒng)一性，減少出現大量不同間距數值的情況，讓開發(fā)人員在寫頁面的時候更順暢、效率更高。

另一方面我們需要在標注的時候關注開發(fā)人員所需要的內容，理解開發(fā)思維，與他們統(tǒng)一思路。

 

 

三、組件間距標注的注意點

在設計的過程中，我們常使用以下方法來規(guī)范間距：

1. 定義最小單位網格，如4px、6px、8px等；

2. 設置常用間距：如最小單位為4px的情況下，常用間距設置為：8、16、24等4的倍數。

 

一稿適配時，面對不同尺寸機型，使用4px網格換算之后都是整數倍，這樣我們的視覺元素就不會因為適配而變形模糊。而常用間距使用最小單位網格的倍數設置，可以保證視覺元素的精準，使設計變得有理有據，也便于開發(fā)人員實現還原，降低溝通成本。

比如：能使用16的時候，就避免使用18或者20，但是也要依據實際情況進行動態(tài)調整。做到盡量“克制”，避免過多的間距讓開發(fā)人員在還原的過程中產生不必要的麻煩。

 

 

四、組件間距的標注方法

關于內容間距的標注，在與開發(fā)人員對接的過程中，目前有兩種主流方式：

1. 進行手動標注，需要與開發(fā)人員溝通標注其關注的要點；

2. 設計師利用插件工具一鍵導出所有標注，比如：藍湖；

 

 

一、圖標

圖標是設計中最常用的基礎元素，我們會在金剛區(qū)、tab欄、個人中心、導航欄等不同位置用到。

分析圖標的間距標注，我們會把所有圖標簡化成為兩類：

1. 規(guī)則（有底版）圖標；

2. 不規(guī)則圖標；

 

1. 有底版圖標

這類圖標大多出現在金剛區(qū)，比如：淘寶、唯品會。

金剛區(qū)圖標常用布局有兩種，一種是等間距，一種是屏幕等分。

淘寶用的是等間距布局，唯品會用的是屏幕等分。先標注出圖標尺寸，再針對不同布局方式來進行間距的標注。這樣我們就完成了有底版圖標標注，與開發(fā)人員對接的時候就能很好的說明清楚，減少不必要的溝通成本。

2. 不規(guī)則圖標

這類圖標會出現在金剛區(qū)、列表流、導航欄、tab欄等位置，比如：得到、馬蜂窩等。

不規(guī)則圖標我們需要按照圖標盒子的區(qū)域來進行切圖，標注的時候也是以圖標盒子區(qū)域來進行標注。

同時，還需要：標出圖標盒子是有最小可點擊區(qū)域。通常來說最小的可點擊區(qū)域是48px*48px，把它寫入規(guī)范文檔中。這樣，方便開發(fā)人員查閱，也節(jié)省了整個項目流程的時間。

 

 

 

二、分割線

分割線作為頁面中的微小元素，我們很容易在設計中忽視它，因此，做好分割線的標注是非常重要的。下面主要以3個主要場景來分點解釋分割線的標注：1. 列表流；2.feed流； 3. 內容塊之間。

 

1. 列表流

大部分列表流都會用到分割線，比如：支付寶、微信。

這種分割線叫等屏分割線，用于分割列表中的每個數據項。我們標注出列表流的高度，再以圖標為參考標注出分割線到圖標的距離。

當我們自己在畫分割線時，建議分割線使用1px的高度，與開發(fā)人員對接時說明在@1、@2、@3的情況下，分割線都是1px。

 

2. feed流

feed流也是使用分割線的?？?，比如：澎湃新聞、簡書。

我們需要標注出分割線到內容的間距，再標注出分割線到文字的間距，文字的標注需要注意一點，就是文字本身有默認行高。所以我們不能完全標注到文字本身，而要留出幾個像素作為文字自身的行高。

 

3. 內容塊之間

內容塊之間有時候也會用到分割線，比如：開眼、嗶哩嗶哩。

我們需要標注分割線到內容的間距，再標注出上間距和下間距。

但這里有一點需要注意的是：在畫分割線時會出現遺漏的問題。我們經常會用到sketch來畫，但是由于sketch的默認屬性，線條的線型是居中（center）的，這會導致我們畫的線條在視覺上是對齊像素的，但是在數據上會顯示0.5個像素。

當多個元素之間計算間距時會導致數據上顯示的和實際畫面中的圖形不一致。這時就需要我們使用矩形工具來畫一個1像素寬的線條，這樣就可以既保證視覺上對齊，數據中也是整數。

 

 

一、文字行高適配

有部分設計設計師用原始方法來標注文字：如下圖，標注從上面文字“科”的末端開始測量到下面灰色文字的最高點“2”結束。在這種情況下，開發(fā)人員還原出來的效果和設計稿有一定的差距，需要調試很多遍才能達到想要的效果。

 

后來，設計師逐漸使用了sketch文字默認的行高導出標注文件，但在驗收開發(fā)版本還原度的時候，還是發(fā)現與設計稿標注的間距不一樣。

這是為什么呢？因為不同的字形在高度上都會產生微小的差異，無論是使用原始方法或是使用sketch默認行高去標注文字，它都與前端在編輯文字的軟件里的字體默認行高不一致。

比如，iOS的Xcode以及Android文字編輯器對應下的行高效果。

 

由上圖可以發(fā)現：開發(fā)人員在寫字體的時候會使用一個類似textview的，我們可以理解成一個文本框，字其實不是頂滿這個框的，是有一定留白的。

所以，我們可以把行高可以理解為一個包裹在字體外面的無形的盒子，在標注文字的行高時，要把留白算進去，以文本框（即默認行高）的形式去標注。

 

具體的配合開發(fā)人員還原文字間距的標注方法，大致可以分為3種：

1. 安裝插件；

2. 手動修改文字行高；

3. 文字組件化；

 

1.安裝插件

比較偷懶的方式：在sketch裝個“antofixiostextlinehinugin.sketch”插件。

這個插件適用于蘋方和SF字體，點擊fix即可一鍵修復成xcode原生行高。雖然這類插件看著能一勞永逸，但目前市面上應用較少，bug也比較多，單行文本基本可以還原，多行文本則基本不適用。（插件可在附件下載）

 

2.手動修改文字行高

最準確的方式：根據前端編輯器默認行高自行完美還原。

手動把文字行高與前端默認行高修改成一致，從而給出準確的文字間距。這種方式雖會花費不少時間，但也最精確，你可以據此設置出最美觀合理的間距，而不用擔心上線稿的還原度問題。

 

3.文字樣式

最便捷的方法：手動調整sketch里的字體的默認行高并形成樣式。這樣規(guī)范好設計能更好的讓開發(fā)人員還原設計稿，也便于我們后期的頁面校對和調整。