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

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

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

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

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

相关推荐

  • 什么是用户体验设计,用户体验设计标准是什么?

    我理解的用户体验,是让用户付出最小成本满足需求。用户体验无法用一个通用方法整体衡量,只能在理解产品全貌的前提下评测分解属性。我仅结合搜索领域经验提供些参考。个人对用户体验的目标是,做到“自然”。用户体验设计是什么?用户体验(User Experience,简称UE)设计 是用户在使用产品或服务过程中建立起来的一种纯主观的感受。用户体验产生于客户与你的品牌、公司、组织所发生的一切互动。这些互动的对象包含了你的产品、官网、帮助中心、广告、微...

    2018-03-20
  • “看起来不错”,但是如何让用户购买?

    到底是什么触发人们的购买欲?什么东西促使用户快速购买?线下很多的销售人员和老板都在思考如何将自己的产品卖给客户,那么线上的产品经理应该如何思考,用好的交互体验来迎合用户,打动用户为你的商品付费呢?

    2017-05-19
  • 交互伏击战:是在射(设)击(计),还是在被射(设)击(计)?

    谈起这片交互的战场,相信每个设计师都有着自己的故事和见解。就在这个高速互联的网络时代,产品设计一面追求高大前卫,一面又对理想很大,无从谈及的“情怀”始终保持一种迷离和空洞。

    2017-05-15
  • 【干货】Axure产品原型在手机上运行的完整教程

      图1 模拟丁香园的高保真原型   在一般的开发工作之前,我们通常会设计产品原型,大部分为axure绘制的线框图作为产品的PRD文档,供UI和开发进行前期工作,但是有的时候客户、领导想在开发之前,看到产品的概貌…

    2014-11-26
  • 设计师保持画草图是个不错的习惯

    一名优秀的设计师的经验之谈。 我从不敢放眼将来长远的看过去若干年,也许正是这个原因才让自己对很多事情不那么在意。其实我是个很安心于能让自己安心的事物的人,只是这样的事物随着时间的推移而越来越少;自己所…

    2015-05-19
  • 关注IAMUE官方微信送《Material design中文指导手册》

    Google 的Material design 设计规范在安卓新一代系统版本大放异彩,对于新手学习这个设计规范而言不是母语对我们不太有利。所以很多童鞋凑到一起组织翻译了一份中文指导手册,需求的同学可以免费获取   获取方…

    2015-07-27
  • 【干货知识】最全面的交互设计原则和理论汇总(上)

    【点击上方蓝字↑↑↑关注「艺恋优梦」获得每晚推送】文章包括:格式塔心理学原则、尼尔森可用性原则、尼尔森F视觉模型、Heuristic Evaluation十原则、费茨定律、席克定律、7+2法则、2秒原理、2/8法则、3次点击法则、界面黄金8法则、jakob nielson原则、KANO模型、0123简单法则、MVP法则、婴儿鸭综合症、包豪斯理念、泰思勒定律、防错原则、奥卡姆剃刀原理、maya法则、信噪比法则、序列效应、功能可见性原则、成...

    2018-04-16
  • 用户体验的五个W

    Who、what、where、when、why(还有how,以w结尾)。在学校的时候,老师教导我们如果要得出有力的论据和传达合理的故事,那么必须得先回答好这几个基本的问题。在用户体验的世界里,能否准确地回答这些问题,是能够与用户产生共鸣的产品和很快就死掉的产品的区别。

    2017-05-28
  • iPhone十年,移动用户体验领域已经到达成熟阶段

    译者:Daisy全文共 3904 字 7 图,阅读需要 8 分钟———— / BEGIN / ————最开始的iPhone于2007年6月发布。2008年末,当我们开始研究第一版移动报告时,大多数人还是在使用有着最极其糟糕的用户体验的原始移动设备。在那个时候,相较于体验糟糕的移动设备和移动网站,任何稍微像样的产品都会带给用户愉悦的体验。三年前,移动报告第三版出来时,我们对移动端可用性做了严密的评估。我们很高兴移动端可用性报告不再是一种矛...

    2018-04-11
  • UI交互设计只需掌握这3点

    说到交互设计,就不能不提需求,因为所有的交互设计的工作都是基于需求,这也是交互设计的第一个着力点。因此,只有深刻理解需求以后,才有可能做出好的交互设计。举一个饱含血泪的例子:在做一个项目的过程中,有一个需求是要将一个应用的数据展示做一下调整,使之能够查看在三个月之内的该数据。当时,自以为已经很了解需求,只是将时间限制放开到三个月,同时,数据的展示限制在一个月内。也就是说,可以查看三个月内任意小于三十天的时间段。优点是:1)满足了需求;2...

    2018-02-27