新闻博客

开始使用UI设计 加快工作流程的提示

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

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

本文适用于初学者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. 使用您的网站的人在访问时会感到很舒服。他们将信任该网站,并使他们更易于使用该界面。

734

使用8px网格的有效方法


734使用8px网格的结果


使用网格布置所有元素

水平对齐

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

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

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

734水平对齐

垂直对齐

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

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

734

垂直对齐

正确选择字体大小

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

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

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

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

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

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

字号

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

Ui Design Tips Speed Up Workflow 02

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

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

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

Ui Design Tips Speed Up Workflow 02

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

Ui Design Tips Speed Up Workflow 02

文字行高

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

定义项目的颜色

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

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

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

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

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

734

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

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

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

Ui Design Tips Speed Up Workflow 02

定义其他元素的属性

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

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

Ui Design Tips Speed Up Workflow 02

留白空间

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

Ui Design Tips Speed Up Workflow 02

结论

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

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

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

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

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

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

订阅我们的时事通讯
以获取更多更新