本指南旨在帮助设计师快速且一致地布置 UI，对于设计有固定约束的移动应用程序 UI 尤其有用，同时在响应式网页设计中也能发挥作用。和许多设计指南一样，这些示例在实际设计过程中体会，会比单独阅读文字更有帮助。
设计应用程序和原型制作工具能让我们创作出 UI 外观的奇妙愿景，但在数字产品设计中，模型或原型的唯一目的是向利益相关者和开发人员清晰传达建议的解决方案。最终，只有开发人员在代码中（结合资产）能重现的内容，才能投入生产。
如今，在设计工具中创建的几乎任何内容都能在代码中实现，但出于可用性、发布时间表、性能等多方面原因，有些设计构建起来可能不切实际。最重要的是设计在用户设备的代码中表现如何，因此应尽可能优先减少构思和编程之间的时间，而非执着于在 Sketch 或 Photoshop 中做出完美布局。
盒模型是描述对象尺寸和间距的一种方法，由 4 个组件组成：边框、边距、内边距和元素本身的尺寸。
- 边框：围绕元素边缘的描边粗细，大多数设计工具不允许其影响整体间距和尺寸。
- 内边距：元素边界与其子元素边界之间的空间。
- 边距：元素边界与相邻对象之间的空间。
点（pt）是一种取决于屏幕分辨率的空间度量。简单来说，在 “1x” 分辨率（或 @1x）下，1pt=1px；在 “2x” 分辨率（@2x）下，1pt=4px，因为分辨率在 X 轴和 Y 轴上都翻倍，即宽度为 2px，高度为 2px；在 “3x” 分辨率（@3x）下，1pt=9px（3px×3px），以此类推。
需要注意的是，这里所有内容都是基于 “@1x” 设计的。@2x、@3x 以及所有其他变体的资产，从 @1x 资产中派生会更容易，而不是从以其倍数创建的设计中获取。例如，要将 @2x 设计的清晰资源转换为 @3x 设计（假设线条粗细为偶数），需要先将图稿缩放至原始尺寸的 50%（降至 @1x），再将生成的艺术品缩放至 300%。而 @1x 设计可以轻松缩放到任何整数倍，如 @2x、@3x、@4x 等。
虽然在每个单独的分辨率下工作，能为图标和精美资产添加更多细节，但这样的机会相对较少。大多数情况下，为了速度和方便，使用 @1x 是理想选择。
创建的每个 UI 元素都应与像素网格对齐，这一概念称为像素拟合，能确保所有元素在用户设备上显得清晰且定义明确。
不过文本有点特殊，因为字母独特的指标需要一点点抗锯齿才能让眼睛清晰阅读，而这会使其他形状变得模糊。因此，不必担心字母的每个点都与像素网格对齐。
像文本这样的内联元素几乎总是给定界面中最重要的部分，但文本大小和行高之类的设置，在保持垂直节奏和易读性的同时，并不总是像其他元素那样容易符合相同的 UI 网格。
为文本设定基线是在设计中形成垂直一致性的好工具。通过将每行文本的基线定位到等间距的行上，能轻松地将所有 UI 元素置于和谐的垂直节奏中。
可以将 8pt UI 网格与 4pt 基线网格结合使用，这种搭配能让计算简单明了，同时提供足够的选项来适应各种文本样式。
大多数平台都有一些基本的指导原则，但打破默认字体会带来独特的结果，所以在布局文本时要谨慎，之后再将其作为布局其他元素的基础。
使用 8 的倍数来定义块和内联元素的尺寸、填充和边距。
当块元素的唯一内容是文本（如按钮）时，将文本设置为与 UI 其余部分和 / 或特定平台一致的大小，然后使用填充来确定块元素的大小。对于全宽元素，使用填充来确定高度，使用一致的水平边距来确定宽度。
这个系统实际上有两个突出的版本。一种是将元素放置到以 8 点增量定义的系统显示网格中（称为 “硬网格” 方法），另一种仅测量单个元素之间的 8 点增量（称为 “软网格” 方法）。
硬网格方法的主要观点是，通过使用额外的透明背景元素，然后将它们分组为一小组前景元素，可以在每个元素的基础上跟踪边距和填充，再将这些容器像砖块一样捕捉到网格。Material Design 原本就设计为 4pt 网格，自然符合这种方法。
软网格方法认为，在编写接口时，实际的网格无关紧要，因为编程语言不使用那种网格结构，它最终会被舍弃。当优先考虑获得高质量、可编程的模型集的速度时，绕过硬网格管理附加层的额外开销，选择软网格更流畅、最小的结构可能是一个优势，这也可能更适合 iOS，因为 iOS 中许多系统 UI 元素不是由均匀网格定义的。
- 一致的用户界面：当所有测量都遵循相同规则时，会自动获得更一致的 UI。
- 更少的决定 = 更少的时间：通过删除每 8 个间距选项中的 7 个，减少了可摆弄的量，从而加快编码速度。
- 多平台设计：不管外形如何，最流行的屏幕尺寸至少在一个轴上可以被 8 整除，通常是两个轴。此外，一些平台的样式指南（如 Material Design）特别要求使用 4 或 8 点的网格，这使得该系统非常适用。
有些屏幕的尺寸调整起来显然有难度（如 iPhone 6 为 375×667 点），但解决方案其实很简单。保持填充和边距尺寸一致，通过减少或增加块元素的大小来填充剩余空间。如果保持网格一致，就可以使用大小特殊的元素。要记住，用户可能永远不会看到实际使用的测量值。
- 对齐网格：几乎每个设计应用程序都有 “对齐网格” 选项，如果使用硬网格方法，它无疑会让工作更轻松。无论如何，需要确保启用 “对齐像素网格” 选项（如果有）。
- 资源和变量：如果将根文本大小设置为 16，可以轻松使用.5rem 增量在 8 点网格上构建布局。如果不喜欢这种方式或不喜欢 rems，可以使用 CSS 或预处理器间距变量来处理布局，同时保留变量带来的额外可维护性。
- 快捷方式：许多应用程序都有快捷方式，可动态微调、调整大小和调整增量，建议学习这些快捷方式，特别是轻推和尺寸调整相关的。
- 框架你的图标：图标通常需要不同的大小以保持相同的视觉重量。在它们周围放置一个框架，类似于硬网格定义元素大小的方式，是保持测量一致的简单方法，同时允许在定义的参数内有变化。
- 放大，缩小：如果一直放大到 1600%，可能会误判垂直节奏；而如果总是以 50% 的比例查看 UI，可能会错过像像素拟合这样的重要细节。所以要经常调整缩放比例，确保看到整体画面。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
