小程序 底部导航栏(tabBar)图标的正确做法

许多人都认为小程序系统的底部导航栏特别不好看，为了美观而选择自定义，从此身陷漩涡无法自拔。其实真正的原因是图标的图片处理不当（说白了就是前端和设计太菜了），导致会有线条变粗，间距不当的视觉感受。

除小程序外 uni-app 框架开发的 app 也可参照本篇文章中的方法进行调整

小程序中自定义底部导航是非常不明确的选择，小编有发布过一篇《说一说要求 小程序自定义导航栏 的产品有多沙雕》，文章地址：https://blog.csdn.net/u013350495/article/details/105645427。可以阅读一下，文章中说明了自定义带来的种种问题。且是无法解决的问题。

如果因特殊业务需求，一定要去实现自定义导航栏可以阅读小编发布的《微信小程序 自定义tabBar(底部导航栏)》，文章地址：https://blog.csdn.net/u013350495/article/details/105757452。文章中有详细的实现过程及源码下载。

示例效果源码：https://gitee.com/myDarling/uniapp-extend

---

进入本篇文章的主题，底部导航栏(tabBar)图标的正确做法。先看下面的对比图片，图片从 iconfont 下载。

未按官方要求处理的情况下的实际效果截图

已按官方要求处理的情况下的实际效果截图

经由上面的图片对比，同样的图片，按官方标准处理过后，不管是图片的清晰度，间距不当的问题都有明显的改善。

图片处理前缩略图预览

图片处理后缩略图预览

---

对比过后，开始说一说图片的处理方法

1. 图片的标准尺寸为 81px * 81px，该尺寸在官方的文档中有明确的说明，可以参考微信小程序全局配置文档中对 iconPath 属性的说明。
2. 为了保持良好的间距，图片的内容区域设置 60px 比较好，给4个方向各留10px的边距。

参照上面的处理方法，将图片重新设置尺寸后，你会发现，图标的线条会变的更加清晰。

作者：黄河爱浪 QQ：1846492969，邮箱：[email protected]

本文原创，著作权归作者所有，转载请注明原链接及出处。