鸥米

导航样式帮助用户在不同页面间跳转，并了解自己的位置。

·标签导航Tabs

基于功能和用例将信息拆分为有逻辑的各部分。

用户可在不离开页面的情况下，轻松在tab页签之间切换来完成工作。依据最重要的用例设计一个tab的默认模板。每个部分的tabs定义的功能是各不相同的，所以不要使用tab来定义直线式安排好的的流程。

tab的名称应该保持一致性，例如都用名词或都用动词。

如果tabs不适合放在垂直空间内， place the tabs that don’t fit into an overflow menu that sits in the last tab position. Selecting a tab from the overflow menu should replace the last fully visible tab in the ribbon. The tab that was replaced should go into the tab overflow menu in the topmost position.（？）

·全局tab

全局tab能切换下方所有内容。

·范围tab

范围tab影响所处板块内的内容。

·嵌套tab

并不是最理想的处理方式，但有时是需要的。可以在全局tab内嵌套tab，但不要嵌套一个全局tab。如果需要展示多层级，考虑使用树状图。

·树状图

帮助用户在不需要展开加载路径上每个页面的基础上找到目标子页面的链接。在组合页面时，需要认真考虑用户的心理模型。

可以结合面包屑使用树状图。

树状图理论上来说时可以有无限嵌套的，但不推荐过多嵌套。扁平树状图更容易导航。

并非每个节点都需要对应一个页面，你也可以使用没有链接页面的标签来将相关页面组合在一起。

·面包屑

面包屑帮助用户导航回一条线上各层级的页面。

面包屑展示的是层级路径（父子关系），而不是用户的浏览历史。当用户直接点击链接进入某一页面但想要去该页面的父页面时，面包屑就很重要了。面包屑也告知用户他们处在应用的哪个位置。

面包屑通常与树状图一同使用。面包屑展示不要超过三级，超过的使用缩略图标，如下图。

·模态弹窗

当希望用户在原始页面背景下专注于完成某一特定任务时使用模态弹窗。

模态弹窗让用户不与其他页面元素产生交流。一个典型的用例是展示一个表格让用户输入或编辑数据。你也可以使用模态进行直线型导航。

模态有三个部分：头部、内容和底部。

头部——包含题目和可选文案。标题需要与按钮呼应。文案可包含链接。

内容——任何类型的内容都可以：表格、文案、音频或其他媒体。用于引导的模态可以增加一个步骤条来告诉用户进度情况。

底部——包含引导和操作按钮。操作按钮比如保存、关闭、删除在右侧。将最基本的按钮（引导用户默认去向的按钮）放在最右边。向导式模态，将下一步和返回按钮放于相对应的两边（左返回，右下一步）。

大小占据用户视图的50%。如果内容很多需要很多横向空间，可以使用大型模态，占据90%视图。最小和最大宽度用以防止太窄或太宽。

模态高度取决于内容高度。最大高度取决于外部空白。如果内容高于模态窗口，允许用户在窗口内滚动。头部和底部固定。