在进行设计时经常遇到各种问题，例：使某个文本块变大还是变小，还是增加（或减少）元素周围的空白量。那么这种颜色呢：它应该更暗还是更亮？在本文中，我将分享一些有关如何解决这些常见问题。

本文旨在创建在整个设计过程中应遵循的限制和规则。您可以通过多种方式组合用户界面中的元素，因此需要设置一些规则和界限，这样设计工作流程可能会变得不那么繁琐。您可能正在为所有可能性而苦苦挣扎，并试图在许多“正确”选项中选择最佳选项。通过遵循一些基本规则，您将使设计看起来更加一致。

本文适用于初学者UI设计师。您不需要太多经验就能遵循其中的提示和技巧。

使用户界面设计保持一致的重要性

您希望设计看起来不错并且值得信赖，那么需要避免混乱。为此，拥有一个用于设计工作的系统非常重要。

开发人员也会喜欢一个系统-他们喜欢设计是井井有条的，这样他们的工作更加轻松。

预定大小的尺寸调整系统

您需要确定每个元素的大小。我想您可能处于过这样的情况：曾经为一个元素选择过一个尺寸，然后在五分钟后更改了它，然后又一次，也许又一次又一次？

哪个尺寸最合适？可能是您尝试过的一种，您需要避免这种浪费时间的问题！

首先选择基本单位：8像素网格

为了使整个设计看起来更整洁，首先设置测量值，对确定所有尺寸是有帮助的。选择哪种数值完全取决于您，但是通常，最好的选择是遵守一些公认的规则。这些规则之一是将元素调整大小并精确移动八个像素。此规则将简化您的决策。

但是为什么恰好是8个像素？

1. 八个像素是足够的最小“跳跃”。

2. 八是个很大的数字，因为它可以被四和二整除。

3. 如果您使用8，则可以轻松调整任何元素的大小，而不会以半像素结尾，例如8/2 = 4、4 / 2 = 2和2/2 =1。如果从10开始，您最终将获得5像素，然后是2.5像素，然后是1.25像素。在设计屏幕时，您希望尽可能避免半个像素。通过使用整个像素，设计中的元素将与精确的像素边界对齐，因此看起来更清晰。

4. 八的倍数（8、16、24、32、40、48、56、64、72、80等）与二进制值（1、2、4、8、16、32、64、128、256 ，512等）。

最后，这些数字很容易记住。

使用8像素网格的优点是什么？

1. 如果您与开发人员一起工作，则可以创建一个对团队有帮助的系统。如果开发人员需要进行一些快速更改，则可以按8像素的增量来调整值。这将确保一致性和顺序。

2. 使用您的网站的人在访问时会感到很舒服。他们将信任该网站，并使他们更易于使用该界面。

使用8px网格的有效方法

使用8px网格的结果

使用网格布置所有元素

水平对齐

确定在设计网站时已经使用了网格。使用网格可以帮助您将所有元素准确地放置在数字画布上。

网格形成界面的骨架，并确定可以在何处放置元素。模板包含组成，并定义了清晰的边界，以使您的设计更加一致。现在，您可以更轻松地决定将元素放置在何处。随着您获得更多的经验，您可以根据需要更新边界。

但是，如何创建此网格？接下来，我们将详细介绍。基本上，列的数量和大小可能是随机的，具体取决于您的需求。您的设计越详细，网格将需要越多的列。

水平对齐

垂直对齐

与保持水平对齐类似，在设计中保持垂直距离的一致性也很重要。像电子表格中的行一样，它们可以帮助您将文本保持均匀的间隔。

这些行应该有多大？同样，这取决于您。但是，我建议使用8像素或8的倍数。重新定义元素或文本要对齐的边界。

垂直对齐

正确选择字体大小

如果您查看一些精心界面的设计，将会发现字体大小的一致性。这是有原因的。

注意：您的设计中仅需要两种（最多三种）字体。但是，选择正确的字体并使其在一个界面内协调展示很关键。

首先定义一些在整个项目中使用的关键字体大小。

标准字体大小带来两个好处：

1. 您的设计将更一致，更优雅。

2. 这将加快设计过程，并使您效率更高。

字号

定义字体大小时，不要以相同的增量来增加字体大小。当您放大文本时，它应该是非线性的。这意味着创建的文本越大，增量应该越大。

假设您有一个12像素字体大小的文本，并且想要放大它。您尝试14像素，您会感到满意。但请想象一下，您有一个较大的标题（40像素），并且希望将其放大。您是否将尺寸仅增加2个像素，从40增至42？NO。从视觉上讲，文本需要进行更大的更改。您可能需要将其增加24像素，从而获得更大的64像素标题。

简而言之，这意味着您希望文本越大，则需要使用的增量越大。这个非常简单的原理不仅适用于文本，而且适用于按钮的大小，空格和其他所有内容。

它通常基于几何级数。这是显示字体比例的非常有用的图表：

但是，对于排版，要永远使用的字体大小使用一种经过验证的比例。比例尺为12、14、16、18、20、24、30、36、48、60和72像素。

文字行高

定义所有字体大小后，您将需要注意行距。对于行高，请再次使用4像素的增量。例如，对于16像素的文本，我们将行高设置为24像素。如果要让文本呼吸性更好，请将行高增加4像素，达到28。

定义项目的颜色

您不能将色彩限制为黑色，白色，例如蓝色。对于每种颜色，您将需要其他色调，因此必须预先设置它们，色调在整个设计项目中保持一致是很重要的。我们不想在设计中造成混乱。每种颜色的目标是5到10个色调。我更喜欢为每种颜色定义9种色调。

为什么每种颜色有9个色调？

第一个优点是颜色命名。无论您使用的是图形编辑器还是css代码，都一定会从此技巧中受益。每个阴影将被分配一个数字，例如100、200、300、400、500、600、700、800和900。

其次，9是用于定义颜色的便捷数字。准备这些色调的最佳方法是准备9个正方形，并用颜色填充正方形。中间的一个将是基础颜色。然后，定义最浅的色调和最暗的阴影。下一步是选择两者之间的色调。

让我们仔细看一下颜色色调。

准备元素的不同大小，类型和状态

在进行设计时，通常将使用很多图标，按钮和其他组件。同样，最好为它们预先准备几种尺寸，并将选项限制为尽可能少。在设计过程中，请勿添加其他尺寸，也不要尝试调整组件的尺寸以满足您的需求。相反，只需使用您已经定义的设计，整个设计就会更加一致和整洁。

让我们以按钮为例。开始时，您需要定义它们的层次结构。为此，使一个按钮具有主要作用，一个按钮具有次要作用，也许另一个按钮具有次要作用。为每个按钮指定其状态（有效，无效）和颜色变体。始终尝试将元素数量减少到最重要的元素。

定义其他元素的属性

用户界面设计师经常在设计工作中使用阴影。但是，对于经验不足的设计师来说，阴影有时会很难处理。创建阴影时，必须设置阴影沿x轴和y轴的距离，以及模糊半径，颜色和透明度。阴影可能需要花费很多时间进行微调，这就是为什么要在进入设计之前准备阴影的原因。准备一组阴影（使用与颜色相同的方法），然后在整个设计过程中应用它们是很有帮助的。

另外，请注意将要使用的元素的所有其他属性，例如角半径，透明度和颜色渐变。

留白空间

正确调整留白很重要。无论您是从外部还是从内部偏移元素，都应再次依靠8的倍数。将偏移量增加8像素（小元素为4）。与字体大小一样，您想要的间隙越大，增量就必须越大（同样，您需要预先定义这些增量）。

结论

为了使您的设计干净，一致，请定义一些边界和明确的规则。

处理设计的每个元素时，请记住以下几点：

1. 查看是否已在设计中的某个地方使用它。如果是这样，您可以简单地复制该元素。

2. 遵循水平和垂直节奏，并使用一开始定义的步骤调整元素的大小。

3. 避免复杂的处理元素大小，其应该有一个适当的系统。

4. 如果您的设计井井有条，您的工作将会更高效，将能够更快地迭代，并且能够更轻松地与开发人员进行沟通。

原作者：TomášČakloš