界面设计模式第三章，导航用途、设计模式和注意事项。

3 到处走走：导航、路标和寻路

导航用于：

提示用户所处位置
提示用户如何找到目的地
提示用户怎样快速到达目的地
遵循少就是多原则

3.1 不要迷路

路标（Signposts）可以帮助用户找到所处位置环境，包括页面标题、窗口标题、网页标识、有标记的设备、Tab、选择指示器等。
全局导航、本地导航、序列地图、面包屑层级结构、注释滚动条等模式会告诉用户当前位置和下一步操作在哪。

良好的标记：在需要决定下一步怎么做的地方（入口点），提供表意清晰的标记或标签
环境线索：根据文化和操作系统等环境因素，在界面设置相应的按钮、Logo、模态面板等环境线索
地图：提供序列地图让用户知道自己所处大背景中的什么位置

3.2 导航的代价

用户在进入网页或窗口时会造成认知代价（外观、布局、内容、出口、标签、按钮）
单击不确定按钮时会有心理负担
载入等待时间会影响用户决策。

让距离保持简短：

当一个常见任务要多个页面的跳转时，尽量把它减少到1～2次
很少用到的功能可以隐藏到深层级的页面
在有疑问的时候进行可用性测试

3.3 常见导航模型

相关术语：

全局导航：用户在整个网站导航结构中移动的方式，通常以菜单、tab、侧边栏等形式表现
实用导航：和网站内容无关的链接或工具，如登录、帮助、打印、设置等
关联/内联导航：相关推荐或内容网页的快捷链接

(1) 中心和辐条

将网站所有主要部分以辐条/标签形式列在首页（首页），大部分出现在移动设备中，如首页菜单

(2) 充分链接

常见网站模型，拥有1个首页，所有子页面彼此互联，每个页面都有全局导航元素，用户可以从任一子页面跳到其它页面，比多级导航更受欢迎

(3) 多级导航

常见网站模型，主要子页面彼此互联，更低层级页面只与其对应上级页面相通，需要2次或2次以上跳转才能从一个子页面跳到另一个子页面，可转换成充分链接导航

(4) 渐进模型

用一组预先定义顺序的界面引导用户按步骤操作，后退/前进是该类型页面的重要元素

(5) 金字塔模型

渐进模型变体，1个中心页面列出所有子页面，用户可以任意选择子页面，也可以通过前进/后退按顺序访问子页面，同时可以退回中心页面

(6) 平移和缩放

提供平移、放大、缩小控件，重新定位某个位置和状态

(7) 扁平导航

通过菜单、工具条使用，这种模式下用户知道自己的位置，但因为能访问的工具太多，不容易找到需要的工具

(8) 模态面板

引导用户到没有导航的界面，提供界面信息，表单或关闭界面方式，常出现在页面或屏幕上方，用于小规模但需要用户集中注意力的任务

(9) 清楚的入口点

帮助初次访问或新手用户减少网站的学习负担

(10) 书签

书签快速定位页面，帮助用户减少链接和跳转次数到达目的页面

(11) 逃生舱

当用户进入网站链接层次太深或错误状态时，提供良好标记的链接帮用户回到熟悉的位置

注意：

网站模型常混搭使用，其中模态面板、入口点、标签、逃生舱为局部模式，不会影响网站基本导航策略
根据页面空间和功能选择合适模型，减少用户认知负担
在页面布局设计前，考虑全局导航模式以及模态显示的内容

3.4 网站设计习惯用法

将导航使用的模型和视觉表现分开设计（先模型后视觉）
全局导航经常出现在网页顶部和左边，右侧会因为页面大小和横向滚动条出现问题
使用胖菜单/页头页脚站点地图可以提示用户所处网站位置和层级结构，将多级导航转换成充分链接导航
网站大部分用户为登录用户时，网站可能在右上角提供实用导航
新闻或博客网常见关联导航区域
标签有助于管理导航、相关文章或链接
利用社会化媒体丰富导航方式，如最新主题、评论最多等引导用户到相关内容

3.5 导航模式

(1) 清楚的入口点

只在界面上显示几个入口，并具有自描述性
何时使用：当网站或应用主要供新用户或不常访问的用户使用时
为何使用：为用户提供明确的起点

如何使用：

入口点需要有明确的功能描述
视觉上，根据重要程度区分显示多个入口点
入口点的显示层级比全局导航和实用导航高，应该更明显，位置靠前

(2) 菜单页面

填满通往子页面内容链接的页面，每个链接有标题注释
何时使用：作为目录，让用户知道可以去哪些页面，有效利用小屏幕
为何使用：集中用户注意力在可用导航选择上，引导用户到他们需要的目的页面中

如何使用：

移动设计时，需要精简标签列表，放大目标对象方便点选，尽量不让层级太深
网站或应用设计时，给链接设置合适标签和上下文
考虑链接的分组、层级、日期排序等组织方式
提供搜索框；
当需要增加用户粘性或宣传网站品牌价值观时，最好留一些空间展示其他推广或有趣的内容

(3) 金字塔

包括一个主页面和一组子页面，用户可以在主页面跳转到任一子页面，也可以通过前进/后退按顺序浏览子页面
何时使用：幻灯片、向导、书籍章节、图片浏览等
为何使用：减少用户访问各页面时所需的单击次数，提高导航效率，同时包含顺序性关系

如何使用：

将所有子页面按顺序在主页面上列出，并选择合适的显示方式，如缩略图网格显示图片，富文本显示文章等
在具体子页面中加入后退/前进、以及回到主页面的链接
如果没有必要将子页面变成循环列表，可以在最后一个子页面的前进链接设置为主页面，告诉用户看完所有内容

(4) 模态面板

只显示一个页面，用户未完成操作前无任何导航选择
何时使用：在需要用户提供必要信息时使用，如登录注册等
为何使用：排除用户其他所有的导航选择，集中处理当前问题，会打断用户操作流

如何使用：

提供请求和所需填写信息的面板、对话框或页面，并保持面板整洁，集中用户注意力
限制出口数量，简短标注并能使用户回到之前的页面
可以使用灯箱效果突出面板，并在视觉效果上指向引发它的链接
网站应避免操作系统级别的模态对话框，使用轻量级的覆盖技术，易控制且对用户干扰较小

(5) 深度链接状态

将网站或应用的状态以链接方式捕捉保存，可分享
何时使用：当网站或应用有大规模交互式内容，特定状态不易找到时使用，如地图、书籍、视频等
为何使用：让用户直接跳到特定状态，节省时间和精力，可分享传播
如何使用：

保存用户当前内容的位置，包括评论、数据层、标记、高亮等支持性数据
考虑是否需要保存用户设置的参数或界面状态，如缩放级别、放大倍数、查看模式、搜索结果等
文本格式比二进制格式易于管理，URL时保存深度链接状态最好的方式
当用户操作改变时，在浏览器地址栏或页面某一小区域更新URL地址，提示用户可保存

(6) 逃生舱

在限制导航选择的页面上，放置让用户离开的按钮或链接
何时使用：当用户被锁定在一个连续过程或模态面板模式时，需要提供退出按钮，当有序列地图或面包屑层级结构时可不提供逃生舱
为何使用：让用户知道自己可以安全退出这个页面，增加安全感，鼓励用户探索
如何使用：

将按钮放在页面上，让用户回到安全区域
可使用首页、中心页或有自我解释的页面
网页通常会在页面左上角放置可单击的站点图标作为回到首页的链接，加强网站品牌
对话框的关闭、取消按钮

(7) 胖菜单

下拉菜单中包含多个导航选择列表，用于显示站点模块下的所有子页面，经过分类组织后排列并横向展开
何时使用：网站或应用分类下有多个页面和多个层次结构需要展示，并且用户对下拉菜单或飞出菜单很熟悉
为何使用：让复杂的网站的可发现性更好，向用户展示更多导航选择，将多级网站转换成完全链接网站，同时渐进展开的方式隐藏了网站复杂性

如何使用：

将菜单中的子页面归类，并用标题、字母或时间进行分组说明
使用头部、分割线、充分的空白和适当图形元素，充分利用水平空间扩展菜单，避免纵向长度超出屏幕
菜单配色、网格、风格和样式与网站协调统一
确认菜单的实现机制和可访问技术

(8) 页脚站点地图

将站点地图放到网站每个页面的页脚，作为全局导航，对页头进行补充
何时使用：当网站每个页面都有富余的空间，同时也不想占用太多页头和侧栏空间进行导航，且子页面没有很多复杂分类和常访问的页面
为何使用：提高网站的可发现性，为访问者提供更多导航选择；将网站变为充分链接网站；增加用户浏览时间发现更多内容；让用户有种掌握网站结构的感觉；只需要使用一组静态链接，比胖菜单更易实现；不需要精确鼠标控制
如何使用：

页脚与页面宽度一致
包括网站主要栏目、重要子栏目（常访问的页面）、实用导航、语言选择、社交链接、版权和隐私申明等
与页面顶部全局导航互通，顶部展现网站功能，页脚展示网站层级结构
如果是内容网站，如文章、音乐、视频等，可以使用顶部作为内容导航，页脚作为其他功能展示
页脚通常包含信息：主要内容类别、网站或公司信息、合作或关联网站、社区链接、帮助支持、联系信息、当前促销信息、募捐或志愿者信息等

(9) 登录工具

页面右上角与用户登录相关的实用导航，包括购物车、个人资料、账户设置、帮助、退出登录按钮等
何时使用：用户需要经常登录的网站或服务
为何使用：右上角符合大多数用户的使用习惯和期望
如何使用：

每个页面的右上角为登录工具预留空间
登录名和头像放在工具最前面
实用工具在整个网站或应用范围的位置固定
实用工具位置不要太大或太显眼，不能占据页面主要位置，但容易被找到
实用工具可能包括：退出登录按钮、账户设置、个人设置、网站帮助、客服信息、购物车、私人消息或其他通知、收藏夹、首页
用户未登录时，可以放置登录框，包括用户名、密码、行动号召、忘记密码小工具等
可以使用下拉菜单避免让页面变得杂乱

(10) 序列地图

在一组页面的某一位置，显示该组页面的顺序和所在页面的指示器，如浏览图片底部分页控件，安装向导地图等
何时使用：用户访问路径主要是线性的（复杂的层级结构考虑面包屑层级，若步骤涉及多个元素，可变为双面板选择器或总览加细节模式）
为何使用：告诉用户已完成的步骤、当前位置和未完成的步骤，使用户保持方向感，一般允许用户通过在地图上点击返回页面
如何使用：

在页面边缘放置小的序列化页面地图
视觉上低于页面实际内容
特别处理当前位置的视觉指示器，提示用户所在位置
通常使用后退和下一个按钮
一般放在用户方便的地方，如靠近主导航控件的地方

(11) 面包屑层级结构

在层级结构的每个页面，显示所有父级页面直到主页面为止，和页面上下文有关，和用户历史路径不相关
何时使用：应用和网站层级结构超过2级，层级结构太复杂，全局导航不足以显示所在位置
为何使用：显示网站或应用的某一线形切片结构，避免显示整个网站地图的复杂性，告知用户当前位置和该页面与页面的层级关系，通常是可单击的页面或按钮
如何使用：

在页面顶部放置一行文本或图标表示当前页面和层级关系，通常使用➝、⊳、>、/、≫等来表示层级移动方向
显示的页面标题清晰，使用户清楚页面内容
让当前页面标题的外观和其他层级的页面标题（链接）有所区分

(12) 注释滚动条

让滚动条在滚动的同时，显示注释，作为当前位置的指示器
何时使用：平移-缩放界面，如文档或大型可视化元素界面，注释页码或内容标记
为何使用：为快速浏览的用户提供路标，提示用户当前位置和接下来去哪里
如何使用：

把内容注释位置指示器放在滚动条上或靠近滚动条的位置
静态指示器：不会随时间变化的指示器，意图明确，如滚动条轨迹上的色块
动态指示器：随滚动条位置改变而改变，通常以工具提示形式展现，显示和内容相关的内容，如文章页码和标题
注释的内容需要根据业务或网站的内容结构和用户来设计，如代码的功能或方法、文章的页码或标题、表格的行号、用户搜索结果位置等

(13) 动画转换

把一个突然出现或位置移动的转换用动画显示
何时使用：用户在很大的虚拟空间里移动，且部分界面可交互
为何使用：界面的放大、缩小、关闭等变化会改变屏幕布局，让用户失去空间的位置感，增加用户认知反应时间，动画让用户视觉上连贯，保持方向感，增加趣味
如何使用：

界面转换状态时设计动画，链接转换开始和结束的状态
动画应该快速准确，时间短，不要有延迟
动画仅限于屏幕上受影响部分，不要影响整个窗口
300微秒的动画在平滑滚动的时候最理想
用户测试可以了解用户对动画的容忍时间
用户连续操作引发的多个动作应结合到一次动画中
动画转换类型：变亮和变暗、展开和收起、淡入淡出和交叉淡化、自修复、滑动、探照灯

相关阅读：《Web界面设计》- Scott & Neil；