2021-7-14 資深UI設計者
以前，設計師們都需要去跟開發(fā)溝通并手動標注所有文件，現(xiàn)在，有了像 Zeplin 和 Abstract 這樣實用的標注工具，設計師幾乎不需要花太多的時間在對接上。
但是，還是避免不了很多東西會在對接過程中出現(xiàn)問題。比如，這個按鈕是固定大小的還是彈性大??？是保持底部邊距固定還是在一個較大的對象內(nèi)居中？讓我們來看下約束布局在對接過程中的使用方法。
約束布局是定義控制應用中內(nèi)容的規(guī)則。這些規(guī)則通過使用統(tǒng)一的元素和間距，保持跨平臺、跨環(huán)境和跨屏幕大小的一致性。通常應用在 iOS 和 Android 中。
彩云注：這里想跟大家科普下相對布局和約束布局的區(qū)別。相對布局是通過相對定位的方式讓控件出現(xiàn)在布局任意位置，相對布局因為邏輯原因，層級較多；而約束布局能夠有效解決布局過多問題，讓頁面更加扁平化，布局之間相對位置也更好控制。約束布局也是繼相對布局后，谷歌官方針對相對布局問題給出的一個更優(yōu)解決方案，意在將來替代掉相對布局。當然，這里不再過多闡述，感興趣的可以自行去了解下，可能偏開發(fā)方面會更多一些。
如果在 sketch 文件中已經(jīng)設計布局好了所有元素，就可以開始了！
1. 基礎單位
8×8
首先從定義基本單位開始，每個度量值都是其倍數(shù)。我建議使用偶數(shù) 8 來調(diào)整大小和間距，因為這樣可以方便且一致地適配各種設備。
在 Sketch 中選擇首選項>畫布，將“通過 Shift+方向鍵調(diào)整移動對象中的 10px 改成 8px”，這樣會解決很多問題！
2. 間隔單位
間隔單位是常用間距的視覺表達。例如，一個“2 間隔單元”是 16 pt/dp，因為 2×8=16。這些符號應該在設計中使用，別名應該被標注成代碼，以便在和開發(fā)對接時使用相同的語言。
垂直和水平間隔
在項目很趕的時候，你可能沒有足夠的時間手動做到完美像素對齊。通過使用這些通用單位來標識，而不是標注工具自動生成的標注像素，它可以告訴開發(fā)實際間距。數(shù)字別名與“Shift +方向鍵”移動對象的次數(shù)相匹配。
響應式按鈕：iPhone8、三星 Galaxy S8、iPhoneSE
間隔大小永遠不會改變。如果是水平間隔，則垂直高度被鎖定，反之亦然。這意味著在不同的手機寬度上，組件的尺寸會發(fā)生變化，但用于創(chuàng)建它的邊距的間距將保持不變。
有時元素在間隔之間對齊。間隔之間對齊的主要方法是中心對齊和底部對齊。
垂直居、中水平居中和居中對齊
中心對齊是指你想要一個對象或一組對象向中間集中對齊。對象可以水平居中，垂直居中，或者向中間集中對齊。
底部對齊
底部對齊是指希望對象與其中一個對象的底部對齊。當有兩種不同的文本大小并且想要在基線處對齊時，底部對齊就是比較常見使用方法。
1. 點擊對象
48 x 48
在手機上，最小點擊對象尺寸為 48x48dp /pt。這尺寸來自于谷歌設計指南，物理尺寸約等于 12 英寸。(HIG 建議使用 44x44pt，所以我選擇更大的)。將元素放在一起時考慮點擊對象大小。你也可以使用點擊對象符號來表示元素的哪些部分是可點擊的。
讓我們通過一些組件示例切換來測試所有約束的使用：
組件示例：列表項、按鈕和復選框
2. 基本尺寸
組件的基本尺寸，它的最小高度和寬度，應該基于最小點擊對象的尺寸。視覺上小于點擊對象的組件仍應由相同的最小點擊對象大小觸發(fā)。這意味著，如果用戶在復選框之外觸摸了一點，也會承認他們點擊了復選框。
組件相對于最小點擊對象的視覺尺寸：精確、高于和低于。
3. 內(nèi)邊距
使用間隔表示組件內(nèi)的邊距。
長字符串的水平邊距
你可以通過設置水平邊距來限制元素的水平位置，比如文本框。當文本太長時，你需要指出文本是否應該調(diào)整大小、換行和/或截斷。換行到兩行比截斷一行更好！
動態(tài)類型的水平和垂直邊距
垂直填充最常用于動態(tài)適配。盡管組件在當前手機尺寸、當前語言和當前字體大小下看起來可能很好——但所有這些因素都是最壞情況下的變量。當類型增加時，組件將變得比它的基本大小更大，并且你希望確保它仍然有垂直填充。
4. 基線對齊
使用居中和基線標記來示意，如何讓那些沒有接觸到所有邊的間隔元素表現(xiàn)出來。這部分主要是方便給開發(fā)理解的。
垂直居中的列表項文本、底部對齊的價格和居中的復選框
現(xiàn)在你已經(jīng)布局好了一個頁面，使用與在組件中相同的方式使用間隔、點擊目標和對齊符號。
插圖來源于 Meg
……瞧!這就是移動端的響應式布局!
提示：為你在界面布局中引用的組件創(chuàng)建單獨的 symbol 畫板。在組件中，將所有組件規(guī)范包含在一個文件夾中，該文件夾可以輕松打開和關閉。沒有什么比同時標記組件和界面布局更好了。
即使是一個精心制作的交接文件也不能取代你與開發(fā)之間良好的語言交流。這應該與開始、移交和書面文檔一起使用。你越讓開發(fā)了解你的設計，還原的結(jié)果就越接近實際發(fā)布的產(chǎn)品。
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
文章來源：優(yōu)設 作者：彩云譯設計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務