優(yōu)秀的設(shè)計能夠有效地傳達(dá)產(chǎn)品價值，但也離不開技術(shù)的落地支持。隨著市場環(huán)境變化與行業(yè)水平的提升，越來越多設(shè)計師開始意識到：設(shè)計稿還原的重要性。
但是在配合過程中，設(shè)計與研發(fā)思維的偏差也逐漸體現(xiàn)：“這個需求做不了，那個間距調(diào)不好”……設(shè)計稿落地后，往往要經(jīng)過多輪測試和“小板凳”對接，才能達(dá)到預(yù)期效果。
可以說，在每一位UI設(shè)計師的成長過程中，設(shè)計稿還原，是一個必定經(jīng)歷 且 難以解決的問題。
如何更好的實現(xiàn)設(shè)計還原度，減少重復(fù)工作呢？不妨試試換個角度，學(xué)習(xí)用開發(fā)的思維來做設(shè)計。
整篇文章分為以下五個部分：
“元素位置”的標(biāo)注是設(shè)計驗收時與開發(fā)人員的必爭之地。
面對它的時候，設(shè)計師應(yīng)站在開發(fā)的角度，用動態(tài)視角的思維，對界面中元素位置進(jìn)行合理的動態(tài)布局，輸出正確的位置標(biāo)注，減少開發(fā)人員多次返工的窘境。
一、絕對位置與相對位置
我們常說的“位置”是代表元素在界面內(nèi)X軸與Y軸的坐標(biāo)，同一元素會因為在不同的機(jī)型中呈現(xiàn)出不同的位置，大致會分為兩種：1. 絕對位置；2. 相對位置。
就如初中物理學(xué)到的“運動與靜止的相對性”，一艘船在海面航行，海岸是參照物，船相對于海岸是相對位置，海上的燈塔是絕對位置。
1. 絕對位置
絕對位置：屏幕是參照物，元素的位置相對屏幕固定，不會受其他元素的影響。
比如：常見的導(dǎo)航欄、底部Tab欄，吸底按鈕和懸浮按鈕。
2. 相對位置
相對位置：元素位置不固定，會隨著頁面尺寸或其他元素的影響而改變。
比如：支付寶的列表流。列表的間距固定，當(dāng)刪除一個列表時，下面的列表位置自動上移。（如下圖）
二、位置標(biāo)注的注意點
在做位置標(biāo)注的時候，要有蓋樓思維。什么是蓋樓思維呢？
設(shè)計并列關(guān)系的模塊，即相似的“樓層”，元素以模塊的形式疊加成一棟樓。
在做標(biāo)注的時候，通過分析元素與元素之間的相關(guān)性作出標(biāo)注，標(biāo)注元素位于所在樓層的位置。它能同時適用在整個制作設(shè)計稿的過程中。
比如：列表流、多個卡片或多行金剛區(qū)，只需標(biāo)注某一層中元素的位置關(guān)系即可。（如下圖）
三、絕對位置與相對位置的標(biāo)注方法
對于位置的標(biāo)注，并不是把元素的坐標(biāo)點、上下左右間距都標(biāo)注出來。而是根據(jù)元素與元素之間的關(guān)系，決定是否標(biāo)注為絕對位置或相對位置，并對其進(jìn)行明確清晰的標(biāo)注以便開發(fā)人員能更好更快的還原。
絕對位置的標(biāo)注采用百分比標(biāo)注或固定位置標(biāo)注。
相對位置采用普通像素標(biāo)注即可。（如下圖）
常見的的設(shè)計標(biāo)注文件中，組件間距大致可以分為兩種：
1. 頁邊距；
2. 內(nèi)容塊之間的間距；
一、頁邊距
指內(nèi)容到屏幕邊緣的距離，也叫安全距離。
同時，在36氪的界面中還可發(fā)現(xiàn)一個小細(xì)節(jié)：右側(cè)圖標(biāo)并沒有貼著安全區(qū)域。這是因為在圖標(biāo)尺寸較小的情況下，為了保證其易點擊性，會在其四周填入空白像素，使可點擊熱區(qū)面積大于圖標(biāo)的視覺尺寸。（如下圖）
在設(shè)計的過程中，我們應(yīng)該使用常用的頁邊距，如32px、30px、24px、20px。
同時需保持所有界面中頁邊距的一致性，減少和開發(fā)人員的溝通成本。
二、內(nèi)容塊間距
主要分為兩種：塊外間距和塊內(nèi)間距。
通常情況下，會根據(jù)格式塔中的“相近原則”，使塊內(nèi)間距小于塊外間距，保證內(nèi)容塊的親密性以及塊與塊之間的分隔感。（如下圖）
我們先著重來說說塊外間距。
在開發(fā)過程中，開發(fā)人員往往需要使用模塊開發(fā)，這時就需要用到塊外間距。在標(biāo)注塊外間距的時候，需要設(shè)計師和開發(fā)人員保持思維的統(tǒng)一，這樣才能保證頁面的還原度。
如何使用塊外間距進(jìn)行頁面搭建呢？一般來說，常見的有四種方法：
1. 給定間距，自上而下進(jìn)行適配。這種方式容易導(dǎo)致下面布局擁擠，不常用。
2. 給定間距，從上下向中間方向適配。一般可以基本做到適配各個尺寸，但容易出現(xiàn)布局不協(xié)調(diào)的現(xiàn)象。
以上兩種方法不是很好用，基本已淘汰。
3. 確定各元素中心點位于畫板的比例位置，按比例確定位置。這個方法可以完美適配出優(yōu)美的布局。（如下圖）
4. 把畫板分割成幾塊，所有元素在各個區(qū)域居中。
這是最符合開發(fā)思維的適配方案，也是還原效果比較好的適配方案。
具體的做法是固定上下區(qū)域，中間間隔區(qū)域自適應(yīng)。單獨劃分的區(qū)域可以直接給定高度數(shù)值，或者給定比例。（如下圖）
3和4是比較常用的高度適配方法，尤其是第4種，酷狗和QQ音樂都是采用第4種方法進(jìn)行適配。（如下圖）
塊內(nèi)間距的標(biāo)注涉及到文字、圖標(biāo)等內(nèi)容會在后面章節(jié)進(jìn)行說明，此處省略。
總而言之，為了避免設(shè)計師和開發(fā)人員在間距上產(chǎn)生問題，一方面在設(shè)計的過程中，我們保持統(tǒng)一性，減少出現(xiàn)大量不同間距數(shù)值的情況，讓開發(fā)人員在寫頁面的時候更順暢、效率更高。
另一方面我們需要在標(biāo)注的時候關(guān)注開發(fā)人員所需要的內(nèi)容，理解開發(fā)思維，與他們統(tǒng)一思路。
三、組件間距標(biāo)注的注意點
在設(shè)計的過程中，我們常使用以下方法來規(guī)范間距：
1. 定義最小單位網(wǎng)格，如4px、6px、8px等；
2. 設(shè)置常用間距：如最小單位為4px的情況下，常用間距設(shè)置為：8、16、24等4的倍數(shù)。
一稿適配時，面對不同尺寸機(jī)型，使用4px網(wǎng)格換算之后都是整數(shù)倍，這樣我們的視覺元素就不會因為適配而變形模糊。而常用間距使用最小單位網(wǎng)格的倍數(shù)設(shè)置，可以保證視覺元素的精準(zhǔn)，使設(shè)計變得有理有據(jù)，也便于開發(fā)人員實現(xiàn)還原，降低溝通成本。
比如：能使用16的時候，就避免使用18或者20，但是也要依據(jù)實際情況進(jìn)行動態(tài)調(diào)整。做到盡量“克制”，避免過多的間距讓開發(fā)人員在還原的過程中產(chǎn)生不必要的麻煩。
四、組件間距的標(biāo)注方法
關(guān)于內(nèi)容間距的標(biāo)注，在與開發(fā)人員對接的過程中，目前有兩種主流方式：
-
進(jìn)行手動標(biāo)注，需要與開發(fā)人員溝通標(biāo)注其關(guān)注的要點；
-
設(shè)計師利用插件工具一鍵導(dǎo)出所有標(biāo)注，比如：藍(lán)湖；
一、圖標(biāo)
圖標(biāo)是設(shè)計中最常用的基礎(chǔ)元素，我們會在金剛區(qū)、tab欄、個人中心、導(dǎo)航欄等不同位置用到。
分析圖標(biāo)的間距標(biāo)注，我們會把所有圖標(biāo)簡化成為兩類：
1. 規(guī)則（有底版）圖標(biāo)；
2. 不規(guī)則圖標(biāo)；
1. 有底版圖標(biāo)
這類圖標(biāo)大多出現(xiàn)在金剛區(qū)，比如：淘寶、唯品會。
金剛區(qū)圖標(biāo)常用布局有兩種，一種是等間距，一種是屏幕等分。
淘寶用的是等間距布局，唯品會用的是屏幕等分。先標(biāo)注出圖標(biāo)尺寸，再針對不同布局方式來進(jìn)行間距的標(biāo)注。這樣我們就完成了有底版圖標(biāo)標(biāo)注，與開發(fā)人員對接的時候就能很好的說明清楚，減少不必要的溝通成本。
2. 不規(guī)則圖標(biāo)
這類圖標(biāo)會出現(xiàn)在金剛區(qū)、列表流、導(dǎo)航欄、tab欄等位置，比如：得到、馬蜂窩等。
不規(guī)則圖標(biāo)我們需要按照圖標(biāo)盒子的區(qū)域來進(jìn)行切圖，標(biāo)注的時候也是以圖標(biāo)盒子區(qū)域來進(jìn)行標(biāo)注。
同時，還需要：標(biāo)出圖標(biāo)盒子是有最小可點擊區(qū)域。通常來說最小的可點擊區(qū)域是48px*48px，把它寫入規(guī)范文檔中。這樣，方便開發(fā)人員查閱，也節(jié)省了整個項目流程的時間。
二、分割線
分割線作為頁面中的微小元素，我們很容易在設(shè)計中忽視它，因此，做好分割線的標(biāo)注是非常重要的。下面主要以3個主要場景來分點解釋分割線的標(biāo)注：1. 列表流；2.feed流； 3. 內(nèi)容塊之間。
1. 列表流
大部分列表流都會用到分割線，比如：支付寶、微信。
這種分割線叫等屏分割線，用于分割列表中的每個數(shù)據(jù)項。我們標(biāo)注出列表流的高度，再以圖標(biāo)為參考標(biāo)注出分割線到圖標(biāo)的距離。
當(dāng)我們自己在畫分割線時，建議分割線使用1px的高度，與開發(fā)人員對接時說明在@1、@2、@3的情況下，分割線都是1px。
2. feed流
feed流也是使用分割線的?？?，比如：澎湃新聞、簡書。
我們需要標(biāo)注出分割線到內(nèi)容的間距，再標(biāo)注出分割線到文字的間距，文字的標(biāo)注需要注意一點，就是文字本身有默認(rèn)行高。所以我們不能完全標(biāo)注到文字本身，而要留出幾個像素作為文字自身的行高。
3. 內(nèi)容塊之間
內(nèi)容塊之間有時候也會用到分割線，比如：開眼、嗶哩嗶哩。
我們需要標(biāo)注分割線到內(nèi)容的間距，再標(biāo)注出上間距和下間距。
但這里有一點需要注意的是：在畫分割線時會出現(xiàn)遺漏的問題。我們經(jīng)常會用到sketch來畫，但是由于sketch的默認(rèn)屬性，線條的線型是居中（center）的，這會導(dǎo)致我們畫的線條在視覺上是對齊像素的，但是在數(shù)據(jù)上會顯示0.5個像素。
當(dāng)多個元素之間計算間距時會導(dǎo)致數(shù)據(jù)上顯示的和實際畫面中的圖形不一致。這時就需要我們使用矩形工具來畫一個1像素寬的線條，這樣就可以既保證視覺上對齊，數(shù)據(jù)中也是整數(shù)。
一、文字行高適配
有部分設(shè)計設(shè)計師用原始方法來標(biāo)注文字：如下圖，標(biāo)注從上面文字“科”的末端開始測量到下面灰色文字的最高點“2”結(jié)束。在這種情況下，開發(fā)人員還原出來的效果和設(shè)計稿有一定的差距，需要調(diào)試很多遍才能達(dá)到想要的效果。
后來，設(shè)計師逐漸使用了sketch文字默認(rèn)的行高導(dǎo)出標(biāo)注文件，但在驗收開發(fā)版本還原度的時候，還是發(fā)現(xiàn)與設(shè)計稿標(biāo)注的間距不一樣。
這是為什么呢？因為不同的字形在高度上都會產(chǎn)生微小的差異，無論是使用原始方法或是使用sketch默認(rèn)行高去標(biāo)注文字，它都與前端在編輯文字的軟件里的字體默認(rèn)行高不一致。
比如，iOS的Xcode以及Android文字編輯器對應(yīng)下的行高效果。
由上圖可以發(fā)現(xiàn)：開發(fā)人員在寫字體的時候會使用一個類似textview的，我們可以理解成一個文本框，字其實不是頂滿這個框的，是有一定留白的。
所以，我們可以把行高可以理解為一個包裹在字體外面的無形的盒子，在標(biāo)注文字的行高時，要把留白算進(jìn)去，以文本框（即默認(rèn)行高）的形式去標(biāo)注。
具體的配合開發(fā)人員還原文字間距的標(biāo)注方法，大致可以分為3種：
1. 安裝插件；
2. 手動修改文字行高；
3. 文字組件化；
1.安裝插件
比較偷懶的方式：在sketch裝個“antofixiostextlinehinugin.sketch”插件。
這個插件適用于蘋方和SF字體，點擊fix即可一鍵修復(fù)成xcode原生行高。雖然這類插件看著能一勞永逸，但目前市面上應(yīng)用較少，bug也比較多，單行文本基本可以還原，多行文本則基本不適用。（插件可在附件下載）
2.手動修改文字行高
最準(zhǔn)確的方式：根據(jù)前端編輯器默認(rèn)行高自行完美還原。
手動把文字行高與前端默認(rèn)行高修改成一致，從而給出準(zhǔn)確的文字間距。這種方式雖會花費不少時間，但也最精確，你可以據(jù)此設(shè)置出最美觀合理的間距，而不用擔(dān)心上線稿的還原度問題。
3.文字樣式
最便捷的方法：手動調(diào)整sketch里的字體的默認(rèn)行高并形成樣式。這樣規(guī)范好設(shè)計能更好的讓開發(fā)人員還原設(shè)計稿，也便于我們后期的頁面校對和調(diào)整。
