HI,下午好,欢迎来到微信公众号转让!
公众号转让,微信公众号交易平台,公众号出售购买卖价格 24小时服务热线: 4000-163-301

新闻动态

NEWS CENTER

设计过程中的决策技巧

2020-01-01

界面设计一致性的重要性

让我们从头开始捋一捋。你希望你的设计看起来很好,值得信赖,需要不惜一切代价避免混乱。为了实现这一点,拥有一个完整的系统性思维是非常重要的。

开发也期待设计师善用系统性思维,他们喜欢条理清晰的设计,这样他们的工作会更容易。

给定大小的尺寸设计系统

无论是调整文字大小、图片大小,还是调整留白,都没有关系,前提是需要确定每个元素的大小。我敢打赌你一定遇到过这种情况:你曾经为一个元素选择了一个大小,五分钟后改了一次,然而没多久又改了一次,也许最后改了无数次才确定下来。

哪种尺寸最合适?可能是你试过的某一个尺寸,但其实应该避免这个无止境的浪费时间陷阱!

首先选择基本单元:8像素网格

为了使整个设计看起来更简洁,最好先设置基准单位,然后再确定所有的尺寸。具体选择多少本来应该由你来定,但通常,最好的选择是坚持一些经过验证的规则。其中一条规则是以8像素的倍数来调整和移动元素的大小,这条规则会使决策更有效率。

px和dp:“dp”这个词也被用在界面设计和原型设计中。“dp”是“密度无关像素”的缩写。“这个单位是以160 dpi的屏幕为基准的,1个dp等于160 dpi屏幕上的1个像素,等于320 dpi屏幕上的2个像素,以此类推。数学换算公式是“px = dp * (dpi/160) ”。

注:如果使用的是较小的元素或对象,也可以使用4像素的增量,而不是8像素的增量——偶尔,可以根据需要进行进一步的调整。

但为什么是8像素呢?

这里有几个原因可以解释为什么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网格的结果

使用网格布局所有元素

水平网格

我相信你在设计网站时已经使用过网格了,使用网格可以帮助你准确地将所有元素放置在界面上。

网格形成界面的骨架,并决定可以将元素放置在何处。模板化定义了清晰的边界,这样设计就会更加一致。用上网格系统,可以更容易地决定将元素放在哪里。当经验越来越丰富时,调整界面就会更加得心应手。

但是如何创建这个网格呢?我们将在下面讨论具体问题。基本上,列的数量和大小可能是随机的,这取决于你的需要。设计越细致,网格需要的列就越多。如果还是拿不准,就应该向有经验的同事寻求帮助。

另外,我建议阅读“UI设计综合指南”(https://www.smashingmagazine.com/2018/02/comprehensive-guide-ui-design/),这将帮助你更深入地理解用户界面设计。


水平网格

垂直网格

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

这些行应该要多大?再说一次,这取决于你的需要。然而,我建议使用8像素或8的倍数(如16)重新定义元素或文本要对齐的边界。


垂直网格