成立8年举办在线+期

2019-07-10 11:09| 发布者: | 查看: |



相关推荐:



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

  Tab bar设计中,有一个很重要但却常常会被设计师们遗漏的关键点——tab切换时的“图标动画设计”

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

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

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

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

  如下图案例,默认态与选中态通过前后的差异对比,点击后出现的表情惊喜,具有不一样的情绪变化

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长

<
>
快速飞艇网成立于2014年,我们是一家专注用户体验设计开发与互联网品牌建设的设计公司,创立至今为2000多位客户提供了创新与专业的设计方案。设计服务范围包括:交互原型设计、产品视觉设计、网站设计与开发建设、移动及软件产品界面设计、图标设计、品牌及平面设计等。

联系我们

江苏省南京市玄武区玄武湖

13588889999(服务时间:9:00-18:00)

admin@adminbuy.cn

在线咨询 官方微信官方微信

部门热线

前   台:13588889999
业务部:13588889999
客服部:13588889999
技术部:13566667777
人事部:13566667777

网站建设 微信开发 售后服务 咨询电话13588889999 返回顶部
返回顶部