在分析一个动效时,我会以这样的思路来思考:动效所在的页面和位置——这是一个怎样的动效——这个页面的使用场景是怎样的——为什么要这样设计——是否达到设计目标。
① 举个例子,比如百度糯米的摇一摇按钮,我是这样分析的:
1.这个“摇一摇”按钮出现在了“我的”页面,页面右下角。
2.用户将页面切换到“我的”时,“摇一摇”按钮靠着页面右边缘停留约3秒,随后向右收入,只露出1/3的按钮。
3.用户切换到“我的”,一般来说是带着明确任务的,比如查看糯米券,查看订单,修改个人资料等,完成任务后用户便会离开这个页面,不会过多的停留。
4.为什么放在这个页面呢?我会一个一个页面来看。“首页”汇聚了很多入口,有分类,有各种活动入口,有团购,内容非常丰富,“摇一摇”作为一个抽奖活动,如果放在“首页”似乎也是说得过去的;“附近”是基于用户位置的商家和团购推荐,“摇一摇”放在这里显然跟使用场景不相符合,同理,“精选”也不符合;“我的”也是一个内容丰富的页面,包含了跟用户相关的各种内容,如订单、优惠券、推荐抽奖等,看起来也是个不错的选择。那为什么最终选择“我的”,而不是“首页”呢?我猜想原因可能是:“首页”过于复杂。“首页”已经有很多活动入口,且有几个动效(banner、糯米头条、时间倒计时等),“摇一摇”放在这里不仅不能让用户发现,还会使得原本复杂的“首页”显得更混乱,使得转化率不升反降。而“我的”界面简洁许多,用户更容易发现,且抽奖跟用户自身利益相关性较大,所以放在这里更加合理。
为什么动效要这么设计呢?当然是为了让用户发现它。如果不使用明亮的颜色和动效的话,用户在完成原本任务的场景中很难发现有这么一个按钮的存在,而往回缩的这个动画又使得“摇一摇”按钮不会占据页面,阻碍用户完成原始任务,此外,为了让用户原本的任务不受打断,“摇一摇”放在了页面的右下方。
5.这样一来用户原本的任务不受打扰,又让用户注意到了“摇一摇“的存在,吸引用户点击,进而提高了转化率。
这样的一个思考过程,我感觉能将一个交互动效分析好了,就能学到足够多的东西了。