交互设计常见问题答疑:我的APP界面底部导航栏究竟应该如何设计?


设计师知道设计不仅仅是美观,设计就是他的工作方式。(史蒂夫·乔布斯)
产品体验就像对话一样,导航在对话中起着重要的作用。无法在应用中导航就像无法在对话中找到正确的单词一样。本文我们将就同学们时常提到的界面底部菜单栏展开来讲解,如何探索创建良好的移动导航(底部导航),以此来优化用户的体验。
史蒂文·霍伯(Steven Hoober)在对移动设备使用情况的研究中发现,有49%的人依靠一只拇指在手机上完成事情。在下图中,出现在手机屏幕上的图表是近似覆盖图,其中的颜色表示用户的拇指可以接触到哪些区域以与屏幕进行交互。绿色表示用户可以轻松到达的区域;黄色,需要伸展的区域;红色区域,要求用户改变握持设备的方式。

表示一个人在智能手机上单手触摸的舒适性。
这意味着:将重要且常用的操作放在屏幕底部很重要,需要保证即使单手操作也可轻松到达这些操作。
许多应用程序使用选项卡栏显示最重要的应用程序功能。Facebook底部菜单栏提供主要的核心功能,允许在功能之间快速切换。

iOS版本的的Facebook底部标签栏。
良好的底部导航设计遵循以下三个规则。
1.仅显示最重要的功能

请勿在底部导航中放置五个以上的目的地,因为这样会导致目标太小且彼此之间的距离太近。在一个标签栏中放置过多的标签,这会使人们在身体上难以轻按所需的标签。更重要的是,显示的每个其他选项卡都增加了应用程序的复杂性。

如果你的核心功能有五个以上,请通过备用位置访问底部导航中未涵盖的功能。
避免滚动内容
对于小屏幕,部分隐藏的导航(如可滚动的标签栏)是一个解决方案。但是请务必记住,可滚动内容的效率较低,因为你必须滚动一次才能看到想要的选项。因此,请勿将其用作主要的导航方法。可滚动标签可用于产品中某些选项过多的区域(例如,在移动应用中进行照片编辑)

适用于iOS的Rookie Cam应用程序中的调节图片质量问题。
2.传达当前位置
底部菜单需要直接指示用户的当前位置。“我在哪里?” 是用户成功导航所需要回答的一个基本问题。使用适当的视觉提示(图标,标签和颜色),以便导航不需要任何说明就能表达用户的当前位置。
图示需要选择常用性较高的
由于底部导航动作以图标表示,因此应将其用于可以与图标适当通信的内容。用户熟悉一种通用图标,例如搜索,电子邮件,打印等图标。如何应用设计人员将功能应用于识别度较低的图标上,那么当你选择图标时,请进行可用性测试,以确保用户在解码含义时没有任何问题。

适用于Android的Bloom.fm应用程序的先前版本。确实很难为用户了解当前位置。
颜色
避免在底部标签栏中使用不同的彩色图标和文本标签,因为这会使应用看起来像圣诞树,并分散用户的注意力。而更应该使用应用程序的原色来指示焦点视图。

左:不同颜色的图标使您的应用看起来像一棵圣诞树。右:只能使用一种原色。
遵循简单的规则-使用应用程序的原色为当前底部导航操作(包括图标和存在的任何文本标签)着色。

如上图适用于iOS的Twitter应用程序中的底部栏菜单,消息视图目前处于活动状态。如果底部导航栏为彩色,则将当前操作的图标和文本标签设置为黑色或白色。

左:避免将彩色图标与彩色底部导航栏配对。右:使用黑色或白色图标。
文字标签
菜单元素应易于扫描,用户在点击一个元素时应该能够理解到底发生了什么。文本标签应为导航图标提供简短且有意义的定义,请勿使用两个以上单词的标签。

避免换行、截断和缩小文本标签。
目标尺寸
使目标足够大,以使其易于点击或单击。计算每个底部导航操作的宽度,然后将视图的宽度除以操作数。或者将所有底部导航动作设置为最大动作的宽度。Android设计准则建议移动设备底部导航栏的尺寸如下。

手机底部的导航栏设计推荐参数
3.使导航不言而喻
可预测的行为
每个底部导航选项都必须通向目标的界面。轻触底部的导航图标应将用户直接引导到关联的视图,它不应打开菜单或其他弹出窗口。

不要使用标签栏为用户提供对当前屏幕起作用的控件。如果需要提供控件,请在其他位置使用工具栏。

iOS工具栏。
力求一致性
尽可能在产品的每个部分的标签栏中显示相同的选项。它将给用户带来稳定感。选项卡功能不可用时,请勿删除该选项卡。如果在某些情况下删除选项卡,但在其他情况下不删除,则会使应用程序的UI不可预测。
最好的解决方案是确保所有选项卡都已启用,但要说明为什么选项卡的内容不可用。例如,如果用户没有脱机文件,则Dropbox应用中的“脱机”选项卡将显示一个屏幕,说明如何保存文件,此功能称为空状态。

Dropbox应用的空白状态屏幕。
隐藏模式
如果屏幕是滚动的设计,则当人们滚动查找新内容时,标签栏可以隐藏,并显示他们是否开始尝试返回顶部的快捷选项。

底部导航栏可以在滚动时动态显示和消失。
清晰的状态转换
避免使用横向运动在视图之间过渡。活动视图和非活动视图之间的过渡应使用淡入淡出。

淡入淡出动画。
几乎每个网站和应用程序都应该优先考虑底部用户导航栏的设计。产品对人们的使用越容易,他们使用该产品的可能性就越大。在设计底部导航时,请记住进行以下操作:
·可见且结构合理(在底部导航中使用三到五个顶级目标,并使用可滚动的空白内容);
·清晰(条形元素应易于扫描,目标应足够大以易于轻击);
·简单(确保每个导航图标都指向正确的目的地,并在整个应用程序中一致地使用所有元素,包括底部导航)。









