APP UI 设计模式笔记（一）导航

APP UI 设计模式笔记（一）导航

原文：《Mobile Design PatternGallery》 [美]Tberesa Neil 著王军锋 译, 人民邮电出版社

1   导航

主要导航模式（7种）：跳板式（Springboard）、列表菜单式（List Menu）、选项卡菜单式（Tab Menu）、陈列馆式（Gallery）、仪表式（Dashboard）、隐喻式（Metaphor）、超级菜单式（Mega Menu）。

次级导航模式（3种）：页面轮盘式（Page Carousel）、图片轮盘式（Image Carousel）、扩展列表式（Expanding List）。

1.1主导航模式

l  跳板式（Springboard）：

应用特点分析：

我认为比较试用于一级菜单项比较少的导航模式，可以通过菜单Icon的设计来增加应用整体的视觉效果（相对其他Tab形式、表格形式的来讲，有很大作用）。另外有一点需要提一下，这种设计可以通过增加某一个菜单项的网格大小来有效的强调这个功能。

不适用的情况我觉得也比较多，比如说导航页一定要显示很多一级菜单项（超过9个，效果就有问题了吧）。还有一个就是，如果某一个菜单项名字超级长、而且还无法缩减的时候，想想放在里面的效果吧。

l  列表菜单式（List Menu）：

这个很多见，分类为：个性化列表菜单（PersonalizedList Menu）、分组列表（Grouped List）和增强列表（Enhanced List）

应用分析：书上说：“列表菜单很适合用来显示较长或拥有次级文字内容的标题”。的确如此，而且如果要求导航菜单需要有一定的动态性（应用使用过程中可变化），这个就最好不过了。因为如果使用上一个跳板式布局，会出现动态过程中某一行菜单项不全的问题。

l  （Tab Menu）选项卡菜单式

这一个形式也很常见，微信即如此。使用选显卡的一个特点是无论在哪一个选项下，用户都可以看到当前选择的选项卡和其他的选项卡，这样比较容易方便切换（其他方式需要先返回主菜单，再选择其他的）

选项卡一般会使用Icon来增加视觉效果(上图为StarbucksApp)，而图标一定要选择一眼便可以识别功能的图案。另外，还有一个分歧在于选项卡的位置。一种方案是把选项卡放在页面的最底端，设计用意是方便手机用户大拇指操作；另外一种设计则是放在最顶端，这种方式看上去比较熟悉，因为是通大多数的标准的网站导航模式相同。

l  陈列馆式（Gallery）

这种布局的核心在于内容，将菜单的内容直接显示到导航页面，对于新闻、图片、视频之类的内容具有核心吸引力的情况，这种布局就显得非常有用了。相关内容可以增加幻灯片效果、轮盘等方式进行展示。

l  仪表式（Dashboard）

仪表式布局，重点在于，菜单内容中最吸引人的信息可以通过一个指标来表达，并把这一项内容提前显示在入口处。

l  隐喻式（Metaphor）

把菜单项利用同应用相关的其他形式表达，实现相应功能，上个图就说明白了：下面的应用中菜单项是红酒，类似的我们还见过书架和书、笔记本、等等。这种比较常用在游戏中。

使用这种方法一定要考虑清楚，这个比喻的对象到底适不适合做菜单，你菜单的目的和功能在这个比喻下，到底表达出来了没，不要为了效果而做效果。

1.2 次导航模式

上述几种主要导航都可以做次级导航。但是下面将提到的三种次级导航一般不要做主动导航。

l  页面轮盘式（Page Carousel）

页面轮盘导航可以用滑动操作。所以其中最核心要关注的是，怎么让用户知道这个图片或者其他类似的东西是可以滑动的。一般使用页面指示器器（Page Indicator，iOS 中的术语，指用来表示页面数量的小点）提示用户。

注意，滑动导航的内容一定不能太多！！！

l  图片轮盘式（Image Carousel）

其实可以理解成一个iTunes 的Cover Flow 导航，用在一些展示性的内容上。书中提到了一个效果是在支付过程中选择银行卡，这个场景下貌似非常有吸引力的。

l  扩展列表式（Expanding List）

扩展列表一般很少用在应用中，但是在web的移动版中用到很多。可以代替传统导航中的级联式列表的效果。

 

最后做了一个选择流程图，只列举了一些明显的特点，仅供参考完善思考角度用。