产品和设计都应该知道的手机APP底部导航设计

来源：

《UX Design for Mobile: Bottom Navigation》
《How Do Users Really Hold Mobile Devices?》

本文将集中为大家分析App底部导航设计相关技巧，帮助大家轻松打造最佳用户体验。 下面我们就一起来看看吧。

为什么底部导航很重要

• Steven Hoober的研究49%的人用一只手操作手机
  
• 而单手操作手机时，手指在屏幕中的活动舒适度范围如下：

以上2点可以得出将最重要和最常用的行动放在底部是很必要的。因为他们可以很舒适的用单手和单指进行操作。

很多APP就遵守这个原则，比如Facebook:

---

底部导航设计的三个关键点

1.仅显示最重要的三到五个目的地

• 超过五个，靠的太近，难以点击。
• 每多加一个目的地，app就会更复杂。
• 不要尝试在底部导航上加滚动,以下反面案例:

2.有效传达当前位置

• 使用适当视觉线索（图标、标签和颜色）
• 图标：使用识别度高的图标，避免使用意义不明的图标，图标下面最好配文字。
• 颜色：避免在底部导航上出现不同颜色的图标和文字，最好使用应用程序的主颜色来着色当前活动的标签或文字。
• 若底部导航是彩色的，当前活动的标签和文字用黑色或白色。
• 文本标签：避免长文本，以下三中长文本都是反例：
• 目标大小
  计算底部导航的宽度，让所有导航上的标签可以获得最大的可操作区域。
• 标签上的提示
  可以在标签上显示小的信息提示。

3.让导航不言而喻

• 行为
  • 不要在点击底部导航选项卡后打开一个菜单或者弹出一个窗口。
  • 点击底部导航图标应该直接带用户到相关的视图，或者刷新当前的活动视图。
• 一致
  • 底部导航应该在每一次切换都保持相同的标签，这样可以给用户带来视觉上的稳定。
  • 不要在标签不可用的时候删除标签，最好的解决方式是，保持标签被选中的状态，并解释一下为什么选项卡的内容不可用。
  • 比如看看drop在离线选项卡不可用的时候是怎么做的：
• 隐藏
  • 可以在用户滚动屏幕的时候隐藏标签栏。
  • 当人们停止滚动视图回到顶部时在显示标签栏。
• 视觉快感
  • 避免在标签切换中使用横向运动的动画。
  • 活动和非活动视图之间的过渡应该使用淡入淡出动画。

运用以上底部导航设计的知识，再去看一些APP的底部导航顿时知道问题出在哪里了~