交互设计师设计APP（三）—浅谈界面导航

前文说到多设备的导航差异，导航是界面的核心框架，再扩展聊一下。

一、Question

1、什么是导航？

2、app上有哪些导航？优缺点是什么？

3、PC端与手机端导航区别。

二、Answer

1、什么是导航？

导航是指路利器，没有导航就容易迷路，如下图某商场导航，采用商铺编号标记位置，但每个商铺编号很难发现。地板天花板都无指引。一进去就陷入我在哪？怎么去哪的困境。这导航看似酷炫实则不及格，想出去只能用最原始的方式询问。当然或许商家是故意让你醉生梦死的留在商场里逛吃逛吃。

商场导航图

导航是路标，指引人在哪，还可以去哪，怎么去那。对应界面设计导航就是可点击的链接按钮图片，暗示可通行，指引到达目的地。导航信息以某固定原则被组织，该原则像一串线把所有信息连接起来，形成的路径如下4种形式。如何去设计轨迹，轨迹之间如何互相传递信息，轨迹是否有缠绕，走出去的路又如何回到起点，是导航需解决的问题。

导航的4种结构

每一类导航都与现实世界有紧密都映射关系，給用户提供清晰都指引，快捷操作。

1、首页——解决有哪些路，可以去哪的问题。

2、第二层页面顶部导航——解决当前在哪，怎么回去，回到哪去的问题。

3、复杂产品——页面跳转次数多，就该解决有没有近路的问题，比如淘宝去到详情页后有全局操作按钮可以快速回到首页／购物车。

顶部导航都几种形式：1.箭头+上一页名称／2.单独箭头／3.箭头+返回／4.tab标签／5.顶部导航个性展示形式比如默认用图片宣传，下滚之后显示当前页面标题如云音乐。

整体来说导航就是为了解决如上几个问题，在形式上可以做变通设计。

导航界面与现实世界的映射关系

2、app上有哪些导航？优缺点是什么？很多书与文章写得很好，推荐：

———总结导航点／线／面，动静等特性，讲导航的优缺点比较齐全多文章 http://www.woshipm.com/pd/235540.html

———讲解导航在优缺点上理论依据更充分《移动设计》出自阿里系作家实战性较强，我有PDF版本有需要可以联系我。

——-讲移动导航比较早的经典书籍《移动应用UI设计模式（第2版）》。

app主要导航比较

导航信息设计是一种等级式设计，界面空间相当于一块饼，谁分的多谁的级别高，谁离得进谁的级别高。按照用户熟悉理解的方式进行分类，并建立等级层次关系，权衡考虑的因素很多：产品的核心价值、熟练程度、使用频率、使用情景。步骤数越少等级越高，数据内容呈现越多等级越高。

3、PC端与手机端导航区别。

——屏幕空间导致样式不同，对应的命名的方式不同

Web端导航分为：全局导航／区域导航／关联导航／标签导航，大多以区域范围命名。一页可以包含如上所有导航。手机导航以形态命名，如上图总结。一页可以只有导航。

——容纳的信息量不同，对应深广度不同

PC端可容纳如上4个导航模式：浅广，浅窄，深广，深窄。PC端浅窄的结构在手机端都可能深广。而手机端碎片化的使用场景难以完成连续操作的工作，手机应是PC端端减法，仅推荐浅窄模式。将PC端简化保留重要元数据，次要的或不重要的不显示或合并显示。只容纳核心功能，非核心功能指引PC端完成。

——新开页面方式不同，对应回家的方式不同。

PC端网页界面链接打开方式通常是刷新页面或新开浏览器tab页，如需回到原点，可以点击logo，点击面包屑，或关闭新开tab页。而手机端大多通过《返回》按钮回到上一页，层级多时返回的按钮越长越易迷路，且移动端碎片化场景下易中断。部分层级较深的页面应适当增加全局按钮，提供一键返回，像淘宝在详情页提供首页，消息的菜单方便快速切换。

写在最后

产品依据《用户体验要素》战略层－范围层－结构层－框架层－表现层的思路设计，导航是信息架构的分析结果呈现，是商业价值与用户需求的平衡。产品画风／语言可逆推产品姿态与价值观。设计师要做到有逻辑的设计，设计导航首先是对信息架构的理解其次才是不同终端上的表现形式。下次有能力再来浅谈信息架构，本次先推荐文章。1.讲解《web信息架构》较详细的文章http://www.woshipm.com/pd/78371.html；2.如何简化已有导航https://www.jianshu.com/p/0c2cc11e6188