动效实践:品牌页动效设计

说起动效,大家最先想起的是dribbble上酷炫的loading转动、卡片推入滑出、具有层次感的可视化数据展示、和最近流行的动效图标…… 的确,对设计作品而言,一瞬间抓人眼球最好的方法是打情感牌——让人轻松愉悦或眼前一亮的东西,而逻辑合理性和适度原则,常常被人忽视了。在《U一点·料》读书笔记 中,我分享了app动效的场景类型和设计方法,除了情感化的动效设计,还有情境动效——告诉你你在哪里,引导动效——告诉你该去哪儿,和响应动效——告诉你动作的结果如何。

工作中的一次优化需求,我接触到了和动效强相关的交互设计:为品牌落地页新增“商家热推”板块,合理布局信息结构。经过前期分析和设计推导,我打算将原来的“上新”、“优惠”入口融入下面的全部商品中,作为tab栏出现并支持手势(左右滑动)切换,过程不细述。

我确定了品牌页出现的三种动效:商品板块上滑到一定高度的悬停和自动吸顶(sticky), 吸顶后的tab栏 + 筛选栏置顶(fixed)水平滑动切换商品tab栏 (swipe)

一、动效解析

悬停和自动吸顶

分层悬停是一种区分不同层级信息的上推展示效果。页面上部分涉及氛围渲染、关键操作和整体介绍等等,下部分一般为浅色,集合了一部分不同类型的内容,上滑后停留在一定高度(可将内部导航等置顶),最大程度拓展下方内容的空间,同时保留顶栏的关键信息。

豆瓣 – 书籍详情页

网易云音乐-歌单页

自动吸顶意味着,模块被用户滑到某一高度时,便自动继续向上到顶部,无需用户手滑。自动吸顶使模块具有一定“黏着力”,像被一股力量推动和吸引上去,仿佛识别出用户要看下面内容的意图,也让界面元素多了些活跃的生命力。

相反,当用户不断下滑页面、回到之前的商品时,到达顶部下拉一小段距离,商品模块依然“黏着”在顶部不愿滑下,有一个回弹的效果

这是因为用户不断纵向滑动,没意识到已到顶部而可能错过想看的信息,我们认为当前内容的优先级大于上方模块,因此做了这个类似挽留的动效,减少用户误操作,和自动吸顶相呼应。

iOS锁屏-回弹效果

淘宝商详-横滑回弹效果

手势切换tab栏

水平滑动切换tab栏,这种交互已被广泛应用和接受,用户容易触发(触屏产生水平方向位移),也能轻易习得。

从“入口跳转页面” 转变为tab栏,主要原因是“新货”、“优惠”本就是下方所有商品的一部分,从层级上可与“全部”平级,固定在tab上让用户有迹可循,养成查看习惯。另外,tab切换本就比新开页面的成本小、负担低。

tab栏+筛选条上滑置顶

对规则内容的集合页,如店铺列表、新闻内容等,上滑页面时置顶分类tab、搜索、筛选排序也是一种惯常的用法,用户可在浏览过程中调整查看方式,缩小浏览范围。

二、动效交互说明

三、动效演示

接下来,我用Principle制作了这三个效果:

1. 自动吸顶动效

2. 手势切换tab栏动效

3. tab栏+筛选条上滑置顶动效

需要注意的是,Princple在设置Group为Scroll(连续滚动)或Page(分页滚动)时,一定要将Group区域缩小为屏幕内区域,否则操作结束时动效无法完成。

发表评论