UI设计中负面空间的重要性

我们常常认为沉默、空虚或无色对我们有害。我们认为他们是理所当然的,而不认为他们是对比的坚实基础。只有沉默才能让我们知道声音的价值。只有空的空间才能让我们明白我们想用什么来填充它。只有无色让我们感到颜色更明亮和更深,当他们出现在舞台上。只有缺乏空气才能让我们知道它是多么重要。今天,我们谈论的是设计中的空气。让我们来讨论一下负面空间。

什么是设计中的负空间?

基本上,负空间(或通常称为空白空间)是布局中空无一人的区域。它可能不仅围绕您放置在布局中的对象,而且还围绕它们之间和内部。负空间是页面或屏幕上所有物体的一种喘息空间。它不仅定义了对象的极限,而且还根据盖斯塔尔特原则并建立有效的视觉性能。因此,空白空间是一个正确的设计元素,对积极的用户体验有很大的影响。"白色空间就像一张画布:它的背景将元素聚集在一起的设计,使他们脱颖而出"-马兹·苏加德说互动设计基金会.

图形设计中的负空间经常出现在徽标、插图、海报和创意字母中,它成为视觉演示的活跃部分,使关键对象更具表现力。例如,在博客插图下面我们可以看到背景元素(月亮)如何扮演对比负空间的角色,使宇航员看起来更加生动和动态。

在网站和移动应用的 UI 设计中,负空间是高可用性的一个重要因素,通航性界面。布局元素周围的负空间也称为宏空间,而它们与内部(用于字母和笔画元素)之间的空间也称为微空间。

空白空间和负空间的区别是什么?

简短的回答:没有区别。这些术语是完全可互换的。

为什么这种现象用两个不同的术语来称呼?如果你追踪起源,很容易回答。术语"空白"来自印刷设计,因为当时页面大多是白色的,所以白色空间是周围的一切,在字母或符号之间和内部,以及周围的插图。今天,在设计中使用,这个术语与白色无关:它是所有关于空白空间,而不是颜色。"负空间"一词来自摄影:在照片拍摄中,它们定义了正空间(吸引注意力的物体)和负空间(背景)。

重要的是要记住,网页设计中的负空间不一定只有白色——您可以使用任何颜色、纹理,甚至图案或背景图像。

为什么负空间很重要?

想象一下,自己走进一个满是各种工作人员的房间。书架、箱子、袋子、成堆的书和衣服,桌子上摆满了各种各样的东西。你能集中精力在这样的条件下吗?你现在真的需要这些东西吗?你能找到你需要什么,需要多少时间吗?嗯,这与用户在没有重要负面空间空气的情况下打开页面或屏幕的感觉非常相同。

客户端和一些设计师都可能希望将尽可能多的元素和功能放在一个页面或屏幕上,以为这将节省游戏,并将对客户有所帮助。但这是一个错误:事实上,用户不需要一次的一切。更有甚者,太多缺乏足够空气的元素会显著提高分心程度:信息和交互式元素超载,其中大多数用户不需要这些元素,用户将不得不努力寻找他们确实需要的东西。如奥伦·沃尔特提到,"如果一切都是为了引起观众的注意,什么也没有听到"。

在设计中对负空间采取深思熟虑的方法的好处中,我们可以提到以下几点:

  • 它支持页面的可扫描性
  • 它增强了视觉层次结构
  • 它使元素之间的键可见和自然感知没有额外的手段,如表,帧,箭头
  • 它在页面上提供了足够的空气,这样它就不会感到杂乱无章
  • 它设置用户对核心元素的关注,并降低分心程度
  • 它增加了风格和优雅的页面。

例如,让我们来看看登陆页大城市指南.在这里,设计师应用背景照片,它扮演负空间的作用宏观水平。更重要的是,照片的元素和主要复制元素的字母是相互关联的:它使负空间成为设计的一个活跃元素,并给页面一个统一的谐波外观。

受负空间影响的核心因素

正确使用负空间可能会对以下用户体验因素产生重大影响。

可读性和可读性:如果元素之间没有足够的空间,它们就变得难以阅读,需要额外的努力。这可能是眼睛和大脑紧张的一个强烈原因,虽然许多用户将无法制定问题。适量的负空间,特别是微空间,可以解决这个问题,使这个过程更加自然。因此,负空间直接影响到字体排印学在页面或屏幕上。在音乐中,暂停的作用与声音相同。在阅读中,它的工作原理是一样的:正确放置空格使文本更容易阅读.

品牌:如果您检查任何徽标指南,您会发现设计人员会定义其周围适当的负空间量,以便正确感知。违反这些规则对视觉性能有害。

资源的性质:负空间对所谓的设计基调有影响。例如,新闻资源在主页上的空白空间将少于博客,以设定平台充满动态显示的数据的情绪和理解。

注意比:足够的负空间可增强视觉层次结构,并允许用户关注关键元素。

在此基础上,负空间对视觉感知有影响,例如:

  • 复制内容
  • 图形内容
  • 导航
  • 身份。

让我们检查几个示例。这里是大景观的主页。没有任何视觉框架和表,由于负空间的平衡使用,设计师建立了强大的视觉层次结构并允许用户在瞬间扫描各种内容块。这样,设计看起来井然有序,但轻盈通风。白色背景和布局安排使其看起来类似于杂志页面,协调地告知读者这个在线杂志的目的和性质。

另一个例子是移动应用程序上部应用:这里的负空间都是黑色的,与界面的核心元素形成了很大的对比。对于整个屏幕,只使用一条直线。然而,由于足够的空气和没有干扰,所有的布局看起来有条理,可读性强。它还支持造型师极简主义的优雅,以有利于审美满意度。

需要考虑的陷阱

1. 混淆术语。当您与可能不太熟悉设计术语的客户交谈时,请确保在描述设计解决方案之前解释负空间的含义。对于一个非设计者来说,可能很难理解为什么"这个屏幕需要更多的空白",看着完全黑色的背景以及负面的空间可能与一些不好的东西有关——但它不是。所以,在使用这些术语之前,不要忘记点缀所有的i。

2. 希望减少负空间,将更多内容放在页面或屏幕上。这不仅发生在 UI 设计中:您可能会听到室内设计师建议如何向希望将 4 个书柜保存在一个房间而不是 2 个书柜的客户或建筑师解释为什么大楼周围需要空空间,使其外观和服务更好。更重要的是,有时重新规划元素,更好地利用负空间,会产生房间或建筑比实际上更大的错觉,而您必须在移动屏幕或网页上放置的数据也是如此。决定什么是更重要的,什么是次要的,什么是可以消除的,以便直观地导航用户。负空间将有助于使屏幕或页面的谐波外观,即使它充满了信息和功能。

3. 优先级差。消极的空间不是万能的,如果深思熟虑的话信息架构不站在界面后面。在考虑设计皮肤之前,您必须决定用户如何找到实现其目标的快捷方式,并解决他/她与应用程序或网站的问题。在制作外观呈现风格之前,先规划此路线;否则,即使是包括负空间在内的视觉元素的最佳平衡也不会有效工作。

 

推荐阅读

9个构建视觉层次的有效提示

黄金比例在UI设计中的运用

本页面最后更新于 2021年05月22日 10:18