带你用AE做出App store中的卡片动态效果

作者:三点共圆            2019-10-31 17:14      热榜

动画效果会讲故事,动效不仅仅是为了愉悦用户,更是为了帮助理解当前操作进展,帮助提高app的使用效率。当动效制作非常成熟时,看起来应当是非常自然的。

App中随处可见各种各样绚丽的动态效果,从页面跳转到加载进度指示,从状态反馈到下拉刷新。但动效的使用应当自然流畅,过多花哨或者不适当的动效反而会给用户体验带来负面影响。

一、App store的全新改版

苹果作为用户体验界的标杆,在最新的iOS11中,对界面及动效做了很多更新迭代。其中最明显的就是App store的全新改版。改版后的应用每日会根据最新时事,精选出小众精选、游戏文化、独立佳作等应用,用卡片的方式展示出来。作为第一级 Tab,巨大、显眼的卡片式设计意味着信息更为聚焦。

首页的今日推荐页还使用了非常漂亮的转场效果。转场动效是十分重要的一种动效,它的作用是引导用户,让用户更好地理解页面跳转,知道自己身处何方。App store的设计者为了避免卡片展示页和卡片详情页之间的过度过于生硬,利用动效填补了页面跳转的中间过程,使体验更加流畅自然。

二、小细节

App store的卡片页和详情页之间的转场在AE中用到的功能并不多,列举出来就是放大缩小、位移、改变透明度、遮罩、曲线等基础功能。而相对于普通的转场动效来说,它的动效更加自然流畅的原因是它注重到了三个细节:

回弹

阴影

卡片展开时尺寸不变

1、回弹

回弹即是在原有过渡效果的基础上,借用符合物理规则的轻微颤动来强化用户体验,让动效更加生动。举个例子:当你想让一个球从屏幕最上方落下时,它在停止之前要有几次强度逐渐减弱的回弹才符合物理规律;没有回弹的动画看起来则会非常生硬。

iOS动效最大的亮点在于,很多地方都有回弹的效果,卡片展开与收起的效果也不例外。

实现方式

以关闭按钮的回弹为例:

step1: 用钢笔工具勾出一条路径,该路径需要弯曲以制作回弹的效果;

step2: 选中路径的path属性复制,在要移动的物体的position属性上粘贴,物体的中心点就会沿着路径移动,从而产生回弹的效果。

step3: 调整位置运动路径的曲线,使运动更加自然。(关于曲线调节可以查看这篇文章:彻底搞懂AE曲线,让设计中的动效更加有趣)

小tips:

1、卡片与它里面的字、关闭按钮是分离的,分别处于单独的图层上面,因此要为它们创建不同的移动路径。

2、回弹也可以用表达式制作,更加方便快捷。但这里的回弹是物体弹出去以后往下移动,用表达式达不到想要的效果,因此我用了绘制路径的方法。回弹表达式可以参考这篇文章:AE表达式:回弹。

2、阴影

阴影可以让用户理解元素的层次,让他们知道两个对象并不在同一高度,不是同一个层级。同时阴影也暗示了用户某个元素其实是可点击的。

App store中的每个卡片背后都使用了微妙的灰色弥散阴影,让卡片的细节更加丰富,并暗示用户卡片是可交互的。如果去掉阴影,卡片就失去了层次感,也没有了明确的交互引导性,很容易让用户误解为不可点击。

当卡片展开时,阴影也会随之扩散变大,透明度降低,与现实中物体扩大时阴影的变化方式相同。这样的设计可以给用户较高的感知度,能够更加清楚地传递信息。

实现方式

step1: 卡片下面新建一个图层,创建一个与卡片形状大小相同的灰色圆角长方形,放在卡片正下方;

step2: 将圆角长方形向下移动5像素,使用高斯模煳并降低其透明度,做成阴影图层;

step3: 卡片展开时,扩大阴影图层,并继续降低其透明度;

step4: 卡片收回时,将阴影图层回归到原来的大小和透明度。

3、卡片展开时尺寸不变

这也是iOS卡片的特色之一,仔细观察就会发现,当卡片详情页展开时,卡片的大小其实是没有发生变化的。这样做的好处是,在首页的卡片展示中不会由于图片的放大缩小而丢失细节,用户在首页就可以很清楚的看到推广banner的每个细节。

实现方式

step1: 在卡片上加一个圆角长方形遮罩,使卡片只露出遮罩的部分;

step2: 点击卡片展示卡片详情页时,放大遮罩,使卡片全部露出来。

step3: 卡片收起时,再将遮罩缩小到原来的大小。

  •     点赞
  •     分享