恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见
design

推广

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Tabbar动效教程/图标动效教程
6.7°
原创文章 / 经验/观点 / / 举报
875 31 10 0

更新于:2021-03-31

Tabbar(选项卡)作为整个APP的第一触点,给用户传递的理念及信息在整个APP中具有不可替代的重要性。

本节课技能要点

1、了解Tabbar动效的存在意义

2、掌握AE基本形状动画的设置

3、掌握icon动效的节奏

Tabbar(选项卡)作为整个APP的第一触点,给用户传递的理念及信息在整个APP中具有不可替代的重要性。我们的第一感受是粗糙或是精致,都会通过这个简单的操作切换而得到。

我们首先探讨第一个话题,即Tab切换时的icon动效设计。

Tabbars图标动画的作用

精彩的icon动画,对整体的设计具有画龙点睛的作用,降低tab切换时的枯燥感,提升操作的愉悦度和期待感。甚至可以通过Tab的动画设计给用户传达出整个APP设计的品牌及理念。

动静对比

动态的设计丰富了图标更多可能性的表达,结合不同的动态效果表达出不同的情绪或情感。而除了情感的表达之外,最基础的作用在于动态比静态更加吸引眼球、增加视觉关注度,因此在切换Tab时具有更强的视觉冲击力。

柔和与生硬

缓动的动效过度,相比于无动效的设计,在Tab切换时整体的视觉感受会更加柔和、轻量。过度直接的反馈,容易造成过度生硬而不具美感。

趣味的表达

由于动效的加入,我们在设计Tab切换时会变得更加多元化,而不是单纯的只是设计一个动作的反馈。在过度的时间差中,可以进行很多趣味的表达。

情绪代入

图标结合表情的设计,运用动效的设计,让整体的情绪感受更加直观。如下图案例,默认态与选中态通过前后的差异对比,点击后出现的表情惊喜,具有不一样的情绪变化。

Tabbar图标动画的基础类型

动画的设计是多样化的,Tabbar图标动画的类型实际上并没有明确的划分,这里主要列举的是自己在日常浏览设计网站时的收集,以及个人认为比较常见的一些类型。我们可以基于这些常见类型的设计,对我们的设计进行再升华,从而提高整体设计的质感和趣味。

缩放动画

点击后通过一定的比例的 “缩放” 反馈,突出Tab之前的变化,从而强化了Tab操作的感知,提升对于操作区域的视觉聚焦。结合不同的缩放效果,可以呈现出不同的视觉感知,缩放动画大致分为线性和弹性两种类型。

线性缩放

图标在放大或缩小的过程中,使用了匀速的动画效果,整体动画一步到位、干净利落。整体视觉感知较为柔和。

弹性缩放

带有弹性缩放的Tab反馈,让整体的设计更加具有趣味性,相比线性缩放也更有视觉冲击力。图标的运动规则:先从0放大到最大(数值根据实际情况设定),然後再回弹至正常大小。

透明度自然过度

让Tab切换之间的过度更加自然、柔和。相比于纯静态切换只多了一层透明度变化,但却具有完全不一样的操作视觉感受。

位移

位移出现的图标会产生一定的速度感,但需要控制位移的速度,过快容易忽略中间的运动轨迹,而影响自然过度的效果。

抖动

通过图标的左右、上下快速位移或旋转形成,整体的动画效果节奏较快,具有一定的速度感。情绪表达上较为俏皮。

左右抖动

点击后,图标反馈进行上下快速位移。建议来回位移次数不太太多,控制在1-2次左右,次数太多容易显得拖沓。

跳动的图标

点击切换后,图标从底部弹起再回到初始位置,整体视觉感受具有跳动的韵律感。

晃动的图标

旋转抖动的图标比上下或左右会更加具有趣味感。设定图标的中心点或角点为旋转轴,通过来回晃动而形成的效果。

中心填充

使用某种几何图形(可以是圆形或其他)通过发散放大的设计方式,结合一定的节奏韵律扩展至填满整个图标。

局部细节画线

选择图标的关键细节或图标的特征进行画设计,增强图标的特征细节,提高图标的记忆点。

整体画线

与局部细节画线基本一致,差别的点在于表达了不同的视觉感受。整体画线从视觉感受上会相对更加饱满。但需要根据图标的复杂程度而定,图标过度复杂,可能容易造成拖沓的动画效果。

结合容器

结合不同的几何形作为选中图标的当前态的背景,在背景上设计出现的动画效果。既强化了选中当前态,整体的tab切换的一致性也较高。

元素介质

设计上结合某种图形元素作为当前选中态,在切换时通过元素的位移、跳动等方式来达到Tab切换的动画效果。

总结

Tabbar的图标动画最大的作用在于解决切换时的枯燥与单调,我们在设计时除了单纯追求动画的变化及多样性之外,更多需要思考的是什么样的动画更符合我们的设计。

作者:趣设网课(v: uegreat)

关注公众号:趣设网课,回复“Tabbar动效”即可下载素材课件!!

本文由 @趣设网课 整理发布。未经许可,禁止转载。

Powered by Froala Editor

收藏

31人已收藏

趣设网

趣设网课uegreat

  • 36

    作品

  • 522

    粉丝

  • 59

    关注

  • AE快捷键-UI动效方向
  • Trapcode+AE打造粒子删除任务动效
  • 融球类-Tabbar动效/AE动效教程
  • 融球类Music播放器动效/AE表达式动效

猜你喜欢

    趣设网

    趣设网

    趣设网课uegreat

    诲人不倦小有见解话唠原创小生
    • 522

      粉丝

    • 181.2

      人气

    • 3071

      颜值

    作品

      GDC Award 2021启航

      推广

      最新推荐

      分享3招,帮你提升设计细节

      34 0 0

      相关佳作
      换一换

        趣设网

        点赞:10

        收藏:31

        评论:0

        Tabbar动效教程/图标动效教程

        你确定要举报Tabbar动效教程/图标动效教程

        如果查出恶意举报,十天内禁止提交任何举报申请。

        0/200

        上传证据: 超过10M的附件请使用网盘地址

        点击上传附件

        对谁可见:

        全部设计师
        • 全部设计师
        • 推荐设计师和认证设计师

        您确认要推荐?

        该作品发布时间:2021年02月15日

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

        账号或密码错误,请重新输入

        账号或密码错误,请重新输入

        登录

        账号或密码错误

        发送验证码 120s 验证码错误

        登录