帮你梳理微交互的五个基本要素

微交互应该火热了相当一段时间了。它成为话题中心很大程度是因为微交互所带来的令人动容的体验。如果说要界定微交互,那么它应该是围绕着用户完成单个任务前后而存在的微妙的交互和效果。小贴士:奖励机制是驱动用户的核心,奖励越强,产生的习惯效果也就越明显。小贴士:动效应当具有足够持久的生命力,所以设计的时候,应当思考它是否会在看过100次之后让人觉得厌烦?它是否清晰可见,或者完全无法引人注意?小贴士:用充满情感和人的姿态来同用户交流,这是让你的UI和交互变得更加温暖的最快的方式。小贴士:应当在你的设计中保持KISS原则(KISS 原则是用户体验的高层境界,简单地理解这句话,就是要把一个产品做得连白痴都会用,因而也被称为“懒人原则”),不要让那个你的微交互成为一个宏交互。


微交互应该火热了相当一段时间了。它成为话题中心很大程度是因为微交互所带来的令人动容的体验。如果说要界定微交互,那么它应该是围绕着用户完成单个任务前后而存在的微妙的交互和效果。

帮你梳理微交互的五个基本要素

微交互可以存在于APP和网页的各个环节,举几个常见的例子:

  • 确认已经添加到购物车的项目
  • 使用下拉刷新更新内容
  • 确认某个操作的界面动效

这些微妙的动效和交互给用户带来微妙的瞬间,它们出现在APP和网页的各个角落。这些微小的瞬间虽然不明显,但是用户可以轻松地感知到,这些为交互一点一滴地让整个APP的用户体验得到了极大的提升。

今天的文章中,我们将探讨5种常见的微交互技术,并且提供相应的实战案例。

1、培养用户习惯

微交互能够鼓励用户进行更多的交互,这也使得它们能够有效地培养用户习惯,构成习惯循环。培养用户习惯通常需要三个步骤:

  • 提示:触发用户操作的提示
  • 执行:响应提示,执行相应的操作
  • 奖励:完成操作给予用户以好处

帮你梳理微交互的五个基本要素

Facebook 培养用户习惯的方式就是一个很好的案例:当白色的图标上出现红色的标识的时候(提示),用户会知道有新 消息了,用户就可以点击图标(执行)的时候,就可以同好友进行聊天了(奖励)。当用户在看到红色的标识之时,随后会主动点击并查看。

帮你梳理微交互的五个基本要素

虽然这个案例看起来很简单,但是基本所有的微交互都遵循这个规则。

小贴士:奖励机制是驱动用户的核心,奖励越强,产生的习惯效果也就越明显。

2、结合主题

微交互应当是你的设计的自然组成部分,换句话来说,你应当创建一个统一的主题,宏观上的交互和微交互应当在设计上保持一致。结合主题的微交互应当结合两个简单的原则:

帮你梳理微交互的五个基本要素

  • 连续性:动效和UI控件不同状态之间的转变应该是平滑自然的,而非不连续的。
  • 可预测性:良好的微交互应当给用户以一定的预期,帮助用户理解界面的含义,获取正确的信息。

帮你梳理微交互的五个基本要素帮你梳理微交互的五个基本要素

3、用动效给予反馈

如果正确地将动效和微交互结合起来,它能够极大的提升用户体验。但是并非所有动效都能达成好的效果,只有同时具备良好的功能性,还能够令人产生愉悦感的动效才适合在微交互中给用户以反馈:

功能性良好的动效能够降低用户的认知符合,防止用户在使用过程中产生迷惑,便于用户在使用过程中同界面产生正向的联系。

帮你梳理微交互的五个基本要素

令人愉悦的动效让微交互更加有趣,并且能够吸引用户的注意力,让界面更加富有生命力。

帮你梳理微交互的五个基本要素

小贴士:动效应当具有足够持久的生命力,所以设计的时候,应当思考它是否会在看过100次之后让人觉得厌烦?它是否清晰可见,或者完全无法引人注意?

4、保持幽默

无论是哪种程度的幽默,融入到交互中,都能给用户带来充满情绪、富有感情的用户体验。比如著名的电子邮件服务 MailChimp 就会在用户加入之后,使用各种意想不到的幽默和积极的情绪来引导用户使用产品,协助他们发出他们的第一封电子邮件。用户在使用的过程中,会不断地收获小而令人愉悦的惊喜,MailChimp 让发送邮件的过程令人难忘。

帮你梳理微交互的五个基本要素

MailChimp 用幽默的交互缓解了紧张的局面和氛围。

小贴士:用充满情感和人的姿态来同用户交流,这是让你的UI和交互变得更加温暖的最快的方式。

5、规避不必要的交互

微交互最大的特色是恰到好处,所以正确的的微交互应当为用户提供合适的视觉线索和动效。复杂的交互和繁复的UI是最常见的错误。实际上你在Dribbble 上能够看到许多实验性的UI、交互和动效设计,其中不少看起来极为漂亮,但是在实际的交互中缺乏可用性,难于使用,或者完全不具备实现的价值。

帮你梳理微交互的五个基本要素

以这个动效为例,用户每翻一下页面,小球都会来回乱飞,用几次谁都受不了。

在微交互中,少即是多。将无用的功能和UI控件移除,能够让一个UI更加清晰直观,在进行微交互的设计过程中,应当关注它的实际功能,确保它能为用户提供实际的功能。

小贴士:应当在你的设计中保持KISS原则(KISS 原则是用户体验的高层境界,简单地理解这句话,就是要把一个产品做得连白痴都会用,因而也被称为“懒人原则”),不要让那个你的微交互成为一个宏交互。

结语

在用户体验设计过程中,最重要的应该是处理好用户使用产品时候的感受,即使是最细微的细节都值得密切关注,因为每一个细节都和你的产品成功与否密切相关。

 

原文作者:Nick Babich

原文地址:Medium

译者:@陈子木

译文地址:http://www.uisdc.com/best-practices-for-microinteractions

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

(0)
CatherineCatherine
上一篇 2017-05-14 02:31
下一篇 2017-05-14 04:31

相关推荐

  • 案例|设置是查看还是修改?

    本文作者将浅析网站设置和手机设置,且针对“设置是查看还是修改?”的问题提出了她的解决方案,一起来看看~

    2017-05-01
  • 深度剖析|直播页面中的聊天区

    本文将从设计角度深度剖析聊天区。

    2017-05-20
  • 界面交互动效核心知识的分类与总结

    这篇文章是基于我自己的理解对界面交互动进行了分类整理和总结。

    2017-05-02
  • 改善用户体验或是中小型IOT平台突围的唯一出路

    全屋智能、智慧城市成人们关注的新焦点,智能音箱、智能冰箱、智能手环、智能珠宝皆得益于物联网的发展。据推测,在2045年,最保守预测将会有超过一千亿的设备连接在互联网上,而最先在物联网上开花的便是智能家居了。网上数据显示,2021年全球智能家居市场规模将达5000亿元。前景如此可观的智能家居市场不仅催生了不少了智能家居企业,同样也催生了不少提供智能化解决方案的物联网平台,如国外的AWS、IBM、微软、谷歌,以及国内阿里云、京东微联、华为等...

    2018-05-08
  • Axure实验室 | 带放大效果的轮播图

    提起轮播图,相信大家已经非常熟悉了,脑海中自然而然的会浮现出轮播图的交互效果——几张图片,可以逐一的左右切换显示,而每次只能显示一张。这是最基本的轮播图,当然,我今天要讲的不是这种。还有一种轮播图,会同时显示三张图片,中间的图片会放大显示(相比左右两边的两张会大一些),像下面这样。阅读原文预览然后左右切换的时候(通过点击左右按钮或者左右滑动),左右两边的图片移动到中间位置时会动态放大,而中间的图片移动到左右两边时会动态缩小。另外,这种轮...

    2018-03-15
  • 交互设计申请关注度最高的5个问题,第一个就头疼.. | 大咖说

    说到交互设计很多同学的第一反应就交互思维、交互体验...准备申请交互专业的同学也是非常心焦!说起来容易做起来难,我们还是多和专业老师取取经。伦艺学姐回答的5个交互专业问题,收好哦~Q1:转专业学生申请应该注意什么?我觉得需要看这个问题怎么定义转专业,因为在一个设计类的学科,很多设计的思维方式和实践能力是共同的,我们可以通过设计的方式去解决问题。如果想要转到交互或者用户体验的专业,其实提供的是一种用交互的方式和研究结果解决现有用户的问题。...

    2018-04-26
  • Axure新品AxShare App现已发布,快来下载!

    今天阿西收到axure官方的邮件: We're launching the AxShare App 意味着 axure终于朝着APP方向有了实质性的进展,大家今后的作品可以通过这款APP进行预览演示了。可以是Axure不上之前的短板,下面就看这个APP的体…

    2015-05-23
  • 广告与用户体验只能二选一?

    最近公司的移动端产品在优化广告投放,其中也遇到了不少的困惑,我翻看了部分APP的广告展现形式并结合了几位设计师&产品经理的想法之后,整理总结出了这篇文章。本文将结合实际案例就常见的广告形式以及它们如何合适地呈现与大家进行分享。遇到的困惑我们知道无论是自身的品牌活动宣传还是第三方的商业广告都能为公司和产品带来不小的收益,但与此同时不恰当的广告也会对用户体验造成很大的影响,特别是移动端,因为屏幕有限更是“寸土寸金”,一不小心就会引起用户反感...

    2018-04-04
  • 谈谈人类学民族志这一高端用研方法

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

    2017-05-24
  • 我是如何从测试转到产品的?

    为什么我从测试转产品?无论硬件研发还是软件研发,都需要测试工程师找出软件缺陷、保障产品质量,以降低项目风险,我们可能听到过由于某一个漏洞导致公司损失多少钱的例子。而测试的价值就是尽可能早的——发现这些会给公司造成损失的问题,在项目交付前反馈到开发修复。所以测试岗位对于企业来说也至关重要。在做测试时,我一直期望能发挥自己的最大价值,无论是功能性问题还是用户体验问题,我都会一一跟踪。当兼顾项目进度,有些问题来不及修复时,遗留问题我会...

    2018-04-02