在你开始阅读之前

本指南旨在帮助设计师快速而统一的地进行UI设计，它对设计有固定规则，对移动应用程序的UI设计特别有帮助，尽管我发现它对响应式网页设计也很有用。与许多设计准则一样，这些示例带入到设计中，可能比单独阅读更有帮助。

准备开始

代码 > 原型

设计app以及原型工具时，是允许你创造一些奇特的UI视觉风格。但在互联网产品设计上，模型或原型的唯一目的，是向大众和开发人员清晰地传达建议的解决方案。最后，只有开发人员能够在代码中实现(结合资产)的内容，才能展现在产品上。

现在，几乎任何你能用设计软件做的设计，都可以用代码来实现。但会出现一些问题，从可用性到项目时间，再到性能问题来判断，有的设计落地性不高。

最重要的是你的设计，在用户端呈现方式。因此，不能只是在Sketch或Photoshop中完美布局，尽可能减少构思和代码之间的时间。

盒子模型

盒子模型，是一种描述元素的尺寸和间距的方法，它由4个组件组成:边框（border）、外边框（margin）、间距（padiing）和元素本身的尺寸。

边框（border）：元素边周围的描边的粗细。大多数设计工具不允许这种情况影响总体间距和尺寸。

间距（padding）：元素及其子元素边界之间的空间。

外边框（margin）：元素与相邻元素边界之间的空间。

什么是点（pt）？

点(pt)是依赖于屏幕分辨率的空间度量单位。最简单的解释是，在1x分辨率(或@1x)下，1pt = 1px。

在2x分辨率(@2x)下，1pt = 4px，因为X轴和Y轴的分辨率都翻倍，使其宽2px，高2px。

在3x分辨率(@3x)， 1pt = 9px (3px x 3px)，以此类推。

@1x请注意，这里的一切都是@1x设计的。@2x， @3x和所有其他变量，可以更容易地从@1x中获得，而不是从其倍数的设计中获得。

例如，从@2x设计得到@3x设计(假设线厚为偶数)清晰的效果，你需要将设计作品缩放到原始尺寸的50%(缩小到1x)，然后将最终的设计作品缩放到300%。

另一方面，@1x设计可以轻松并清晰地缩放到任意整数倍——@2x、@3x、@4x等等。

也可以在每个分辨率下，为图标和设计方案添加更多细节，但这样做的机会相对较少。在大多数情况下，为了速度和方便起见，理想的工作方式是@1x。

使用像素网格

你创建的每个UI元素都应该与像素网格对齐，这是一个被称为像素整合的概念，它确保您的所有设计元素在用户设备上，能有良好显示的清晰和定义。

文本元素

像文本这样的元素几乎是占界面里最重要的部分，但文本大小和行高要保持垂直对齐以及易读性的情况下，并不能完全符合与其他设计元素相同的UI网格。

为你的文本元素设定文字基线，是能让你的设计有垂直一致性的好方式。通过将每一行文本定位到间隔均匀基线上，您可以轻松地将让UI元素有和谐的垂直对齐方式。

大多数平台都有一些基本的设计原则，但打破默认字体可能会带来无法预知的结果，所以在布局文本时要谨慎，然后将其作为布局其他元素的基础。

8pt的网格

基本原则

使用8的倍数来定义组件元素和子元素的尺寸、间距和边距。

当组件元素的唯一内容是文本（例如，按钮）时，将文本设置为与UI的其余部分和/平台规则一致的大小，然后使用边距（padding）来确定块元素的大小。在全宽元素的情况下，使用边距（padding）来确定高度和宽度的一致的外边框间距（margin）。

两种方法

这个系统实际上有两个不错的版本。

一个是将元素放置到系统显示的以8pt为增量定义的网格中(我们称之为硬网格方法)，另一个是简单地度量单个元素之间的8pt增量(我们称之为软网格方法)。

硬网格方法的主要论点是，通过使用额外的透明背景元素，然后将它们分组为小组的前景元素，您可以跟踪每个元素的边距和填充，并将这些容器像砖块一样绑定到网格中。设计素材-所有东西都已经设计成4点网格-自然符合这个方法。

软网格方法的论点是，当编写接口时，使用实际的网格是无关紧要的，因为编程语言不使用这种网格结构——它会被丢弃。当要求加载速度是高质量、可编程的模型集的优先级时，绕开硬网格方式带来的格外工作量，软网格方法会有更流畅、结构更小的优势。这也更适合iOS，因为许多系统UI元素不是由一个均匀的网格定义的。

为什么重要

UI的统一性

当你的所有度量都遵循相同的规则时，你将自动获得更一致的UI。

更少的决定=更少的时间

通过删除每8个空格选项中的7个，您减少了可用的操作数量，并随后降低了代码的速度。

多平台设计

不管形状如何，最流行的屏幕尺寸至少在一个轴上被8整除——通常是两个轴都是。此外，一些平台风格指南(如Material Design)特别要求4或8个点的网格，使用这个系统非常适合。

一些屏幕尺寸调整起来很困难（iPhone 6是375 x 667点），但解决方案实际上非常简单。保持间距（padding）和外边框间距（margin）尺寸一致，减少/增加组件元素的大小以填充剩余空间。如果它保持网格一致，则可以特殊设计元素。请记住，您的用户可能永远不会看到您使用的实际测量单位。

建议实施

网格对其

几乎所有的设计应用，都有一个网格对其的选项。如果您正在使用硬网格方法，它肯定会使您的工作更容易。无论如何，如果有对齐像素网格选项，您需要确保启用了该选项。

网格和变量

如果你设置你的文本大小为16，你可以很容易地使用。5rem增量在8点网格上构建你的布局。

定义你的网格

大多数设计应用程序的时候，都允许你调整微调值。我在Sketch中使用一款名为Nudg.it的应用，把我的数字从10调整到8。这是一个非常简单的应用程序，使您的整个工作流程更快更容易。

快捷键

许多应用程序都有快捷方式，让你可以快速地金星微调、调整大小和调整位置。我强烈建议学习它们——特别是轻微的位置和大小调整。

规范图标

图标通常需要不同的大小，以保持相同的视觉权重。在它们周围放置一个框架，就像硬网格方法，定义元素大小一样，这是一种保持测量一致的简单方法，同时允许定义的参数发生变化。

放大、缩小

如果你花费的时间放慢到1600%，你可能会误判垂直的对齐节奏。相反，如果你缩小到50%查看UI，你可能会错过重要的细节，比如像素匹配。经常调整你的变焦，以确保你看到的是整个画面。

Powered by Froala Editor