Lyft设计总监：行动端响应式网页设计的高效方法。

如果你听说过台湾省的优步，Lyft可能对你来说很陌生，但他是美国拼车公司的第二名。该公司在商业模式创新和设计方面在市场上享有良好的声誉。今天，我们想和你分享Lyft的移动网页设计理念。

曾经，设计师必须与开发人员沟通，手动标记所有文件。现在有了Zeplin和Abstract这样的实用标记工具，设计师几乎不需要花太多时间在沟通上。但是很多东西在交流的过程中难免会出现问题。比如这个按钮是固定的还是活动的？保持下边距固定还是在一个较大的对象内建？我们来看看有限版面在传播过程中的运用。

布局是定义应用程序内容的规则。这些规则通过使用统一的元素和间距来保持跨平台、环境和屏幕的一致性。通常在iOS和Android中使用。

注:我想告诉你科普下相对布局和限制布局的区别。相对布局是通过相对定位使控件出现在布局的任意位置。由于逻辑原因，相对布局有许多层次。限制布局可以有效解决布局过多的问题，使页面更加扁平，更好的控制布局之间的相对位置。

布局限制也是谷歌官方在相对布局之后，对相对布局问题给出的一个比较好的解决方案，意在未来取代相对布局。当然，这里我就不细说了。有兴趣的可以自己去了解一下，可能会有更多面向发展的方面。

约束条件
如果草图文件中的所有元素都已经设计并布局好了，就可以开始了！

1.基本单位

8X8
首先从定义基本单位开始，每个测量值都是它的倍数。我建议用偶数8来调整大小和间距，因为:

8更可分！10/4=2.5 vs 8/4=2大多数流行的屏幕尺寸都能被8整除，这样更容易符合屏幕比例(相比于6或10)。1.5倍分辨率的设备很难清晰显示奇数像素。将5个像素缩放1.5倍将导致半个像素偏移。

在草图>中选择首选项:画布，will & ldquo通过Shift+箭头键将移动对象中的10px调整为8px。这样会解决很多问题！

2.间隔单位

间隔单位是常用间距的视觉表达。例如，一个“2 间隔单元”是 16 pt/dp，因为 2×8=16。这些符号应该在设计中使用，别名应该被标注成代码，以便在和开发对接时使用相同的语言。

垂直和水平间隔音程的单位是常见音程的直观表达。比如a & ldquo2区间单位& rdquo16 pt/dp，因为2 & times8=16。这些符号要在设计中使用，别名要标记为代码，这样在与开发接口时就可以使用相同的语言。

垂直和水平间距

当项目时间有限时，没有足够的时间来手动实现完美的像素对齐。通过使用这些通用单位来标识，而不是标注工具自动生成的标注像素，它可以告诉开发者实际的间距。数字别名和& ldquoshift+箭头键& rdquo移动对象的次数匹配。

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

响应按钮:iPhone8、三星Galaxy S8、iPhoneSE

间隔永远不会变。如果是水平区间，则锁定垂直高度，反之亦然。这意味着在不同的手机宽度上，组件的大小会改变，但用于创建组件的边距将保持不变。

对齐指数

有时元素在间隔之间对齐。间隔之间对齐的主要方法是中心对齐和底部对齐。

垂直居、中水平居中和居中对齐有时元素在区间之间对齐。间距对齐的主要方法是居中对齐和底部对齐。

垂直、水平和居中对齐

中心对齐是指你想要一个对象或一组对象向中间集中对齐。对象可以水平居中，垂直居中，或者向中间集中对齐。

底部对齐居中对齐意味着您希望一个对象或一组对象居中对齐。对象可以水平居中、垂直居中或居中对齐。

底部对齐

底部对齐意味着您希望对象与其中一个对象的底部对齐。当有两种不同的文本大小，并且您希望它们在基线上对齐时，底部对齐是一种常用的方法。

1.单击该对象

在手机上，最小点击对象尺寸为 48x48dp /pt。这尺寸来自於谷歌设计指南，物理尺寸约等於 12 英寸。(HIG 建议使用 44x44pt，所以我选择更大的)。将元素放在一起时考虑点击对象大小。你也可以使用点击对象符号来表示元素的哪些部分是可点击的。
在手机上，最小点击对象大小为48x48dp /pt。这个尺寸来自谷歌设计指南，物理尺寸大约是12英寸。(HIG建议使用44x44pt，所以我选择了一个更大的)。将元素放在一起时，请考虑click对象的大小。您还可以使用单击对象符号来指示元素的哪些部分是可单击的。