以前，設(shè)計(jì)師們都需要去跟開(kāi)發(fā)溝通并手動(dòng)標(biāo)注所有文件，現(xiàn)在，有了像 Zeplin 和 Abstract 這樣實(shí)用的標(biāo)注工具，設(shè)計(jì)師幾乎不需要花太多的時(shí)間在對(duì)接上。

但是，還是避免不了很多東西會(huì)在對(duì)接過(guò)程中出現(xiàn)問(wèn)題。比如，這個(gè)按鈕是固定大小的還是彈性大??？是保持底部邊距固定還是在一個(gè)較大的對(duì)象內(nèi)居中？讓我們來(lái)看下約束布局在對(duì)接過(guò)程中的使用方法。

約束布局是定義控制應(yīng)用中內(nèi)容的規(guī)則。這些規(guī)則通過(guò)使用統(tǒng)一的元素和間距，保持跨平臺(tái)、跨環(huán)境和跨屏幕大小的一致性。通常應(yīng)用在 iOS 和 Android 中。

彩云注：這里想跟大家科普下相對(duì)布局和約束布局的區(qū)別。相對(duì)布局是通過(guò)相對(duì)定位的方式讓控件出現(xiàn)在布局任意位置，相對(duì)布局因?yàn)檫壿嬙颍瑢蛹?jí)較多；而約束布局能夠有效解決布局過(guò)多問(wèn)題，讓頁(yè)面更加扁平化，布局之間相對(duì)位置也更好控制。約束布局也是繼相對(duì)布局后，谷歌官方針對(duì)相對(duì)布局問(wèn)題給出的一個(gè)更優(yōu)解決方案，意在將來(lái)替代掉相對(duì)布局。當(dāng)然，這里不再過(guò)多闡述，感興趣的可以自行去了解下，可能偏開(kāi)發(fā)方面會(huì)更多一些。

約束條件

如果在 sketch 文件中已經(jīng)設(shè)計(jì)布局好了所有元素，就可以開(kāi)始了！

1. 基礎(chǔ)單位

8×8

首先從定義基本單位開(kāi)始，每個(gè)度量值都是其倍數(shù)。我建議使用偶數(shù) 8 來(lái)調(diào)整大小和間距，因?yàn)檫@樣可以方便且一致地適配各種設(shè)備。

• 8 更容易整除！10/4=2.5 vs 8/4=2
• 大多數(shù)流行的屏幕尺寸都可以被 8 整除，這樣更容易適配（與 6 或 10 相比）
• 分辨率為 1.5 倍的設(shè)備很難清晰地顯示像素為奇數(shù)的，若按 1.5 倍縮放 5 個(gè)像素就會(huì)導(dǎo)致半像素偏移。

在 Sketch 中選擇首選項(xiàng)>畫(huà)布，將“通過(guò) Shift+方向鍵調(diào)整移動(dòng)對(duì)象中的 10px 改成 8px”，這樣會(huì)解決很多問(wèn)題！

2. 間隔單位

間隔單位是常用間距的視覺(jué)表達(dá)。例如，一個(gè)“2 間隔單元”是 16 pt/dp，因?yàn)?2×8=16。這些符號(hào)應(yīng)該在設(shè)計(jì)中使用，別名應(yīng)該被標(biāo)注成代碼，以便在和開(kāi)發(fā)對(duì)接時(shí)使用相同的語(yǔ)言。

垂直和水平間隔

在項(xiàng)目很趕的時(shí)候，你可能沒(méi)有足夠的時(shí)間手動(dòng)做到完美像素對(duì)齊。通過(guò)使用這些通用單位來(lái)標(biāo)識(shí)，而不是標(biāo)注工具自動(dòng)生成的標(biāo)注像素，它可以告訴開(kāi)發(fā)實(shí)際間距。數(shù)字別名與“Shift +方向鍵”移動(dòng)對(duì)象的次數(shù)相匹配。

響應(yīng)式按鈕：iPhone8、三星 Galaxy S8、iPhoneSE

間隔大小永遠(yuǎn)不會(huì)改變。如果是水平間隔，則垂直高度被鎖定，反之亦然。這意味著在不同的手機(jī)寬度上，組件的尺寸會(huì)發(fā)生變化，但用于創(chuàng)建它的邊距的間距將保持不變。

對(duì)齊指標(biāo)

有時(shí)元素在間隔之間對(duì)齊。間隔之間對(duì)齊的主要方法是中心對(duì)齊和底部對(duì)齊。

垂直居、中水平居中和居中對(duì)齊

中心對(duì)齊是指你想要一個(gè)對(duì)象或一組對(duì)象向中間集中對(duì)齊。對(duì)象可以水平居中，垂直居中，或者向中間集中對(duì)齊。

底部對(duì)齊

底部對(duì)齊是指希望對(duì)象與其中一個(gè)對(duì)象的底部對(duì)齊。當(dāng)有兩種不同的文本大小并且想要在基線處對(duì)齊時(shí)，底部對(duì)齊就是比較常見(jiàn)使用方法。

1. 點(diǎn)擊對(duì)象

48 x 48

在手機(jī)上，最小點(diǎn)擊對(duì)象尺寸為 48x48dp /pt。這尺寸來(lái)自于谷歌設(shè)計(jì)指南，物理尺寸約等于 12 英寸。(HIG 建議使用 44x44pt，所以我選擇更大的)。將元素放在一起時(shí)考慮點(diǎn)擊對(duì)象大小。你也可以使用點(diǎn)擊對(duì)象符號(hào)來(lái)表示元素的哪些部分是可點(diǎn)擊的。

組件布局

讓我們通過(guò)一些組件示例切換來(lái)測(cè)試所有約束的使用：

組件示例：列表項(xiàng)、按鈕和復(fù)選框

2. 基本尺寸

組件的基本尺寸，它的最小高度和寬度，應(yīng)該基于最小點(diǎn)擊對(duì)象的尺寸。視覺(jué)上小于點(diǎn)擊對(duì)象的組件仍應(yīng)由相同的最小點(diǎn)擊對(duì)象大小觸發(fā)。這意味著，如果用戶在復(fù)選框之外觸摸了一點(diǎn)，也會(huì)承認(rèn)他們點(diǎn)擊了復(fù)選框。

組件相對(duì)于最小點(diǎn)擊對(duì)象的視覺(jué)尺寸：精確、高于和低于。

3. 內(nèi)邊距

使用間隔表示組件內(nèi)的邊距。

長(zhǎng)字符串的水平邊距

你可以通過(guò)設(shè)置水平邊距來(lái)限制元素的水平位置，比如文本框。當(dāng)文本太長(zhǎng)時(shí)，你需要指出文本是否應(yīng)該調(diào)整大小、換行和/或截?cái)?。換行到兩行比截?cái)嘁恍懈茫?

動(dòng)態(tài)類型的水平和垂直邊距

垂直填充最常用于動(dòng)態(tài)適配。盡管組件在當(dāng)前手機(jī)尺寸、當(dāng)前語(yǔ)言和當(dāng)前字體大小下看起來(lái)可能很好——但所有這些因素都是最壞情況下的變量。當(dāng)類型增加時(shí)，組件將變得比它的基本大小更大，并且你希望確保它仍然有垂直填充。

4. 基線對(duì)齊

使用居中和基線標(biāo)記來(lái)示意，如何讓那些沒(méi)有接觸到所有邊的間隔元素表現(xiàn)出來(lái)。這部分主要是方便給開(kāi)發(fā)理解的。

垂直居中的列表項(xiàng)文本、底部對(duì)齊的價(jià)格和居中的復(fù)選框

界面布局

現(xiàn)在你已經(jīng)布局好了一個(gè)頁(yè)面，使用與在組件中相同的方式使用間隔、點(diǎn)擊目標(biāo)和對(duì)齊符號(hào)。

插圖來(lái)源于 Meg

……瞧!這就是移動(dòng)端的響應(yīng)式布局!

提示：為你在界面布局中引用的組件創(chuàng)建單獨(dú)的 symbol 畫(huà)板。在組件中，將所有組件規(guī)范包含在一個(gè)文件夾中，該文件夾可以輕松打開(kāi)和關(guān)閉。沒(méi)有什么比同時(shí)標(biāo)記組件和界面布局更好了。

總結(jié)

即使是一個(gè)精心制作的交接文件也不能取代你與開(kāi)發(fā)之間良好的語(yǔ)言交流。這應(yīng)該與開(kāi)始、移交和書(shū)面文檔一起使用。你越讓開(kāi)發(fā)了解你的設(shè)計(jì)，還原的結(jié)果就越接近實(shí)際發(fā)布的產(chǎn)品。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：優(yōu)設(shè)  作者：彩云譯設(shè)計(jì)

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)