文章來源：一起設(shè)計(jì)UED???作者：一起設(shè)計(jì)UED

本文主要講解了：設(shè)計(jì)與開發(fā)對于間距理解的不同，以及如何標(biāo)注，才能獲得更高質(zhì)量的還原效果;

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

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

可以說，在每一位UI設(shè)計(jì)師的成長過程中，設(shè)計(jì)稿還原，是一個(gè)必定經(jīng)歷且難以解決的問題。

如何更好的實(shí)現(xiàn)設(shè)計(jì)還原度，減少重復(fù)工作呢？

不妨試試換個(gè)角度，學(xué)習(xí)用開發(fā)的思維來做設(shè)計(jì)。

整篇文章分為以下五個(gè)部分：

01?位置

“元素位置”的標(biāo)注是設(shè)計(jì)驗(yàn)收時(shí)與開發(fā)人員的必爭之地。

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

一、絕對位置與相對位置

我們常說的“位置”是代表元素在界面內(nèi)X軸與Y軸的坐標(biāo)，同一元素會(huì)因?yàn)樵诓煌臋C(jī)型中呈現(xiàn)出不同的位置，大致會(huì)分為兩種：1. 絕對位置；2. 相對位置。

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

1. 絕對位置

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

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

2. 相對位置

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

比如：支付寶的列表流。列表的間距固定，當(dāng)刪除一個(gè)列表時(shí)，下面的列表位置自動(dòng)上移。（如下圖）

二、位置標(biāo)注的注意點(diǎn)

在做位置標(biāo)注的時(shí)候，要有蓋樓思維。什么是蓋樓思維呢？

設(shè)計(jì)并列關(guān)系的模塊，即相似的“樓層”，元素以模塊的形式疊加成一棟樓。

在做標(biāo)注的時(shí)候，通過分析元素與元素之間的相關(guān)性作出標(biāo)注，標(biāo)注元素位于所在樓層的位置。它能同時(shí)適用在整個(gè)制作設(shè)計(jì)稿的過程中。

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

三、絕對位置與相對位置的標(biāo)注方法

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

絕對位置的標(biāo)注采用百分比標(biāo)注或固定位置標(biāo)注。

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

02?組件間距

常見的的設(shè)計(jì)標(biāo)注文件中，組件間距大致可以分為兩種：

1. 頁邊距

2.?內(nèi)容塊之間的間距；

一、頁邊距

指內(nèi)容到屏幕邊緣的距離，也叫安全距離。

同時(shí)，在36氪的界面中還可發(fā)現(xiàn)一個(gè)小細(xì)節(jié)：右側(cè)圖標(biāo)并沒有貼著安全區(qū)域。這是因?yàn)樵趫D標(biāo)尺寸較小的情況下，為了保證其易點(diǎn)擊性，會(huì)在其四周填入空白像素，使可點(diǎn)擊熱區(qū)面積大于圖標(biāo)的視覺尺寸。（如下圖）

在設(shè)計(jì)的過程中，我們應(yīng)該使用常用的頁邊距，如32px、30px、24px、20px。

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

二、內(nèi)容塊間距

主要分為兩種：塊外間距和塊內(nèi)間距。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、組件間距標(biāo)注的注意點(diǎn)

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

1.?定義最小單位網(wǎng)格，如4px、6px、8px等；

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

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

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

四、組件間距的標(biāo)注方法

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

進(jìn)行手動(dòng)標(biāo)注，需要與開發(fā)人員溝通標(biāo)注其關(guān)注的要點(diǎn)；設(shè)計(jì)師利用插件工具一鍵導(dǎo)出所有標(biāo)注，比如：藍(lán)湖；

03?圖標(biāo)分割線

一、圖標(biāo)

圖標(biāo)是設(shè)計(jì)中最常用的基礎(chǔ)元素，我們會(huì)在金剛區(qū)、tab欄、個(gè)人中心、導(dǎo)航欄等不同位置用到。

分析圖標(biāo)的間距標(biāo)注，我們會(huì)把所有圖標(biāo)簡化成為兩類：

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)尺寸，再針對不同布局方式來進(jìn)行間距的標(biāo)注。這樣我們就完成了有底版圖標(biāo)標(biāo)注，與開發(fā)人員對接的時(shí)候就能很好的說明清楚，減少不必要的溝通成本。

2.不規(guī)則圖標(biāo)

這類圖標(biāo)會(huì)出現(xiàn)在金剛區(qū)、列表流、導(dǎo)航欄、tab欄等位置，比如：得到、馬蜂窩等。

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

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

二、分割線

分割線作為頁面中的微小元素，我們很容易在設(shè)計(jì)中忽視它，因此，做好分割線的標(biāo)注是非常重要的。下面主要以3個(gè)主要場景來分點(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)我們自己在畫分割線時(shí)，建議分割線使用1px的高度，與開發(fā)人員對接時(shí)說明在@1、@2、@3的情況下，分割線都是1px。

2.feed流

feed流也是使用分割線的?？停热纾号炫刃侣?、簡書。

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

3.內(nèi)容塊之間

內(nèi)容塊之間有時(shí)候也會(huì)用到分割線，比如：開眼、嗶哩嗶哩。

我們需要標(biāo)注分割線到內(nèi)容的間距，再標(biāo)注出上間距和下間距。

但這里有一點(diǎn)需要注意的是：在畫分割線時(shí)會(huì)出現(xiàn)遺漏的問題。我們經(jīng)常會(huì)用到sketch來畫，但是由于sketch的默認(rèn)屬性，線條的線型是居中（center）的，這會(huì)導(dǎo)致我們畫的線條在視覺上是對齊像素的，但是在數(shù)據(jù)上會(huì)顯示0.5個(gè)像素。

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

04?文字

一、文字行高適配

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

后來，設(shè)計(jì)師逐漸使用了sketch文字默認(rèn)的行高導(dǎo)出標(biāo)注文件，但在驗(yàn)收開發(fā)版本還原度的時(shí)候，還是發(fā)現(xiàn)與設(shè)計(jì)稿標(biāo)注的間距不一樣。

這是為什么呢？因?yàn)椴煌淖中卧诟叨壬隙紩?huì)產(chǎn)生微小的差異，無論是使用原始方法或是使用sketch默認(rèn)行高去標(biāo)注文字，它都與前端在編輯文字的軟件里的字體默認(rèn)行高不一致。

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

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

所以，我們可以把行高可以理解為一個(gè)包裹在字體外面的無形的盒子，在標(biāo)注文字的行高時(shí)，要把留白算進(jìn)去，以文本框（即默認(rèn)行高）的形式去標(biāo)注。

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

1. 安裝插件；

2. 手動(dòng)修改文字行高；

3. 文字組件化；

1.安裝插件

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

這個(gè)插件適用于蘋方和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)心上線稿的還原度問題。

3.文字樣式

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

這時(shí)眼尖的朋友可能會(huì)發(fā)現(xiàn)，Android和iOS開發(fā)的文字編輯器默認(rèn)的行高也不一樣啊，難道我們要出2套設(shè)計(jì)標(biāo)注文件嗎？

雖然不可否認(rèn)的是，最理想狀態(tài)當(dāng)然是設(shè)計(jì)師出2套設(shè)計(jì)稿，但在職場打滾過的設(shè)計(jì)師都會(huì)知道，多數(shù)產(chǎn)品都是處于快速迭代的過程，出2套設(shè)計(jì)稿花費(fèi)的時(shí)間成本過高，并不符合實(shí)際情況。

對于這點(diǎn)，比較建議大家可以嘗試把ios和安卓都設(shè)置成一樣的行高，針對特殊頁面再單獨(dú)做標(biāo)注調(diào)整?？偠灾?，具體使用哪種方法去做文字的標(biāo)注，要根據(jù)自己的項(xiàng)目具體情況具體分析。

二、文字彈性適配

文字彈性適配一般涉及的是寬度適配。

寬度適配普遍使用的是間距適配，即定好左右頁邊距，中間彈性拉伸。這種方式可以做到較好的適配，也是做快速常用的適配方法。

05?投影

陰影作為一個(gè)重要的視覺元素，讓主元素和其他元素從背景中“彈出”并擁有深度，更好地將信息層級呈現(xiàn)給用戶。（當(dāng)然，我們今天的主要目標(biāo)并不是教大家如何制作陰影，而是關(guān)于彌散陰影如何更好的與開發(fā)人員對接，還原給用戶更好的體驗(yàn)）

大家做的彌散陰影在與開發(fā)人員對接的時(shí)候是否遇到過以上痛點(diǎn)：

卡片位置偏移、文案對不齊、錯(cuò)位、彌散投影的顏色過淺或過深等等一系列問題？

面對這些實(shí)現(xiàn)的痛點(diǎn)，以及與開發(fā)人員溝通時(shí)出現(xiàn)的各種問題，我們又該如何解決呢？

結(jié)合自己實(shí)際的工作經(jīng)驗(yàn)和與開發(fā)人員溝通的心得，實(shí)現(xiàn)彌散投影的方法，可以通過兩個(gè)方法實(shí)現(xiàn)：

1. 切圖對接開發(fā)人員；

2. css代碼實(shí)現(xiàn)。

1.用切圖與開發(fā)人員對接

這個(gè)時(shí)候需要設(shè)計(jì)師和開發(fā)人員都比較細(xì)心，因?yàn)?b>切圖也有一些弊端，因?yàn)槊總€(gè)卡片都使用切圖的話，會(huì)使開發(fā)的包變大，可能會(huì)出現(xiàn)加載慢，閃退等情況，這些體驗(yàn)也是很糟糕了。所以在這個(gè)過程中的一些問題務(wù)必要提前與開發(fā)人員及項(xiàng)目人員溝通好。

2.前端會(huì)首選用css代碼實(shí)現(xiàn)彌散陰影效果

常規(guī)情況下，效果都比較好，但是也會(huì)遇到一些遇到異常情況，比如不規(guī)則形狀，通常用代碼也比較復(fù)雜，這個(gè)時(shí)候需要提前與開發(fā)人員溝通切圖情況，避免后期一些問題。

代碼實(shí)現(xiàn)教程鏈接：http://www.gaoquanquan.com/archives/162

總而言之，在做設(shè)計(jì)的過程中，我們需要更好地理解下游的工作，達(dá)到一個(gè)高效的溝通。不管是哪一種方法，沒有對錯(cuò)之分，關(guān)鍵是要懂得“權(quán)衡利弊”，提前與開發(fā)人員溝通到位。只要是適合自己公司項(xiàng)目且能夠高效還原設(shè)計(jì)稿的方法，都是值得一用的。

06?總結(jié)

為了更好的解決設(shè)計(jì)還原度問題，需要注意以下幾點(diǎn)：

1、元素位置

使用蓋樓思維進(jìn)行設(shè)計(jì)并模塊化標(biāo)注設(shè)計(jì)稿，在輸出明確清晰的標(biāo)注的同時(shí)單獨(dú)標(biāo)注出易引發(fā)歧義的元素，以減少還原度誤差；

2、組件間距

在設(shè)計(jì)開始前確定最小單位網(wǎng)格，并使用倍數(shù)原則確定常用間距，保證適配時(shí)各元素間的準(zhǔn)確性，減少開發(fā)復(fù)雜度；

3、圖標(biāo)

根據(jù)圖標(biāo)盒子的尺寸進(jìn)行切圖與標(biāo)注，以便后期開發(fā)；

4、分割線

標(biāo)注中需要說明分割線在不同機(jī)型下始終保持1像素高度；

5、文字

由于開發(fā)環(huán)境下文字上下是有padding高度的，所以設(shè)計(jì)時(shí)需要手動(dòng)修改行高為開發(fā)環(huán)境下的默認(rèn)行高；適配多行文字時(shí)，確定好文字左右頁間距，內(nèi)容部分彈性拉伸即可；

6、投影

常規(guī)投影與彌散陰影推薦使用css代碼完美實(shí)現(xiàn)；特殊情況下還需提前與開發(fā)人員溝通權(quán)衡各種方式的利弊，選擇適合項(xiàng)目產(chǎn)品的實(shí)現(xiàn)方式。

優(yōu)秀的設(shè)計(jì)離不開開發(fā)人員的落地支持。作為設(shè)計(jì)師，協(xié)同開發(fā)人員完成設(shè)計(jì)落地也是工作中重要的一環(huán)。做好以上幾點(diǎn)，站在開發(fā)人員的角度為他們“多想一步”，高質(zhì)量的設(shè)計(jì)還原指日可待。

最后獻(xiàn)上我們團(tuán)隊(duì)研究組成員的集體照，不負(fù)我們2個(gè)月多的辛苦研究。

如果你覺得這篇文章有所幫助

一定記得分享給身邊的朋友哈~

哦，對了

別忘了把「不錯(cuò)研究室」公眾號設(shè)為星標(biāo)哦

每一篇，都不錯(cuò)。

經(jīng)驗(yàn) | 面試了50多位UI設(shè)計(jì)師，我總結(jié)了這些求職技巧

UI設(shè)計(jì)師面試套路詳解

關(guān)于不錯(cuò)研究室

一個(gè)能看?直播，能看?干貨的組織。一個(gè)定期推薦不錯(cuò)的全球設(shè)計(jì)師?行業(yè)大咖進(jìn)行直播分享的圈子。一個(gè)每天分享設(shè)計(jì)干貨的自媒體。每一篇都很不錯(cuò)。