4个关键点，做好App底部导航设计思维导图

为何底部导航如此重要

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

使用3-5个顶级导航标签。如果少于3个标签，考虑使用标签选项卡替代。

避免使用超过5个底部导航块，否则会造成块与块间显示太拥挤，也容易造成误点错点问题。另外，过多导航块会让你的程序看起来更加复杂。

如果你的顶层导航块确实超出了5个，不要都放在底部导航，考虑放在其他地方或选出最重要的放在底部。

对于小屏幕来说，隐藏一部分导航块显然是一个解决方案——你不用担心屏幕限制，只需要把导航块置于一个可滚动区域。但是这种方式难免会降低使用效率，因为即使你已经看到了你需要的块，你可能仍然需要滚动一下才能看到全部标签。

Rookie Cam iOS客户端滚动设计方案

没有向用户表明其当前所在的位置大概是所有程序常常犯的一个错误。而对于用户，在成功地使用导航之前，他们要搞清楚的基本问题便是“我现在在哪”。

好的设计应该是用户在没有任何外界指引的情况下，也能仅靠第一眼就能知道该如何从A点到B点。你应该使用合适的视觉线索（图标、标签或者颜色）直观的告诉用户，而不必有任何多余的解释。

底部导航块往往都是使用图标表示，它们应该传达出跟其内容匹配的信息。虽然有一些用户熟知的通用图标，大多是用来代表诸如搜索、邮箱和打印等功能。不过这种通用图标非常稀少。但是程序设计者常常设计出从视觉样式很难识别出其对应的功能特性的图标。

避免在底部标签栏使用不同颜色的图标和标签，应该使用程序的基本色调来突出当前所选标签。

左：不同颜色的图标使你的程序像圣诞树                                   右：仅使用一种基本色调

请遵循一条简单的规则——给当前的选中标签使用程序的基本色调进行着色。

Twitter iOS客户端底部按钮

如果底部导航栏本身有颜色，应该使当前选中的图标和文本标签呈黑色或白色状态。

文本标签应该是对导航功能的一个简短清晰的定义。应该避免使用太长的标签造成因被截取而显示不全或换行现象。

避免文本标签换行、截取、压缩

素有标签元素应该很容易被用户看清楚。用户点击元素时他们应该清楚的理解要发生什么了。

应该使目标区域足够大能被轻易的触摸点击到。

Android设计规范建议底部导航栏遵从以下尺寸进行设计：

你可以在一个标签栏图标上显示一种标记符号来表明有与该视图或模式有关的新信息。

优秀的导航设计就好比指导用户旅程的一只无形的手。毕竟，如果都不能别用户发现，那么即使最棒的功能或最能引人注目的内容也无法接触到用户。

每一个底部导航标签图标都必将带领用户到新的地方，可能不光光是打开一个菜单或是弹出框。点击一个底部导航标签时，应该直接带领用户前往相关的视图或者刷新当前活跃的视图。

不要使用标签栏给用户提供那些在当前屏幕/模式下发挥作用的控件元素，如果你想提供给用户控件，请使用工具栏。

iOS的工具栏

尽可能在每种情况下显示相同的标签。这样的视觉稳定性对用户来讲是极好的。

不要在一个标签不起作用的时候移除它。如果你在某些情况下移除一个标签而在另一些情况下不这么做，这会使用户感知到的你的程序设计不稳定甚至不可预测。最好的方法是保持所有标签向用户开放，只不过如果某个标签下的内容不能用时要解释给用户。例如，如果一个用户并没有离线文件，Dropbox里的离线文件标签对应的屏幕告诉用户该如何使用离线文件。这个功能也叫做空状态处理。

Dropbox的空状态

避免使用直接的横向运动来在不同视图间转换，不同视图间应该使用淡入淡出的动画来进行过渡。

总结

● 可见且结构良好——使用3-5个标签栏并避免使用滚动式结构；

● 清晰的——标签栏应该易于浏览且尺寸足够大；

简单的——确保每个导航图标带领用户前往合适的地方，并保持包括底部导航在内的所有元素在整个程序中都具有一致性。

结论