每家店铺都有顶部菜单。
问题是
底部放什么。
底部导航已成为移动标准。您的客户期望它。但成功不在于到处添加它——而在于决定什么属于那里，以及在它真正有效的位置放置它。本指南帮您做出正确决定。
安全区域因设备而异
iOS 刘海屏、Android 手势栏和横屏模式都占用屏幕空间。底部菜单必须与这些硬件现实共存，而非对抗。
底部导航与您的内容竞争
在底部放置条形菜单会占用可展示产品图像或加购按钮的空间。放置不当会让滚动变难或隐藏关键操作。
它只适用于特定数量的项目
5 项导航栏可用。7 项变得拥挤。8 项以上无法使用。您需要决定真正属于那里的内容——并非一切都能容纳。
它与其他导航共存
大多数店铺保持顶部页头和抽屉菜单。底部导航不替代它们——而是叠加在上方。让这三者协作需要规划。
有效的移动导航在底部的 3-5 个槽位中放置最重要的目标地点，尊重设备安全区域，并与顶部菜单和抽屉协作——无重叠。
首页、商店、搜索、购物车、账户——标准集合
大多数移动店铺采用这五个。首页让您快速返回。商店是您的目录。搜索帮助访客查找特定商品。购物车和账户是交易性的。超过这五个通常意味着某些内容不属于那里。
尊重现代手机的安全区域
iOS 主屏指示器和 Android 手势区域需要填充。栏稍微上移以保持可用和可触控，不被手势或操作系统控件隐藏。
在纵向和横向模式下运行
横屏模式垂直空间较少。设计良好的底部栏优雅地缩小或堆叠项目而无需破坏布局或变得不可读。
与您的页头和抽屉分层
顶部页头保持用于品牌推广和快速搜索。抽屉容纳深层分类。底部栏桥接它们——无需打开菜单即快速访问最常用页面。
跳过某些店铺类型
并非每家店铺都受益于底部导航。单产品店、库存极少的奢侈品牌和桌面流量为主的店铺可能不需要。先了解您的流量模式。
审计您的店铺流量和目标
检查分析数据。移动用户最常访问哪些页面？哪些操作对您的业务最重要？将五个目标地点放入底部栏——不超过。
为您针对的安全区域设计
确定您的客户最常使用的手机。规划刘海屏和手势栏的填充。测试横屏模式。几分钟的规划可节省后续移动设备摩擦。
用 Navi+ 设置底部导航
选择目标地点、图标和颜色。Navi+ 自动处理安全区域、断点和设备检测。发布并在几分钟内上线。
包含安全区域插入
自动调整 iOS 刘海屏、灵动岛和 Android 手势导航。无需猜测，适用于所有设备类型。
适应横屏模式
用户旋转手机时底部栏收缩和重排。布局保持可用，永不拥挤或隐藏。
与其他 UI 正确分层
与固定页头、抽屉菜单和浮窗协作而无 z-index 冲突或重叠。
槽位管理
清晰的视觉槽位帮助您准确放置重要内容。未使用的槽位保持空白——无强制填充项目。
多市场就绪
自动适应不同语言和区域导航模式。您的栏在任何市场都保持可读。
无性能影响
轻量级 CSS 和 HTML。无 JavaScript 开销，无库臃肿。您的店铺加载速度与之前一样快。
当顶级页面在每屏底部的可见栏中存在时，更多访客使用它们。分类被浏览。账户被查看。心愿单被使用。客户从 Instagram 和亚马逊已知的模式在您的店铺上同样有效。