交互设计 » UI界面的Tab bar动态设计提示

UI界面的Tab bar动态设计提示

发表于: 交互设计. 评论
Sponsor

前言:你有没有注意过,App底部的图标是如何变成选中的?大多数产品是将静态图标替换(硬切过渡),来完成状态切换。

UI界面的Tab bar动态设计提示

当我看完上百个动态后,找到了更有趣的方式…

02  ▍▍▍

App底部导航构成

通常由图标、文字/点线装饰、和底板卡片组成,(当然也有些产品只使用图标或文字),但设计师在进行动态设计时则是针对这3部分。

UI界面的Tab bar动态设计提示

03  

Tab bar动态类型

  • 图标动态
  • 装饰元素动态
  • 底板卡片动态

动态效果由弱到强,视觉层级由低到高依次排序:图标动态 — 装饰元素动态 — 底板卡片动态。(根据本文案例效果来排序,但效果不同会有所差异)

图标动态

我们知道图标风格可以简单的分为:线性、面性还有线面。在这基础上通过修改颜色或造型,又能延展出更多风格。

UI界面的Tab bar动态设计提示

  • 在底部导航中,假如图标选中前后都是线性风格

最常用的是添加修剪路径(Ae的一种路径效果),你可以把它理解成托尼老师,可以通过调整百分百参数来控制线条生长。

UI界面的Tab bar动态设计提示

但只是单色修剪,看起来很单调。我们可以在这个动画基础上再多复制几层,并分别加入品牌色,这样可以让视觉看起来更丰富。

UI界面的Tab bar动态设计提示

也可以换一种方式,只调整不同颜色图标的位置属性,便能得到故障效果。

UI界面的Tab bar动态设计提示

如果你觉得这些太浮夸,那么单个图标添加修剪路径,再配合位移、旋转等基础属性则是更好的选择。

UI界面的Tab bar动态设计提示

  • 假如选中图标是面型风格

通用的方法是调整不透明度,相比于硬切更柔和,且不会过多吸引用户注意力。但对于带有娱乐类属性的产品来说,可能会显得有些普通。

UI界面的Tab bar动态设计提示

我们可以考虑使用遮罩来制作动态,首先在图标周围绘制几个圆,再将图标外轮廓,作为圆的遮罩,来控制其显示范围,最后调整圆的缩放即可。

UI界面的Tab bar动态设计提示

在一些特殊的时间,设计师们可能会技痒,而将图标绘制的更加丰富,来营造氛围。

UI界面的Tab bar动态设计提示

对于这类图标,只需要参考它们的物理状态[下方解释],再遵循从下往上,从中心往四周扩张的原则来调整基础属性,便能制作出细节丰富的出场动画。

UI界面的Tab bar动态设计提示

(物理状态:该物体在现实场景下的状态,上图奖杯真实世界状态通常是放置地面,所以出场方向是从下到上。但假如你的图标是锦旗,那么物理状态应该是挂在墙上,所有出场方向是从上到下)

当然如果去掉高光和投影,在制作一些动态时会更方便。

例如:复制一颗星,将其初始位置设定为一个奖杯的距离,并记录关键帧,然后整体再移动一个奖杯距离。耳朵则调整路径来完成移动和变形,这样便能营造出3d旋转的错觉。

UI界面的Tab bar动态设计提示

  • 假如选中图标是线面风格

对于结构复杂的图标,可以提前分层。其中线条依旧可以使用修剪路径(在Tab bar中,不同图标修剪路径的起始点方向通常相同,以便保持一致性),而填充只需要调整元素缩放,并借助蒙版限制其显示范围就行。

UI界面的Tab bar动态设计提示

装饰元素动态

如果你觉得前面这些方案不够新颖,那我们可以对装饰元素下手。

(当然这类方案很少见,原因在于商业价值不足,实现成本高,所以这里也只是提供一些创意练习思路)

在一些年轻化产品中,如果图标含义很容易理解,那么设计师可能会用线或点来替代文字,让整体更简洁。

国外设计师Tubik,通过让点元素在移动时呈现心电图样式,让人眼前一亮。

UI界面的Tab bar动态设计提示

通过动态效果,甚至能体现出产品行业属性。

  • 基于这种思路,我们同样让装饰元素放在下方

尝试修改轨迹样式,然后为元素不透明度和位置添加动画,你能猜出这是什么类型的产品吗?

UI界面的Tab bar动态设计提示

又或者再夸张些,将轨迹设计成电路图。其中线条添加修剪路径,再借助Ae路径跟踪方法,使圆点沿路径运动。最后通过蒙版来控制整体动画显示范围,这个方案看起来适合科技或游戏类产品。

UI界面的Tab bar动态设计提示

  • 装饰元素还可以放在上方

通过调整元素路径来改变其造型,模拟液体滴落,再通过蒙版缩放,让选中状态下的图标出现。

UI界面的Tab bar动态设计提示

  • 装饰元素还可以放在中间

假如你的图标设计的足够巧妙,我们可以提前绘制好关键笔画的运动轨迹,便能通过修剪这条轨迹来完成笔画的移动。

UI界面的Tab bar动态设计提示

底板卡片动态

这类动态少见的原因在于其动态效果面积大,视觉层级高,容易过度吸引用户注意力。目前也只是在个别产品中看过卡片凸起效果。

  • 当选中图标时,让卡片凸起

在Ae中要制造这样的效果,最先想到的可能是调整卡片路径,但这样的方式在制作弹性时非常麻烦。

UI界面的Tab bar动态设计提示

我们有更简单的方法,先多画出一个圆,然后与卡片路径合并。

为了让边缘圆滑,整体添加高斯模糊简单阻塞,分别加大参数,便能让边缘圆滑。(这种方式有个缺点:会收缩原有卡片宽高。所以添加效果后,需要借助参考线再次调整卡片大小)

UI界面的Tab bar动态设计提示

完成圆滑处理后,修改其他元素的基础属性即可。

UI界面的Tab bar动态设计提示

目前能记起的只有美团外卖看过这效果。但为了降低视觉干扰,其弱化了弹性次数。

  • 除了凸起,还可以凹陷

这个效果灵感来源于Dribbble设计师(EuroART93),我们只需要将凸起案例中,圆与底板卡片的布尔运算模式改为相减就行,其他元素同样调整基础属性。

UI界面的Tab bar动态设计提示

此方案目前还没有在其他产品中看过,究其原因还是效果太过抢眼。

看了这么多,其实不难发现。同一个图标,只需要改变不同属性或元素的运动方式,便能带来不一样的感受。

UI界面的Tab bar动态设计提示

或许创意的产生,并不是脑袋突然迸发出全新的东西。而是许多我们熟知的旧有内容组合了起来。

正是它们之间这种奇妙的融合,给我们带来了新鲜感,或许这就是我们要的创意。

UI界面的Tab bar动态设计提示

本篇内容发布在短视频平台,引起了很多人的吐槽。

充斥的关键词:花里胡哨、过度设计、装*、你看谁谁谁就你咋咋咋,等等等。我…

​最后就这篇内容再说两句:

每个产品都有自己的调性和目标用户,动态效果也有强有弱。好的动态应该是能与其进行匹配,而不是根据某个产品得出一个绝对的答案。

本文演示了不同类型图标用什么动态,并不代表只能这样用。动态效果类型远远不止这些,而以上只是最常见的动态属性组合方式,所以请不要局限你的想法。

作者:幺零三
来源:幺零三记(ID:Lisian103)

赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }