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