UI设计中常见的设计技术摘要,消除不适感

82天前发布

原创文章 / 多领域 / 观点
DuiaDesign 原创,如需商业用途或转载请与DuiaDesign联系,谢谢配合。

在为智能手机应用程序设计网页或UI时,数值是很好地平衡的,但有时人们会对光学错觉感到不舒服。

在为智能手机应用程序设计网页或UI时,数值是很好地平衡的,但有时人们会对光学错觉感到不舒服。即使它们的大小相同但颜色相同,即使它们的排列正确,您是否也有不一致的感觉?

以下是一些UI设计技术,可以消除由这种视觉错觉引起的不适感。

01.如果与按钮颜色相同,则文本看起来很亮

您是否曾经注意到,当您将相同颜色的文本放在填充的形状旁边时,文本会显得明亮吗?

这种现象是字体的平滑效果,字体感觉比原始颜色浅,字体越小,视觉效果越强。

左侧使用相同的颜色,但文本看起来比按钮亮。

右侧使用稍深的绿色作为文本,看起来具有相同的亮度。

02.使用的字体很小,它看起来也很细

对于某些字体,使用较小的字体会使文本感觉较细且半透明(这也是字体平滑效果)。

如果要使用较小的字体,请使用较粗的粗细。


使用粗字体可以使设计保持整洁,即使是小字体也可以使文本突出,并且绝对易于阅读。

03.背景图片上方的文字难以阅读

将文本放置在背景图像上是一种常见的设计,但是如果图像动态变化,则需要一种方法来保持文本的可读性,而与背景色无关。

这可以通过确保足够的渐变对比度来实现。


半透明的渐变层是使文本保持可读性的好方法,即使将其放在浅色的背景图像上也是如此。确保“图像上的文本的高对比度”引入了几种设计技术,这些技术可以提高对比度而不影响设计的美观。

04.文本行距错误

说到文字,还有另一个重要问题。这是从UX编写设计文本的规则。


行距对可读性有很大影响。

作为指导,根据所使用的字体,将行距设置为比字符大小大2pt〜5pt。

05.尽管它们是对齐的,但它们似乎并没有对齐

这是UI设计的经典示例。


如果形状不同,则无法一起看到。

左侧是按钮的圆角导致的视觉未对准现象。

右边是对这种现象的纠正,一种称为过冲的技术(通常与字体一起使用)。通过稍微向左移动按钮,可以纠正错位的错觉。

06.表格放置不一致

如果表单使用其他元素(形状,线条,文本等),则可能会产生错觉,并且表单可能会错位。


正常对齐时,表单似乎未对齐。

在左侧,所有元素都略有不同(矩形,文本,圆角),并且似乎未对齐。有很多技术可以解决此问题,但是在这里,我们使所有角都变得锐利并与标签的边缘对齐。

当元素看起来一致时,左对齐可以正常工作,并且整个表单的设计均很简洁。

07.看起来不对齐的图标

为了对齐图标,您需要移动图标并调整其大小。


在左侧,相同大小的图标均匀放置。一些图标(电话/收音机)看起来更大一些,并且某些图标由于它们的物理中心不同而显得未对齐。

要解决此问题,请选择形状相似的图标以具有一致的外观(例如圆形图标)。

右侧是另一种解决方案,可以改善每个图标并排放置时的效果。此方法可能需要在实际设计中放置图标,修改一些图标,然后重复进行修改,直到设计看起来完美为止。

08.不对称形状

在设计中使用非对称形状(例如三角形)时,几何中心会产生错觉,即形状放置不正确。

在用户界面中经常可以看到使用三角形的按钮。

左侧在圆心放置了一个三角形,但右侧看起来更好。此解决方案提供了视觉对齐方式,而不是非对称对齐方式。

09.具有不同主题的图标

如果使用现成的图标,则使用同一集合中的图标很重要。

查找图标时,您需要密切注意图标之间以及外观上的视觉差异。


从上面的示例可以看出,使用来自不同集合(形状,权重等)的图标会使UI显得不太专业。用户可能没有足够的知识指出错误所在,但会注意到某些错误。

选择共享相同调色板,主题,粗细和线条宽度的图标。

10.按钮多行标签

当然,“添加到收藏夹”比“收藏夹”更好地解释了按钮的行为,但是在按钮下面有两行文字是不可接受的。不仅显示会错位,还会影响按钮下方的内容。

在这种情况下,您应优先考虑设计并更改文本以符合设计约束。使所有标签两行或一行成为“收藏夹”。

11.长文本

使用UX编写应被视为设计过程的一部分。设计考虑因素决定了文本的长度,文本考虑因素决定了设计。

根据经验,文字应简洁明了。


12.点击区域太小

12年后,设计师(和开发人员)仍在创建太小而无法点击的按钮。


根据尼尔森·诺曼的观点,交互式元素的大小应为1cm x 1cm,以免即使手指粗大也可能造成误操作。

苹果公司说这是12年前的事,但您会看到很难点按的按钮。要解决此问题,可以点击的区域必须大于按钮的视觉大小(包括图标和文本)。

13.圆角

内圆角的半径似乎很大,但这是一种错觉。实际上两者的半径相同,但眼睛无法捕捉。

Justrow幻觉也出现在UI设计中,将圆形按钮放在圆形框架上。


在上面的示例中,框架和按钮都具有相同的圆角,但是它们看起来不一致。要消除这种错觉,请对按钮使用不同的圆角。

14.不必要的边界

说到边界,如果线条太多,设计就会显得拥挤。

设计师经常谈论空白,但是当添加新功能(没有正确的设计过程)时,框架和边框会奇怪地添加。


在设计时,请确保删除边框并使用空格代替对元素进行分组。

15.使用不透明度代替灰色

UI设计使用各种灰色灰度来创建标题,字幕和文本之间的层次结构。但是不幸的是,如果将文本放在彩色元素上,则灰色将无法工作。

调整灰色而不是灰色,以使元素可以吸收背景色。


如果使用具有调整的不透明度的白色而不是灰色,则将半透明元素与背景色结合使用,以创建更自然的外观。

这是一种很小的设计技术,可以带来很好的效果。

136
- 0位站酷推荐设计师推荐 -
    没有新消息