APP设计之五：导航.pdf

［系列］APP设计之五：导航 之前的几篇文章谈了谈APP设计中的启动页、引导页、注册 【登录】和 搜索 ，本篇文章谈谈导航部分。 同样，我们先来看看导航的定义。所谓的导航指的是：引导用户访问 APP的栏目、菜单、分类等布局结构形式的总称。 也就是说 ，导航主要是引导用户 ，告诉用户怎么找到自己想要的信息或 完成用户自己想要完成的任务。可见，导航在一个APP中的重要性是非常 高的。导航设计的合理性关系着用户是否能够找到信息和完成任务。 那么 ，导航设计究竟应该如何做呢？这个说实话 ，不同的APP ，导航设 计既可能是相似的 ，也可能是完全不同的。因此，导航设计究竟应该如何做 的答案只能是：根据APP的情况来定。 不过 ，虽然我们不能给出一个标准答案说 ：APP导航这样设计就可以了。 但在众多的APP导航设计中，我们能够找到一些常见的设计模式，以此来 作为一个参考，辅助我们的APP导航设计。 下面，我将就APP导航设计的常见模式进行一个总结。 首先 ，我将定义一个叫做原始导航的导 。原始导航是一个最最粗糙的 导航，通过纯文字的链接入口来导航。如下图： 看到原始导航，是不是觉得弱爆了，怎么可能有这样的导航呢？所以 ， 我把它定义为原始导 ，然后在此基础上通过不断的演变来形成我们常见的 导航模式。 一、标签导航（选项卡导航） 有了原始导 ，你可能会说 ，原始导航这种入口的摆放方式太占空间了 ， 就五个入口就占据了整个界面。有没有一种更加省空间的导航模式呢？当然 有。 首先 ，我们将五个入口放到界面的下方 ，就会形成常见的底部标签导 。 通常，底部标签导航有3～4标签，一般不会超过5个，有更多的选项 操作时可将最后一项设置为更多 ，将一些次要功能放置在更多里。这是一种 非常常见的导航模式。如果你的应用需要用户频繁的在不同分页切换 ，可以 采用这种导 。虽然它还是会占用一定的界面空间 ，但比起原始导航来说好 多了。现在很多APP （包括iso和android）都在用这种模式。 当然 ，如果你在五个标签中 ，有一个标签是最重要或最频繁使用的 ，想 要重点突出，可以使用下面变形的底部标签导航。 这种底部标签导航模式并不常见 ，但在一些APP中还是可以看到它的应 用。比如微博的底部标签导航。 其次，我们将标签放到界面的上方，就会形成常见的顶部标签导航。 顶部标签导航在iosapp中一般当作二级导 。在androidapp中，这 种导航模式以前被用作一级导 ，但自从google推出了 “抽屉导 ”作为 一级导航后，顶部标签导航就被常用为二级导航了。 作为一个二级导航，顶部标签导航应用于多种情境下，可以固定数量 ， 展示有限的几个标签。也可以扩大一定的数量 ，变成向左滑动展现更多标签。 甚至可以像网易新闻那样 ，衍生出订阅功能。顶部标签导航也是一种非常常 见的导航模式。 二、抽屉导航 说完标签导 ，你可能会说 ，我是有六七个导 ，但其中只有一个导 是主要的 ，别的虽然有用 ，但用户非常非常少用。这种情况下能不能只显示 主要的内容，其它导航隐藏起来呢？这样还可以更近一步地节省页面空间。 当然可以。在这种情况下你可以使用抽屉导航。 抽屉导航是将菜单隐藏在当前页面后 ，点击导航入口即可像拉抽屉一样 拉出菜单。这种导航的优点是 ：节省页面展示空间 ，让用户将更多的注意力 聚焦到当前页面。比较适合于不那么需要频繁切换内容的应用 ，例如对设置、 关于等内容的隐藏。缺点是 ：对于那些需要经常在不同导航间切换或者核心 功能有一堆入口的app不适用。抽屉导航设计需要注意的是一定要提供菜 单画出的过渡动画。 四：下拉导航 讲完抽屉导航后，还有另外一种类似的导航模式同样可以节省页面空 间，并且隐藏次要入口，这就是下拉导航。 下拉导 ，与抽屉式导航的目的相同 ，都是为了突出内容。一般位于产 品顶部 ，通过点击呼出导航菜单。导航菜单以浮窗形式位于界面上层 ，可通 过点击导航菜单以外的区域使其收起。下拉导航的菜单与界面的连贯性比抽 屉式要好 ，容易让用户感知当前位置。但由于是位于屏幕上方 ，相对隐蔽而 且不能结合手势操作 ，所以该菜单形式也不适合于频繁的切换功能使用。考 虑到导航菜单的可用面积较小，所以一般采用列表的形式展示菜单内容。 下拉导航有一种比较常见的变式，就是下来菜单中展示两级甚至多级 （一般就是两级，没见过更多的