壹佰大咖说｜精准定位三大类移动应用导航设计，案例实战全解析

本文整理自壹佰讲堂第68期，由1905电影网成都产品总监张崟倾情分享。

想要查看视频回顾？

想要获取分享课件？

戳这里快速获得哦~

手机不仅是信息的工具，甚至成为了人们的一部分，其打破了时间和空间的限制，这也是移动趋势渗入我们工作和生活的魅力。

而导航就是手机应用的灵魂，而灵魂的好坏，也决定了产品所传达给用户的体验好坏。在如此狭小的空间中，我们想要去驾驭其手掌方寸间的空间，作为优秀的产品经理，就要为自己的产品设计最优秀的导航。

良好的导航会让用户觉得方便好用，也能够让用户降低学习成本，因此所有的导航设计，包括产品架构设计都要站在用户的角度来着想。

介绍移动应用的导航种类前，先回顾一下这几年来整个移动交互设计的发展：

5、6年前国内的移动交互设计才开始萌芽，逐步走向专业化，在那个阶段，行业内大家那个时候大家对于版权的意识还不强烈，有可能今天你的产品上线了一个独树一帜、颇受用户好评的设计，第二天就在应用海中看到和你一样的设计出现。而我们整个行业经过快速的发展，移动应用已是一片广袤的红海了。现在的交互设计、框架设计已经相对成熟了，可复制性强，可用性也很高。所以要从交互层面来讲，微创新很困难。用户也从关注产品本身的服务，到更关注产品体验了

1. 全局导航

各个选项一目了然：

跳板式、卡片式、列表菜单式、仪表式、陈列馆式、选项卡菜单式、隐喻式。

2. 瞬时导航

需要通过点击或手势才能清楚显示：

侧边抽屉式、下拉菜单式、转盘菜单式。

3. 次级导航

其它主导航模式也可用于次级导航模式：

翻页式、滚动选项卡式、伸缩面板式。

以上图片中所举出的导航样式，正是目前很多产品典型的导航样式，同时也基本上囊括当前移动APP的所有导航设计。

1. 跳板式导航：

2011年左右比较流行 ，移动端模式时期和可放置多个选项卡造就了跳板式导航。目前仍然有很多应用使用这种导航。

其缺点也很明显：所有选项都被扁平化，没有优先级。而抽屉式模式的导航容纳的选项还可以更多 。适用于功能扁平化的产品。

侧边抽屉式：交互与动态类似于生活生推拉抽屉的样式，扩展性很强。

转盘菜单式：典型案例——中国建设银行APP，比较少见。

选项卡和跳板式：支付宝，对于这种功能丰富的产品，主导航和次级导航的结合，可以把优先级和层级划分清晰，对于用户来讲，易用性很高的优秀设计。

2. 列表菜单式导航

列表菜单式导航在国外的产品中比较常见，列表菜单式中的每一个列表项都是进入该应用各项功能的入口，这一点和跳板式导航比较类似。

在设计层级结构的应用导航时可考虑列表菜单式。这种模式对于列表项名称较长的菜单，以及列表项既要有名称又要有描述的菜单都可使用。

3. 仪表盘式

仪表盘式的导航，让用户一眼就能看到他最需要的信息概览，而不用转到另一个页面。

在需要使用关键指标或数据作为应用入口的时候，可以采用仪表盘式，但不要在单一页面载入过多的信息，对于要展示的关键指标或数据需经过仔细研究再做判断。

4. 陈列馆式

陈列馆式设计模式最适合呈现经常更新、视觉效果直观的无层级内容。呈现实时内容，比如新闻、菜谱、照片，可采用网络布局或轮盘布局，还可以采用幻灯片模式进行展示彼此独立的内容项。

因此在使用这种导航时，要尽力将图片的优点利用到极致。

5. 选项卡菜单式

选项卡菜单式主要可用于让用户从一个主要类别切换到另一个主要分类。目前其也是所有移动端导航中占比较高的类型，可以方便的在不同视图间进行浏览和切换 场景，降低用户操作成本，让用户清楚地知道有哪些可选择的视图 。适用于预计用户会经常切换、固定选项卡有限的情况。

6. 隐喻式菜单

隐喻式的菜单，顾名思义，就是用设计模仿应用的隐喻对象，很多时尚杂志、书籍、股票APP等经常使用。

但是建议大家慎用隐喻式导航，蹩脚的模仿可能会标新立异，但是很容易走向反模式。

以上就是比较典型的全局导航案例，现在大家头脑中应该形成了较为直观、体系化的思路，能够很清楚的明白不同的产品适用于什么样的导航。接下来，我们来看看瞬时导航。

1. 侧边抽屉式

手机QQ就是抽屉式导航的典型案例

在我们诸多产品的运用中，其实已经把用户的习惯培养起来了。

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!