维生素C片
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
底部导航，是页面切换的操作按钮，过去的底部导航，大部分都是白底、图标、文字。随着技术、设计、运营的发展，底部导航的视觉发展也开始丰富多彩~
然而设计师灵机一动，开始丰富底部导航的设计，成果出来后，却发现用不上。所以在设计之前，我们来了解一下，底部设计的规则：
目录
一、按钮分析
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动画的时候要注意，未点击和点击反馈的效果的变化是一整个动画，未点击状态在最前面，一直属于静态状态，在运用到底部导航后，点击按钮触发动态~
学习地址1： https://www.cnblogs.com/zamhown/p/6688369.html
学习地址2： https://www.jianshu.com/p/0ed53cf891ad
小女不才，向各位浏览文章的小伙伴们展示我的两张节日图标~
若有一些技术的理解有误，还请一起讨论修正~希望我的文章能帮助到大家~
全部评论：10条
更多作品
发表评论