动效在日常产品设计中的实际应用

本文分享作者C端产品设计中总结的动效使用,归纳出比较实用的6点技巧。利用小技巧有效吸引用户注意力,增加点击率,降低运营成本;用最简单的视觉表现方式说明其中的关系,增加产品易用性等。

几年前随着国内移动互联网的疯狂式发展,催生了不胜其数的移动互联网平台,平台类别涵盖了生活的各方各面,有社交的、电商的、金融的、资讯的等等。在每个垂直领域下,都有N多个平台之间相互竞争,这使得每个平台都面临着巨大的生存压力,时刻逼迫着平台经营者们在其平台的功能上进行求同存异的挣扎。

在这种大环境下,设计师所要解决的需求越来越复杂,传统的静态页面设计已无法引导越来越“不听话”的用户,我们需要在这种形势中求变,才能时刻保持住设计师本该有的价值。而动效设计的运用,可以较好的解决部分问题。那么,动效设计在实际工作中,究竟有哪些作用?我在自己的实际动效设计工作中,总结出了使用动效的6个实用之处:

以下再结合案例进行较为详细的说明

作用1

案例1:UC浏览器2018世界杯活动页面

下图为UC浏览器2018世界杯活动页面,一般活动页面会为了营造氛围而把大感觉做的热烈一点,在这种情况下就免不了会使用较多的暖色(暖色比冷色突出,一般会用暖色来突出重点),在一屏页面暖色使用较多的情况下,如果想要突出【开宝箱区域】,且保证在「极短时间内」能够有效吸引到用户注意显得并不容易。因为一个用户留给一个页面的时间往往只有苛刻的几秒时间,如果不能在短短的两三秒时间内快速抓住用户的眼球,让用户到我们为了留住他们而设计的功能点,那很可能就会流失掉这个用户。

使用动效,可以有效的突出【开宝箱区域】,让用户能够聚焦到我们想要让他注意到的地方,让用户产生注意是第一步,只有用户先注意到了,才能产生下一步的查看操作,诱其深入。

作用2

案例2:一般APP弹窗关闭

关于APP的弹窗,你可能会遇到这样一个场景:在开启APP之后的第一时间突然有一个弹窗出现在你的眼前,这种突如其来的“烦人”提示,会打断你的思绪或操作,这会导致你的反感,你可能会无意识的「立刻」点击关闭按钮,但有时在关闭的瞬间又注意到了弹窗的内容对你来说是有吸引的,如果这个时候因为误点关闭弹窗而不知道去哪里找弹窗内容的链接入口,你是否会感到非常懊恼?

下图为我在做平台设计改版提案的时候提出的解决方案,当弹窗关闭时,缩放成一个小点之后有一个路径动画,可以告知用户弹窗关闭之后去了哪里,暗示用户如果想找回弹窗内的活动可以点击哪里能找到。因此使用动效可以将两个元素之间的关系进行直观的关联演示,用最简单的视觉表现方式说明其中的关系,增加产品易用性。(动效为我本人所做,但弹窗图片“生活缴费…”为网络搜的替代图,侵删)

作用3:

案例3:淘宝首页金刚区图标

对于寸土寸金的手机屏幕来说,思考着如何能在局限的区域范围内去展示更多的信息,一直是平台运营者们想要攻克的难题,也是设计师们需要帮助解决的难题。拿淘宝APP的首页来说,其首页金刚区的每一个入口,里面所承载的功能,单拎出来都可以作为一个功能完整的APP来使用。由此可见其中所投入的人力物力,如果入口无法得到点击,那将会是多么巨大的资源浪费,因此引流这件事就显得尤为重要。但是单单一个入口图标+入口名称,如何才能明白地将入口的诱人亮点告知用户来吸引点击?

使用动效可以在有限的区域面积内,展示尽可能多的信息内容,节约空间。如飞猪旅行的活动“送500券”,在这么狭小的空间无法将信息展示完全,使用动效可以解决信息展示问题,动效在吸引用户注意力的同时,也将亮点信息进行了展示。

作用4

案例4:天猫超市首页

“生活家”整个模块里的6个小模块的信息是属于同一层级的。因此在设计的时候,会选择将信息进行平铺,因为没有哪一个小模块是重点,所以在视觉上就没有重点,这会导致很难引起用户的注意,可能整个模块都会被用户直接忽视,或者视线只飘过其中某一个小块,然后眼球又快速的移动离开去了其他的大模块,不会完整的浏览完这个大模块里的信息,这是我们运营者所不希望发生的。那么我们是否能通过设计的手法去引导用户看完整个模块的信息?

使用动效在吸引用户注意的同时,设定动效的播放顺序,可以引导用户逐个浏览完整个模块,增加用户在此处的停留时长。

作用5

案例5:加油宝APP

关于情感化设计,我一直在不断的思考一个问题,情感化设计究竟能给产品带来什么「实际」且「有效」的价值,能否真正的对数据转化产生影响?在平时的工作中,我也在不断的尝试将情感化设计融入产品设计中,探索情感化设计对产品的真实价值。

下图是我在之前求职一个金融平台时所做的面试题,对“我的”页面进行改版设计。对于一般的金融平台,用户一般进入“我的”页面都是想要查看收益,针对这一个用户需求点,我尝试着将动效和情感化结合起来,让数字快速翻滚,给用户营造一种“丰收感”,加以情感化的设计,用动态的笑脸表情给予用户一个正向积极的反馈,引导用户的情绪让其能更为强烈的感受到获得收益的喜悦,让用户在投资收益的过程中感受到“愉悦”以鼓励他们能够持续甚至加大投入来享受更多的这种愉悦感。

作用6

案例6:花椒直播间

对于一些有用户VIP体系的平台来说,一般的VIP用户都是平台的高价值用户人群,可以直接对平台的营收产生转化。在一些直播平台里,VIP是一个非常重要的功能体系,因为VIP较高的付费率直接影响到整个平台的营收,说是关乎直播平台的生死存亡是一点都不为过,那么对于这部分高价值人群,我们又该如何鼓励他们继续保持这份「价值」?

一般来说,我们会给予高级用户「特殊性」。什么是特殊性?即高级用户的行为和一般用户的行为区分开来,做特殊的处理。就好比坐飞机的头等舱和经济舱,待遇是有差别的。下面举的例子是花椒APP的直播间,高级用户“小苔菜”进场时,其名字入场提示以动效的方式进入(普通用户入场提示则是在弹幕里和普通发言一样,很快被刷掉),这种特殊的对待方式可以让高级用户感受到其行为与普通用户的差别,让高级用户感受到自己的独特性,从而激励他们持续在平台进行消费以保持其高级的属性。

结语

正如前面所说的,对于一些平台来说,现在越来越繁杂的界面信息及功能架构给设计师带来了越来越多的设计难题,通过设计师的手段如何更好的解决这些问题,将复杂的问题简单化的呈现在用户面前,给用户带来更好的体验,为平台转化出更多的价值,是现在的设计师需要深入思考的问题。虽然动效设计可以一定程度上的解决某些问题,但请不要滥用,记住动效的使用原则应当是克制的,满屏的动效乱飞,只会带来适得其反的效果。

站酷

作者:有鸡

(0)

相关推荐

  • 重复与突变在产品设计中的应用

    设计中的重复是什么? 在平面设计中,重复构成是常用的一种构成方法,通过重复可以使画面达到和谐.统一的视觉效果,并能加强给人的印象,也可以达到一种有规律的节奏感和形式美感. 排版的四大原则:对比.对齐. ...

  • 产品设计中的可拓展性原则

    可拓展性原则是我自己瞎起的一个名字,高兴的话你说弹性原则也行.主要意思是指 界面设计要足够的灵活,具有弹性,以满足将来可能出现的场景.我第一次考虑这个问题是从去年7月份开始,当时接到领导的一个临时需求 ...

  • 产品设计中的游戏化设计策略

    游戏行业是有巨大商业价值的,腾讯在2018年第一季度的财报就公布日赚2.66亿元,年收入破1000亿.一款好的游戏可以让用户持续数小时,数天,甚至数周一遍又一遍地玩同样的游戏.我并不经常玩游戏,但是, ...

  • App动效原理和应用设计

    时下对动效的追捧,疯狂至可以用一句话形容--"没有动效的APP,简直不是好的APP".优秀的动效设计在提升产品体验.用户粘性方面的积极作用有目共睹,已然成为现下Web.APP产品交 ...

  • 产品设计中「引导页」的相关思考

    早些年入行做交互的时候,会对任何类型的页面都做一些分析与总结,旨在提升自己的思考能力吧.所以当然也写过关于引导页的文章,但是比较浅,今天我想更深入的谈谈这个话题. 1. 引导页的类型 引导页定义比较广 ...

  • 如何在产品设计中利用心智模型

    不管是创造新产品还是优化现有产品,产品设计师都应该利用用户对熟悉的产品和界面有一定的理解这一点来进行创作.这样做的好处是产品会有更流畅的交互,更高的使用率和更好的产品可用性.用户应该在在你设计之前就知 ...

  • 产品设计中的破窗理论

    [优秀外文翻译 第40弹] 几年前,我第一次通过Spotify的同事介绍了"破窗理论".这个理论最先说的是,维护城市环境可以防止诸如故意破坏或在公共场合饮酒等小型犯罪,营造良好的秩 ...

  • 动效设计基础(二):动效的应用

    在上一篇文章<动效设计基础(一):运动曲线与缓动>中,我们讨论了动效的几种常见形式以及缓动的重要性.那么,我们为什么要用动效呢?除了酷炫好玩以外,动效在用户体验设计中其实发挥着很重要的作用 ...

  • UX设计中的功能性动效

    图片来源:ZURB UNIVERSITY 功能性的动效是指一种微妙且具有清晰合理目的的动画效果.它能减少认知负荷,防止对(界面)变化的忽视.还能帮助用户在界面的空间关系之中建立惯性回忆.更重要的是,动 ...