讲解底部导航栏设计有效方法

来源：长沙牛耳设计师培训学校时间：2018/11/16 14:55:22

　　长沙UI设计培训学校由设计师亲临授课，使学生不仅仅掌握设计软件方面的应用，而且对设计理念，色彩搭配，空间布局，及材料方面的知识也有深刻的理解，学员毕业后都能独立完成设计。学习期间学校负责安排实习单位进行实践操作，使学员能边学习边实践，理论联系实际，让学习的知识不仅仅停留在理论层面，更主要的是实际操作层面。长沙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动画的时候要注意，未点击和点击反馈的效果的变化是一整个动画，未点击状态在前面，一直属于静态状态，在运用到底部导航后，点击按钮触发动态~