用格式塔原理增强用户体验

来源:简书用户 cherri二哈(授权发布)心理学和设计包与用户体验密不可分。每当我们的目标是解决需求的时候,我们的专业就需要有同理心。随着我继续深入研究心理学进入设计领域时,我偶然发现了格式塔原则。什么是格式塔原则?格式塔心理学是一种将人的思想和行为视为一个整体的思维学派。当试图理解我们周围的世界时,格式塔心理学建议我们不要只关注每一个小部分。相反,我们的头脑倾向于将对象视为更大整体的一部分,并将其视为更复杂的系统元素。这个心理学院在...

来源:简书用户 cherri二哈(授权发布)


心理学和设计包与用户体验密不可分。每当我们的目标是解决需求的时候,我们的专业就需要有同理心。随着我继续深入研究心理学进入设计领域时,我偶然发现了格式塔原则。

用格式塔原理增强用户体验

什么是格式塔原则?

格式塔心理学是一种将人的思想和行为视为一个整体的思维学派。当试图理解我们周围的世界时,格式塔心理学建议我们不要只关注每一个小部分。相反,我们的头脑倾向于将对象视为更大整体的一部分,并将其视为更复杂的系统元素。这个心理学院在人类感觉和感知研究的现代发展中发挥了重要的作用。

这次发现格式塔原理让我充分理解如何将这些原理融入到我的设计中。我将分享如何将这些原则作为设计解决方案并应用于我的网站和应用程序中。

一、接近

当物体彼此靠近放置时,这些物体被视为一个整体而不是单独的个体。以下是我们如何在设计中使用接近法则解决问题的一个例子:

用格式塔原理增强用户体验

 标题和链接相距甚远

正如我们所看到的,类别标题(在线预订和邮轮)和链接(了解更多)彼此分开,这使得它们看起来像浮动元素。如果我们将创建一个线框,它会看起来像这样:

用格式塔原理增强用户体验

线框图

整个组件脱离了上下文,因为没有将图像,标题和链接关联在一起。因此接近法则是我们的解决方案。把三个单独漂浮在外层空间的元素,作为一个整体组件。

用格式塔原理增强用户体验

中心对齐的标题和链接

在我们使用接近原则的设计解决方案中,我通过使用中心对齐来缩小标题和链接之间的距离。通过这种方式,我们能够将3个元素(图像,标题,链接)结合在一起,这有助于我们解决缺失的上下文问题。

二、相似性

当对象彼此相似时会出现相似性。人们通常将它们视为一个群体或模式。在下面的设计问题 A 中,我指出了蓝色的文字颜色。原因在于,在用户交互中,Heavy Data User 和 Flexible Maximizer 是相似的 - 它们在界面中实际上都是标签。

用格式塔原理增强用户体验

设计A

那么,是什么让这两个元素彼此无关呢?

答案很多。但是更简单的说明,没有任何东西将这两个元素绑定在一起,这使得它们看起来很分散。正如我们所看到的那样,很明显,界面的品牌颜色是绿色的,但突然间一个蓝色的文字颜色从无处跳出。

用格式塔原理增强用户体验

作为我们的解决方案,我通过将文本颜色设置为绿色并调整按钮的左右填充来创建相似性,以便它更接近另一个按钮 Flexible Maximizer。这个设计问题A可以通过重新设计来进一步改进(这实际上需要重新设计),这样可以更加简化用户的体验。但现在,让它在制作中改动一小步来到达相似性原则

用格式塔原理增强用户体验

设计B

在设计B中,我们来观察它的基本部分 - 类型系统,它们是:

标题: 40px Regular

正文: 20px Regular

文字链接: 20px Regular

乍一看,我们可能会认为这只是一个我们可以忽略的普通类型系统。但是当我们仔细观察时,问题发生在正文文本和文本链接之间,它们都共享相同的文字系统(20px Regular),这可能导致用户混淆并且缺乏辨识度。当他们浏览网站时,他们可能会犹豫,他们正在交互的是正文文本还是文本链接。

好的,那么我们如何解决这个问题呢?

用格式塔原理增强用户体验

作为我们的相似性解决方案,我们需要稍微调整Type系统:

标题: 40px Regular

正文: 20px Regular

文字图标链接: 20px 粗体

我们通过使文本链接加粗,并且添加了一个图标,这样就增加了对比度。通过进行这些更改,我们在整个文本链接中创建了相似度,并加快了用户的认知加载速度。

超出主题的快速提示:在创建一个 Type 系统时,请选择具有各种权重的字体(细,轻,常规,粗体等)。我们的目标不是较少使用权重,以获得更好的对比度,而是要具有几种不同权重的字体大小。

三、焦点

焦点是关注领域,强调或找到构图中的差异,以捕捉并保持观看者的注意力。在焦点问题上,我们将展示两个设计问题:

用格式塔原理增强用户体验

在上面的例子中,元素的布局实际上没有问题。但是我们拥有的信息层次结构 - 主要操作和次要操作共享相同的按钮系统。我们可以看到,这个界面的目标是让用户下载应用程序,并且FAQ是一个支持文档,让用户更好地理解他们的应用程序。因此,我们的解决方案是:

用格式塔原理增强用户体验

利用焦点原则,将 View FAQs 按钮界面更改为边框按钮,为下载应用程序按钮使用最高级别效果。交换顺序,主要行动在右边和次要在左边。其原因在于古腾堡图表(Gutenberg Diagram):右边的两个点(在“Z”的第一个点及其最后点)是用户期望采取行动的地方。因此,在这里,号召性用语放在左侧。

我们通常可以看到的常见的按钮设计问题也仅仅是为了增加主题外的一些东西,为不同功能创建一种按钮界面(填写注册按钮,取消,加载更多内容,阅读更多内容等)。

难道创造一致性不好吗?

是的,我们都知道一致性在UX设计中扮演着重要角色,但我们称之为功能一致性。如果我们将创建相同类型的按钮设计来满足不同的功能,则会导致用户不一致的体验,并且可能会影响我们的业务目标。

脱离主题快速提示:按钮设计一致性=按钮功能


用格式塔原理增强用户体验

两个按钮具有相同的视觉层次结构

这种设计也会出现同样的问题。“确定”和“取消”按钮共享相同的设计风格,这要求用户彻底阅读按钮标签,以便他们能够知道提交和取消的内容。使用焦点原则,我们减少了阅读标签的时间。

用格式塔原理增强用户体验

交换按钮顺序并将确认按钮从 OK 改为 Submit,以使其更加便于理解,并通知用户,一旦他点击按钮,就会发生一个动作。

四、共同区域

共同区域原则与邻近度高度相关。它指出,当物体位于同一封闭区域内时,我们认为它们被分组在一起。

用格式塔原理增强用户体验

Spotify、迪士尼、Netflix等功能不会与其类别一起分组,并且似乎是浮动元素。为了使它更简单,创建一个线框将看起来像这样:

用格式塔原理增强用户体验

从上面的线框中可以看出,它比4个整体组件更可能是单个元素。因此,作为解决方案,共同区域原则:

用格式塔原理增强用户体验

在线框中,我们使用框边将所有特征包含到它们各自的类别中,以便将它们视为一个而不是单个元素。以下是实施:

用格式塔原理增强用户体验

除了边界框之外,我们在Netflix元素的右上角用一个信息图标(彩色黄色图标)替代了功能列表的空间,一旦点击,会出现一个工具提示。

用格式塔原理增强用户体验

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36423/

(0)
交互精选交互精选
上一篇 2018-04-11
下一篇 2018-04-11

相关推荐

  • 蔚来ES8正式上市 | 重新定义汽车用户体验

    就在刚才,首届NIO Day蔚来日在北京五棵松体育馆圆满结束。蔚来ES8也正式上市并开启预订。近万名蔚来好友相聚于此今晚,这些信息你不容错过:蔚来ES8正式上市 公布售价蔚来ES8售价公布ES8基准版补贴前售价44.8万起,限量1万辆创始版补贴前售价54.8万,用户也可以选择电池租用方案,车价比常规购买低10万,每月支付1,280元电池月费,同时可享受电池升级服务。ES8上台亮相源于赛道冠军的极致性能4秒SUV俱乐部最大功率480千瓦(...

    2018-02-02
  • UI设计师扔掉PS,使用Axure是怎样一种体验?

    ——我的生活将再不会像从前那样……所以,Axure……这真的仅仅只是一个做原型的工具吗?UI设计师可以完全放弃其他工具,仅仅靠Axure完成所有工作吗?这个程序有什么优缺点呢?下面我将试着回答这些问题。最近我开始放弃Adobe Photoshop转向Axure,然后发现了它除了原型制作以外的潜能,也许我的生活将有大不同。如果有时候你不得不打开PS查看位图细节,你就会知道它到底有多慢。近年来PS功能越来越丰富,当我使用了另一个看起来明显简...

    2018-04-17
  • 华润创业、建信融通、便利蜂等4家名企春招

    求职奶爸华南最活跃的大学生求职平台旗下公号求职奶爸、校园宣讲会V、名企校招实习,50W+粉丝企业合作请加 QQ 3527488757 或微信 naibabd01(添加请备注公司名称)学生求职请加创始人微信 qiuzhinaiba101全国 | 华润创业全国 | 建信融通全国 | 便利蜂广州 | 卡宾服饰华润创业/ 公司介绍 /华润(集团)有限公司是一家在香港注册和运营的多元化控股企业集团,其前身是 1938 年于香港成立的联和行,194...

    2018-04-08
  • 创先争优|张迪:创业艰难,但梦想会让你永远保有对生活的热爱

    争先创优为全面贯彻党的教育方针,鼓励研究生勤奋学习、自强不息、积极实践、勇于创新,促进优良校风学风建设,培养德、智、体全面发展的高层次复合型人才,学校结合实际,研工部于2017年10月-11月组织开展了重庆大学2016至2017学年度研究生“争先创优”评选。为响应学校号召,UMD研究生网络文化工作室根据工作安排,特推出重庆大学“争先创优”优秀研究生人物志系列活动,从中挑选一批先进研究生代表,通过微博、微信、网站、电子显示屏等网络宣传平台...

    2018-03-01
  • VR交互设计

    大家好!洋仔我又来了,上篇文章群爷详细的介绍了什么是VR以及VR需要的条件,不知道大家对于VR有没有一个深刻的了解呢?此图为转载图片为了完成这篇总结性的文章,你们的洋仔我又是看了好多篇文章,因为VR这个需要有各种各样的设备支持,所以呢,我也是去尝试了几个VR类的游戏,上周去了医博展,正好群爷也是展方,趁着这个机会,让群爷又带我体验了一把AR和VR在医疗方面的用途。那VR的交互设计到底是怎样的呢?(VR切水果)此图为转载图片首先,VR交互...

    2018-04-21
  • 感恩之家与河马教育签订人才需求战略合作协议

    2018年2月24日,河南感恩之家实业有限公司(以下简称感恩之家)与河南河马教育科技有限公司(以下简称河马教育)签订人才需求战略合作协议。感恩之家人力资源经理朱昌林与河马教育创始人陈滨感恩之家惠民工程是实体企业+互联网+实体店铺+分享经济的大惠民工程。在即将上线的电商平台部分,我们精心筛选了上百款来自全国各地的特色产品。在展示产品安全、原产、优质的同时,我们充分挖掘地域风土人情、历史人文,围绕产品特色讲述一个个中国物产的故事。这些都需要...

    2018-03-03
  • 《用户体验可视化指南》视频讲书(1)

    我们选择了人民邮电出版社2018年出版的《用户体验可视化指南》作为第一本,带着大家啃书。原因是这本书真的非 常 好,好到可以成为用户体验设计和研究领域的大辞典了。作者引经据典,却因为篇幅受限,很多没有详细展开。不知前因后果的读者,因此会错过很多有意思的观点。所以UXREN为你详细拆解《用户体验可视化指南》,每次10-20分钟,3首歌曲的时间,日积月累,透彻理解经典书籍。第1期: 前言《用户体验可视化》前言部分,介绍了为什么会提出共线图(...

    2018-03-27
  • 3000字,详细梳理用户体验要素之核心五要素

    网站看起来如何,它怎样进行运转,它让你执行什么。这些决策都是互相依赖的,它告知并影响用户体验的各个方面。当产品发展到一定阶段,系统化的用户体验设计对于产品在激烈的商业竞争中保持核心竞争力至关重要。比如最近很火的共享单车,开锁是否方便这样一个小细节直接决定着用户选择,用户体验就成为了商机。这里与大家分享用户体验要素的核心五要素。要讨论的事今天跟大家分享的是用户体验的五个核心要素。虽然用户体验要素远不止这五个,但作为梳理一个产品的用户体验开...

    2018-03-20
  • 全面解读!人工智能如何改善五大用户体验?

    点击【阅读原文】,即将IPO独角兽,抓住上市前最后的机会!最近两年人工智能技术在金融、安全、交通、医疗、公共服务和制造业等领域逐渐落地,随着技术的成熟,人工智能将会在更多领域影响人类的生活。以人为本的人工智能设计会变得更加重要,本文会从安全性、效率、易用性、场景化、个性化五个方面阐述人工智能如何改善现有的产品和用户体验,这五个方面存在着各种联系并相互影响。安全性越接近系统底层的技术越影响用户体验,例如手机中毒或者信息被盗都会对用户产生巨...

    2018-05-05
  • 气定神闲的珍珠

    快快点击关注人言风华绝代太难得,然而,一个人终日沉浸在王者农药里碌碌无为,几时能被时光打磨成气定神闲的珍珠?但,珍珠是天然的馈赠,美,则是一种修炼。这世界上的一切精致动人,都是狠狠的被修理出来的。软了不行,硬了也不行,得软硬兼施。就像选专业一样。就像选择计算机软件技术专业一样。你想让自己活得精致,过得洒脱,不对自己狠一点,社会对你狠一点。自己的狠,是由内而外的质变。社会的狠,是苟且偷生。自己的狠,是内软外硬,由环境的硬塑造内心你的软,打...

    2018-03-15