“微交互”表演和细节的艺术

用户头像
杭州/设计爱好者/8年前/311浏览
“微交互”表演和细节的艺术

微交互只需要瞬间,可能没人注意。

UI设计发展到目前的阶段已经呈现一种状态“世界上的APP都是千篇一律”。目前APP设计同质化现象,比如”购物类APP京东、淘宝、网易严选等等”。想把APP设计得比别人好很难,因为细节打磨到最后也没有什么可做的了。但是“微交互”可能会是一个很好的突破点。虽然在整体性的设计当中,“微交互”似乎显得微不足道,但是整个产品体验,与之息息相关。

“最好的产品通常会做好两件事情:功能和细节。功能能够吸引用户关注这个产品,而细节则能够让关注的用户留下来。”Dan Saffer 的这句话阐明了许多成功产品的秘诀,“微交互”则是这个细节。

我们将会探讨“微交互”是如何塑造优质的产品细节。


微交互是什么?

微交互是围绕着某个交互或任务的微妙时刻,它并不特指某个交互或者某个动效,而是和任务、交互相关的这个时间段中一系列的交互、动效和反馈。我们日常使用的APP中都有大量的微交互。

举个例子:我们常常会拿日常生活中的开关作为实例,执行按开关这个操作的时候,开关按钮会有力回馈,按钮本身会有物理上的位移,同时会有声音回馈反映到用户耳中,开关所启动或者关闭的对象会发生改变,并且让用户感知到。这种“微交互”毫无疑问在计算机被发明之前就有了,而这也是我们“微交互”的原理所在。

著名魔术师 Dariel Fitzkee 曾经说过:“魔术是表演和细节的艺术。”而设计同样是如此。设计师如果能把控设计的大方向,但是细节处理不当,还是会让优秀的设计方案功亏一篑,要不怎么说“细节当中藏有魔鬼”呢?也正是因此,很容易理解到“微交互”这个神奇的种子,如果得到适当的照顾,可以成长为伟大的可用性,效率和普及的产品。

那为什么对“微交互”的讨论这么少?个人理解好的“微交互”不在书本和方法论里,而在实际产品中。好设计是透明的,真正优秀的“微交互设计”,人们每天都在使用却察觉不到它的存在。


让我们一起来看看有哪些值得注意的微交互。

1、过度动画(等待不可避免,但可优化。)

研究表明,用户能够最多忍受的等待时间是6~8秒:在0.1秒内反馈用户是可以接受的;超过1秒的等待用户会注意到延迟;而超出8秒,绝大部分用户会愤然离场。

虽然交互设计并不能改变网速和设备性能,但可以通过优化等待策略,减少等待次数,设计等待效果,甚至使用虚假的反馈为用户疏导焦虑,最终获得用户的认同。


闲鱼和饿了么的加载,使用动画消除用户的焦虑

多图列表刷新或者订单生成等待通常是一个大于1秒小于8秒的时间,它让用户能明显感受延迟和不稳定感。优秀的移动产品会专门为这个等待设计加载动画,比如闲鱼和饿了么,使用接近物理运动的可爱弹动动画,提供反馈,麻痹和消除用户的等待焦虑,理解系统正在运转,内容或订单马上就好。

这样的例子在产品中非常多,也是微交互设计的热门应用之一,在此不再展开。



2、可视化反馈

乘坐电梯时常见到一种现象,人们按了一下关门按键,过了1秒,又按了一下,然后又按,最后门关上了,这源于电梯关门存在延迟与没有提供及时反馈,虽然人们知道电梯存在这个问题,但当再次来到这电梯中,却又重复反复按键的一幕。人们在操作的时候,需要获得可视化与及时反馈,否则就会感受到强烈的不稳定感。

如下图所示:


当键盘不是数字而是字母,受限于屏幕尺寸,我们并不能加大按键尺寸,该如何做呢?iOS早就想到了这一点,在第一代iPhone上就提供了输入可视化反馈(放大镜),让人们及时知道是否已经准确输入,同时不干扰视觉焦点。

如下图所示:


3、增加令人愉悦的细节

动效在APP中的主要是以过渡的形式呈现,而那些真正让用户感到愉悦的动效大多是非标准和非常规的,它们的不同和令人意外的体验是取悦用户的关键。下面的案例中,触发按钮之后,动效提供了两重功能:告知用户按钮已经触发,然后见证一段有趣的动画。


虽然有人认为这样的动画有炫技之嫌,但是最重要的是照顾到用户的情绪和体验,能够调动用户的情绪,这个动效在整个UI交互中就称职了。


微交互的作用

简而言之,微交互通过让产品更加人性化来提升用户体验。在设计UI的时候,绝大多数情况下,我们都在反复斟酌界面的外观和感受,思考怎么将这些东西设计出来。但是当我需要考虑微交互的设计之时,则更多的是在产品、服务和品牌之间做权衡与抉择。微交互才是真正意义上以人为核心的设计:

  • 提供即时反馈——视觉反馈符合用户的本能预期,它的存在让用户明白,他们的操作被用户接受;

  • 促进互动——微交互本身就在鼓励用户进行交互,它能够指引用户,教育用户,让用户明白如何使用;

  • 带来愉悦感——微交互本身就是呈现完美体验的良好时机。


如何设计微交互?

设计微交互对于设计师而言,是一个非常令人振奋的事情,因为可以尝试新的解决方案,并且在探索中发掘出让用户感到惊艳的东西。为了做到这一点,你需要做下面的事情:

  • 站在用户的角度看待问题,用尽办法让他们明白如何使用你的产品。

  • 创造功能性的动画,不仅要有美感,而且能够增强体验。

  • 让你的用户开心,用户使用时候的主观感受,决定了他们是否要继续使用下去。如果用户感到愉悦,他们会回来。

  • 不要让人觉得烦躁,过多的动效可能会让人觉得头疼,而这个会让用户离开你。

  • 使用正常的表述,而不是技术术语来表达,因为后者更容易让人觉得沮丧。


结语

设计界伟大的Dieter Rams曾经说:

“设计和艺术是不同的,但很多人都没有认识到这一点,设计是为了人而产生的,如果你不明白人,你就不能理解什么是好的设计。”

当我们理解了最终使用产品的是人,人具有感性层面,我们就将从全新的视角看我们手机中的APP,从而开始感知和理解到伟大产品的动人细节。感谢大家阅读。


3
举报
|
7
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
Security Camera UI kit
【新年UI图标】钱包icon
UI 登录界面设计模板包
【新年UI图标】汽车icon
高级感金属拟物 UI设计组件库
盲盒APP UI设计
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】会员icon
【新年UI图标】礼物/活动icon
智能家居中心 简约 UI设计组件库
科技医疗透明柜UI界面设计
APP/小程序商业项目UI模板|99个高保真UI+79个原型
新拟态风格 UI设计组件库
3D渐变流体抽象矢量UI背景图
【新年UI图标】秒杀icon
手表表盘UI系列
3D卡通UI界面图标可爱插画免扣素
高级表盘系列UI源文件
户外旅行飞机情侣假日出行
钱包ui模板
我的钱包-UI界面设计-app
【新年UI图标】体育icon
拟物风质感写实UI卡片合集源文件
你可能喜欢
大家都在看
登录注册