微交互提升用户体验设计

释放双眼,带上耳机,听听看~!

随着互联网时代的成熟发展,人们上网已不再只是为了获取信息,极简的界面、舒适的阅读感、强有力的视觉冲击,在正确的时间、正确的位置上使用微交互,不仅可以改善用户体验,还可以使 UI 栩栩如生。

“平庸的产品与伟大的产品,差别就在细节上。”Dan Saffer在《微交互:细节设计成就卓越产品》一书中把微交互分为4个要素:触发器、规则、反馈、循环与模式。

如何用微交互提升用户体验?

什么是微交互呢?我们可以这么界定:微交互是同数码设备进行的基于任务的单个交互。是用户在完成某个小任务的瞬间产生的交互反馈。这些微妙的交互可以快速传递信息或者反馈可视化操作结果,协助用户迅速明白如何操作。值得注意的是,绝大多数的这类交互都是微小而不引人注意的,但是它会为你提供平滑、自然的感觉。

如何在产品中加入更为人性化和智能化的微交互体验,是一个值得研究的方向:

· 轻触标题的细微动效即可增强用户直接操作的体验;

· 在个性化的定制中,不经意间的划出与转变帮助用户看到行为的结果,避免误操作;

· 用户在与新闻内容的互动中,不论评论、转发还是收藏,都可以提供细微优美的反馈、通知和操作指南;

· 在等待刷新以及切换的过程中,微交互可即时传递信息,同时不会让用户无聊或分心,以此来节约时间(它必须吸引用户的注意);

· 只有了解用户的阅读习惯与背后的语境,微交互才能更加准确、有效;

· 在每天的阅读中要经得起长期使用,第一眼看上去好玩的微交互在第100次使用后,可能变得特别烦人;

· 在每个小细节和环节上设计人性化的微交互,一定要看着顺眼。动作手势需要设计得顺滑流畅,这样微交互才能真正生动起来。

接下来,辞典酱结合具体的案例,展示如何通过用微交互来唤起用户的注意力,提升用户操作体验:

-显示系统状态

Jakob Nielsen 首次针对 UI 设计进行启发式设计时指出:“系统应始终在合理的时间内通过适当的反馈,使用户了解发生了什么。” 这意味着用户界面应通过提供反馈,使用户了解正在发生的事情。应用程序不应该让用户猜测,它应该告诉用户发生了什么,因此,产品界面需要向用户指明此刻正在发生的事。

使用微交互展示上传/下载的状态。在这个案例中,微交互同时显示了下载了多少 M 字节,动画进度条为无聊的下载过程增添了乐趣。

如何用微交互提升用户体验?

by Nick Buturishvili

该组的另一个知名动效是“下拉刷新”,它启动了移动设备上的内容更新过程。令人愉悦的刷新动画会使用户感到有趣。

如何用微交互提升用户体验?

by Toma Reznichenko

Takeway:动画提供应用程序进程状态的实时通知,使用户能够快速了解正在发生的事情。

-使按钮和控件有形

用户界面元素(例如按钮和控件)应该看起来是有形的,即使它们位于屏幕的后面。视觉和动作提示,可以通过立即确认输入,并以看起来和感觉像直接操纵的方式进行动画处理来弥合这种差距,UI 按钮可以模拟与常见物理对象的交互。简而言之,你可以通过对用户输入的视觉响应来增加清晰度。

如何用微交互提升用户体验?

按钮和其他活动控件应通过视觉反馈响应用户操作。(图片来源:Behance)

如何用微交互提升用户体验?

by 谷歌

Takeway:视觉反馈之所以有用,是因为它吸引了用户对确认的自然渴望。点击应用程序感觉很好,总感觉就像你知道发生了什么。

-建立有意义的过渡

你可以使用动画在导航上下文之间平稳地运输用户,解释屏幕上元素排列的变化或加强元素的层次结构。

图标可以从一种形状变形为另一种形状,在不同的时间提供双重功能。

如何用微交互提升用户体验?

by 谷歌

运动设计可以通过告知和愉悦的方式有效地引导用户的注意力。这对于移动设备和智能手表尤其有用,因为无法在这些屏幕上显示很多信息。

苹果的 iOS UI 是有意义过渡的一个很好的例子。在下面的示例中,用户选择一个文件夹或应用程序,然后放大到其详细视图(或直接缩放到应用程序的主屏幕)。

如何用微交互提升用户体验?

by Rian Van Der Merwe

另一个很好的动画例子,它通过颜色和持久性元素在两个状态之间创建视觉连接。这使过渡变得顺畅而轻松。

如何用微交互提升用户体验?

by Ehsan Rahimi

Takeway:微交互可以在页面之间建立视觉连接,并为 UI 添加清晰度。

-帮助用户入门

在入驻流程中的完美UX和动效可能会对首次用户与该应用的互动方式产生巨大影响。在应用启动后,它们通过突出显示最重要的功能和控件来指导和教育用户。

如何用微交互提升用户体验?

by Ramotion

Takeway:微交互揭示信息并帮助用户有效地实现其目标。

-突出显示用户界面中的更改

在许多情况下,动效是用来吸引他们注意重要细节(例如通知提醒)的。但是,请确保动效具有功能性目的并且适合你的用户。

如何用微交互提升用户体验?

by Arjun Kani

Takeway:微交互对于用户而言可能是很好的视觉提示。

-添加令人愉快的细节

微交互动画的最基本用途是过渡。但是,当以超出标准动作范围的方式使用动画时,应用程序可以真正使用户满意。下面的按钮无缝更改状态并提供双重功能:通知用户并创造奇迹。

如何用微交互提升用户体验?

by 佐藤启

Takeway:关注用户情绪,这在 UI 交互中起着重要作用。

微交互表明,关注小细节可以带来强大的结果。正如查尔斯·埃姆斯(Charles Eames)曾经说过的:“细节不是细节。他们做设计。” 设计的每个要素都很重要。细节让你的应用程序在竞争中脱颖而出,因为它们要么实用而容易被遗忘,要么令人印象深刻、有用而难忘。

相关引用

《设计师+:无限可能的未来,设计师如何接盘互联网+》

https://www.smashingmagazine.com/2016/08/experience-design-essentials-animated-microinteractions-in-mobile-apps/

-图片、GIF来自网络

欢迎关注微信公众号:UX辞典,获得更多UX设计干货

人已赞赏
交互设计

蓝蓝设计在航天领域的交互设计

2020-9-6 0:38:52

交互设计

B端UI基础组件交互规范

2020-9-7 23:22:53

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索