400-616-5551

您所在位置: 首页> 学习课程> UI设计培训班 | 创建基础UI设计系统的入门技巧

UI设计培训班 | 创建基础UI设计系统的入门技巧

发布百知教育 来源:学习课程 2020-02-07

当您在做设计的时候,是否会纠结于所有的可能性,比如文本块是应该变大还是变小?元素周围的空白是多还是少?元素的颜色是应该深一点,还是浅一点呢?


本文将分享一些关于如何使设计看起来更加一致且友好的技巧。


想要保持设计的一致性,应该遵循什么样的规范?


在用户界面中组合元素的方式有无数种,因此需要设置一些规则和界限,否则设计过程可能会复杂且繁琐。如果你正试图在许多“正确的”选项中选择最好的选项。那么通过遵循一些基本规则,便可以解决这个问题。


本文适用于初级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像素增量来调整数值,确保设计的一致性和顺序性。
  • 具备一致性的网站,会让用户感觉更加舒适。同时也会让他们产生信任感,在使用界面是也会更加容易。
02

使用网格布局所有元素


水平和谐布局

如果你在设计中已经使用了网格系统,那太好了。使用网格可以帮助您将所有元素准确地放置在画布上。

网格构成了界面的框架,并确定可以在何处放置元素。网格系统包含元素组成,并定义了清晰的边界,使设计更加一致。通过网格系统,您可以更容易地决定将元素放在哪里。随着您的设计经验逐渐丰富,也可以根据需要更新边界。

但是,如何创建这个网格系统呢?接下来,我将详细介绍。基本上,列的数量和大小可能是随机的,具体取决于设计需求。设计越详细,网格将需要越多的列。当您无法拿定主意时,也可以向其他更有经验的同事请教。


垂直和谐布局


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

这些行应该有多大?同样,这取决于具体设计需求。但是,我建议使用8像素或8的倍数(例如16)。重新定义元素或文本要对齐的边界。



UI设计培训班


垂直和谐布局


03
正确地选择字号

如果仔细观察一些精心设计的字体,就会发现字号的一致性。这是因为其中有一些特别的设计规律。

注意:保持字号一致,并且尽可能选择两种不超过三种字体。但如何选择字体,不在本文的讨论范围之内。

首先定义一些在整个项目中使用的关键字体大小。(例如,分别使用30、31和32像素是很愚蠢的。相反,应该将这三种非常相似的尺寸合并成一个。)

采用标准字号有两个好处:

  • 让设计更一致,更优雅。
  • 加快设计过程,让您更有效率。


定义字号

定义字号时,请确保不要以相同的数值增加大小。当您放大文本时,它应该是非线性的。这意味着创建的文本越大,增加的数值应该越大。


假设您有一个文本块,字号为12像素,这时想放大它。您尝试了14像素觉得很满意。但然后想让一个40像素的大标题更大,那应该是把字号从40像素增加到42像素吗?当然不是。理论上讲,文本需要更大的调整。您可能需要放大24个像素,从而得到一个更大的64像素的标题。


简而言之,这意味着文本越大,需要增加的数值越大。这个非常简单的原则不仅适用于文本,也适用于按钮的大小、空白和其他所有东西。

它通常基于几何级数。下图显示了字体比例关系的趋势:


10.png


几何级数


但是,对于排版,请尽量使用经过验证的比例。比例为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个方块,用颜色填充方块。中间的是底色。然后,定义最亮的阴影(在最左边)和最暗的阴影(在最右边)。下一步是选择色调之间。

UI设计培训班


给每种颜色定义9种色度


05
准备不同的元素大小和类型

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

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

06

定义其他元素的属性

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

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


07
留白

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



总结

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

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

  • 检查是否已在设计中的某个地方使用它。如果是这样,就可以简单地复制该元素。
  • 遵循水平和垂直协调一致,并使用一开始定义的增量调整元素的大小。
  • 避免复杂的决定以及与像素永无休止的斗争。有一个适当的系统。
  • 不要两次创建相同的元素。如果设计井井有条,工作将会更高效,项目也将更快地迭代,并且能够更轻松地与开发人员进行沟通。开发人员将按照设计样式设置变量,因此请清楚定义它们,以创建更好,更可持续的代码。

UI设计培训班:http://www.baizhiedu.com/ui2019

 


上一篇:0设计经验,2020如何找到一份UI设计师的工作?

下一篇:提高Python数据分析速度的八个小技巧

相关推荐

关闭

立即申请

www.baizhiedu.com