唐老鸭

底部导航动效介绍篇。

以上四方面展开介绍,今天上篇的内容主要是第一、二部分,三、四部分内容明天在下篇中继续,话不多说我们马上开始吧!

 

底部导航动效的作用

底部导航一直是移动端产品的主要导航方式,它可以方便用户在不同功能间切换,同时也表明当前所在位置。其样式有图标、文字或图标+文字,切换时可以直接切换也可以加上动效。
直接切换属于常规方式,无功无过,图标的选中与未选中状态足以区分当前所在位置。但是适合的动效也确实是一个加分项能为产品增色不少,加入动效主要有以下3个作用:

1.视觉引导,明确操作反馈  

相比于静态物体,动态的物体更容易吸引人们的注意力,为从A前往B提供视觉线索引导。同时也是为点击操作提供的更加清晰明确的反馈。

 

2.自然切换, 提升使用体验

直接切换虽然没有什么问题,但深究起来却是有些生硬,相当于只有现状——切换完成两步,也就是只有开始和结束,没有切换中的状态。

而动效的加入,补全了“切换中”的状态,让整个流程完整起来,“现状——切换中——切换完成”让切换过程更加自然柔和,提升使用体验。

 

3.增加趣味性,品牌文化输出的窗口

动效的加入相当于为设计师又提供了一个发挥的维度,使原本静止的元素能以更加立体的方式展示,设计过程中可以传达出更多的信息,是增加趣味性的有效手段。所使用的动效不仅需要符合整个产品的调性更能与品牌结合,也成为了品牌文化的输出窗口。

如下图波洞的例子就是与其品牌文化内涵相对应的,除了静态的图文,动效过程也承担起品牌输出的责任,让产品的特点更加生动鲜明。

 

如何选择适合的动效

现在各种动效效果丰富,如何从众多效果中,选择出适合自身产品的,我们可以从三个方面来考虑:

1. 图标的选中与未选中样式

首先可以从图标的选中与未选中的样式来考虑,从结果倒推思考如何用适合的动效类型切换过去。常见的图标样式有以下4种:

而动效的类型主要则有:缩放、填充、生长、位移、旋转等,不同的样式有与它契合的动效类型,比如从线到切换到线适合做生长动画的效果,而从线到面的样式切换则可以考虑填充的动效等,文中第三部分“动效的基本类型”中会详细介绍各种样式适合的动效类型。

 

2. 产品的风格定位

再精美的设计也需要与产品本身的风格定位想匹配才能发挥其作用,动效也不例外。加入动效绝不是炫技的堆叠效果,而是应该让它与产品匹配,让我们可以有多一个的维度去更立体的诠释产品。

如果产品本身用户跨度大人数多,风格沉稳,那么我们在选择动效的时候,也应该选择简单优雅的效果不能太跳脱,比如下图美团选择的是一个简单的缓动缩放效果。

而叭哒因为产品面向的是喜欢动漫二次元的年轻人群,普遍喜欢萌和可爱的东西,对于他们来说颜值既正义,好的视觉效果和趣味性更能吸引他们,所以叭哒的整个动效会更加复杂一下,添加了可爱元素,动式上则是弹性效果,显得活泼俏皮。
动效给人的感觉是沉稳优雅,还是活泼可爱,其实很大程度上受动式影响,因为即使是同样的动效类型,选择不同的动式也会带来完全不一样的视觉感受。所以了解动式的类型可以帮助我们做出更合理的选择,动式的基本类型可以分为三种:线性、缓动、弹性。

 

线性线性是匀速运动,整个过程很平稳,毫无波澜。(呃……看运动曲线也能看出来,就是这种又直又刚的感觉)

 

缓动缓动细分的话也有几种模式,分别是Ease In、Ease Out和Ease Both。缓动具有节奏感和韵律感,相比于线性的匀速显得更加优雅生动,是使用较多的类型。

 

弹性弹性是三种里面波动最大的一种了,动效尾声的时候伴随小幅度的频繁抖动,俗称Duang~,效果也是活泼生动,比较俏皮,和年轻化的产品非常搭。
我们应该根据产品的风格定位来选择与之相匹配的动式。

 

3.开发成本&项目排期

除了设计样式和产品风格定位,我们还应该考虑开发成本和项目排期,设计好效果后可以先和开发人员沟通讨论实现方案,如果与排期有冲突,技术有难点的话及时调整,换可行的方案,确保最后的落地。关于各种实现方案,会在明天《底部导航动效(下篇)》中详细介绍 ,我们明天见哦~

 

划重点

  • 底部导航动效能为用户提供视觉引导,明确操作反馈,增加趣味性提升使用体验,也是品牌文化输出的窗口 。
  • 选择动效可以从图标的选中与未选中样式,产品的风格定位,开发成本三方面来考虑。

 

原文地址:海盐社(公众号)
 
作者: 焱小玖
 

转载请注明:学UI网 » 四步搞定底部导航动效(上篇)

登录收藏
 
你可能喜欢的:
如何衡量交互成本2.0如何衡量交互成本2.0
网易云音乐 | LOOK直播页改版设计网易云音乐 | LOOK直播页改版设计
系统图标 - 图标分解 Material 规范系统图标 – 图标分解 Material 规范
产品体验设计-交互篇(二)产品体验设计-交互篇(二)
Material Design Environment Light and shadowsMaterial Design Environment Light and shadows
你过来,我有1个设计技巧想对你说你过来,我有1个设计技巧想对你说
为什么你的设计无法让别人记住(一)?为什么你的设计无法让别人记住(一)?
圆角矩形背后的含义|深度解析圆角矩形背后的含义|深度解析
交互基础——页面加载方式交互基础——页面加载方式
一篇文章读懂交互设计7大定律一篇文章读懂交互设计7大定律