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

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

相关推荐

  • 小白学Axure,这样学更高效,还能提升产品交互,更容易拿高薪

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第6期开启报名!从第1期到现在,1400多位同学学习成长,好评如潮。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)先来看看学习效果全程实操,学完高效制作原型,做出高保真认真学完,原型效率提升,更...

    2018-03-04
  • 独家UED手机端 保险投注

    活动时间:2018年3月1日中午12:00至2018年3月31日上午11:59 (北京时间)针对于优惠期间内第一次使用头头移动平台的会员50%本金返还,高达RMB 88手机保险投注!活动详情:1.头头移动平台包括手机网页版版平(m.toutou158.com),UED手机端安卓版和iOS版;2.没有下载头头手机端安卓版和iOS版的会员可以进入官网www.toutou158.com下载;3.头头会员需在优惠期间通过头头手移动平台投注第一笔...

    2018-03-29
  • 2018年移动端用户体验设计趋势

    在移动应用领域,事物正飞速发展。要想在用户体验设计领域获得成功,设计师必须有远见,并为即将到来的新挑战做好准备。为了简化这个任务,我列出了2018年最重要、最有影响力的趋势,而且很有可能远不止如此。1.简化用户的使用流程当我们与应用程序或网站互动时,我们有一个特别的目标。通常,我们花在实现这一目标上的努力越少,体验就越好。线性用户使用流程线性用户体验设计指的是一种带有特定的开始、过程和结束,并且可以让用户在每一步完成一个动作的用户体验设...

    2018-02-01
  • 智能窗帘:场景化智能应用 让用户体验“懒”生活

    科技总是带给我们惊喜。智能家居不再是一个研发层面的概念,在日常生活中已经越来越普及。智能窗帘是智能家居系统中常常被忽视,却又见微知著的家装部分。智能窗帘无需手动,一键掌控家居空间的透光度,智能防紫外线、隔音隔热和保温环保,给用户细致的关怀。智能窗帘的场景化智能应用,让用户体验懒惰带来的享受。冬天清晨,想打开窗帘让阳光温暖房间,却又懒得起身离开暖被窝,使用智能窗帘,应时自动打开,敞开度适宜,光线强弱刚刚好,惬意的在阳光中醒来。炎热夏日,离...

    2018-02-25
  • 做你老婆,用户体验真差

    洞见(DJ00123987)——不一样的新闻,不一样的故事,数百万人订阅的微信大号。点击标题下蓝字“洞见”免费关注,我们将为您提供有价值、有意思的延伸阅读。作者:青蓝来源:青蓝(ID: qinglansz)没错,这是一篇真诚的吐槽贴。鉴于各位直男的脑回路和女人差异较大,常常不能正确理解老婆大人的本意,今天我特意以你们最爱的电子产品——手机为例,给你们分析一下老婆们的用户体验。01. 外观差评,后盖鼓起,前屏磨花,说好的金属漆还掉了色。小...

    2018-03-25
  • 【优秀作业展示】交互设计基础(三)

    《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优秀作业。优秀学生作业第三期陆晗产品设计15201高铁购票界面设计搜索目的地如果没有没有您想要的目的地可以选择搜索功能选择日期如果选择三天以后出...

    2018-05-08
  • 交互设计规范

    交互设计规范+iPhone界面尺寸:320*480、640*960、640*1136iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×1080)设计图单位:像素72dpi。在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计,现在iphone6和plus出来后有很多人会使用6的设计效果。如果是我来做的话,我会使用...

    2018-03-21
  • 【招商零售】海底捞VS胖东来:用户体验背后的成功基因

    点击上方“聪聪说零售”可订阅哦!招商证券零售组:许荣聪、邹恒超近期的“老鼠门”事件再将海底捞推向风口浪尖,食品安全问题再次引发关注,但与一般公关危机不同的是,本次事件发生后没有出现一边倒的对海底捞的口诛笔伐,反而海底捞及时坦率的回应得到不少消费者的理解和支持。海底捞能坦然面对此次

    微信热点 2018-05-02
  • 快速用 Sketch 绘制30个图标

    长得好看的人都已关注操作分解:一个正方形,两个同等直径的圆形即可完成,最后旋转多选矩形 Edit 后可以一起改圆角正方形不停地裁剪一个椭圆加长方形,复制即可圆角矩形加两个不同大小的圆合成小矩形旋转角度,最后拉下 Radius 即可选中锚点删掉,调下倾斜度,复制合成添加锚点一拉一调添加左右两个锚点的时候放大比较容易处理号细节锚点的 radius合成后记得 Flatten 下,就可以选择锚点加 radius添加钢笔锚点,并且 Show Gr...

    2018-04-09