当前位置: 首页 >文章 > 4个心理学小知识提升你的设计价值
收藏
分享

4个心理学小知识提升你的设计价值

举报彩云译设计彩云译设计发布于 2018-08-142753阅读4点赞
我一直认为,心理学和设计是用户体验中很重要的组成部分。每当我们的目标是满足人们的需要时,我们的专业要求我们需要同理心,目的就是要解决问题。当我继续深入了解心理学在设计中的作用时,我偶然发现了格式塔心理学理论。...

以下是译文全文:


我一直认为,心理学和设计是用户体验中很重要的组成部分。每当我们的目标是满足人们的

需要时,我们的专业要求我们需要同理心,目的就是要解决问题。当我继续深入了解心理学

在设计中的作用时,我偶然发现了格式塔心理学理论。


那么,什么是格式塔心理学呢?


格式塔心理学是把人的思想和行为看成是一个整体的思想流派。当我们试图了解我们周围的

世界时,格式塔心理学表明我们并不是只关注其中每一个小的部分,相反,我们的大脑倾向

于将对象视为更大整体的一部分。这一心理学流派在人类感知研究的现代发展中发挥了重要

作用。

资料来源: verywellmind


这次发现格式塔理论的过程让我充分理解如何将这些原理融入到我的设计中。 因此,在本文

中,我将与您分享如何将这些原则作为我的设计方案应用到我遇到的以下网站和APP中:


声明:以下设计解决方案是使用格式塔原则的示例设计。有些设计问题可能需要重新设计,但

是我坚持使用原来的设计,只是用格式塔原则对它进行优化。所以,如果你有其他解决方案,

欢迎留言探讨。


1. 亲密性


当物体彼此靠近时,这些物体被看作是一个整体而不是独立的。来源:Hubspot的博客


以下是使用亲密性原则解决设计问题的一个例子:




标题和链接相隔太远


正如我们所看到的,分类标题 (Online Booking & Cruises) 和链接 (Learn More)分的太开了,

 这使得它们看起来像两个相互独立的元素。如果我们画一个线框图来表示的话,上面的例子

看起来就像这样:



线框图


整个组件是相互脱离的,因为没有任何东西将图片,标题和链接联系在一起。因此,亲密性原

则是我们的解决方案指导。把三个相互独立的元素归到一组,就能使其看起来像是一个整体—




居中标题和链接


在我的解决方案中,使用亲密性原则,我通过中心对齐来缩小标题和链接之间的距离。通过这

种方式,能够将3个元素(图片,标题,链接)结合在一起,这有助于我们解决上下文不连贯

的问题。


2. 相似性


相似性原则出现在物体看起来相似的时候,人们常常会把他们看作是一个组或者是一个模式。

资料来源: graphicdesign.spokanefalls.edu


在下面的设计问题A中,我已经标记出了蓝色的文字。原因是,在这个界面上,

“Heavy Data User” 和 ”Flexible Maximizer “ 是一组相似数据——他们是用户界面上的

两个切换标签。




设计A


那么,是什么使得这两个元素互不相关呢?

答案可能有很多种,但是最突出的问题是,没有什么东西能将这两个元素结合到一起,这使得他

们看起来是相互独立存在的。正如我们所看到的,很显然,界面的品牌颜色是绿色的,但是突然

跳出一个蓝色的文本颜色。这样,相似性原则就派上用场了:




我的解决方案是,设计鼠标点击状态左右切换颜色填充来建立相似性,把他们设计成选项卡样

式。(译者注:鼠标点击时,左右的样式会发生互换。)

对于设计问题A,可以通过重新设计来优化,提升用户体验。但是现在,我们用相似性原则,

以最少的步骤改善了它的设计。


还有另一种方法来使用相似性原则——问题2:




设计B


在问题2中,我们先来拆解它的基本组成部分:

标题: 40px Regular

内容文本: 20px Regular

文本链接: 20px Regular

乍一看,我们很可能会认为这是一个没有问题的设计。但是当我们更仔细的去看时,问题来

了,它发生在内容文本和文本链接上,它们共用同一个文字系统样式(20px Regular),这

可能会让用户混淆并且会缺乏信任。当他们浏览网站时,可能会迟疑,可能会用鼠标在正文

文本和文本链接上反复的尝试能不能点击。

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




使用相似性原则,我们需要稍微调整下文字系统样式:

标题: 40px Regular

内容文本: 20px Regular

文本链接: 20px Bold

我们通过把文本链接加粗,并增加引导图标,使得这个类型在内容中有了对比。通过这些

修改,我们把整个文本链接创建了相似性,加快了用户的识别和操作效率。


本文内容以外的提示:在创建一个文字体系时,请选择具有各种字重的字体(细,轻,常

规,粗体等)。我们的目标不应该是只使用字体大小来做对比,而是要同时运用字体的字

重来做好对比设计。详细的内容可以看看我的另一篇文章(译者注:也就是本公众号的上

一篇文章:10个实用小技巧,让你的设计细节更高级)


3. 焦点


焦点是画面中用户感兴趣、强调或者差异的区域,能够抓住用户的注意力。

资料来源: Smashing Magazine


我们将通过两个设计问题来看看如何运用焦点原则:




图片来源: telecommunication


在上面的例子中,对于元素的布局实际上没啥问题。但是,信息层级上——主要内容和次要

内容用了相同的按钮样式。

我们可以看到,这个界面的目标是为了让用户下载APP,而FAQs只是一个帮助文档,为了让

用户更好的理解他们的APP(是的,我都怀疑他们更想让用户看帮助文档而不是下载APP了。)

因此,我们的解决方案如下:



设计A的解决方案


使用焦点原则,我把FAQs按钮改成了一个边框按钮样式,给下载应用按钮足够的聚焦效果。

同时,我也改变了他们的顺序,主要操作放右边,次要操作放左边。其原因在于古腾堡图解

定理,它说:

基于这个定理,右边的两个点(在“Z”的第一个点及其最后点)是用户期望采取行动的地

方。 因此,在这里,提示性语句放在左侧,重要操作放在右侧。


(译者注:原文没有这张图,为了方便大家理解,从作者给出的参考文献中找到了这张图。)


说点题外话,我们经常能看到一些按钮的设计问题,为不同功能的按钮设计成了同样的一个

样式(注册、取消、查看更多、阅读等等)


建立一致性难道不好吗?

是的,我们都知道一致性在用户体验设计中扮演着重要的角色,但我们称之为功能的一致性。

如果我们要创建同样的按钮设计来迎合不同的功能,它会导致用户有不一致的体验,也可能

会影响用户的操作目标。


题外话:按钮设计一致性=相同的按钮功能


现在我们看看问题2:




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


同样的问题也出现在这个设计中。OK和Cancel按钮共用相同的设计样式,这要求用户必须

仔细阅读按钮上的文字,才能知道提交和取消。

使用焦点原则,可以减少阅读按钮文字的时间,因此下面是设计解决方案B:



我们互换了按钮位置并把按钮上的OK改为Submit,使其的意思更加准确,告知用户,一旦

他们点击这个按钮,就会触发一个提交动作。


4. 共同区域


共同区域的原则与亲密性原则很相关。它的意思是当物体在同一个封闭区域内时,会被认为

是同一组元素。资料来源: User Testing



像Spotify、Disney、Netflix被随意摆放而没有规律,我们不会认为他们是一组。为了使问

题更清晰,创建一个线框图表示:



从上面的线框图中可以看出,它更可能是多个单个元素,而不是4个整体。因此,运用共同

区域原则设计一个解决方案:



新的线框图运用了共同区域原则


在线框图中,使用描边线将所有元素都封闭到它们各自的类别中,这样它们看起来就是一个

组而不是单个元素。下面就是具体的做法:



除了边界框,我还用一个小图标替换了底部的一句话“Free Netflix for six (6) months for 

Plans 999 and up”并放在Netflix 的右上角,为功能列表创建了更多的空间,一旦点击,就

会出现一个工具提示。

这4个格式塔心理学知识应该能够帮助到你的设计工作,你还可以运用更多的格式塔原理解决

更多的设计问题。


希望这篇文章能够帮到你。


彩蛋:

格式塔心理学简易总结网站:https://lawsofux.com  



原文:https://uxdesign.cc/psychology-design-4-gestalt-principles-to-use-as-your-ne

xt-design-solution-fcdec423a6bf

作者:Riel M

译者:彩云Sky

本文翻译已获得作者的正式授权


授权截图


0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,481人)

【4月】趣味MG动画制作训练营
距离开班仅剩11天33人已报名
【4月】零基础手绘插画训练营
距离开班仅剩11天64人已报名
电商海报设计训练营
距离开班仅剩39天23人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证