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

微交互应该火热了相当一段时间了。它成为话题中心很大程度是因为微交互所带来的令人动容的体验。如果说要界定微交互,那么它应该是围绕着用户完成单个任务前后而存在的微妙的交互和效果。小贴士:奖励机制是驱动用户的核心,奖励越强,产生的习惯效果也就越明显。小贴士:动效应当具有足够持久的生命力,所以设计的时候,应当思考它是否会在看过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-16
  • 让自行车站在墙上,生活中的交互设计|这个设计了不起

    Light Dusk by Z-Inhouse 宛如陶罐的铝制灯罩搭配质朴的软木,造作旗下的设计师利用两种材质的特性,打造了这个造型简洁的向晚小吊灯。喇叭形的灯罩由 1.5 毫米厚的轻薄铝板制成,表面还经过了哑光喷涂处理。嵌入顶…

    2016-12-09
  • Hello UED!

    今天,UED.xyz正式上线,我们期待能尽快成长,以期能承担帮助国内交互设计师寻找灵感和创意的站点。 我们会专注交互设计,我们的域名是https://www.iamue.com和UED.xyz,请记住我们网站叫艾欧交互学堂。 如果有同学…

    交互设计 2014-09-02
  • 经验分享丨赶集App中秋节的皮肤设计

    随着移动互联网的迅猛发展,同一款产品,使用移动端的用户远超PC端,为了更好的提升APP的用户体验,情感化设计也得到了越来越多的关注,通过它来唤起用户共鸣,带给用户愉悦的心情。

    2017-04-30
  • UX小白 | 不谈它?算什么用户体验设计?

    这其实只是个引你进来的标题,我今天真正想说的事情其实是它——你在做一款产品的时候考虑过它的无障碍性(Accessibility)吗?无障碍性(Accessibility):在图形交互界面为基础的交互方式中,无障碍性也往往被称为可访问性。“无障碍性(accessibility)意味着产品设计应用时应考虑到,无论是因为年龄、事故或疾病而有认知、感官或者移动障碍的人,还是没有此类障碍的人,都应能够有效使用这个设计。”——《About Face...

    2018-01-31
  • 音乐社交的本质——从云音乐引发的产品思考

    社交虽常见,但音乐真的适合社交吗?音乐社交存在哪些特殊性?如何利用音乐来社交?可能你常常使用云音乐,却不曾想过这些问题。现在来看看作者对这些问题的思考吧。

    2017-05-22
  • 「大产品小细节」5分钟了解格式塔原则

    这一篇「大产品小细节」想跟大家聊聊设计中很常用的一个心理学原则——格式塔原则。

    2017-08-04
  • 交互设计思路:积分模块改版总结

    作者根据工作经验对积分模块改版进行了一些总结,与大家分享,希望可以从中收获点滴。

    2017-05-04
  • 交互设计要点&配色趋势

    色彩在任何一种设计中都起着很重要的作用,相差不多的色彩却能渲染出截然不同的情感效果。因此,好好利用色彩与生俱来的魅力,就能让你的网页设计更特别。 1Metro和柔和鲜嫩的色彩 Odam Luiran的网站是Metro风格,…

    2015-12-08
  • 尼尔森交互原则,讲的到底是什么?

    这几天,脑海里面一直回绕着一个声音,尼尔森,尼尔森交互,尼尔森交互十大原则。blues老师的讲解至今让我记忆犹新,如果真的让我选择一款产品进行尼尔森交互分析,我想应该就是简书了。

    2017-06-01