东莞平面设计培训横沥平面设计培训东莞电商培训创建基础UI设计系统的入门技巧
当您在做设计的时候，是否会纠结于所有的可能性，比如文本块是应该变大还是变小？元素周围的空白是多还是少？元素的颜色是应该深一点，还是浅一点呢？
本文将分享一些关于如何使设计看起来更加一致且友好的技巧。
想要保持设计的一致性，应该遵循什么样的规范？
在用户界面中组合元素的方式有无数种，因此需要设置一些规则和界限，否则设计过程可能会复杂且繁琐。如果你正试图在许多“正确的”选项中选择最好的选项。那么通过遵循一些基本规则，便可以解决这个问题。
本文适用于初级UI设计师。你不需要太多经验就能遵循其中的提示和技巧。
拥有一个设计系统是非常重要的!
使用户界面设计保持一致的重要性
让我们从头开始。您如果希望设计看起来很好、值得信赖，就需要不惜一切代价避免混乱。要做到这一点，为设计工作建立一个系统是非常重要的。
开发人员也会希望有一个系统，他们会喜欢您的设计有条理，也让他们的工作更容易。
01
为界面设计规划一个基础单位
你是否遇到过这种情况：因为一个新尺寸的元素而改变了之前的元素的尺寸，然后过了几稿之后，因为某一元素尺寸的改变，又统统改变了之前已经设计好的元素。到底哪种尺寸最合适？有没有一种通用的规范可以让我们遵循？
首先确定基本单元：8像素网格
为了使整个设计看起来更简洁，最好先设置测量值，然后再确定所有的尺寸。最好的选择是坚持一些经过验证的规则。其中一个规则就是调整和移动元素的大小，精确到8个像素。这条规则会使你的决策更有效率。注，如果设计较小的元素，也可以使用4像素不是8像素，根据设计灵活调整即可。
除了px和dp，您可能听说过dp这个词，在屏幕设计和原型设计中常常使用。dp单元是“不受缩放影响的抽象像素”（density-independent pixel）的缩写。“该单元相对于在160dpi的屏幕上，1个dp等于160dpi屏幕上的1个像素，等于320dpi屏幕上的2个像素，以此类推。数值公式为px = dp * (dpi/160)。
使用8像素网格的原因
8像素是一个足够小的“间距”。
8可以被4和2整除。
如果使用8，您可以轻松地调整任何元素的大小，而不会以半像素结束，比如8 / 2 = 4、4 / 2 = 2和2 / 2 = 1。另一方面，如果你从10开始，你会得到5像素，然后是2.5像素，然后是1.25像素。在为屏幕设计时，应该尽可能避免半像素，元素将对齐到精确的像素边界，会使设计看起来更清晰。
8的倍数(8、16、24、32、40、48、56、64、72、80等)与二进制值(1、2、4、8、16、32、64、128、256、512等)交织在一起。
最后，这些数字很容易记住。
使用8像素网格的优势
节省决策时间，让工作高效快捷。
与开发配合，可以帮设计师与开发团队创建更高效的规范系统，如果开发人员需要更改，则可以按照8像素增量来调整数值，确保设计的一致性和顺序性。
具备一致性的网站，会让用户感觉更加舒适。同时也会让他们产生信任感，在使用界面是也会更加容易。
使用8px网格的有效方法
使用8px网格的结果
02.使用网格布局所有元素
水平和谐的布局
如果你在设计中已经使用了网格系统，那太好了。使用网格可以帮助您将所有元素准确地放置在画布上。
网格构成了界面的框架，并确定可以在何处放置元素。网格系统包含元素组成，并定义了清晰的边界，使设计更加一致。通过网格系统，您可以更容易地决定将元素放在哪里。随着您的设计经验逐渐丰富，也可以根据需要更新边界。
但是，如何创建这个网格系统呢？接下来，我将详细介绍。基本上，列的数量和大小可能是随机的，具体取决于设计需求。设计越详细，网格将需要越多的列。当您无法拿定主意时，也可以向其他更有经验的同事请教。
水平和谐的布局
垂直和谐的布局
与保持水平和谐类似，在设计中保持垂直距离的一致性也很重要。像电子表格中的行一样，它们可以帮助您将文本保持均匀的间隔。
这些行应该有多大？同样，这取决于具体设计需求。但是，我建议使用8像素或8的倍数（例如16）。重新定义元素或文本要对齐的边界。
垂直和谐的布局
03.正确地选择字号
如果仔细观察一些精心设计的字体，就会发现字号的一致性。这是因为其中有一些特别的设计规律。
注意：保持字号一致，并且尽可能选择两种不超过三种字体。但如何选择字体，不在本文的讨论范围之内。
首先定义一些在整个项目中使用的关键字体大小。(例如，分别使用30、31和32像素是很愚蠢的。相反，应该将这三种非常相似的尺寸合并成一个。)
采用标准字号有两个好处:
让设计更一致，更优雅。
加快设计过程，让您更有效率。
定义字号
定义字号时，请确保不要以相同的数值增加大小。当您放大文本时，它应该是非线性的。这意味着创建的文本越大，增加的数值应该越大。
为字号设定一个系统
假设您有一个文本块，字号为12像素，这时想放大它。您尝试了14像素觉得很满意。但然后想让一个40像素的大标题更大，那应该是把字号从40像素增加到42像素吗？当然不是。理论上讲，文本需要更大的调整。您可能需要放大24个像素，从而得到一个更大的64像素的标题。
简而言之，这意味着文本越大，需要增加的数值越大。这个非常简单的原则不仅适用于文本，也适用于按钮的大小、空白和其他所有东西。
它通常基于几何级数。下图显示了字体比例关系的趋势：
几何级数
但是，对于排版，请尽量使用经过验证的比例。比例为12、14、16、18、20、24、30、36、48、60和72像素。
经过验证的字号比例
文本行高
定义所有字体大小后，需要注意的就是行距。对于行距，请再次使用4像素的增量。
例如，对于16像素的文本，我们将行距设置为24像素。如果要让文本看起来更加舒适，请将行距增加4像素，达到28。
04.定义颜色和色度
颜色的组合实在是非常之多，如果您不预先定义颜色的深浅，就会浪费很多时间。不应该把自己局限于黑色、白色，或者蓝色。对于每一种颜色，您都需要其他的色度，提前设置它们是很重要的，这样在整个设计项目中色度都是一致的。我们不想在设计中制造混乱。为每种颜色准备5到10种色度。我自己喜欢为每种颜色定义9种色度。
为什么给每种颜色定义9种色度?
为颜色命名。无论您使用的是图形编辑器还是CSS代码，您都将从本技巧中获益。每个阴影将被分配一个数字，例如100、200、300、400、500、600、700、800和900。(为什么以百为单位？因为这也是通常划分字体的方式。)
9是定义颜色的方便数字。准备这些阴影的最好方法是准备一排9个方块，用颜色填充方块。中间的是底色。然后，定义最亮的阴影(在最左边)和最暗的阴影(在最右边)。下一步是选择色调之间。
给每种颜色定义9种色度
05.准备不同的元素大小和类型
在进行设计时，通常将使用无数的图标，按钮和其他组件。同样，最好为它们预先准备几种尺寸，并将选项限制地尽可能少。在设计过程中，请勿添加其他尺寸，也不要尝试调整组件的尺寸以满足不必要的需求。相反，只需使用已经定义的设计，整个设计就会更加一致和整洁。
让我们以按钮为例。开始时，需要定义它们的层次结构。为此，使一个按钮具有主要作用，一个按钮具有次要作用，也许另一个按钮具有更次要的作用。为每个按钮指定其状态（有效，无效）和颜色变体。始终尝试将元素数量减少到最重要的元素。
按钮的例子
06.定义其他元素的属性
用户界面设计师经常在设计工作中使用阴影。但是，对于经验不足的设计师来说，使用阴影效果有时会很花费时间。创建阴影时，必须设置阴影沿x轴和y轴的距离，以及模糊半径，颜色和透明度。阴影可能需要花费很多时间进行微调，这就是为什么要在进入设计之前准备阴影的原因。准备一组阴影（使用与颜色相同的方法），然后在整个设计过程中应用它们是很有帮助的。
另外，请注意将要使用的元素的所有其他属性，例如角半径，透明度和颜色渐变。
阴影的例子
07.留白
正确调整留白很重要。无论是从外部（边距）还是从内部（边距）偏移元素，都应再次依靠8的倍数。将偏移量增加8像素（小元素为4）。与字体大小一样，想要的间隙越大，增量就必须越大（同样，需要预先定义这些增量）。
留白
总结
为了使设计干净，一致，请定义一些边界和明确的规范。
处理设计的每个元素时，请记住以下几点：
检查是否已在设计中的某个地方使用它。如果是这样，就可以简单地复制该元素。
遵循水平和垂直协调一致，并使用一开始定义的增量调整元素的大小。
避免复杂的决定以及与像素永无休止的斗争。有一个适当的系统。
不要两次创建相同的元素。如果设计井井有条，工作将会更高效，项目也将更快地迭代，并且能够更轻松地与开发人员进行沟通。开发人员将按照设计样式设置变量，因此请清楚定义它们，以创建更好，更可持续的代码。
