视觉设计中的相似性原理

用户体验   2020-09-17

具有相似视觉特征的对象最有可能是相关的,或者至少在用户界面设计方面应该如此。对于每种类型的UI元素,清晰,一致地应用视觉规则对于帮助人们轻松理解和使用设计至关重要。这是因为每次交互都会使用户对其他类似元素的功能产生期望。

定义相似性原则指出,具有视觉特征的物品比不相似的物品具有更大的相关性。


该图显示了一个4 x 3形状的网格,其中第一列是3个圆,然后是一列三角形,然后是另一列圆和最后一列三角形。
由于相似性的原理,这种形状的网格通常被视为四列(而不是三行或单个大组)。每种形状类型组成一组。


相似性原则是格式塔心理学家在20世纪初发现的一组原始视觉分组原则(以及接近性和封闭性)之一。这些心理学家的目的是了解人们在视觉上如何感知世界,并确定某些元素是否属于同一群体。后来,更多的分组原则(例如common region)被添加到原始格式塔列表中。

视觉设计人员可以并且应该使用这些格式塔原理来创建可用的用户界面。

使用共享特征表示关系

相似性原则只是简单地指出,当项目具有某种视觉特征时,就假定它们以某种方式相关这些项目不必相同,而只需共享至少一个可见的特征(例如颜色,形状或大小)即可被视为同一组的一部分。

相似性原理与其他几种视觉分组原理的区别在于,尽管分布分布,共享特征仍可以统一元素另外,视觉上相似的项目也可能是其他基于位置的分组的一部分。因此,尽管相似性原则不一定是最强的分组原则,因为它经常被邻近区域或公共区域所压倒,但它可以被认为是最有弹性的。

颜色

应用共享的颜色来表示某些项目是相关的,因此可能具有相似的功能,这很有效。通用颜色往往比其他特征(例如形状)更加突出,因此可以用于组合不同类型的元素并传达它们确实相关。


该图显示了由圆形和三角形交替列组成的4 x 3网格,其中中间的行全是蓝色。
颜色是很强的相似性特征,可以将不同类型的元素组合在一起。尽管形状呈柱状排列,但在这里共享的蓝色仍会产生行的感觉。
该图显示了由交替的圆形和三角形列组成的4 x 3网格,其中第一行包含2个蓝色圆圈,中间列的第一个圆圈和最后一个三角形是蓝色,而底部一行的中间三角形和圆圈是蓝色。
即使在不同形状的随机图案中使用颜色,颜色也继续充当清晰的共享特征,创造出分组感。


在用户界面设计中,颜色通常用于指示常用功能例如,最佳做法是使用单个链接颜色作为与用户交流可点击内容的主要方法:共享颜色允许可点击元素以组的形式突出显示,而无论链接在页面上的位置如何(与普通链接相比)非交互式文本以默认文本颜色显示。此链接颜色应仅保留给交互式文本和其他可单击元素,因为用户会意识到所有具有此特征的项目都是相关的,并且以相同的方式工作。因此,链接颜色不应用于关键字,不可点击的标题或实际上不可点击的附近图标。


屏幕截图显示了一个红色的上传图标,该图标位于红色的“记录或上传”按钮上方。
Tribute.co:上传图标和其下方的“录制”或“上传视频” 按钮使用相同的红色,似乎是一个组。在这样的设计中,用户可能会认为单击图标或按钮会触发相同的功能-但是,此图标纯粹是装饰性的,不可单击。


相同颜色的按钮将被视为具有相同的重要性级别。因此,应为主要号召性用语保留单独的颜色,以帮助它们在辅助按钮中脱颖而出在下面的示例中,“ 消息中心”中的所有按钮均为绿色,因此用户必须花时间确定哪个是提交表单的主要按钮。(此外,“ 提交”按钮离消息区域很远,并且根据Fitts的定律,这种缺乏接近性也会降低用户的速度。)


屏幕截图显示了表单上方“消息中心”标题下方的绿色“取消”和绿色“提交查询”按钮,以及表单下方的绿色“添加附件”按钮。
Synchrony Bank 消息中心中提交” 按钮与“取消” 和“添加附件” 按钮共享相同的颜色,并与这些辅助操作混合在一起。


形状

从前面的插图中可以看出,形状也可以用来表示分组。在界面设计中,我们通常将相同的矩形形状应用于某些元素,以表示它们都是按钮,或将某些类别链接设置为圆形或圆形“丸”形,以增强它们之间的关系。


Asos.com上的产品列表页面,与矩形过滤器按钮相比,显示了用于子类别导航链接的圆形按钮。
Asos.com上的子类别链接都被塑造为圆角矩形,以增强它们作为一个整体的感知力,并传达其与导航类似的功能。相反,下面的过滤器的矩形形状表示该组具有不同的功能。


当元素共享形状时,我们可以假设它们是相同的,从而忽略了细节,例如附带的标签,形状内的小文本以及表单中的细微差异。如果元素实际上意图不同,那么这可能会成问题。例如,Makr平板电脑应用程序中“ 产品”导航中的几个图标是非常相似的形状,其中两个是相同的。视觉相似性可能会错误地传达类别相关的信息,除非有目的地将这些类别归为一类?确保一组图标在视觉上保持一致与发出意想不到的图标对之间的关系过于强烈之间,存在一条细微的界限。


屏幕截图显示了在导航菜单中用于各种产品的外观非常相似的图标。
避免使用相同或形状相似的图标代表不同的类别,因为它们可能错误地表示一种关系。在Makr应用程序的导航中,“保存日期” 和“ RSVP” 使用了相同的图标,“感谢卡” 也使用了另一个非常相似的图标


同样,我们过去对视觉指标作为列表中项目的区分项的研究发现,当指标具有独特的形状时,用户能够更快,更准确地找到某些项目-如果指标看起来过于相似,则扫描和查找所需的时间会更长它们有何不同。例如,在Etsy主页上,某些产品被标记为具有免费送货或标记为类似形状的畅销书。值得庆幸的是,这两个指示器至少具有不同的颜色,并且畅销书指示器包括一个小图标,以帮助视觉上将它们区分为与免费送货项目不同的组


Etsy.com上5个产品列表的行,其中有几项表示为畅销产品(以黄色标记)或具有免费送货(以绿色标记)。
Etsy.com:“免费送货” 和“畅销书”指示器被围 在不同颜色的圆角矩形中,并且畅销书还包括一个特殊图标。这些功能使这两个指标易于区分。如果它们是相同的颜色,则这种共享的形状会使它们看起来过于相似,并且会使用户放慢速度。


如果使用得当,则在整个界面中重复显示相同的图标表明这些关联的元素将以相似的方式起作用。例如,不同的图标可以指示哪些菜单项是到达登录页面的链接,而不是展开手风琴,或者哪些链接可以将用户发送到外部站点。在下面的Etsy主页示例中,箭头图标放置在各种元素旁边,以指示它们是可单击的,而不是使用颜色作为相似特征。


Etsy主页的屏幕快照,其中显示了在不同文本处理方式的几个文本链接旁边显示的向右箭头图标。
箭头图标类似地放置在每个可单击元素的旁边。这表明它们在功能上相似,即使字体处理有所不同。


尺寸

大小也可以用来表示关系。大小相似的对象可能被认为是相关的,通常具有相同的重要性。


在4个较小的黑色圆圈中随机排列了3个大黑色圆圈。
与较小的圆圈相比,该图中的大圆圈可能被认为是相关的并且属于不同的组。


在用户界面中,我们经常使用大小来强调内容或号召性用语中最重要的部分。相同的大小表示相同的视觉突出度,并且在所有其他条件相同的情况下,将共享该属性的所有元素连接在一起。一致地使用大小会创建视觉层次结构,并使页面易于扫描,因为人们可以立即看到并理解这些类型分组。

例如,在产品列表页面中,每个单独的产品列表都以相同的大小(和相同的形状)显示。这种一致的视觉样式告诉我们该区域中的所有物品都是产品。共享大小将其与其他不同的UI元素分开。当某项商品在此列表中以不同的大小或形状出现时,就会突出显示为不属于产品分组。例如,在Anthropologie.com上,产品集合的促销以单个产品列表大小的两倍显示。


Anthropologie.com上的产品列表页面,在单个产品链接的网格中显示了两个较大的促销项目矩形。
产品集合的促销以比周围产品列表更大的尺寸显示,以有效地传达它们是另一种内容元素。


相反,当各种类型的内容以相同或非常相似的大小显示时,即使它们不同,也常常被认为是相关的。此问题通常发生在网站右侧,实际内容和外部广告通常以相似的大小显示。由于用户希望看到广告显示在正确的位置,因此那里的所有内容都会遭受横幅广告的盲目性,尤其是样式相似时这就是为什么我们在教学视频研究中的一些参与者完全错过了在Martha Stewart网站上展示如何完成餐巾纸折叠的视频教程的原因-它的大小与周围的所有展示广告完全相同。


玛莎·斯图尔特(Martha Stewart)网站上的说明页面,显示在页面右栏中的餐巾纸折叠操作方法视频,其样式与附近的广告类似。
用户将玛莎·斯图尔特操作方法文章的视频误认为是广告,因为它的大小和形状与该区域的其他广告类似。


许多其他类似的特征

颜色,形状和大小不是显示相似性的唯一方法;还有许多视觉特质可以用来传达某些元素是相关的。相同的字体处理(粗体,斜体等)可以指示文本片段相关并且代表相同类型的信息。类似地,方向甚至运动都可以发出信号,表明元素属于同一组,并且可能具有相同的含义或功能。相似性原理在视觉设计中无处不在,几乎在所有存在的界面设计中都可以看到相似性的效果。

在我们关于人的思维和可用性的培训课程中,了解有关视觉的更多信息,视觉感知如何应用于UI设计以及其他心理学原理


维好维可-用户体验体验创新设计

联系我们:

关注我们微信

关注我们,持续输出与分享

+86-21-51115850
©2010-2022 维好维可 | 用户体验创新设计咨询公司-版权所有
沪ICP备19006116号-1

请留下您的联络方式
我们将在两个工作日内安排专人与您联系

合作咨询
+86-21-51115850
© 2010-2022  维好维可 | 用户体验创新设计咨询公司
沪ICP备19006116号-1
维好维可-微信二维码