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