用户体验中所包含的格式塔理论

2020-03-27 19:01:57 阅读 8312 本文来源:美啊教育
分享至:

本文从格式塔理论在界面设计中的应用入手,着重探讨了UI设计中有效内容分组的相似原理。

首先格式塔理论是什么?

格式塔(Gestalt)这个术语来自德语单词Gestalt [ɡəˈʃtalt],意为“形状,形式”。它主要用于认知心理学领域,探索人们不断从看似混乱的世界中获得的数据,从而进行有意义感知的规律。这背后的基本思想可以从格式塔心理学家库尔特·科夫卡(Kurt Koffka)的一句名言中可以找到答案:“整体不同于部分的总和”。当人们感知到由许多元素组成的复杂对象时,他们会采用有意识或无意识的方法将这些部分安排到整个组织的系统中,而不只是简单的对象集。它可以在不同的感知水平上工作,但是视觉部分似乎是设计人员创建界面时最感兴趣的部分。

设计师为什么会对这个问题感兴趣呢?因为它有助于更好地了解应用程序或网站用户的心理。当您知道影响视觉感知的因素时,它将使您的UX设计过程变得更加娴熟,从而提供更高的成功交互几率,并降低用户对这种方式可能产生的误解。在此方法的各个层次中,分组的原则可能是设计人员最需要考虑的。这些原则基于这样的观点:人们将他们看到的东西与一些模式一起组织成五个全局类别:接近,相似,连续,封闭和联系。

在用户界面中,经过深思熟虑的分组原则使布局元素的感知更快更容易,并在不同层次的交互中建立优先级。在设计实践中,我们将讨论分组的相似原则。

相似性原则

相似性原则基于这种观点,即具有相同视觉特征的物体(例如形状,大小,颜色,纹理、价值或方向)将被视为属于同一类。这意味着,如果一个人感知到一组元素,则他倾向于将具有一个或多个特征的元素归为一组。因此,设计师通过赋予不同的布局元素相同或相似的视觉特征,来刺激用户设置适当的连接,从而更快地理解整个方案。

相似性可以基于各种视觉参数,例如颜色,形状,大小和方向。让我们来看看一些由Tubik团队设计的实际例子。

颜色

20200327185212918.jpg

上面是简单的日历应用程序中应用颜色相似性的例子。在日历屏幕上标记星期几的字母在视觉上用一种与日历网格中数字使用的颜色不同的色彩分组。因此,快速浏览就足以分隔这些类型的符号-颜色简化了第一次获取信息的过程。颜色相似性的下一个层次出现在数字字段中:用户选择的一周中的日期看起来更亮,而月份中的其他日期则看起来更加暗淡。关键的交互区域被高亮地着色并呈现出视觉上的强调,这是立即可察觉的。因此,颜色可以通过分组的原则,让设计师为用户提供有效的视觉层次,使导航结构更简单。

20200327185235569.jpg

这里的另一个示例显示了如何将颜色分组有效地应用于图形界面中。您可以看到待办事项应用程序的界面,与正在进行的任务相比,已标记为完成的位置具有不同的颜色。使用户可以快速检索列表,并在几秒钟内将各种任务分组。

20200327185250933.jpg

按颜色分组的原理更复杂的应用是标记内容的类别和内容块。它可以在界面上很好地工作,这些界面包含组织在多个级别上的各种内容,例如博客,电子商务或教育资源等。颜色标记简化了导航并保持了设计的一致性,从而使用户能够记住颜色提示并查找他们想要的内容。上面的例子展示了应用这一原则的博客应用程序:各种帖子按照全局类别进行组织,并用图标上的颜色、帖子上的彩色标签和用户配置文件中相应的帖子快速统计信息进行标记。如下所示,Moneywise应用程序中应用了相同的原理。

20200327185306529.jpg

这是专门用于经济学的教育应用程序:内容分为四个大的类别。用于标记类别的颜色用作所有属于该类别的卡的背景颜色。因此,在交互过程中,它可以帮助用户快速定位自己当前所处的位置。

当然,这种颜色分组方式不仅可以将一个屏幕上的元素组织起来,而且还可以将所有数字产品中的不同屏幕或页面组织在一起,从而使颜色分组更进一步。然而,它也符合格式塔原则:这种方法允许设计人员创建外观和感觉一致的界面,并支持从一个屏幕到另一个屏幕,从一个交互到另一个的视觉感知的总体完整性。

尺寸

将元素按大小分组的相似性原则是创建直观和用户友好界面的另一个基石,因为它为支持用户的强大视觉层次结构奠定了基础。这种方法有助于设置优先级并使最重要的内容可见。通过这种原理对相似的内容元素进行分组可以安排它们之间的连接,通常比用户阅读或查看所有详细信息要快。

20200327185330884.gif

该示例以建筑公司的公司网站为特色。同时使用两种分组原则的关键字支持表示公司利益和方法的复制块:它们使用不同的大小和不同的文本方向。在交互过程中,它们显然被视为相关元素。同样,扩展菜单页面显示印刷层次结构,按大小对副本元素进行分组:关键字,类别和子类别。

20200327185348019.gif

这是按大小和颜色分组的另一个示例。我们可以看到选项卡栏的概念,其中具有相同重要性的交互元素以相同的大小和淡入淡出的阴影给出,而核心交互元素(+按钮)则通过鲜艳的颜色和更大的尺寸而变得醒目。此外,尝试通过该按钮添加内容,为用户提供了三种用于不同类型内容的选项。再者,该界面将出现的三个按钮与父按钮使用相同的颜色,但尺寸较小,将其分组,该界面使用户能够根据认知感知的典型操作轻松设置导航元素的连接和层次。

形状

20200327185403815.gif

对网页或屏幕上的元素进行分组的另一种方法是按形状。 

该示例显示了使用相同形状的卡来模拟与物理对象(数据卡的基础)的交互的应用程序。该方法允许用户将内容块的集合感知为相关。

20200327185416828.jpg

上面显示的Homey应用程序界面还显示了从一个屏幕到另一个屏幕按形状分组的示例:标记房间的按钮使用圆角正方形,而特定房间屏幕内各种指示器的按钮使用圆形。它在相关的布局元素和应用程序中的全局导航之间设置了清晰的连接。


责任编辑:sunny
分享至:

联系客服

故障反馈