超全面!大厂都在用的 Tab Bar 图标动效设计类型总结 - 优设网 - UISDC

超全面!大厂都在用的 Tab Bar 图标动效设计类型总结

2019/07/08 13068评论 29

Tab bar 作为整个 APP 的第一触点,给用户传递的理念及信息在整个 APP 中具有不可替代的重要性。我们的第一感受是粗糙或是精致,都会通过这个简单的操作切换而感知。因此 tab bar 的设计,往往也是检验整个 APP 设计是否精致的标准。

Tab bar 设计中,有一个很重要但却常常会被设计师们遗漏的关键点──tab 切换时的 「图标动画设计」。如这些 APP 的底部 tab 设计都使用了这一?#22336;?#24335;(以下视频):

Tab bars图标动画的作用

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

1. 动静对比

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

2. 柔和与生硬

缓动的动效过渡,相比于无动效的设计,在 tab 切换时整体的视觉感受会更加柔和、轻量。过渡直接的反馈,容?#33258;?#25104;生硬而不具?#26639;小?/p>

3. 趣味的表达

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

3. 情绪代入

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

Tab bar图标动画的基础类型

动画的设计是多样化的,Tab bar 图标动画的类型?#23548;噬喜?#27809;有明确的划分,这里主要列举的是自己在日常浏览设计网站时的收集,以及个人认为比较常见的一些类型。我们可以基于这些常见类型的设计,对我们的设计进?#24615;?#21319;华,从而提高整体设计的质感和趣味。

1. 缩放动画

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

线性缩放

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

弹性缩放

带有弹性缩放的 tab 反馈,让整体的设计更加具有趣味性,相比线性缩放也更有视觉冲击力。图标的运动规则?#21512;?#20174; 0 放大到最大(数值根据?#23548;是?#20917;设定),然后再回弹至正常大小。

2. 透明度自然过渡

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

3. 位移

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

4. 抖动

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

左右抖动

点击后,图标反馈进行上下快速位移。建议来回位移次数不宜太多,控制在 1-2 次左右,次数太多容易显得?#20139;场?/p>

跳动的图标

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

晃动的图标

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

5. 填充

切换时,默认 tab 由线性向面性的转变。填充类型的动画效果整体简单、直接,直观地表达出图标切换前后的对应关系。关键点在于处理好线性与面性图标的细节转换。

中心填充

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

扫描填充

动画效果从图标的一侧,通过划动变化至填满。

6. 画线-线性轨迹

以线性图标或线面图标中的线运动为主,在设计整套图标时,运动轨迹需要保持统一(线的初?#21152;?#32467;束的位置/方向等)。轨迹不一致,容易导致图标的一致性被破坏。

局部细节画线

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

整体画线

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

7. 结合容器

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

8. 元素介质

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

Tab图标动画的组合形

除了以上单种类型的动画方式外,还可以尝试多?#22336;?#24335;结合。通过不同的方式结合可以产生出更多的可能性,让你的设计更加具有创意和打破常规。

1. 填充+画线

2. 填充+抖动

3. 弹性缩放+填充

4. 元素介质+抖动

5. 位移+透明度

更多案例(来自dribbble)

总结

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

本文的主旨是分享自己日常看到的一些动画效果,以及对收集的内容进行的分析。?#23548;?#30340;动画样式或者效果肯定?#23545;?#19981;只这些,我们可以通过基础的方法再结合自己的创意发挥出更多满足自我设计的表达方式。

欢迎关注作者的微信公众号:「IDfor」

优设大课堂

非特殊?#24471;鰨?#26412;文版权归原作者所有,转载请注明出处
本文地址:http://www.51294208.com/tab-bar-icon-motion

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 ?#25442;?#35774;计师 设计师干货 界面设计 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 设计规范 海报设计 用户体验设计 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 字体设计 职场规划 酷站推荐 ?#25442;?#35774;计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里

云南时时彩开奖今天
广东彩票十一选五 重庆百变王牌玩法 青海快3推荐号 棒球手套怎么戴王俊凯 腾讯三分彩官网 大小特码 微信彩票怎么看 发2元彩票当年终奖 福建11选5走势图一定牛手机版 上海时时乐怎么玩 海南飞鱼在线观看 福利3g彩票网站 内蒙古快三走势爱彩 欢乐斗地主游戏开发 极速十一选五技巧走