Material Design 中的 Bottom Navigation 并不是无脑移植 iOS 导航模式的许可证

Material Design 中的 Bottom Navigation 并不是无脑移植 iOS 导航模式的许可证

这篇文章是一篇译文, 原文为 Liam Spardin 在 Android Police 上发布的 Opinion: The bottom navigation section in the Material guidelines is not license to port an iOS navigation model.

Bottom navigation bar, 或者我们更常见到的, 底栏, 在 Android 4.0 到 Android 5.0 之间的这段时间里, 似乎渐渐淡出了潮流 (或者说, 也许我正好堪堪免于看到更多底栏), 与此同时多数开发者与设计师们都开始转向了其他的导航方式. 不过, 这些 「其他导航方式」 —— 尤其是抽屉 —— 在很多时候并不是最理想的导航方式. 无数人觉得一旦什么东西被 「隐藏」 进了导航抽屉, 它就再无见天日之时. 对他们来说, 似乎只有完全不可见与立即可见两种状态.

摸着良心说话, 如果用户每次打开应用都能看到那些导航项, 确实会提升应用的流量. 虽然这个需求还没有如此迫切, 但是 Google 在官方指南里加入底栏相关的部分就显得顺理成章.

于是在 2016 年三月, Google 正式将 bottom navigation 章节加入了 material design 指南中, 意在为这种在 iOS 上已经大获成功的导航方式提供更详尽的指导. 例则本身以大量规章, 动画与范例的形式非常细致的展现了应该何时及如何使用 bottom navigation, 满足了大家的期待. 这条底栏紧贴已有的规范, 定义了这条栏作为 material 在应用中那叠 materials 之中的位置, 它该如何动起来, 它应该如何在画面上合理的出入, 以及文字排版与图形使用.

但就算给出了如此详尽的指南, bottom navigation 依然被很多人视为直接从 iOS 应用里搬运来的东西. 在这篇文章里我想再次强调, 为什么将 Android 作为一个独立的平台严肃看待是一件必须且有益的事 —— 尤其是谈起 bottom navigation 的时候.

Bottom navigation 是用来干什么的

Google 在 material design 例则里推荐的使用方式已经很好的阐释了小标题里的问题: 这条栏只适用于有 3-5 个顶级导航项的应用. 更详细的说法是, 这 3-5 个导航项必须能快速在其中任意两个之间跳跃. 将适用范围进一步缩小的, 是它们必须有着相同的优先级.

如果你给应用画一张层级图, 那么能出现在 bottom navigation 里的东西只有那最顶端的界面, 因为最重要的用户操作流都发源于此.

对于一个简单的应用来说, bottom navigation 可以帮上大忙, 因为只要这一种简单的导航方式就可以完成全部的导航, 甚至可以让这个应用不再需要一条 toolbar, 使其更加简洁. 但更加复杂的应用这么做, 就很有可能迅速把用户搞晕, 而事情明明可以不变成这样的.

举个例子来说, Google+ 就把三种导航方式并用了. 如果考虑到这些界面在应用中的层级, 这么做似乎还说的过去 (如果忽略掉抽屉里的那些应用链接...).

它不是用来干什么的

如果要给 bottom navigation 做一个适用列表, 那这个列表无疑要比适用的那份长得多, 所以我们还是挑重点来讲吧.

你不应该为了那些 「生怕用户错过」 的功能而使用 bottom navigation. 换句话说, bottom navigation 不是那种能够促使用户不错过任何东西的万灵药. 尽管叫我乐观主义者吧, 我依然认为创造一个自然的流程引导用户去发现那些重要的功能是完全可行的, 而且这将对应用的体验大有裨益.

自从有了 bottom navigation, 总能看到有人试图往里面塞一些看起来并不是那么重要的东西, 仅仅因为这个条儿上似乎还有那么一两个空余的位置. 但你需要的是让用户在 bottom navigation 上看到他们最想用或者最爱用的功能, 而不是那些不重要的东西.

这并不是再说 bottom navigation 这种套路不能用于达到你的商业目标. 但是在用户的需求与你的商业目的之间总是需要一个平衡. 在我对 Google+ 的底栏最初的评论文章里, 我注意到了新设计很明显是以产出, 或者说是以产品为中心的, 从而令用户们并不那么感兴趣的社群与收藏凌驾于用户喜欢或者真正经常用到的东西之上. 最重要的几个界面 (尤其是搜索界面) 都被这两个功能的推广给占据了. 这个应用的界面与体验就是失衡的典范.

当然, Google 不断改进着这个应用, 但是社群与收藏依然在 bottom navigation 中. 在那篇文章里我也说了, 至少我们作为局外人, 完全看不出这两个功能有与时间线和通知同等重要的优先级. 但是这个应用依然算是一个 bottom navigation 如何改变平衡的例子.

Bottom navigation 也不应该被用作菜单 —— 我们时不时看到 Android 应用在 bottom navigation 上放着一个 「更多」 的菜单, 很显然是从 iOS 上带来的, 把所有最高优先级之外的项目全部放进一个占满整个画面的菜单项里的习惯. 这个所谓的 「更多」 并不能算是一个顶级导航项, 因为它只不过是一个放大版的 overflow menu. 同样的, bottom navigation 更不应该用来放普通的弹框或者对话框. 对话框, 下拉菜单和菜单都不应该成为顶级导航项. 至于弹出菜单被滥用, 那又是另一个故事了...

Bottom navigation 上不应该放低级导航项. Tripit 在一次最近的更新 (正是这次更新促使我写下了这篇文章) 中从他们的 iOS 客户端移植来了一个不单单有 「更多」, 还有 「高级功能」 —— 一个功能列表 —— 项目的底栏. 这个界面只有头两个功能是有用的, 剩下的两项是用来让高级用户订阅一个花费 $25 的新项目. 至于剩下的一堆东西, 都是一些功能. 如果你点击了其中一项功能, 你会被带到一个用于描述这个功能静态页面, 啊, 如果他们心情好的话说不定会在这个页面上加一个通往应用设置的链接. 这压根儿不是顶级导航. 我甚至觉得除去前两个项目, 剩余的东西根本就不是导航项. 也许他们服务于应用的商业目标, 但是前两个项目如果被放到合理的上下文环境中才是是更靠谱的, 而另外那些东西则应该在设置界面里占据一席之地.

请遵循规范

这句话迄今为止我已经在不同的场合说过无数遍了. 无论是设计还是开发, 对于一个应用来说, 遵循平台原生的规范有太多好处了.

制作一个 Android, iOS, Windows, Mac 或者其他任何平台的应用, 都意味着成为这个平台的一部分. 这就意味着, 首先, 你有责任不对这个平台造成负面的影响. 如果应用遵循了平台的期望, 在此之上用户才能建立对平台界面的信心. 如果用户在一个应用里用过了标准可用的 tabs, 那么他在另一个应用里也会期望 tabs 以相同方式运作.

破坏用户的期待, 尤其是当这个元素作为应用的导航项而尤为重要时, 是相当倒胃口的, 尤其是当这种破坏造成了用户的困惑或挫败时. 而这种方案很容易会指向整个平台, 以及你的应用也难逃其咎.

而用户的期待对于一个应用来说是可以产生好处的. 如果你的应用采用了那些用户早已熟悉而期待的元素和组件, 用户不但会获得自然友好的体验, 也可以自然而然地藉由对平台的期待而更快速地了解你的应用, 从而在达到了他们的目的同时, 也完成了你们的商业目标. 而这种好感也会福泽你的应用.

最后, material design 例则还没有细致死板到你可以以它过于严苛为借口而选择无视它. Material design 设定了一些基础条例并对一些常用元素, 操作等做出了规范, 而这些规范都是可以帮助你更好地融合进这个平台的. 时时参照这些范例并不会限制你自己对设计的探索, 而在 material design 的范畴之内还有广袤的空间可供你发挥聪明才智.

换句话说...

一言以蔽之, 这篇文章想表达的是, iOS (或者其他平台) 的一些套路并不总是能在 Android 上奏效. 当你将一个应用带去一个新平台时, 需要新的研究与设计. Bottom navigation 是列位于 material design 官方指南中了, 但这并不代表它只是一份 iOS 上底栏规范的拷贝, 同样的, 直接把 iOS 上的套路搬上 Android 对于一个用户也好, 对于产品也好, 对这个应用的开发者也好, 对平台也好, 都弊大于利.

Material design 规范, 平台实践, 以及用户期待都是非常重要的, 而我们作为设计师与开发者的工作就是决定我们应该如何努力, 才能为我们的 Android 用户们创造最好的体验.

编辑于 2016-08-18

文章被以下专栏收录

    We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.

    大概会用来放一些吐槽和没发在锋客的文章吧...