关于底部导航栏设计你忽略了哪些?

关于底部导航栏设计（你忽略了哪些？）

本文翻译了 Material Design 规范中对底部导航的规范总结，希望可以带给你更多帮助。

本文翻译了 Material Design 规范中对底部导航的规范总结，希望可以带给你更多帮助。

备注：以下内容在翻译过程中根据阅读习惯有相应的调整，如有不妥欢迎大家根据官网链接进行比对。

在移动应用程序中，底部导航栏可以在目标选项间自由切换。

用法

底部导航栏在屏幕底端展示3至5个目标选项，每一个选项由一个图标和文字标签展示，点击底部导航图标时，将带领用户前往与之关联的视图。

原则

人体工程学：底部导航栏在手持移动设备上容易触及。

一致性：使用时，底部导航栏显示在每个屏幕底部。

相关：底部导航栏上的选项必须同等重要。

何时使用

底部导航应用于：

• 需在移动应用程序任意位置访问顶级目标
• 3至5个目标选项
• 仅限手机或平板电脑

底部导航不应用于：

• ·单个任务，例如查看单个电子邮件。
• ·用户首选项或设置。

少于三个目标选项不要使用底部导航栏（使用标签选项卡替代）。

避免使用超过5个目标选项（这种情况，尝试选项卡或抽屉导航）。

组合使用底部导航和选项卡可能会引起混淆，因为他们与内容关系不够清楚，选项卡拥有相同的主题，而底部导航是顶级功能且彼此无关联。

剖析

1. 导航栏
2. 固定图标
3. 固定文字
4. 活动图标
5. 活动文字

目标展示

展示底部导航目标选项的方式取决于目标选项使用数量：

• 三个目标：所有目标选项用图标和文本标签展示；
• 四个目标：活动目标展示图标和文本标签、固定目标展示图标，建议使用文本标签；
• 五个目标：活动目标展示图标和文本标签、固定目标展示图标，空间允许则可显示文本标签。

此底部导航有三个目标，且每个都有图标和文本标签。

图标

底部导航目标始终包含一个图标，最好的方式是图标结合文本标签展示，尤其是如果图标没有明确含义。

图标与文本标签结合展示

文本标签

文本标签使用对底部导航功能简短而有意义的文字。

使用短文本

避免截取文本，截取可能会掩盖重要的目标信息

避免缩小单行文本

避免文本折行显示

图标和文本标签颜色

活动、非活动图标以及文本标签应与导航栏底块有明显的对比，活动图标应使用应用程序主题色或高强度被选中颜色展示，具体取决于组件的配色方案。非活动图标和文本标签可使用中强度的被选中颜色来展示。

底部导航活动标签使用应用主题色或高强度被选中颜色显示

避免使用不同的颜色或低强度被选中颜色来显示图标和文本标签，因为这会使用户难以区分活动图标并导航到其他目标视图。

行为

Android和iOS系统的底部导航会显示不同，当你选择底部导航选项时（当前未被选中），每个系统会有不同的显示结果：

Android：

该应用导航到目标顶级视图界面；重置任何先前的用户交互和临时屏幕状态，例如滚动位置，选项卡选择和内联搜索。

iOS：

目的地反映了用户之前的交互。如果用户先前访问过应用程序的该部分，则会返回到上一次查看的最后一个视图（如果可能，保留其先前状态）；否则，应用程序会导航到顶级视图。

可以在需要时覆盖默认平台导航以改善用户体验。例如，需要在