移动和平板电脑的底部导航

移动导航刚刚变得更好。我们为移动和平板电脑用户添加了持久底部导航栏。

改变了什么

之前

• 仅顶部导航（需要向上滚动才能切换页面）
• 汉堡菜单用于辅助导航
• 浏览时更难在各部分之间跳转

之后

• 底部导航栏始终可见（拇指友好）
• 快速访问品牌、创始人、洞察、市场
• 44px 触摸目标（iOS 人机界面指南）
• 向下滚动时自动隐藏（更多阅读空间）
• 向上滚动时重新出现（始终可访问）

为什么底部导航？

拇指区优化：在 5.5 英寸及更大的手机上，屏幕底部三分之一是单手最容易触及的区域。

上下文切换：用户可以从品牌资料跳转到市场洞察再到创始人故事，无需滚动到顶部。

平台惯例：原生应用（Instagram、Twitter、YouTube）都使用底部导航——熟悉且直观。

响应式行为

• 移动（< 768px）：底部导航可见
• 平板（768px - 1024px）：底部导航可见
• 桌面（> 1024px）：仅传统顶部导航

技术细节

• 粘性定位：基于 CSS，无需 JavaScript
• 触摸优化：44px 最小目标尺寸
• 动画过渡：滚动时平滑显示/隐藏
• 无障碍性：适当的 ARIA 标签，键盘导航支持

接下来是什么

我们正在探索在底部导航中添加搜索图标，以便更快地访问我们的品牌数据库。

试试看——在手机上打开 Brandmine 并探索。导航应该感觉自然而轻松。