消息学校入驻客服中心网站导航

手机版

咨询热线

简单分析底部导航栏设计实用方法

本文由:天津众维设计师培训学校    编辑于:2018-11-16

  天津UI设计培训学校拥有一支具有丰富的工作经验及教学经验的双师型教师队伍,集合了数百位企业家沟通交流心得,结合自身的职场成长经典案例,研发出了适合学员成长的培训课程大纲,用实际丰富的案例紧紧围绕企业应用开展教学培训,小班教学,全程面授,让每一位学子学有所成。成才热线400-888-3854 QQ 2294155463


  底部导航栏该如何设计?天津设计培训学校为大家分享好文章:底部导航设计基础

  底部导航,是页面切换的操作按钮,过去的底部导航,大部分都是白底、图标、文字。随着技术、设计、运营的发展,底部导航的视觉发展也开始丰富多彩~

  然而设计师灵机一动,开始丰富底部导航的设计,成果出来后,却发现用不上。所以在设计之前,我们来了解一下,底部设计的规则:

  目录

  一、按钮分析

  1、文字+图标

  2、文字

  3、图标

  二、技术规则

  1、图标超出原背景高度

  2、背景有透明感

  3、图标的不同格式

  ......

  一、按钮分析

  1、文字+图标

  大部分平台还是遵循现有的扁平风格,而丰富多彩的风格,一般会在各大小节日、周年庆等活动动频繁出现。

  多数情况下,我们常见的底部导航图标+文字,选中的状态下,设计师会根据对整体设计风格和自己的理解,给图标增加一些质感。

  2、文字

  当抖音火了以后,我们注意到,底部导航直接使用文字作为按钮,小红书、美图秀秀也是同样展示形式,那...谁先用文字的,我就不知道了。但是,我们能从这3款产品中,可以找到共同点--画面(图片、视频)为主。

  找到共同点后,我们发现在使用过程中,会更能关注于阅读内容,底部导航基本不会影响浏览视觉。并且,文字按钮,也更便于用户的理解~

  大众点评现有的设计很时尚,很吸引眼球,首页内容视觉也是以画面为主,在(各大小屏幕--移动端)浏览完功能区和活动区后,视觉很快被底部图标吸引,所以我使用文字按钮尝试一下,底部视觉轻了很多,效果还是很明显的~

  3、图标

  除了独立文字按钮,还有独立图标的,单图标按钮是很少见的,很多图标并没有普及到各类用户群众去,会造成用户的认知负担,不建议使用独立按钮。

  优灵产品,为何特立独行?其实从整个产品的结构,和用户群体分析便能够理解平台设计的初衷。该产品结构只有两个部分,设计内容和我的,该行业用户是从事APP产品与设计的同学,对图标理解更容易。

  小结

  底部导航使用文字+图标、文字按钮,是保障的。但是使用文字按钮也需要考虑到整个页面的视觉,比如知乎、微博等以文字内容为主的界面,底部导航就需要文字+图标的形式来综合一下视觉。

  二、技术规则

  一到某个节日前半个月到一个月,我就开始着手设计底部导航图标,但是我又不甘于局限在48px大小的图标范围里,所以我就按照我的想法设计,再去逐步的向前端人员了解技术匹配情况。

  1、图标超出原背景高度

  ios、Android的原生图标和文字都有有默认的数值,而在实际的设计中,几乎是不用原生的底部控件默认值的,底部的按钮都是可以自定义高度样式的,背景的高度也可以调整,文字的大小也可以变动。

  以下两个例子,可以看到底部导航图标超过了背景的高度,这样的情况,我们该如何定义图标的设计范围?

  大多数设计师的切图方式是下图①,直接切图标,文字前端写。②、③图标与文字组合切也是可以的,这种方式,在未来多样化设计中,可绘制范围会更大。上图爱奇艺的底部按钮的设计范围就是③的方式,设计范围超过背景高度。图标的高度在技术上是没有限制的,在合理范围内即可。

  注意:点击效果和未点击效果的设计范围一定要一样大,内部图标尺寸、文字在设计范围内自定义。

  2、背景有透明感

  底部透明模糊的样式,ios原生是可以自带的,安卓是没有的。

  底部有透明感,会让用户感觉内容区域是从顶部到底部的,所以我开始散发我的设计想法,将底部背景设计成几乎全透明。

  当我沾沾自喜拿着设计样式给前端看的时候,前端告诉我可视内容的设置相当于遮罩,在有顶部状态栏和底部导航栏的时候,内容的可视高度是顶部状态栏的底部到底部导航的顶部距离。可视高度延伸到底部,是能够实现我需要的透明看到内容的效果,但是会出现2个明显的问题:

  1、遮挡加载反馈

  2、后一个内容回到底部

  我们来看一下不同可视高度内容的动效结果:

  用户在浏览内容,手指在屏幕滑动的距离大概在100px-200px(未找到研究数据,自己尝试个大概),所以右图的的加载反馈会被底部导航遮挡。

  前面有说到微博也是有透明效果,我还是带着疑问询问前端,前端的解释是ios有自带的这个处理效果,但是内容可视区域还是除去头部状态和底部导航距离的。

  3、图标的不同格式

  当初在设计底部图标的时候,我只设置了png的格式,在后来的体验优化中,团队决定将底部的静态图标处理成动画图标,(底部图标是支持多格式的,但是每一种格式都需要前端添加,但需要技术时间,所以底部导航图标的格式支持上,一定要提前告诉前端多格式支持,一般支持png、jpg、json即可,后续可以根据发展需要酌情添加,如果只支持json格式,未来图标的设计将无法添加更多效果)。

  后来我们选用了AE+bodymovin插件导出的json文件,制作图标动画,使用bodymovin实现动画是现在非常方便的一种方法,设计师专注动画制作,后导出json文件给前端,对于前端而言只需要调用即可。但是有一个缺点:设计图必须是矢量,还都必须是独立的纯色矩形格式。不支持任何渐变、投影等附加的视觉样式。

  sketch文件也可以导入到AE,下图是设计中的注意流程(该流程交互设计师整理)。

  sketch导入教程:https://www.jianshu.com/p/269d1b055a10

  AI导入教程:https://jingyan.baidu.com/article/425e69e6040e82be15fc1619.html

  那有人会说,直接用GIF、帧动画、视频就好了啊!这几种方式是可以的,但是它们占用的空间较大,GIF需要为各种屏幕尺寸、分辨率做适配,因为 Android 4.0以下没有提供原生 GIF 的 api 支持,所以这种方案还会遇到兼容性问题。

  帧动画占用空间比GIF还要大,一样要做多屏幕分辨率的适配,不过不会遇到兼容性问题。

  使用视频,也是占用很大空间,而且视频一般是用来做宣传片的。很少有用到这种格式。

  底部导航图标一般存在未点击和点击反馈的结果,使用json格式制作AE动画的时候要注意,未点击和点击反馈的效果的变化是一整个动画,未点击状态在前面,一直属于静态状态,在运用到底部导航后,点击按钮触发动态~


  天津UI设计培训学校拥有一支具有丰富的工作经验及教学经验的双师型教师队伍,集合了数百位企业家沟通交流心得,结合自身的职场成长经典案例,研发出了适合学员成长的培训课程大纲,用实际丰富的案例紧紧围绕企业应用开展教学培训,小班教学,全程面授,让每一位学子学有所成。成才热线400-888-3854 QQ 2294155463

联系方式

选择专业时,如果犹豫不定,不知道选择哪个比较好,敬请致电,专业的咨询老师会为你解答。

  • 报名热线:400-6156-870
  • 咨询老师:林老师
  • 点击咨询:
开课专业

常见问题

没有想要的答案?马上提问

电脑版|手机版

版权所有: 郑州天华信息技术有限公司

>