提升产品体验感 APP设计中动效设计有哪些技巧

Post 9 of 886

网页设计师不仅要把插画、icon、动效做得美,还涉及了很多细节上的体验。尤其是动效设计,它能赋予静态图像的“生命”,帮助用户更好地理解如何更有效地使用产品。那么,APP设计中动效设计有哪些技巧呢?

提升产品体验感 APP设计中动效设计有哪些技巧

技巧一:反馈当前状态

提升产品体验感 APP设计中动效设计有哪些技巧

提升产品体验感 APP设计中动效设计有哪些技巧

颜色和图画都能引起用户的注意,为何还要添加动效设计?由于数十万年的自然习惯,我们对事物的“运动”特别敏感。此外,动效设计对视障人士更加友好,即使在纯色才非常突出的情况下,视障人士也是很难感知到错误提示的,但当用注意到抖动的动画时,他会立即意识到这个动作的意思。

技巧二:保持动作的关联性

正确的动效设计可以帮助用户理解方向,而不会感觉内容突然发生变化。以“京东”和“淘宝”为例:

提升产品体验感 APP设计中动效设计有哪些技巧

京东使用的“投递动作”强调了商品加入购物车的过程,搭配“+1”的图标让用户的感知更加明显,即使没有文字,也能告诉用户已经成功把商品加入购物车中。

至于淘宝虽然使用了文字告诉用户,但是会延长用户对文字的理解过程。

技巧三:注意展现方式

受限于移动设备的尺寸限制,利用图片/文字在有限范围内的滚动,能展示更多的信息,但这种展现方式同样很容易出差错,以“天猫”为例:

天猫首页功能模块去中的“免费领水果”,是由3块内容共同组成的一条完整信息,用户只需阅读不需要选择。相比起纯文字的“免费领水果”,丰富的水果品类和更加突出的免费字样带来的刺激会更强烈。

提升产品体验感 APP设计中动效设计有哪些技巧

但天猫超市中的动效设计会采取卡片运动不规律的方式,且每次进入后运动变化都不一样,加上每个卡片都是独立的分区信息,一旦用户错过了某个分区信息,就只能退出再重新进入。

技巧四:增加情绪的传递

除了功能型动效,动效设计还能利用情感化设计表现出来,增强某种情绪的感觉,向用户传递我们所想要表达的情绪。以“QQ”和“京东金融”对比:

提升产品体验感 APP设计中动效设计有哪些技巧

京东金融的消息清除更像是一个功能按钮,除了消失的红点没有任何反馈;但QQ除了消失的“烟雾”效果之外,拖拽的感觉以及逐个消失的爽感,就像一个一个捏爆泡泡纸的,这种融入情感的动效让人感到非常愉悦。

技巧五:避免强烈的反差

如果两个页面之间反差过大,眼睛受到的刺激就会较大,可以利用动效设计有效避免这种强烈发差造成的不适感。以“片刻”和“QQ”为例:

提升产品体验感 APP设计中动效设计有哪些技巧

片刻的夜间模式切换,并不是是很突兀的模式切换,利用动效营造了一个日出日落的场景,能缓和这种突然反差带来的刺激。相反,QQ的夜间模式切换显得反差太大,会令用户感到不适。

以往,网页设计师总以为动效就是为了让网页更加美观,事实上,每个动效都用其对应的目的,帮助用户更好理解产品的使用方式。好好利用动效设计,提生产品的体验感,这会让用户更加喜欢你的产品。

This article was written by admin

MENU
網頁設計公司