交互设计与心理学关系

来源:jeffrey's blog 作者:jeffrey

交互设计是个跨学科专业,其中,心理学便是其中很重要的一个部分。所以,如果你不想继续仅凭直觉和死记硬背高大上的理论原则来从事交互设计,如果你想成为优秀的交互设计师,学习一定的心理学将是很有帮助也是很有必要的。这篇文章的主要目的就是初步地向大家介绍交互设计师至少应该了解哪些基本的心理学理论。

  1、认知心理学

在对交互(interaction)的众多定义中,我比较喜欢这个:所谓交互,即输入(input)和输出(output)。所以,交互设计(Interaction Design)就是针对输入方式(通常是人)和输出方式(通常是机器)的设计。比如我们通过“触摸”来控制手机便是一种输入方式,然后手机在屏幕上提供相应的界面就是输出方式。而作为交互设计师,我们要思考的就是在何时采取何种输入输出方式。这里就涉及到一系列问题:我们为什么要用触摸而不是其他方式?机器反馈的界面又该如何设计才能使用户更容易理解,才能使人与机器的沟通更加舒畅自然?要回答这些问题,就要求我们能够从根本上认识人是如何处理信息的以及人是如何行动的。这就是认知心理学的范畴。

交互设计与心理学关系,互联网的一些事

  人机交互

  而认知心理学理论将人比喻成计算机,人像计算机一样对外界信息进行加工,如下图所示:

交互设计与心理学关系,互联网的一些事

  信息加工模型图

  认知心理学无法一两句话就说明白,我这里只介绍几个最关键的概念带大家入门。

A、感受器即人的感觉器官,视觉、听觉、触觉等等。研究人的感受器的特点将有利于交互设计师理解人们如何接收信息,才能设计出合适的交互方式来使人们轻松愉快地接收你要提供的信息。其中,一般来说,从信息量的大小来看,视觉、听觉、触觉依次减小。因此,我们通常使用听觉和触觉来辅助视觉上的设计,比如提示音和手机的震动。

B、效应器指手、足、语言器官等。效应器的质量指标通常是反应时间、运动速度和运动准确性,因此交互设计师可以以这三个指标来检测你的设计是否符合人的认知模型。

C、加工器,这个比较复杂,但也是最重要的一部分,简单来说,它告诉我们,除了客观因素(如刺激强度、数量、作用方式)外,诸如动机、兴趣、知识经验等主观因素也是影响人们理解信息的重要因素。学习它,将有利于交互设计师更准确地挖掘需求和提高设计质量。

  2、格式塔心理学

这是交互设计中实际运用的最多的心理学理论之一。它主要包括三个部分:相似原则、接近原则和完形原则。

A、相似原则:相等或相似的元素形成整体或群体。如下图左图中,你会不自觉地认为它是纵向排列的,而右图中是横向排列。

交互设计与心理学关系,互联网的一些事

  相似原则

  相似原则告诉我们,人们通常把具有相似特征(如大小、形状、颜色等)的事物组合在一起。在交互设计中,我们经常用到这个原则,如网站的导航,使用不同颜色即可很容易将一级导航和二级导航区分开;再比如淘宝首页的横向标签导航中,“天猫”、“聚划算”和“二手”这三个板块和同一排的其他板块比较,使用了更大的字体更鲜艳的颜色,通过这种方法来强调这三个板块的与其他板块的重要性不同。

交互设计与心理学关系,互联网的一些事

搜狐美剧页面导航

交互设计与心理学关系,互联网的一些事

  淘宝首页

  B、接近原则:紧密靠在一起的元素形成整体或群体。比如下图中,你会不自觉地把它分成左右各一组。

交互设计与心理学关系,互联网的一些事

  接近原则

  接近原则告诉我们如果你希望将多个元素进行分类,那么让同一类元素靠近在一起是个不错的选择。比如iPhone的“通用”界面:

交互设计与心理学关系,互联网的一些事

  iPhone的”通用“界面

  同样的道理,很多同学在网站排版或者平面设计排版的时候习惯用各种线条来划分区域,其实没有必要,很多时候只需要合理利用留白就能够起到相同的作用并且更加简洁美观。另外,这里有一个小知识:由于人们的阅读顺序是从左往右,所以左右相邻比上下相邻显得更为密切。比如下图中,人们可能会觉得图片对应的文字是右边的文字,而事实上是图片下方的文字。所以,我们要尽量避免出现这种错误,解决的办法就是遵循用户认知习惯,采用横向的排版,或者加大留白。

交互设计与心理学关系,互联网的一些事

  看起来图片是和右边的文字对应的,事实上却是下方的文字

  C、闭合原则:我们倾向于将图形中缺失的部分“填满”。如下图,你会不自觉地认为它是个三角形,实际上它们只是几根线条而已。

交互设计与心理学关系,互联网的一些事

  闭合原则

  在交互设计中,这个原则也很常用,比如下面两个方案,右边的方案运用了闭合原则,将标题放在未闭合的线框线上,却起到了很好的分组效果。

交互设计与心理学关系,互联网的一些事
  3、色彩心理学

色彩心理学对于设计的重要性相信任何一个设计师都了解,这里不再赘述。

  4、心流状态

心流(flow)是人们全身心投入某事的一种心理状态。人们处于这种情境时,往往不愿意被打扰,心流状态会产生极高的兴奋感和充实感。

把握这个心理状态对于沉浸式的交互设计特别有用,比如设计一款阅读类应用,一款大型网游,我们都希望用户能够不被打扰地沉浸到应用中去。这样的设计例子很多,比如游戏的全屏功能,比如使用safari浏览器时,向上滑动页面时自动隐藏工具类和地址栏。

交互设计与心理学关系,互联网的一些事

  safari浏览器

  那么,如何让用户达到心流状态呢?心理学告诉我们至少要具备以下条件:

A、明确且可实现的目标;所以,我们应该记得始终让用户明确地知道他的目标,并且目标是可实现的。比如,你需要你的游戏玩家去消灭10个叫做强盗的怪,那就在任务菜单里写清楚“10个”和“强盗”,并且要保证这个任务是玩家有办法完成的。

B、流畅的任务;保持流畅的任务直到目标实现为止。比如我们通常会忽视网站的404错误页面,但是,如果在通知错误的同时告诉用户接下来该怎么办会更好。

交互设计与心理学关系,互联网的一些事

  告诉用户接下来可以怎么做的404页面

  C、持续性的反馈;时刻告诉用户当前的状态、所处位置以及操作的效果。此类的设计包括很多,比如导航设计、转场动画设计、状态界面设计等等。

D、可控制的操作;尽管用户全心全意地沉浸到其中,但依然希望能够在需要的时候可以控制自己的行为。此类设计包括可撤销设计、防错设计等。

以上4个是目前我掌握的、我认为对于交互设计最实用的几个心理学理论,除此以外,还有很多心理学理论都能够运用到交互设计当中去,比如消费心理学等。这里我再给大家介绍一种有趣并且也挺实用的一种心理学理论:目标趋近效应(goal-gradient effect)。

目标趋近效应指的是人们在接近目标时会加快行动。比如,咖啡店送你一张积分卡,每买一杯咖啡就得1个积分贴卡,等积分卡满的时候就可以换取礼物。下面是两种不同的方法:

A、积分卡有10个贴槽,给你卡时所有贴槽都是空着的;

B、积分卡有12个贴槽,给你卡时已经贴上了2张贴纸;

问:贴满一张卡需要多久,A和B是否相同?答案当然是不同,尽管同样需要买10杯咖啡,但往往B方案会更快地贴满。这就是目标趋近效应,离目标越近,人们就越有动力完成它。这在交互设计中也有使用到,比如我们刚注册一个网站时,网站会提醒我们已经填写了70%的资料,继续完善就会得到什么样的奖励,这就是利用人们的目标趋近心理。

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/720/

(0)
Smiler李想Smiler李想
上一篇 2014-09-20 19:56
下一篇 2014-09-21

相关推荐

  • 回答这3个问题,完善你的交互设计(文末有彩蛋)

    “我躺在沙滩上,感觉到细碎的沙子在后背陷入;我踩在小溪里,感觉到脚底的乱石和流过脚面的溪水。我和沙子,我和溪水,产生了交互。”如果是静态的画面,我们恐怕不能确定画面中人是先吼叫被抓住,还是先被抓住再吼叫:
    “疯狂罪犯终于落网!”
    “魔法界警察暴力执法!”
    ——这两者之间的差别可大了。“大页面的设计是焦点的设计,小页面的设计是空间的设计”“扁平化其实为了让你觉得地方足够大。你信吗?反正我信。”——“李白”“使用APP,你不需要别人告知左箭头是什么意思。”你应该熟读Android和ios的官方设计规范、人机交互指南文档,只要遵循这些规范,用户不会因此犯错。
    Ps:规范可以帮我们“不出错”,但要达成“绝妙的设计”还需更多创造力。突然!你被人打晕了!
    醒来的时候你发现自己到了一个陌生的地方。
    现在你在想啥?——
    “我在哪?”
    “我是谁?”
    “我该怎么办?”“我在18层1806,我要去3层0303。出门左拐坐电梯,出了电梯再右拐“

    2017-05-23
  • 实例解析「交互设计七大定律」在设计中的应用(上篇)

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

    2018-03-16
  • 【案例】LOFTER 信息框架改版(iOS版)

    对于一款APP的信息框架改版,可以分为以下几个步骤 竞品的信息框架分析 目的:找出差异点和共同点 作用:差异点可以根据产品的定位,做特色设计,成为产品特征;共同点是指同类产品的框架/布局共同点,可以用来寻…

    2016-07-01
  • iOS 9 人机界面指南(五):图标与图形设计

    文章索引译者注:本章是iOS Human Interface Guideline的最后一章,文末附上全文PDF下载地址。译文如有任何疏漏之处,或任何意见或建议,请不吝指出,翻译组感谢大家长久以来的关注和支持!

    2017-05-26
  • 谈谈人类学民族志这一高端用研方法

    前几天参加起点学院的“产品总监修炼之道”北京站培训,K叔的用户研究课程中提到了“人类学民族志”这一“很上流”的用研方法,由于时间关系老师当时并没有展开来说,只是讲了一个小小的例子。正好我对民族研究也很感兴趣,最近又读了一本《我的凉山兄弟》,也就不揣冒昧来谈一谈人类学民族志这一高端用研方法。不妥之处,还请各位指教。

    2017-05-24
  • 【交互设计-UX/UE】评论回复

    前项目有做到评论回复功能,途中遇到一些不解,就是回复某个人的时候,到底回复的类容是紧接着被评论者的下方,还是按时间另起一栏? 我们可以先对比一下QQ和微信.....keep watching!!! 微信版本号:V6.3.16 QQ…

    2016-08-03
  • 优化App的设计:防止用户错误,并建立良好的错误信息

    “错误”时有发生。在App与生活中都会发生。有时是因为我们犯了错误,有时是系统错误。无论错误原因是什么,它们——还有解决方式——对用户体验影响深远。但它往往不被重视,草草处理错误、组织混乱的错误信息会使用户沮丧,最终抛弃你的应用。相反,处理得当的错误提示,能把失败变为惊喜。在本文中,我们会讨论如何优化app的设计,来尽力防止用户错误,并建立良好的错误信息。

    2017-05-13
  • Excel 实现微信动态图表的交互体验

    昨天说的干货贴,文末有下载方法。微信后台有一个不错的动态图表,可以借鉴到我们周报月报的制作中运用:它的交互特征:①鼠标单击上方的扁平化指标选项卡,切换下方的动态图表。②鼠标悬停下方的折线图,会出现小圆点、竖线和提示框突出显示当前数据点。如果用 Excel 仿制,通常是使用窗体控件来制作动态图表,交互效果如下:需要用到的知识点,窗体控件用单选按钮或下拉框,函数用 index 或 offset,这个我们在《让你的图表动起来》课程里已经有专题...

    2018-01-30
  • 网站设计:单页还是多页好?别争了,看这里

    当你的设计是为了追随时尚潮流,而不是为了满足用户的目标为目的,那你的设计就出现问题了。接下来,我们分析下单页面和多页面网页的UI设计,以便于做出更好的设计选择。

    2017-05-03
  • 观点解读|四两拨千斤的交互设计方法

    最近读了一本书,叫做《细节,如何轻松影响他人》,里面给出了52条意见,每一条意见都是经过大量实验得出来的,有一定的科学依据,而且这些意见也反应了人们的普遍心理,强力推荐销售人员看看。这本书的主旨就是:只需改变一点点,就可以达到四两拨千斤的显著效果。虽然有52条之多,但是我会抽取一些和交互关系比较大的观点进行解读。

    2017-05-02