前言：14年8月分享在500UXC的文章，时间长即失去了它的时效性，今转载至此。

年正如精良的设计一样，优秀的导航也大象无形。不管是浏览好友信息，还是租赁汽车，完美的导航设计能让用户根据直觉使用应用程序，也能让用户非常容易地完成所有任务。

导航的设计是 App 设计发展过程中很值得玩味的地方，由于移动设备特别是智能手机的屏幕尺寸有限，设计者们通常会将屏幕空间尽量留给主体内容，为了在手机屏幕给定的范围内展示出更多内容，优秀的导航栏设计将起到关键性作用，对于不同的操作也当因地制宜地选则不同的设计方案。

如网站设计中，我们会把导航分为一级导航、二级导航等等，其实移动应用和网站设计一样，也具有自己的信息架构。这里我们主要依据市场上面已有的产品对移动应用导航大体分为以下两类：主要导航模式与次级导航模式。

图1-2  次级导航模式

首先看看以下7种主要导航模式：

主要导航模式—— 第一种：跳板式

跳板式导航对操作系统并没有特殊要求，在各种设备上都有良好表现。它有时也被称为“快速启动板”（Launchpad）。跳板式导航的特征是，登录界面中的菜单选项就是进入各个应用的起点。在国内市场上跳板式设计应用很用，如下图的第一个“百度手机卫士”（图1-3）它主要通过功能来展示菜单选项，这种网格布局清晰的把各个功能区域进行划分，能让用户快速找到入口并点击操作。(图1-4)的云图TV，它是一个免流量的手机电视，他的模块相对百度手机卫士来说较简单，主要通过电视台来区分模块名称。比如：中央电视台CCTV、卫士、体育甚至海外频道等等。而美图秀秀（图1-5），更是我们比较熟知的一种，它的主界面用2X3的网格布局把常用的功能入口都直观的表现在上面。

什么是2X3的网格布局了？

2X3网格布局是一种布局形式，常见的布局形式有：3X3、2X3、2X2、1X2（图1-6）。但不一定非拘泥于网格布局，根据需求的功能来定义，可以成比例放大某些选项，以彰显其重要性。

XiiaLive，一款功能无比强大的网络电台，兼具简洁而清新的 UI 设计。这款应用具有不容忽视的导航，设计师用3X3的网格布局把菜单的6个菜单项目布局在屏幕中间，使每个格子都扮演着功能性的作用（图1-7）。

Tripper是一款日本的本地导游应用，他用扁平的设计图标把应用的功能用2X3的网格布局罗列在整个界面中，使得用户能够相当轻松顺手地浏览这款APP（图1-8）.

跳板式菜单也可以说是网格式菜单，它类似于metro UI的堆砌色块，优点简约而不简陋，导航清晰、明显，并能提高操作效率。但设计时切记不分青红皂白的去使用色彩哦，这可能会让用户不知所措和产生疲倦感。

ASM采用的是不规则网格的跳板式导航，以突出内容的优先级（图1-9）。

最近经典的游戏：“别踩白块儿”（图1-10）也是跳板式模块的经典体现。

它把各种游戏模式用网格区分开，仅用黑白两色就能清晰的让用户理解并操作。正如前面所说，在网格布局的设计中，不一定必须遵循几乘几的网格形式，甚至可以成比例的放大或者缩小某些选项，用以彰显他的功能特色，举一反三，设计师还可以合并他的多种网格形式，使得功能之间的逻辑流程更准确。比如别踩白块儿中的每个游戏选项，点击的二级菜单也用跳板式或者列表式展现了更多的功能选择。

个性化的跳板式导航可在显示菜单选项的同时显示用户个人资料。通常会提供自定义功能，允许用户改变跳板导航的布局，如优酷界面。

通过以上的案列分析，我们可以整理如下几点：

1.为同等重要的内容项使用网格布局。

2.为相比之下更为重要的内容项使用不规则布局。

3.视情况使用个性化设置和自定义选项。

主要导航模式——第二种：列表菜单式

列表菜单式导航与跳板式导航其实是有共同点的，他们的共同点在于，每个菜单项都是进入应用各项功能的入口点。

但是不同点在于列表菜单式导航有很多种变化形式，包括个性化列表菜单，体现分组列表和增强列表等。

案列分析：

个性化列表的方式：在photo sticker中首页就采用了个性化列表菜单的方式。而IOS系统设计则采用了分组列表菜单式。

印象笔记的IOS版本它把列表式导航与跳板式导航设计相结合。下厨房即是增强列表导航，何为增强列表导航呢？即就是在简单的列表菜单之上增加搜索、浏览或过滤之类的功能后形成的。

其实列表菜单式导航，这个从网站到手机APP上都很常用的，遵循由上至下的阅读习惯方式，所以使用起来用户不会觉得困难。

通过例举的四个案列，以及列表菜单式导航与跳板式导航的对比，列表菜单，更适合用来显示较长或拥有次级文字内容的标题。

主要导航模式——第三种：选项卡式

选项卡式导航，在不同的操作系统有不同的表现和规则。所以在设计时需要为不同的操作系统专门定义选项卡的位置。

Ios、webOS和Blackberry（黑莓）系列都把选项卡放在了屏幕底端，这样用户就可以用拇指进行操作。

选项卡的导航设计方式，一般为四个导航按钮最为普遍，最方便操作的是第二和第三个按。受制于屏幕宽度的限制，其栏目的个数是有限的，不能超过5个。过多的话明显不利于用户的切换。从界面布局来看，也降低体验友好度。

目前也有部分APP在选项卡的基础上，衍生出了一种交互比较好的弹出导航菜单。突出选项卡上展示的那些核心功能的按钮，方便用户快捷操作。

选项卡至于低端的应用市场上面有很多，这里列举几个比较常见的APP：

屏幕底部水平滚动的选项卡是个非常不错的设计，如的Waterlogue应用，它是一款水彩风格照片处理工具，下面的水平翻动选项卡可以让用户选择多种水彩风格

Android（安卓）、Symbian(塞班）和Windows系统都把选项卡定位在屏幕顶端，它模仿了网址导航模式。

Horner包含了可隐藏菜单，不过它能很妙地从顶部出现，由于明亮的颜色和有关联性的巨大图标，它与整个界面内容形成了鲜明对比。Bettertec设计的气流计算APP，巧妙地运用了占据顶部的标签页。

顶部菜单和底部意义差不多，把菜单放在顶部，可以遵循从上至下的阅读习惯，但也有缺点，即不适用与单手操作。

单手操作用户是所示的这两种姿势（左手用户相反）。绿色代表容易点击区域，黄色为拇指伸展可到点击区域，红色区域超出单手可点击范围。

所以不管是在导航设计中，还是在移动应用的其它设计中，我们应该尽可能的考虑用户的手势操作习惯，给用户更好更便捷的体验。

单手操作手指滑动区域图片

网易新闻则采用了顶部可滑动的导航形式，屏幕顶端可滚动的选项卡:用户移动选项卡后能看到更多的菜单选项。

爱奇艺应用同样也采用了顶部滑动导航的模式。但是这里更值得一提的是，为已选择的菜单项设置使用易于识别或带有标签的图标等不同的视觉效果，用户就能清晰的知道自己选择了哪一项。

主要导航模式——第四种：陈列馆式

陈列馆式的设计通常在平面上显示各个内容项来实现导航。 主要用来显示一些文章、菜谱、照片、产品等，可以布局成轮盘、网格或幻灯片演示。

陈列馆式导航能够很好地应用与用户需要经常浏览，频繁更新的内容，如下图的超级相册和便签本。

相册是我们在日常生活中时常运用到的一个功能，使用频率高，图片数量多，所以采用陈列馆的形式是再合适不过了。

而便签本也不陌生，下图中的便签本可以上下左右拉伸不断创建新的收纳空间，一个个方方正正的分类视图，颜色各异却能达到一种养眼的和谐美。没有花哨的功能，主界面上只简洁地显示收纳盒名称与其中的项目数量。

最美应用:是一款通过互联网平台，每天为用户发送一款赏心悦目的移动互联网应用。它通过类似幻灯片的形式来导航，用户通过查看每个应用来划屏切换屏幕内容，而它下面的进度条也会互动性的跟随着用户的切换而进行图标的动态变化。

主要导航模式——第5种  仪表式

仪表式导航提供了一种度量关键绩效指标是否达到要求的方法。

过设计以后，每一项量度都可以显示出额外的信息。这种主要的导航模式对于商业应用、分析工具以及销售和市场应用非常有用。

Timi时光记账—精美独特的时间轴记账:Timi 时光记账采用了时下非常流行的时光轴的形式，帮你整理账目，简洁明了，界面精美，在方便好用的同时，还满足了视觉享受的需求~。

乐动力：通过数据来查看自己每天活动状态。下滑还有很多功能，都可以点击查看。

主要导航模式——第6种  隐喻式

隐喻式导航的特点是用页面模仿应用的隐喻对象。

这种导航主要用于游戏，但在帮助人们组织事物（如日记、书籍、红酒等），并对其进行分类的应用中也能看到。

途书笔记，用牌照记录数据的笔记。它把导航界面菜单做成了一本一本的书，有一本书的形式，隐喻的表达了书的概念。自定义标题，分类进行查阅。

找你妹的游戏中，导航就用闯关的进度来显示，直观且具有趣味性。

主要导航模式——第7种：超级菜单式

移动设备上的超级菜单式导航与网站所用的超级菜单导航类似，它在一个较大的覆盖面板上分组显示已定义好格式的菜单选项。

这种导航模式在现在的app设计中使用的比较少，而且一般会用做分类检索de 次级导航使用。在手机网站的导航设计中比较常见。

美团中就采用了超级菜单式导航做为次级导航使用。

以上均是主要导航模式：那么接下来针对次级导航模式进行案列赏析。

次要导航模式：

这里我们值得注意的是在导航的设计中，所有的主要导航模式都可以用作次级导航。我们经常能够看到选项卡下再用选项卡导航、导航卡下用列表导航、选项卡下采用仪表式导航、跳板式导航下采用陈列馆式导航灯情况。

而次级导航模式是否可以用作主导航，答案不是确定的，因为事物都是贯穿融合的，主要你运用得当，一切均有可能。现在我把这三种归纳为次级导航是针对现有市场产品进行分析得出，并不一定是绝对。

次级导航模式——第8种： 页面轮盘式。

通过这种导航模式，操作者可利用“滑动”操作快速浏览一系列离散的页面。

疯狂来找钱就采用页面轮盘式，页面指示器（iOS中的术语，指用来表示页面数量的小点）可以显示出导航中的页面数量；执行“滑动”操作可以显示下一页。

次级导航模式——第9种：图片轮盘式

图片轮盘式导航类似于一个二维轮盘，图片轮盘式导航更多的应用于播放器和需要多图片展示应用中。

香蕉相机，作为一个相机应用，该有的功能相对还是挺齐全的。拍照、添加相册图片、添加文字等等，都木有问题，还有很文艺的滤镜和相框~

图片轮盘式导航可以查看更多的香蕉图标，相加几个来几个~~~~

次级导航模式——第10种：扩展列表式

扩展列表式导航通过左/右/上/下拉屏幕或者点击按键显示更多的信息。

在网易新闻，TIMI记账和畅读等应用设计当中，通过点击屏幕左上角的按钮唤出切换项，有些也可以通过向右或者向左，滑动手指来完成。所以当我们觉得菜单比较占用位置的时候，可以尝试用这种方式来隐藏菜单，需要注意的是设计展开菜单按钮大部设计在左或右上角这些显眼的位置。

一个简单的滑动动画，就像拉出一个抽屉，「抽屉式导航」这个名称应该就是来源于此。抽屉式导航突破了数量的限制，更大程度上释放了主体空间，也因此提高了操作成本。

此处就个人意见，如果能将主要功能项组织在 4 到 5 项，选项卡导航的设计方式可能会更好，否则，就应该优先考虑抽屉式导航了。抽屉式导航通过纵向排列切换项解决了具有过多的切换项这一问题。不过这也意味着导航不能和主体内容同时出现在屏幕上