以用户为中心的设计

交互学习笔记,Tab选项卡(一)

作者:蓉儿  |   发布: (编辑)kent.zhu   |   时间:2009-07-12 01:51:18 文字大小:- +

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

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

 

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


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

 

分析Tab元素的构成

 

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

 

An illustration of the anatomy of module tabs - see the following description to learn about the anatomy.


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

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

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

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

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

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

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

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

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

一 。什么情况下应用Tab设计


当交互设计师希望节省页面空间;紧凑布局;且需要组合的几种信息之间具有关联性时,可以选择Tab应用。


信息之间具有某种关联特征


构成一个整体的每个元素之间都应该具有逻辑上的关联性。所以出现在同一个tab元素中的几种信息自己应该具有关联特征,这样用户才能将整个Tab区域视为一个整体。例如在Blog中很常见的信息组合:“ 最新更新 | 最热文章 | 评论最多 ” 。


下图是网站Webdesigner Depot的侧边栏上的Tab元素:“全部文章 | 最受欢迎 | 最新更新”


Webdesigner depot module tabs.


信息之间不应该存在对比或并行的关系


Tab元素中,同一时刻,只能显示一层内容区。当用户需要对位于不同内容区上的信息进行对比,或者这几种信息同时显示会更便于用户阅读时,就不应该使用Tab。否则会导致用户为了比对所需的信息,而不停在标签之间进行切换。


下面这个案例中,BGPatterns (一个在线制作背景图案的网站)tab就用得不是地方。当用户想设计或修改他所制作的背景图案时,必须反复在几个标签之间进行切换。Tab在这里妨碍了用户的操作。如果在页面上同时显示这4个内容区上的信息,可用性和友好度会更高。


BGPatterns misuse of module tabs.

...

 

 

更多
打印  |  相关话题:Tab页签   |  类别:信息和交互   |  源地址

UCDChina的书

《UCD火花集2》封面
UCDChina编著,定价35元
从卓越网购买 从当当网购买

《UCD火花集》封面
UCDChina编著,定价25元
从卓越网购买 从当当网购买

《应需而变——设计的力量》封面
UCDChina团队成员JunChen译,定价29元
从卓越网购买 从当当网购买

《网页设计解析》封面
UCDChina团队成员周陟著,定价62元
从卓越网购买 从当当网购买

《赢在用户》封面
UCDChina团队成员Angela译,定价29元
从卓越网购买 从当当网购买

《用户体验的要素》封面
UCDChina团队成员Angela译,定价25元
从卓越网购买 从当当网购买