（翻译）模块标签（ Module Tabs）

问题概述

    将内容分为多个部分，然后通过平面导航结构来访问其中的每一部分，选择平面导航结构的某一项时不需要刷新网页。

示例

用途

• 用于当可视空间有限并且内容需要被分为多个部分时；

• 用于内容包含2~9个部分并且需要平面导航模式时；

• 用于需要通过避免页面刷新来保持用户注意力时；

• 用于每部分的名称都相对较短时；

• 用于每个标签的内容都彼此分开并互不影响时；

• 用于每个标签的内容都结构类似时；

• 用于需要显示当前查看的是哪个标签的内容时；

• 当每个标签中的内容在独立的网页中也可以正常运行时，不要使用本模式。[1]

解决方案

• 在一个内容框（内容区域）中显示一个标签关联的内容；

• 在内容区域上方放置一个水平条，并在水平条中用超链接来表示标签；

• 避免在顶部水平条中出现多行超链接标签；

• 使用颜色或其它可视化手段来指示当前在被查看的标签；

• 在同一个内容区域中显示每个标签中的内容；

• 同一时间内只能有一个内容区域可见；

• 当点击一个新的标签后，在顶部水平表中保持相同的结构[2]；

• 当用户点击一个新的标签后，只有顶部水平表和内容区域需要变动；

• 如果可能，当点击标签时不要刷新网页；

• 当点击标签时不要加载新网页。

说明

  导航标签模式是桌面比拟的一种扩展，也就是用GUI元素表示物理对象，该模式来源于文件柜中的文件夹概念，因此终端用户对其比较熟悉。

  本模式采用一种简便的方式来显示大量结构相似的数据，这些数据根据不同的类别来分类[3]。

  标签与内容相关联，当选中标签时，与其相关的内容被加载到内容区域中[4]。

原文地址：http://ui-patterns.com/patterns/ModuleTabs

[1]原文：Do not use when the content inside each pane would function just as well in its own separate page.

[2]原文：Maintain the same structure of the top horizontal tab bar after a new tab has been clicked

[3]原文：Module Tabs provide an easy way to show large amounts of similar structured data parted by categories

[4]原文：Tabs create a context for content, when a tab is selected the relevant content is loaded inside the content area.