原文地址：http://babich.biz/the-most-creative-mobile-navigation-patterns/

设计师明白，设计不仅仅是要好看，还包含对用户与产品进行交互的设计。无论这个产品属于网页端，或是移动端，这条道理都适用。交互的过程就像一场对话。导航就是一种对话，因为如果用户不能麻溜地使用网站的话，那么你的网站再好也没用。

在这篇文章中，我们将帮你更好地理解优秀导航的标准，向你展示通过一些创意模式来创建优秀导航的方法。但一开始，先让我们来复习一下移动导航的基础知识吧。

移动导航原则

导航UI模式是一条通往优秀网页可用性的捷径。它们在易学性上发挥了巨大作用，因为这样你的网站上就没有那么多要让用户辨认的东西了。打破常规固然是一件好事，但依然有些规则是我们必须遵守的。

简约

最重要的一点，一个导航系统必须做到简约。优秀的导航让人感觉就像一只无形的手指引着用户探索网站。移动端设计和桌面端设计的一个明显区别在于屏幕尺寸。移动端屏幕更小，故而屏幕上的所有区域都显得那么宝贵。

连贯

功能必须显而易见。第一次使用时，访客应该不需要借助任何外部帮助，扫一眼就能明白如何从A点跳转到B点。你应该使用适当的记号（例如声音、印刷体文字或图片），这样导航就不需要任何辅助的解释了。另外一点非常重要的是要给访客提供方向感，让他们知道当前页面和其他页面是有关联的。

一致

所有页面的导航系统都应该保持一致。不要将不同页面上的导航控件移动到不同的位置上。你应该先定好哪种导航对你的网站最合适，一旦定下来了，就别再改了。

富有创意

目前导航模式的最大问题在于很难出彩，因为你做的导航模式别人也在用。

滑块（Slider）

滑块（不是轮播类型！）对于内容渐进或高度关联的页面有奇效。如果你的引导页只有几个元素的话，那么滑块会是一个很棒的导航工具。

轮播滑块vs选择器滑块

举个例子，Uber app允许用户在不同种服务之间导航，Uber的滑块秒就妙在用户可以使用同一个场景（地图视图）中查看不同类型的服务。

Uber的滑块是一个非常实用的工具——你可以在同一个界面上查看最有用的信息

缺点：滑块的数值毕竟有限，如果你要在大于6或者7个页面之间导航，那么滑块就力不从心了。

图形化图标（Pictorial Icons）

图形化图标是移动屏幕空间解决方案中最有趣的一种方式了。图标上的图案需要解释它将带领用户前往的方向。大家都明白，一个信封图标代表着电子邮件，但是绘制信封图标的方式取决于你。这种方法让导航变得简单易用，同时又给设计者提供了发挥空间。

使用了图形化图标的Material Design导航

Tubmlr应用不仅有漂亮的图形化图标，还附有解释性的标签文本。

Tumblr

缺点：许多研究者指出这种图标很难被记住，在使用效率方面也是差强人意。你曾经有过费力地辨认图标含义的经历吗？用户在面对不熟悉的图标时总要这么去做。只有大家普遍了解的图标效果很好（例如打印，播放/暂停，重播，推特等等）。这就是为什么你要把图标设计得清晰明了，富有启发性，最好在图标旁边加上解释标签。

卡片网格（Card Grid）

卡片正快速成为移动设备上的最佳设计模式。卡片式UI驱使网络放弃采用将许多内容互相链接的方式，而是将独立的内容碎片聚合为一体。

谷歌的Material Design就采用了卡片式设计

卡片非常有利于展示短小精干的内容，每一张卡片都代表了一个场景。对于卡片而言，最重要的地方在于人们几乎可以无限制地操作它们。

卡片易于操作

最后一项要点是，卡片和移动设备是一对天作之合，可以适配各种屏幕尺寸。移动设备是未来商务的核心与灵魂所在。

Pinterest和其他的一些流行网站都采用了卡片式设计。

桌面端Pinterest

缺点：有时候层级分明是好事——如果应用的流程相对复杂的话，那么指导用户沿着规定的路径使用会比放任用户自己摸索来的要好。卡片式UI界面也鼓励用户进行进一步的内容探索。

全屏菜单（Full-Screen Menu）

当许多应用和网站都在缩小导航系统尺寸上苦苦挣扎时，全屏菜单却反其道而行之。它悄悄地承载了大量信息，整齐地显示着文本和多媒体元素，最后它还有一个很大的优点——易于使用。

Cookly采用的是全屏菜单导航模式，这样做是为了更高效地处理图片链接。导航的简洁性确保了用户可以跳转到自己想要去的地方。

Dribbble上的Cookly

缺点：除了菜单本身，你不能在首页展示其他的内容了。点击显示内容的方法在大部分情况下也不合适，因为它在得到结果前，先产生了一步用户交互。

结论

对于更加传统的导航UI设计模式，例如抽屉导航、标签导航和下拉菜单等等，其实使用它们并没有什么不好，只是太常见了而已。有时你需要在平庸的人潮中脱颖而出，带来更棒的创意点子。只是要记住：创意不能妨碍到可用性。