Lyft设计总监：移动端响应式设计的高效方法

以前，规划师们都需求去跟开发交流并手动标示一切文件，现在，有了像 Zeplin 和 Abstract 这样实用的标示东西，规划师几乎不需求花太多的时间在对接上。

可是，仍是避免不了许多东西会在对接过程中出现问题。比方，这个按钮是固定巨细的仍是弹性巨细？是坚持底部边距固定仍是在一个较大的目标内居中？让我们来看下束缚布局在对接过程中的运用办法。

束缚布局是界说操控应用中内容的规矩。这些规矩经过运用一致的元素和距离，坚持跨渠道、跨环境和跨屏幕巨细的一致性。通常应用在 iOS 和 Android 中。

彩云注：这儿想跟我们科普下相对布局和束缚布局的差异。相对布局是经过相对定位的办法让控件出现在布局恣意方位，相对布局由于逻辑原因，层级较多；而束缚布局能够有效处理布局过多问题，让页面愈加扁平化，布局之间相对方位也更好操控。束缚布局也是继相对布局后，谷歌官方针对相对布局问题给出的一个更优处理方案，意在将来代替掉相对布局。当然，这儿不再过多阐述，感兴趣的能够自行去了解下，或许偏开发方面会更多一些。

束缚条件

如果在 sketch 文件中已经规划布局好了一切元素，就能够开端了！

1. 基础单位

88

首先从界说基本单位开端，每个度量值都是其倍数。我建议运用偶数 8 来调整巨细和距离，由于这样能够便利且一致地适配各种设备。

• 8 更简单整除！10/4=2.5 vs 8/4=2
• 大多数盛行的屏幕尺度都能够被 8 整除，这样更简单适配（与 6 或 10 相比）
• 分辨率为 1.5 倍的设备很难明晰地显示像素为奇数的，若按 1.5 倍缩放 5 个像素就会导致半像素偏移。

在 Sketch 中挑选首选项>画布，将“经过 Shift+方向键调整移动目标中的 10px 改成 8px”，这样会处理许多问题！

2. 距离单位

距离单位是常用距离的视觉表达。例如，一个“2 距离单元”是 16 pt/dp，由于 28=16。这些符号应该在规划中运用，别号应该被标示成代码，以便在和开发对接时运用相同的言语。

笔直和水平距离

在项目很赶的时分，你或许没有满足的时间手动做到完美像素对齐。经过运用这些通用单位来标识，而不是标示东西主动生成的标示像素，它能够告诉开发实际距离。数字别号与“Shift +方向键”移动目标的次数相匹配。

呼应式按钮：iPhone8、三星 Galaxy S8、iPhoneSE

距离巨细永远不会改动。如果是水平距离，则笔直高度被确定，反之亦然。这意味着在不同的手机宽度上，组件的尺度会发生变化，但用于创建它的边距的距离将坚持不变。

对齐目标

有时元素在距离之间对齐。距离之间对齐的首要办法是中心对齐和底部对齐。

笔直居、中水平居中和居中对齐

中心对齐是指你想要一个目标或一组目标向中心会集对齐。目标能够水平居中，笔直居中，或者向中心会集对齐。

底部对齐

底部对齐是指期望目标与其中一个目标的底部对齐。当有两种不同的文本巨细并且想要在基线处对齐时，底部对齐便是比较常见运用办法。

1. 点击目标

48 x 48

在手机上，最小点击目标尺度为 48x48dp /pt。这尺度来自于谷歌规划攻略，物理尺度约等于 12 英寸。(HIG 建议运用 44x44pt，所以我挑选更大的)。将元素放在一同时考虑点击目标巨细。你也能够运用点击目标符号来表明元素的哪些部分是可点击的。

组件布局

让我们经过一些组件示例切换来测验一切束缚的运用：

组件示例：列表项、按钮和复选框

2. 基本尺度

组件的基本尺度，它的最小高度和宽度，应该基于最小点击目标的尺度。视觉上小于点击目标的组件仍应由相同的最小点击目标巨细触发。这意味着，如果用户在复选框之外触摸了一点，也会承认他们点击了复选框。

组件相对于最小点击目标的视觉尺度：准确、高于和低于。

3. 内边距

运用距离表明组件内的边距。

长字符串的水平边距

你能够经过设置水平边距来约束元素的水平方位，比方文本框。当文本太长时，你需求指出文本是否应该调整巨细、换行和/或截断。换行到两行比截断一行更好！

动态类型的水平缓笔直边距

笔直填充最常用于动态适配。尽管组件在当前手机尺度、当前言语和当前字体巨细下看起来或许很好——但一切这些因素都是最坏情况下的变量。当类型添加时，组件将变得比它的基本巨细更大，并且你期望确保它仍然有笔直填充。

4. 基线对齐

运用居中和基线符号来暗示，怎么让那些没有接触到一切边的距离元素表现出来。这部分首要是便利给开发了解的。

笔直居中的列表项文本、底部对齐的价格和居中的复选框

界面布局

现在你已经布局好了一个页面，运用与在组件中相同的办法运用距离、点击目标和对齐符号。

插图来源于 Meg

……瞧!这便是移动端的呼应式布局!

提示：为你在界面布局中引用的组件创建单独的 symbol 画板。在组件中，将一切组件规范包含在一个文件夹中，该文件夹能够轻松翻开和封闭。没有什么比一同符号组件和界面布局更好了。

总结

即使是一个精心制作的交接文件也不能取代你与开发之间杰出的言语交流。这应该与开端、移送和书面文档一同运用。你越让开发了解你的规划，还原的结果就越接近实际发布的产品。

欢迎重视作者的微信大众号：「彩云译规划」