交互设计与心理学关系

来源: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

相关推荐

  • 华为朱平:用大服务把用户体验引向极致

    4月12日,华为新旗舰手机P20系列发布,同时还发布了保时捷设计Mate RS,以及多款产品。2018年,是手机市场艰难的一年,4G换机和消费升级带来的市场红利正在逐渐失去,5G尚未到来,市场进入一个相对低潮期。这样一个情况下,众多手机厂商面临了较大的市场压力。在这样困难的市场环境下,华为怎么巩固自己的市场地位,甚至扩大市场?华为一惯的态度就是用产品说话,用大大领先对手的产品来证明自己。其实我关心的是,华为P20
    Pro这样的产品,已...

    2018-04-21
  • 微信Axure原型练习和资源分享

    “我根本没把你放在眼里。”“因为你一直在我心里。”▼这是咸冬日的第叁篇文章这两天业余时间学习了axure的基本功能,做了一个简单的微信原型练练手,教程分享给大家。首先需要准备基本素材,可以从我的源文件中获取。1.设置手机主页和home热键用例。2.拖入内联框架(w273*h482),设置从不显示和隐藏边框,并链接到主页。3.设置主页交互:1)主页内拖入动态面板“内容区”(273X396),并增加4个menu状态(微信、通讯录、发现、我;...

    2018-03-10
  • APP界面设计:如何选符合产品气质的字体

    不管是中文还是英文,文字不仅是传达信息的载体,也是设计中的重要元素,设计过程中尽量保证文字的阅读性,在严谨中寻求突破。经过艺术设计的字体,可以使信息更形象、更美感的铭记于你心中。

    2017-05-14
  • 是时候聊聊具有直觉性的UI和交互设计了

    UI和交互设计中常常会强调某项设计需要足够的“直觉性”,但是直觉性的设计说来容易,实现却往往差强人意。但是不得不承认,它是目前交互和UI设计的刚需。“想象一下,如果桌面上反过来一颗球让你去转动控制,感觉应该比鼠标运作顺畅些。我们原本认为这是个好点子……可是我以前从未观潮这种触感的细节。”“当孩子们操作鼠标和遥控杆的时候,会不自觉地低头看输入装置……后来有人想到,如果操作时运动肌肉群范围较大,也许他们可以不必低头。我们做了一个大型轨迹球装置,让他们可以用手臂甚至肩膀牵动来操作,这样就把问题解决了。”“我们先是观察什么样的操作方式比较合乎自然,然后提出想法,再进行测试。”“心智模型指一个人对于事物运作的思维过程,即一个人对于周遭世界的理解。心智模型的基础是不完整的显示、过去的经验甚至直觉感知。它有助于形成人的动作和行为,影响人在复杂情况下的关注点,并确定人们如何着手解决问题。”(如果你仔细观察,会发现这个时候的设计师将纸的纹理运用到窗口上,此处的设计和Material Design 中纸的隐喻不谋而合,这又何尝不是一种潜意识的引导呢?)

    2017-05-16
  • 阿里巴巴UED的设计团队究竟为双11贡献了什么?

    在11月11日这个日子的前后一段时间,当你发现如下症状之一:当你被机场、地铁、公交站牌和网页里频繁出现的双11提醒,感觉重要的时刻就要来临;当你心跳加速,不管什么都先放到购物车里再说;当你最终等待在11号这天的凌晨用风一样的速度支付成功,并长吁一口气;当你认为一切都那么的简单、自然、纯粹,不过是一场轻松的购物。只能说你Too young,Too simple。你的一举一动已经被一个神秘的组织所引导,它让你下单时够快、够准、够狠,并且你毫...

    2018-02-01
  • 产品不能忽视

    在做交互稿或视觉稿的时候,为了让界面尽可能的真实,设计师们会虚拟一些内容放在页面上。但是当看到前端同学产出的demo时,设计师们又总是会觉得为啥和我当初做的页面那么不一样捏?设计师总喜欢把图做的很漂亮,在虚拟页面的内容时,使用漂亮的图片,把内容安排的恰到好处。但是当产出界面demo时,这个页面可能是个空内容的页面,也可能内容很多,导致布局错位。所以在设计界面时,一定不能忽视空状态、内容过多等极限状态。这些状态也许只会在初次使用时遇到,也许只会有很小一部分用户遇到,但是这些都影响着产品的细节品质。

    2014-12-28
  • ​50多个网页界面的设计素材下载,提供sketch格式的源文件ui设计素材下载

    50多个网页界面的设计素材下载,提供sketch格式的源文件ui设计素材下载素材下载方法:长按识别二维码,用微信扫描或者长按识别二维码即可加入。并不是只是下载这个素材。超过200G精品素材全部任意下。素材不断更新,添加。。。有任何问题,请联系微信uisheji----------------------------------------欢迎订阅,查看更多精品UI设计素材下载,请关注公众号mobileui

    2018-04-08
  • 聊一聊不同应用场景下的验证码

    最近在做关于验证码的项目的时候,从交互的角度梳理了产品各个平台验证码的应用场景。在一个产品中,会有多个设计师分工协作,不同的设计师做设计迭代。由于验证码在整体设计中太容易被忽略,它在每个场景的显示逻辑可能不尽相同。下面,我们就来聊一聊不同应用场景下的验证码。

    2017-05-05
  • 引导新用户熟悉产品的方式:向导程序

    引导新用户熟悉产品的方式多种多样,向导程序是其中最经典也是最常用的一种。今天的文章,我们来聊聊向导程序的设计模式。分割处理,各个击破。

    2017-05-03
  • 从用户体验的视角评析《CSR赛车》手游

    我最近一直在玩《CSR赛车(CSR Racing)》和《CSR赛车:经典(CSR Classics)》,在近期的游戏中我发现,Natural Motion在该系列的核心玩法、货币体系、社交机制和盈利模式中都引入了许多新的花样和用户体验功能,这些新元素的加入为游戏的某些方面带来了更好、更流畅的玩家体验。CSR系列专为手游玩家设计,会话时间极短(10-15秒),玩家们可以在忙碌的间隙进行一场快速竞赛,这是一个非常好的设计。在《CSR赛车》中...

    2018-03-07