sumaart

web site / mobile & h5 / brand design
less is more, art is freedom…

设计观点

Back

关于如何在设计中使用空白来改善更好的用户体验的5个最佳技巧

Share

Time:

2022-09-30 09:40:17

Author:

素马

空白(或“负空间”)是页面元素之间和周围的空白区域。尽管许多人可能认为它浪费了宝贵的屏幕空间,但空白是设计中必不可少的元素。

“空白应被视为一种主动元素,而不是被动背景”

 

在本文中,素马设计将分享五个技巧,说明如何在设计中使用空白可以带来更好的用户体验。

  • 强调某些元素
  • 澄清对象之间的关系
  • 提高可读性
  • 在不使用可见分隔符的情况下划分元素
  • 营造优雅的感觉

 

1.强调某些元素

优先考虑特定内容或交互元素对于设计师来说是相当常见的任务。当设计人员制作页面时,他们通常希望将用户的注意力引向主要对象(例如内容部分或号召性用语按钮)。虽然设计师可以使用许多不同的视觉方法来聚焦特定对象,但实现此目标的最有效方法之一是使用该对象周围的空白量。

 

您可以使用一个简单的技巧来实现该目标——移除对象周围的所有元素。特定区域中其他元素的缺乏使该区域中的现有元素更加突出。用户的注意力会转移到有物体的区域,因为在该区域没有其他东西可看。

 

物体周围的空白越多,人们就越会被它吸引。

看看谷歌搜索主页。一旦您登陆此页面,您的注意力就会放在搜索表单上。它是使表单弹出的空白。

1

当人们访问谷歌搜索主页时,他们的目光会立即被页面的中心——谷歌的搜索表单所吸引。

 

2. 明确对象之间的关系

当我们检查一个新的布局时,我们很少将其视为独立元素的集合。我们通常看到的是对象的组合。这是因为我们的大脑天生就可以创建不同对象之间的关系模型。最常见的关系是基于对象之间的相对距离创建的。认知心理学中有一种称为格式塔原则的理论,它规定彼此靠近的对象将表现为一个“单元”。

看看这张照片:

2

您很可能会看到两组圆圈(4 和 6),而不是 10 个圆圈。这些圆圈都是相同的,唯一区别它们的是分隔它们的空格数量。

 

这条定律几乎可以应用于图形和交互设计的任何部分。让我们看看它在数字表单的上下文中是如何工作的。大多数用户发现长表格势不可挡。当用户看到一个包含太多问题的长表单时,他们需要花费额外的时间来了解需要哪些信息。但是设计人员可以通过使用空格将相关字段组合在一起来简化用户的任务。这样一个简单的过程可以极大地提高表单的理解能力——用户将花费更少的时间来分析他们需要哪些数据输入。

 

检查下面的示例。两种表格的问题数量相同,但右侧的表格给用户留下了更好的印象——空白使扫描表格更容易。

3

如果您设计的表单有七个以上的问题,最好将相关问题分组到逻辑部分中。使用空格分隔逻辑部分。

 

3.提高可读性

内容为王。内容是人们首先访问您的网站或安装您的应用程序的原因。这就是为什么考虑内容的可读性如此重要的原因。很多因素都会影响可读性——字体大小、字体粗细、颜色对比度等等。但是还有另一个对内容可读性有直接影响的重要因素——空白。

 

行距(段落中每一行之间的间距)可以极大地提高文本内容的易读性和可读性。当行距太紧时,人们阅读文本变得更加困难。一般来说,导言越大,读者在阅读时的体验就越好。

 

4

如果您比较从左右示例中阅读文本的体验,很明显,适当的间距有助于可读性。图片来源:苹果

 

段落之间和文本块周围的空白量在内容理解中也起着重要作用。一项研究发现,在段落之间正确使用空格可以提高近 20% 的理解力。

 

4.在不使用可见分隔符的情况下划分元素

设计人员经常使用可见线来分隔页面上的部分或单个组件。虽然这种方法在大多数情况下都能正常工作,但它有一个主要缺点——可见的分隔线增加了额外的视觉重量。太多可见的分隔线会使整体设计感觉很重。

 

可以按元素和间距而不是线条来划分。更少的线条和其他可见的分隔线总是会给您的界面带来更干净的感觉。

 

5

 

使用不同大小的元素有效地创建了视觉层次结构。

 

5.营造优雅的感觉

我们上面回顾的所有示例都有一个共同点——它们描述了如何使用空格来提高产品的可用性。但是空白也可以用于纯粹的审美目的。具有大量空白的布局可能会传达一种奢华感。许多奢侈品牌使用空白作为主要工具,将他们销售的产品置于聚光灯下。

 

6

 

劳力士网站使用空白将用户注意力引向他们希望访问者看到的产品。

 

结论

空白是一个强大的设计工具;大方的空白可以使几乎任何类型的布局都变得简单而吸引人。但与任何其他设计工具类似,空白可能很难掌握。掌握空白需要练习。素马设计已经与各个行业合作过,并且有一个经过验证的产生结果的过程。

 

如果您正在筹备新建网站,素马设计乐于为您服务,最重要的是,在您签署或支付任何费用之前,我们会为您的新网站提供免费的自定义模型,这是最好的部分。