设计师知道设计不仅仅是美观，设计就是他的工作方式。（史蒂夫·乔布斯）
产品体验就像对话一样，导航在对话中起着重要的作用。无法在应用中导航就像无法在对话中找到正确的单词一样。本文我们将就同学们时常提到的界面底部菜单栏展开来讲解，如何探索创建良好的移动导航（底部导航），以此来优化用户的体验。
史蒂文·霍伯（Steven Hoober）在对移动设备使用情况的研究中发现，有49％的人依靠一只拇指在手机上完成事情。在下图中，出现在手机屏幕上的图表是近似覆盖图，其中的颜色表示用户的拇指可以接触到哪些区域以与屏幕进行交互。绿色表示用户可以轻松到达的区域；黄色，需要伸展的区域；红色区域，要求用户改变握持设备的方式。
表示一个人在智能手机上单手触摸的舒适性。
这意味着：将重要且常用的操作放在屏幕底部很重要，需要保证即使单手操作也可轻松到达这些操作。
许多应用程序使用选项卡栏显示最重要的应用程序功能。Facebook底部菜单栏提供主要的核心功能，允许在功能之间快速切换。
iOS版本的的Facebook底部标签栏。
良好的底部导航设计遵循以下三个规则。
请勿在底部导航中放置五个以上的目的地，因为这样会导致目标太小且彼此之间的距离太近。在一个标签栏中放置过多的标签，这会使人们在身体上难以轻按所需的标签。更重要的是，显示的每个其他选项卡都增加了应用程序的复杂性。
如果你的核心功能有五个以上，请通过备用位置访问底部导航中未涵盖的功能。
对于小屏幕，部分隐藏的导航（如可滚动的标签栏）是一个解决方案。但是请务必记住，可滚动内容的效率较低，因为你必须滚动一次才能看到想要的选项。因此，请勿将其用作主要的导航方法。可滚动标签可用于产品中某些选项过多的区域（例如，在移动应用中进行照片编辑）
适用于iOS的Rookie Cam应用程序中的调节图片质量问题。
底部菜单需要直接指示用户的当前位置。“我在哪里？” 是用户成功导航所需要回答的一个基本问题。使用适当的视觉提示（图标，标签和颜色），以便导航不需要任何说明就能表达用户的当前位置。
由于底部导航动作以图标表示，因此应将其用于可以与图标适当通信的内容。用户熟悉一种通用图标，例如搜索，电子邮件，打印等图标。如何应用设计人员将功能应用于识别度较低的图标上，那么当你选择图标时，请进行可用性测试，以确保用户在解码含义时没有任何问题。
适用于Android的Bloom.fm应用程序的先前版本。确实很难为用户了解当前位置。
避免在底部标签栏中使用不同的彩色图标和文本标签，因为这会使应用看起来像圣诞树，并分散用户的注意力。而更应该使用应用程序的原色来指示焦点视图。
左：不同颜色的图标使您的应用看起来像一棵圣诞树。右：只能使用一种原色。
遵循简单的规则-使用应用程序的原色为当前底部导航操作（包括图标和存在的任何文本标签）着色。
如上图适用于iOS的Twitter应用程序中的底部栏菜单，消息视图目前处于活动状态。如果底部导航栏为彩色，则将当前操作的图标和文本标签设置为黑色或白色。
左：避免将彩色图标与彩色底部导航栏配对。右：使用黑色或白色图标。
菜单元素应易于扫描，用户在点击一个元素时应该能够理解到底发生了什么。文本标签应为导航图标提供简短且有意义的定义，请勿使用两个以上单词的标签。
避免换行、截断和缩小文本标签。
使目标足够大，以使其易于点击或单击。计算每个底部导航操作的宽度，然后将视图的宽度除以操作数。或者将所有底部导航动作设置为最大动作的宽度。Android设计准则建议移动设备底部导航栏的尺寸如下。
手机底部的导航栏设计推荐参数
每个底部导航选项都必须通向目标的界面。轻触底部的导航图标应将用户直接引导到关联的视图，它不应打开菜单或其他弹出窗口。
不要使用标签栏为用户提供对当前屏幕起作用的控件。如果需要提供控件，请在其他位置使用工具栏。
iOS工具栏。
尽可能在产品的每个部分的标签栏中显示相同的选项。它将给用户带来稳定感。选项卡功能不可用时，请勿删除该选项卡。如果在某些情况下删除选项卡，但在其他情况下不删除，则会使应用程序的UI不可预测。
最好的解决方案是确保所有选项卡都已启用，但要说明为什么选项卡的内容不可用。例如，如果用户没有脱机文件，则Dropbox应用中的“脱机”选项卡将显示一个屏幕，说明如何保存文件，此功能称为空状态。
Dropbox应用的空白状态屏幕。
如果屏幕是滚动的设计，则当人们滚动查找新内容时，标签栏可以隐藏，并显示他们是否开始尝试返回顶部的快捷选项。
底部导航栏可以在滚动时动态显示和消失。
避免使用横向运动在视图之间过渡。活动视图和非活动视图之间的过渡应使用淡入淡出。
淡入淡出动画。
几乎每个网站和应用程序都应该优先考虑底部用户导航栏的设计。产品对人们的使用越容易，他们使用该产品的可能性就越大。在设计底部导航时，请记住进行以下操作：
·可见且结构合理（在底部导航中使用三到五个顶级目标，并使用可滚动的空白内容）；
·清晰（条形元素应易于扫描，目标应足够大以易于轻击）；
·简单（确保每个导航图标都指向正确的目的地，并在整个应用程序中一致地使用所有元素，包括底部导航）。
联系客服
