开始使用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. 使用您的网站的人在访问时会感到很舒服。他们将信任该网站,并使他们更易于使用该界面。
使用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. 如果您的设计井井有条,您的工作将会更高效,将能够更快地迭代,并且能够更轻松地与开发人员进行沟通。