Module Tabs(也称选项卡，后文中简称Tab，以便更符合中国设计师的日常叫法) 是一个常见的交互元素——将不同的内容重叠放置在某一布局区块内，重叠的内容区里的每次只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签上，来请求显示该层内容区。

译注：本文中指的是狭义的Tab，指在界面的某一版块区域内所应用的Tab设计。实际上，绝大多数网站导航也是Tab的一种应用。）

 

web界面的设计趋势是缩短页面屏长，降低信息的显示密度，但同时又不能牺牲可视的信息量。在这种趋势下，Tab 这种交互元素成为了一个越来越普遍的应用。例如在Blog界面的设计中，人们在侧边栏使用Tab模式来显示 ”最新更新|最热更新“ 的文章列表以引导用户快速跳转到文章内容页，这种模式令页面结构紧凑同时在视觉上不那么喧宾夺主。

本文将讨论基于web页面或其它web应用中如何设计Tab，同时分享一些产品设计原则、真实的应用案例、教程以及一些能帮助你直接实现Tab应用的免费脚本。

 

分析Tab元素的构成

 

为了统一叫法以便于进行讨论，我们先花时间来认识一下Tab元素的每个构成部分。

 

• 标签：用户控制切换内容区的操作区域。


• 标签和内容区在视觉上看起来应该是一个整体。


• 标签上的文字应该简洁、无歧义并能准确描述出它所对应的内容区的信息特征。


• 标签有选中和未选中两种状态，每次只能有一个标签是选中状态，在页面刚载入时，默认第一个标签是选中状态。


• 内容区：Tab元素中重叠的区块。用于显示信息内容。


• 内容区和标签一一对应，


• 当前显示的内容区对应选中状态的标签，当前隐藏的内容区对应未选中状态的标签。


• 用户应当能很轻易地通过控制标签来切换对应的内容区。


• 默认被选中的内容区应该在页面载入后立即显示。