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

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

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

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

我们起床后的第一件事情不是关掉闹钟吗?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

相关推荐

  • 如何让你的设计方向不跑偏:Vision in Design方法解析

    作者:肖又歌( frog 交互设计师)   很多时候,在设计项目的初期,设计团队只有一个设计的大方向和一些关键词,但是整理不出来思路。抑或是脑子里已经有一个新的点子,但是论据不足,无法充分支持设计的合理性。这…

    交互专题 2017-08-07
  • SKD独家 | 美国交互设计排名

    你心目中的交互设计是什么样的 ?也许Google这个产品所创造的场景是你所畅想的交互设计可以被认为是当下最热门的专业,受热捧的程度可以和金融媲美。但是,你真的了解开设这个专业的院校吗?每个院校之间的差异和设置有什么不同?SKD根据院校开设的课程设置、专业排名,特邀我们资深的教研团队根据对自身院校的了解、利用兄弟院校的校友资源、以及院校专业设置等诸多因素的考虑,整理出交互设计的院校申请建议,希望对选择院校的同学有所帮助。注意:本排名仅供参...

    2018-03-28
  • 【干货】学交互设计,毕业以后该做些什么呢

    大家对于交互设计有没有基本的认识,上一次的文章中给大家有过简单的介绍。平时和朋友同学之间再聊到交互设计,会觉得,交互设计都是app网站,但是随着科技的发展交互设计行业涉及很多方面,也有很多新的变化。所以在2018年之后,交互设计会有新的一些行业趋势。全感官体验因为未来找设计会越来越脱离我们所认知的app界面,会从app界面转移到其他的媒介上面去和其他设备上去做交互。全感官体验,因为平时我们都是从视觉上面去或者其他界面上做一个新的交互设计...

    2018-04-25
  • 如何量化用户体验并有效执行

    很多人都把用户体验看作是网站或应用成功与否的一个总体衡量标准。分析一个网站或应用在提供好的用户体验方面的效果如何,往往会变成一项很主观的事情,仅停留在观点层面,缺乏客观依据。本文描述了为何量化用户体验这么难,并提供了一个量化用户体验方法,对于网站和应用的过去开发所作努力的快速、客

    微信热点 2018-03-22
  • Design is not about the pixels — or why the lean approach rocks

    For a while now, I focused on building partnerships with my freelance clients. A couple of pages taken out of lean UX book helped a lot. While talking with potential clients, especially coming from D…

    2015-06-02
  • 减少认知过载的6个案例分析和解决方案

    作者:Danny Halarewich(译者:Iris_Uu)   导读: 文章从认知心理学角度下手,分析了在交互设计过程中时常会犯得几种错误,一些平时稀松见惯的设计方式也都在这儿找到了比较理性的依据。设计是门科学,我们需要掌…

    交互专题 2017-08-07
  • 为女性设计APP的7个小技巧

    Groove CEO解释了如何以正确的方式为女性设计APP。 提示:如果你将花,心形,及娃娃混在一起设计,那你可能需要重新思考你的设计。 当我的公司Groove着手建立一个定期跟踪器,我们知道这将是一个挑战。 搜索以女性客户为…

    2015-04-28
  • 产品设计不能闭门造车

     用户调研的重要性不言而喻,没有用户调研的产品设计是闭门造车,不能完美解决用户的痛点,自然也不能创造最大的价值,那么用户调研到底应该怎么做呢? 产品不同阶段的诉求之前的文章中,笔者提到过用户体验5要素,…

    2017-03-28
  • Axure用的溜,并不代表你就能成为一个产品经理

    作者:杨俊全文共 2497 字,阅读需要 5 分钟—— BEGIN ——当你在人人都是产品经理上搜索“Axure”时,会有98页的结果。在知乎以及其它一些产品经理相关的网站上,也总是能够看到诸多Axure的使用问题和经验分享。但是,作为一个产品经理确实是需要会使用Axure的,但你使用Axure并不代表你就能成为一个产品经理。用户体验五要素在《用户体验的要素》中提到的五要素,自上而下分别是:战略层、范围层、结构层、框架层和表现层。当你能...

    2018-03-04
  • 美国交互设计综合类&艺术类院校申请侧重点有哪些?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-04-18