你有没有这种体验？手机点开自己的zblog站，往下划到底部那个导航丑得像贴了张广告纸，按钮小得跟针尖似的，想进主页点不准，反而退出去了。本来还想多刷两篇文章，结果直接关掉了。很多做zblog的朋友，总觉得移动端导航“凑合用”，可就是这点小事，把大半想留的用户赶跑了。今天这篇，直接给你能用的方法，改完你的导航，好用又留客。
一、先把zblog自带底部导航的坑填上
很多人优化导航，上来就改样式，结果忽略了自带导航的原生硬伤，改完还是不好用。
1. 默认导航太“敷衍”
zblog自带的移动端导航，就是几个干巴巴的链接，没有任何样式设计，摆在底部边缘，完全没引导用户点击的感觉。说白了，就是个没经过优化的半成品，用户根本不想多看一眼。
2. 按钮藏得太“深”
模板自带的导航，大多直接贴在手机屏幕最底部，要是你的手机有虚拟键（比如华为、小米的安卓机），导航按钮会被虚拟键挡住一半，用户根本点不到，只能瞎划，体验超差。
二、3步改出好用的移动端底部导航
这几步都是我自己试了N次的方法，改完的导航，我自己逛站都愿意点。
1. 替换自带导航为自定义代码
第一步，打开zblog后台，点【模板管理】，找到你用的模板，点【编辑模板】，然后找到`footer.php`文件（就是管网站底部的那个文件），把自带的导航代码全删掉，换成下面的代码：
```html
```
举个例子，你把代码里的链接换成你自己网站的对应页面，比如把“/category/”改成你的分类页地址，“/about/”改成关于页地址。这里的`z-index:9999`是关键，它让导航在页面最上层，不管怎么滑都能看到，不会被文章内容盖住。
2. 给导航留“安全距离”
刚才代码里的`padding-bottom:15px`，就是专门给安卓虚拟键留的安全距离。要是你发现按钮还是被挡住，就把这个数值加5px，调到20px，直到所有按钮都露出来为止。苹果手机没有虚拟键，这个距离也不会影响，相当于给所有手机都做了适配。
3. 按钮要“够大够醒目”
移动用户的手指粗，按钮太小点不准。刚才代码里的`font-size:16px`是最合适的，比默认的14px大一圈，一眼就能看到，点着也稳。别搞花里胡哨的渐变或者发光效果，不仅加载慢，还容易晃眼睛，就用深灰背景配白色文字，反差大还清爽。
三、改完必须注意这2个避坑点
改完就万事大吉？不对，这两个坑踩了，白改。
1. 按钮别放超过4个
移动端屏幕小，导航最多放4个按钮，放5个以上就会挤成一团，用户根本分不清哪个是哪个。我之前给朋友改站，放了6个按钮，结果一半点不准，反而把更多用户挤走了。别贪多，留常用的就行，比如主页、分类、回顶、关于，刚好4个。
2. 必须测试不同机型
苹果手机和安卓手机的底部不一样，改完别光用自己的手机试，找个安卓朋友帮你看，导航有没有被挡，按钮点着顺不顺手。要是你只有苹果机，就把代码里的`padding-bottom`先设成10px，再把背景改成深色，确保在安卓机上也能正常显示。
今天就去打开zblog的模板后台，找到`footer.php`，把代码换了，链接改成你自己的，再拿朋友的安卓机测一遍。改完你就会发现，用户滑到底部，终于有明确的点击目标了，不会再随便关掉你的网站。就这几步，花5分钟搞定，别拖了，快去！
