过去，设计师需要与开发者沟通，手动标注所有文件。现在，有了Zeplin和Abstract这样实用的标注工具，设计者几乎不需要花太多时间在对接上。不过，很多东西在对接的过程中还是难免会出现问题。例如，这个按钮是固定尺寸还是灵活尺寸？是保持底部边距固定还是在较大的对象中居中？让我们看看在对接过程中如何使用约束布局。约束布局是控制应用程序内容的规则定义。这些规则通过使用统一的元素和间距来保持跨平台、环境和屏幕尺寸的一致性。通常用于iOS和Android。彩云注：这里要跟大家分享一下相对布局和约束布局的区别。相对布局允许控件通过相对定位出现在布局的任意位置。相对布局由于逻辑原因层数较多；而约束布局可以有效解决布局过多的问题，让页面更加扁平，布局之间的相对位置也更好。好控制。约束布局也是相对布局后谷歌官方给出的相对布局问题的较好解决方案，意在在未来替代相对布局。当然这里就不过多阐述了，有兴趣的可以自行了解，可能还有更多的开发方面。约束如果您已经设计并布置了草图文件中的所有元素，您就可以开始了！1.基本单位8×8从定义基本单位开始，每个测量值都是它的倍数。我建议使用偶数8来调整大小和间距，因为这样可以轻松且一致地适应不同的设备。8更容易整除！10/4=2.5vs8/4=2大多数流行的屏幕尺寸都可以被8整除，这使得它更容易适应（与6或10相比）1.5倍分辨率的设备很难清楚地表明像素是奇数，按比例缩放5个像素乘以1.5倍将导致半像素偏移。在Sketch中选择Preferences>Canvas，将“Adjustthe10pxinthemovingobjectinmovingobjectto8pxbyShift+arrowkeys”，就会解决很多问题！2.间隔单位间隔单位是常用间距的直观表示。例如，“2-spacedcell”是16pt/dp，因为2×8=16。这些符号应该在设计中使用，别名应该标记为代码，以便在与开发对接时使用相同的语言。垂直和水平间距当项目很匆忙时，您可能没有足够的时间手动进行像素完美对齐。通过使用这些常用单位进行标注，而不是标注工具自动生成的标注像素，它告诉开发人员实际的间距。数字别名与“Shift+箭头键”移动对象的次数相匹配。响应式按钮：iPhone8、三星GalaxyS8、iPhoneSE间隙大小永远不会改变。如果是水平区间，则锁定垂直高度，反之亦然。这意味着在不同的电话宽度上，组件的大小会发生变化，但用于创建其边距的间距将保持不变。对齐指示符有时元素在间隙之间对齐。区间之间的对齐方式主要有居中对齐和底部对齐。垂直居中、中间水平居中和居中对齐居中对齐是指您希望一个对象或一组对象居中对齐。对象可以水平居中、垂直居中或向中心居中。底部对齐底部对齐意味着您希望对象与其中一个对象的底部对齐。当您有两个不同的文本大小并希望在基线处对齐时，更常使用底部对齐。1.点击对象48x48在移动设备上，最小点击对象大小为48x48dp/pt。尺寸取自谷歌设计指南，大致相当于12英寸的物理尺寸。（HIG建议使用44x44pt，所以我选择了更大的尺寸）。将元素放在一起时请考虑可点击对象的大小。您还可以使用可点击对象表示法来指示元素的哪些部分是可点击的。组件布局让我们切换一些组件示例来测试所有约束的使用：组件示例：列表项、按钮和复选框2.基本尺寸组件的基本尺寸，其最小高度和宽度，应基于最小的可点击对象。视觉上小于点击对象的组件仍应由相同的最小点击对象大小触发。这意味着如果用户触摸了复选框外的一点，他们也会被识别为点击了复选框。组件相对于最小可点击对象的视觉尺寸：准确、高于和低于。3.填充使用间距来表示组件内的边距。长字符串的水平边距您可以通过设置水平边距来限制文本框等元素的水平位置。当文本太长时，您需要指明文本是否应该调整大小、换行和/或截断。换成两行比截断一行好！动态类型水平和垂直边距垂直填充最常用于动态适合。虽然一个组件在当前手机大小、当前语言和当前字体大小下可能看起来不错——所有这些因素都是最坏情况下的变量。当类型增加时，组件将变得比其基本尺寸大，并且您要确保它仍然具有垂直填充。4.基线对齐使用居中和基线标记来显示如何使不接触所有边的间隔元素出现。这部分主要是为了方便开发者理解。垂直居中的列表项文本、底部对齐的价格和居中的复选框界面布局现在您已经布置了页面，可以像在组件中一样使用间距、点击目标和对齐符号。梅格的插图......瞧！这就是移动响应式布局！提示：为您在界面布局中引用的组件创建单独的符号画板。在Components中，将所有组件规格包含在一个可以轻松打开和关闭的文件夹中。没有什么比同时标记组件和界面布局更好的了。总结即使精心制作的移交文档也不能替代您与开发人员之间良好的口头交流。这应该与开始、移交和书面文件一起使用。您让开发人员了解您的设计越多，还原就越接近实际发布的产品。
