【杭州动画设计】标签栏图标的动画设计

发布时间:2020-03-07 10:11:40

Tabbar作为整个应用程序的***个联系人,在向用户传递概念和信息方面具有不可替代的重要性。我们的***次经验是粗糙或微妙的,这可以通过这个简单的操作切换获得。因此,tabbar的设计经常会考验整个应用程序的设计是否精巧。在标签栏设计中,有一个非常重要但又常常被设计者忽略的关键点——标签切换中的图标动画设计。例如,这些应用程序的底部选项卡就是这样设计的(以下视频):

Tabbar作为整个应用程序的***个联系人,在向用户传递概念和信息方面具有不可替代的重要性。我们的***次经验是粗糙或微妙的,这可以通过这个简单的操作切换获得。因此,tabbar的设计经常会考验整个应用程序的设计是否精巧。在标签栏设计中,有一个非常重要但又常常被设计者忽略的关键点——标签切换中的图标动画设计。例如,这些应用程序的底部选项卡就是这样设计的(以下视频):

1、 标签图标动画是一种非常棒的图标动画,它可以使整个设计达到终点,减少标签切换的繁琐,提高操作的乐趣和期望。它甚至可以通过tab的动画设计向用户传达整个应用程序设计的品牌和理念。动静对比动态设计丰富了图标更多可能性的表达,结合不同的动态效果来表达不同的情感或情绪。除了情感表达,最基本的功能是动态比静态更吸引眼球,增加视觉注意力,因此在切换标签时具有更强的视觉冲击力。

软硬慢动作有过大的动力效应。与没有动态效果的设计相比,切换标签时,整体视觉感受会更柔和、更轻盈。过度的直接反馈容易造成过度的刚性而没有美感。

在标签切换的设计中,由于动态效果的加入,兴趣的表达将变得更加多样化,而不是简单地设计动作反馈。在时间差过大的情况下,可以做出许多有趣的表达。

将情感融入到图标的设计中并加以表达,采用动态设计,使整体情感感受更加直观。如下图所示,在单击之前和之后比较默认状态和选定状态之间的差异,单击之后的表达式惊奇有不同的情感变化。

2、 标签动画的基本类型是多样化的。实际上,选项卡栏动画的类型并没有明确划分。以下是他们日常浏览和设计网站的集合,以及一些我认为比较常见的类型。我们可以在这些常见的设计类型的基础上重新升华我们的设计,从而提高整体设计的质感和趣味性。一。缩放动画点击后,通过一定比例的“缩放”反馈,突出显示标签前的变化,从而加强对标签操作的感知,提高创建区域的视觉焦点。结合不同的变焦效果,可以呈现不同的视觉感受。缩放动画大致可以分为两种类型:线性和弹性。在放大或缩小的过程中,线性缩放图标使用统一的动画效果,整个动画一步到位、整洁。整体视觉感觉比较柔和。

弹性缩放的标签反馈使整个设计比线性缩放更有趣,更具视觉冲击力。图标的移动规则:先从0放大到***(根据实际情况设置),然后反弹到正常大小。

3、过度的透明度使标签之间的转换更加自然和柔和。与纯静态开关相比,它只多了一层透明的变化,但操作的视觉体验却完全不同。

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

5、抖动是由图标从左到右、上下快速移动或旋转形成的。整体动画效果节奏快,有一定的速度感。感情的表达更有趣。点击左右抖动后,图标反馈快速上下移动。建议前后位移次数不宜过多。应该控制在1-2倍左右。太多的时间很容易耽搁。

点击并切换跳跃图标后,图标从底部弹出并返回其原始位置。整体视觉感觉有跳跃的节奏感。

摇动图标旋转摇动图标比向上、向下或左右旋转更有趣。将图标的中心点或角点设置为旋转轴,旋转轴通过来回摇动形成。

5个。切换填充时,默认选项卡将从“线性”更改为“平面”。填充式动画效果简单、直观、直观地表达了图标切换前后的对应关系。关键是处理线和面图标的细节转换。中心填充采用几何形状(可以是圆形或其他形状)通过发散放大来扩展设计,结合一定的节奏和节奏来填充整个图标。

扫掠填充动画从图标的一侧通过扫掠填充而更改。

直线绘制-直线轨迹主要基于直线图标或线表面图标中的直线移动。在设计一套完整的图标时,需要保持一个统一的运动轨迹(线的起点和终点的位置/方向等)。不一致的跟踪很容易破坏图标的一致性。局部细节画线选择图标的关键细节或特征进行绘图设计,增强图标的特征细节,提高图标的存储点。

整体画线与局部细部画线基本相同,区别在于表达不同的视觉感受。从视觉体验来看,整体的画线会比较饱满。但是,这取决于图标的复杂性。如果图标太复杂,很容易导致拖动动画效果。

将具有不同几何体的容器作为选定图标当前状态的背景,在背景上设计动画效果。它不仅加强了对当前状态的选择,而且提高了整个制表切换的一致性。

在元素介质的设计中,以图形元素作为当前的选择状态。切换过程中,通过元素位移和跳跃来实现制表符切换的动画效果。

除了上述单一类型的动画外,标签图标动画的组合也可以通过多种方式尝试。以不同的方式组合可以创造更多的可能性,使你的设计更具创造性和非传统性。填充+线条