Image Source: Behance

设计师应该都知道设计不仅仅是外表。设计还包括用户如何与产品互动,无论它是一个网站还是个应用程序。导航就是一个对话窗口。如果用户不能很快的找到他们想要的东西，你的网站或应用程序做的再好也没用。

底部导航是为何如此重要?

Steven Hoober 在他的移动设备使用调查中发现,49%的人都是单手操作手机。在比较大的屏幕上时他们还是习惯伸长拇指去够到手机的顶部，尽管那样用起来不太舒服。

来源:Gizmodo

屏幕底部是使用频率最高的区域，因为那是单手或一个手指交互最舒适的区域。

标签栏：

许多应用程序都遵循这个规则—把底部导航(又名标签栏)当成最重要的应用程序功能区。

Facebook iOS版的底部标签栏

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

导航就是一辆车,它带用户去他们想要去的地方。底部导航与最终的旅游目的地一样重要。这些目的地要求直接从应用的任何地方都可以访问。

优秀的底部导航设计遵循这三个规则。

1、只显示最重要的功能点

在底部导航设置三到五个优先功能点。如果不到三个,可以考虑使用空格代替。

也要避免超过五个，把太多的标签放在一起会让人很难点到他们想要的那个，每多一个额外的选项卡,都会增加应用使用的复杂性。

如果你的顶级导航超过五个,就要为其他的选项提供备选的导航位置。

避免滚动的目录

部分隐藏的小屏幕导航是一种显而易见的解决方案，因为你不必担心有限的屏幕位置,把你的导航设置为可滚动的标签。但可滚动的目录是低效率的,因为你必须在滚动之前,知道你想要的选项在哪个位置。

2、显示当前位置

无法指明当前位置可能是应用上最常见的错误。对于一个成功的导航来说，“我在哪儿?”是最根本的问题之一。

用户应该扫一眼就知道如何从A点到B点,而不需要任何的指导。您应该使用适当的视觉提示(图标,标签和颜色),这样的导航不需要任何解释。

图标：

底部导航图标应该与他们想表达的内容相符。一般的图标,用户都知道那代表什么功能,如搜索、电子邮件、打印等。不幸的是“万能”图标是罕见的。设计师设计的图标经常无法表达它背后隐藏的功能,实际上是很难识别。

像上图中左边的图标，用户真的很难理解它代表的意义。

我想强调的是这是用户体验非常重要的一部分。

颜色：

避免在底部标签栏使用不同颜色的图标和文本标签。

多种颜色的图标使你的应用程序看起来像一棵圣诞树。

遵循一个简单的原则——给当前激活的导航标签(包括图标和文本标签存在)使用应用的主色。

Twitter iOS版的底部菜单栏，消息视图是活跃的，用的是标志性的蓝。

如果底部导航栏用了其他颜色,那就把当前激活的图标和文本标签设置成黑色或白色。

避免彩色图标搭配彩色的底部导航栏

文本标签：

文本标签应该是言简意赅的，要避免使用长文本标签。避免换行、缺省和缩小的文本标签。

菜单元素应该易于理解。应该让用户能够理解当他们点击图标时会发生什么。

目标的大小：

足够大的目标才容易点击。计算底部导航每个按钮的宽度,视图的宽度除以按钮的数量。

Android指南建议移动应用底部导航尺寸：

固定的底部导航栏在移动。单位像素密度(dp)。来源:Material Design

标签上的标记：

你可以在一个标签栏图标显示标记以表明有新信息或相关状态。

3、让导航栏不证自明

好的导航应该感觉像一只看不见的手引导用户以及他们的访问。毕竟,如果人们不能找到它，即使功能最酷、内容再吸引人也是无用的。

行为：

每个底部导航图标必须能够引导到目标,不用打开菜单或其他弹出窗口。利用底部导航图标就能引导用户到相关的视图,或者刷新当前活动视图。

如果您需要提供一个控件工具栏，就不要使用标签栏让用户控制当前屏幕或应用模式。

争取一致性：

尽可能在每一个层面显示相同的标签。这可以给用户提供一种视觉上的稳定性。

当一个功能不可用时，不要删除那个标签。在某些情况下，删除一个标签，你的应用的UI会显得不稳定和不可预测。最好的解决方案是,确保所有选项卡被启用,但要说明为什么这个选项卡的内容不可用。例如,如果用户没有离线文件,Dropbox应用离线选项卡中显示一个界面,解释为什么会这样，这一特性称为空状态。

空态屏幕Dropbox

隐藏它：

如果屏幕是可以滚动的,当用户查看新内容标签栏可以隐藏，当他们开始向下拉试图回到顶部时再显示。

视觉愉悦：

避免使用横向运动来切换。

小贴士：

底部导航应该：

• 可见的以及规则的(使用三到五个顶级导航,避免采用滚动导航)
  

  
  

• 清晰(状态栏元素应该易于识别，目标大小适中以便触发)
  

  
  

• 简单(确保每个导航图标能引导至适当的目标和使用所有元素)
  

结论：

帮助用户导航应该是每一个站点和应用的最高优先级。最终的目标就是建立一个符合用户的心理模型的交互系统。

你必须为你的用户设计。想想他们使用你的应用时,怎么使用导航实现他们的目标。你的产品更容易使用,他们就越有可能使用它。

-END-

---

原文地址：https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f#.bawcx0p14

作者：Nick Babich

本文由IXDC翻译，版权归原作者所有。