平庸的产品和伟大的产品中间只隔了一个:微交互

微交互,听起来很生疏的这个词,实际上却出现在我们每天的日常生活中,甚至可能早上起床后我们做的第一件事就是一次微交互操作的典型案例。

微交互,听起来很生疏的这个词,实际上却出现在我们每天的日常生活中,甚至可能早上起床后我们做的第一件事就是一次微交互操作的典型案例。

平庸的产品和伟大的产品中间只隔了一个:微交互

我们起床后的第一件事情不是关掉闹钟吗?via igeeks

顾名思义,“微”意为细节,微交互则是指交互中的细节设计。微交互是指以任务为单位,用户同数码设备之间进行的单个交互事件,它只涉及一种使用场景,体现为只完成一种功能。

微交互传递什么样的功能呢?

拿 Facebook Messenger 的点赞功能来举例,如果你按压这个大拇指图样的「点赞」按钮,这个大拇指就会变得越来越大越大,直到出现在对话框中。

平庸的产品和伟大的产品中间只隔了一个:微交互

图为Facebook Messenger 太好玩了,简直停不下来。。。

以上这个案例正好完美诠释了微交互的 3 个重要功能,它最早在交互设计师 Dan Saffer 的著作《Microinteraction》中被首次提出:

  • 点赞动作是在表达状态并提供反馈
  • 并且这个操作也提升了用户直接的操作感
  • 然后让用户看到自己的操作结果

由以上定义出发,我们会发现,微交互几乎无处不在,它可能是一次震动提醒通知、播放下一首歌曲、登录一次网站、在手机应用里查询一次天气、微信回复一条信息、朋友圈点一次赞,如果这些交互设计过渡得顺滑流畅又自然的话,几乎很容易就会忽略他们的存在。

虽然微交互近乎隐形,且很容易被人忽视,但它的重要性却不容小觑。我们知道,移动产品交互设计时考量的因素有两个——功能和细节。功能吸引用户使用产品,细节则是留住用户成为回头客。好的微交互,可以变无聊为有趣, 把没有生命力的 app 变得生动好玩,让用户感受到参与感和愉悦感,给用户留下深刻的印象甚至上瘾。伟大的产品和平庸的产品之间,区别就在于微交互。

微交互出现的使用场景

这些微交互的用户体验如果连贯自然, 几乎很难让人意识到它们的存在。但如果仔细观察,你会发现它们通常出现在以下这些地方:

显示操作进程的时候

用户在使用你的产品时,需要知道自己的操作进程,以及操作之后即刻获得回馈,即自己的操作产生了什么样的效果。

平庸的产品和伟大的产品中间只隔了一个:微交互

via Nick Buturishvili

但有时候,用户进行的一次操作可能需要一定的时间才能缓冲完毕,这个时候用户就需要知道自己的进程情况,当你在以慢出翔的网速浏览网页时看到以下这个进度条是不是会心一笑:)

平庸的产品和伟大的产品中间只隔了一个:微交互

via xjw

还有上传或者下载的时候,看到这种萌萌哒的汽水瓶会让人暂时忘记了等待的焦虑感

平庸的产品和伟大的产品中间只隔了一个:微交互

via Nick Buturishvili

更新提醒

当需要提示用户注意重要的更新,也是微交互出场的时候,比起文字提醒,动画提示更容易吸引用户的注意力。

平庸的产品和伟大的产品中间只隔了一个:微交互

via Russ Rosenberg

对用户的信息输入进行视觉化呈现,并提供回馈

数据录入是交互设计中最为重要的元素之一。一个优秀的微交互能把这个过程变成得与众不同,并给用户传递回馈,在下面这个案例中,当用户输入自己的邮件信息之后,即被告知用户这个动作的含义,到底是输入正确还是输入错误。

平庸的产品和伟大的产品中间只隔了一个:微交互

via Mamun Srizon

诱导用户进行操作

微交互能够触发用户启动操作的动作,让用户产生操作的冲动。

平庸的产品和伟大的产品中间只隔了一个:微交互

这个是音乐应用 Beats ,登入后第一件事就是引导用户选择自己喜欢的音乐流派。在这里 Beats 使用了一种非常有趣的交互方式诱导用户进行音乐流派的选择,就像玩游戏一样,在一片漂浮的泡泡海洋中,双击选择喜欢的流派,长按则让不喜欢的音乐流派不再出现。接下来,在自己头像右边出现 next 按钮,进行第二次操作。

大多数情况下,引导页面的动画真的很难吸引用户的注意力,大多数用户都是一滑而过,没有人会仔细阅读上面的文字信息,而 Beats 在引导页面中使用了这种交互的方式,让用户增加了交互的参与感,引导用户输入了信息,是一个非常成功的案例。

微交互设计原则?

微交互可以用来实验一些新的设计创意和解决方案,但当我们在设计这些令人愉快的细节的时候,我们还需要考虑到以下这些原则:

  • 总是站在用户的角度看问题,据此思考如何能让用户更为流畅自然地进行操作
  • Less is more,微交互不需要炫技,必须要以简单的方法吸引用户的注意力
  • 微交互必须有趣,能愉悦用户。用户使用产品的原因是他使用它的感受。记住用户如果喜欢这个体验,并觉得很愉悦,就会成为回头客。
  • 动效风格和整个产品设计风格需要要一致,动效的过渡一定要流程自然
  • 微交互是一个锦上添花的设计,好玩有趣只是一个方面,最终还是为了辅助实现某些功能,好的微交互是在用户毫无察觉的情况下让用户进行了某项交互动作,同时让用户记住了你
  • 文本一定要生动有趣,避免使用过于书面难懂的文字
  • 以人为中心成为最终出发点,以人性化的设计打动用户心灵,产生情感联系,赋予产品以个性,让有趣的微交互成为难以忘记的品牌的一部分。
  • 一些令人惊艳的微交互案例展示:

平庸的产品和伟大的产品中间只隔了一个:微交互

via Jacky Lee

平庸的产品和伟大的产品中间只隔了一个:微交互

via Dylan

平庸的产品和伟大的产品中间只隔了一个:微交互

via Nick Buturishvili

平庸的产品和伟大的产品中间只隔了一个:微交互

via Lukas Horak

平庸的产品和伟大的产品中间只隔了一个:微交互

Magic Tabs by Abhinav Chhikara

我用原型设计工具「墨刀」制作了一个微交互原型来展示音乐网站 Pitchfork Best Album 的评分功能。每张卡片代表一张新专辑,当点击卡片会显示来自 Pitckfork 的评分,以及该专辑的其他信息,和来自bandcamp的音乐试听和购买按钮。每次点击的动作都会触发一次微交互,并显示专辑相应的 meta data 信息。

平庸的产品和伟大的产品中间只隔了一个:微交互

细节设计是微交互的灵魂,看似无关紧要,却总会在适当的时候出现,令人怦然心动。

 

本文由 @eloisechou 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/28124/

(0)
CatherineCatherine
上一篇 2017-05-20 00:19
下一篇 2017-05-20 02:10

相关推荐

  • 又是高分!北京林业大学交互设计专业课143分复习方法分享

    又一个高分!北京林业大学交互设计专业课143分复习方法分享-孙跃桐我决定考研大概是在16年的9月份吧,因为决定的时间比较早,我以为我准备的时间很充足。真正开始准备是在17年我先开始报了新东方的英语政治课,想先将公共课的基础打牢,在后期复习专业课的时候会有更多的精力于是我将上半年的精力全部都用在学习公共课上面。想在9月份招生简章出来之后我就开始专心复习专业课。但是当九月份招生简章出来之后,我就开始慌了。我本身想考的就是本校之前也问过考研的...

    2018-04-22
  • 【设计作品分享】一个让你丢掉负能量的产品——BICH

    作者:梁雅婵,授权载于我是UE网。

    2015-11-27
  • 百货类微信服务号改版:一个“失败”的设计案例?

    整理了一个售前项目的案例,重新绘制了36个原型页面,1张思维导图,3张流程图,2张对比图,1张结构图,介绍一家百货购物中心微信服务号改版的设计。

    2017-05-07
  • 原创服装设计师APP产品概念

    这是针对原创服装设计师的APP,作者感觉现在很少有专门针对他们分享自己作品和交流的平台。这是作者模拟出来的一个产品的概念图,还有很多不足,慢慢优化... 我们不光有原创,同时也是原创的搬运工。  

    2015-01-23
  • 初探用户体验中的接触点

    在一个流程设计里,梳理接触点是十分关键的一步,接触点梳理好了,才有可能画好一个完善的流程图。信息触点——操作触点——信息触点

    2017-05-15
  • App动效类型,其实就是五部分

    App中的动效设计不是具体的需求设计,不能对产品本身产生很大的变化和改进,只是能在设计层面和体验层面为用户创造多一点的价值。所以在做相关设计的时候,不可为做动效而做动效,要把握住动效的“度”,不可华而不实,需要服务于具体的需求和场景。

    2017-05-06
  • 优设访谈|腾讯高级交互设计师C7210的十年设计路

    编者按:本期访谈人物大家都应该都有所耳闻,知名设计博客Be For Web作者@C7210 ,先后就职于博客大巴、Tom集团和大众点评网,现为腾讯ISUX高级交互设计师,从视觉设计、前端、重构,到交互设计,无一不通。当然,…

    2015-11-03
  • 产品经理需要用心做好的交互体验——权限获取

    满城尽带黄金甲里,有句台词说得好,“朕给你的,才是你的,朕不给你,你不能抢”。用户给APP授权了,APP才能使用,直接索取或者暗度陈仓,效果往往会适得其反。今天就让小Q讲讲她的交互心得吧~很多APP会在初次使用的过程中直接弹框索取权限,这确实是最简单的实现方式,但被拒的可能性也最大。另外一类APP会在询问时通过一些小技巧变着法的诱导用户点击“允许”。实现成本不会比第一种高出很多,但获取授权的几率会增大。还有一种APP,会等用户用到相关功...

    2018-01-30
  • U+敏捷研发体系

    “研发是一项创造性的工作,卓有成效的研发需要优秀的研发团队来完成,优越的研发流程始终能够发现最佳的机遇,推出有竞争力的产品和服务,并以最快的速度把这些研发成果投入市场。”△ △ △ U+敏捷研发体系流程 △ △ △需求分析1研发体系中的第一个环节,这一阶段要求需求分析人员针对待开发软件提供完整、清晰、具体的要求,确定软件必须实现哪些任务。其中包含的敏捷建模,要求需求分析人员对现实问题的抽象想法构画出草图,以规避需求的不合理等问题。原型设...

    2018-03-30
  • 涨姿势 | 这份交互设计纲领,已被我内定!

    最近一个月的电影市场完全被《头号玩家》支配,身边清一色的“自来水”,那票房蹭蹭涨,眼瞅着都十好几亿了!所以斯芬克趁此良机跟大家说说交互这门自带特效的技术!往期内容一览:服装设计出国学?看这一篇就够了!(点击此处查看详情)学平面设计前,给你一份须知!(点击此处查看详情)怎样做准备,才能当上室内设计玩家?(点击此处查看详情)交互设计适合你吗?我们往往会觉得,交互设计不就是做个网站、搞个APP么,最多再玩玩特效啥的……其实咧,交互可不仅仅存在...

    2018-04-27