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

来源:简书用户 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

相关推荐

  • 解析「交互设计七大定律」在设计中的应用(上篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计,接下来,笔者通过一些实例来解析下这些原则在设计中的应用~由于文章有点长,影响阅读体验,本文将分为上下两篇来发~一费茨定律(Fitts’ Law)1、费茨定律(Fitts’ Law)简介费茨定律是由保罗·费茨(Paul M. ...

    2018-02-03
  • 如何将“用户体验”做到极致?我有绝招!

    如何将“用户体验”做到极致?我有绝招!无崖子现在大多数掌柜的没有重视用户体验或者说不知道如何做用户体验。三只松鼠相信很多掌柜的都很熟悉,坚果类目的老大,三只松鼠是如何成功的呢?三只松鼠的成功不是偶然的而是必然的,三种松鼠将“用户体验”做到了极致,三只松鼠的创始人:章燎原是传统行业出身,在做三只松鼠之前在传统行业就对坚果非常熟悉,章燎原对坚果行业的把控至今无人能敌,三只松鼠的成功一部分是对供应链和仓储的把控,还有就是注重“用户体验”的极致...

    2018-03-16
  • 在Sketch中做游戏?盘点那些你不知道的奇葩Sketch插件

    静电说:我想你一定是看了这个标题进来的,对,今天静电就要来给大家介绍几款看起来很奇葩的Sketch插件,甚至有些插件可以直接生成游戏!诶哟厉害了我的哥哥!来看看吧。Latex Sketch PluginLatex这款插件可以生成像下边的带有上标的公式,也许这个适合数学老师来用。当然如果各位小伙伴有做这方面设计的话,也许可以给你不少惊喜。嗯,这个插件已经被爱因斯坦点赞。下载地址:http://www.sketchchina.com/rea...

    2018-03-02
  • 读书会第二期:《用户体验要素》(下)

    接上文···框架层1界面设计界面设计要做的全部事情就是选择正确的界面元素。界面元素的种类繁多,书里列举了复选框、单选框、文本框、下拉菜单、多选菜单、按钮等一系列网站设计中常用的控件,在2001年的时候这些控件就已经出现了,至今仍在大量使用,但是作者写这本书的时候并没有预料到目前的互联网行业有多么繁荣,所以近些年出现的很多新控件都没在书里。目前ios平台和安卓平台都有完善的设计规范可供参考,网上也可以找到海量的控件模板,只要耐心积累,多观...

    2018-04-13
  • 日照这家单位招人啦!提成、五险一金、带薪培训、年终奖、节日福利···

    关于我们与其说我们是一个团队,我倒觉得我们更像一个温暖的大家庭。工作上我们团结协作、互相体恤,生活上我们互相帮助、彼此鼓励,家人遇到困扰,我们会拧成一股绳共度难关,家人有喜事有收获,我们会由衷的祝贺!我们每一个人都在用真心去经营我们的置业网大家庭,所以我们无比珍惜和感恩,也希望你和我们一样将它视如珍宝……公司简介日照置业网传媒有限公司主要经营各类广告的发布代理及各项活动策划,各类网站制作管理维护与设计,目前经营包含日照置业网等6家网站,...

    2018-04-08
  • 不好意思,简历有了它,你就领跑于820万毕业生

    又临近一年毕业季找工作成为了应届生们的头等大事但今年的就业形势依旧不容乐观来自教育部的数据2018年全国高校毕业生预计上升至820万人再创近10年毕业生人数新高▲教育部官网截图▲中商产业研究院数据显示:2010-2017年的毕业生人数按照2%-5%的同比增长率逐年增长,近7年间累计毕业生人数达到5706万人。年年都是“史上zui难就业季”并且每年的毕业生人数始终呈增长态势800多万的应届毕业生让“你竟是一个大学生”变成“你只是一个大学生...

    2018-03-27
  • “用户体验”3.9万油电混合植保机演示视频

    植保季就快来到,很多植保团队以及飞手非常关注行业植保机的动向,不仅因为飞机本身的性价比高而且续航时间和作业效率同样是大家非常关心的事情。因为对于植保作业来说,作业效率关系着成本和收益,同样的植保机在单位时间内所节省的时间相当于是多出来的利润,这也就是为什么油电混合植保机能被大众所看中的缘由。近期在无人机网(www.youuav.com)发布的这款3.9万油电混合植保机一经亮相之后在植保行业中引起了足够的重视,很多朋友对其抱有足够的兴趣,...

    2018-04-24
  • 超好看APP交互设计~

    设计APP,不是简单的把界面绘制好,漂亮的色彩搭配、可爱、卡通或者扁平化的图标设计等等。如今的移动APP界面设计,更要追求有趣与实用的完美结合。今天,小编分享来自印度的设计师Joney vino的超好看APP交互设计作品。第一款是APP交互设计是关于免费试驾APP的选车界面与整个选车的流程。整个过程就是把选车类型、日期、人数等功能元素在流畅的界面转换场景当中完成。追求一气呵成。很不错的免费试驾体验。第二个APP交互设计当中的有趣、创意与...

    2018-03-03
  • 2018年产品经理交互设计交流分享大会

    活动背景一个优秀的产品经理不仅能引导产品的发展,而且还能引导公司的发展。同时,他还是一名优秀的执行者、项目管理和团队管理者,具备敏锐的洞察力,能在用户心理和产品细节间灵活游走,打磨出令人惊叹的产品。所以,在成为CEO之前,先成为一名出色的产品经理吧。然而当我们投入到实际工作中时,总是一次又_次遇到阻碍:和运营、枝术部门沟通不畅,项目推进难。公司要求不高,任务很轻松就能完成,想要挑战大公司,却深知自己还欠火候。看过许多千货,听过许多直播,...

    2018-04-17