网页|网页选项卡TAB设计原则和应用案例 -东北IT网

网页选项卡TAB设计原则和应用案例

http://www.dbit.cn　2009/7/10 8:29:55 　来源:东北IT网　编辑:叶子

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

　　译者：西乔来源：Smashing Magazine 作者：Jacob Gube

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

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

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

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

　　分析Tab元素的构成

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

　　 css

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

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

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

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

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

　　内容区和标签一一对应，

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

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

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

　　一什么情况下应用Tab设计

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

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

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

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

　　 css

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

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

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

　　 css

　　另一个反面案例：网站 Best Web Gallery 在它侧边栏上所放置的Tab，标签分别是 ”特别推荐“（包含了一些网站所有者认为值得注意的链接）和 “最新评论”。这两组信息之间并没有逻辑联系，用户会很疑惑为什么这两者要放在一起呢。所以这个Tab中的两组信息最好分开放置。

　　 css

　　每个内容区应该有一个简短明确的标题。

　　Tab元素的标签区宽度是有限的，所以标签区的文字应该简洁扼要，具有代表性，长度控制在1~3个英文单词。用精炼的方式展示信息，除了保持设计样式不变形外，还可以让用户更快速地处理文字信息，用以预测隐藏区域上所包含的内容。

　　Tab应该用于展现精炼的内容。

　　Tab本意用于展现标准化和易于理解的信息。基于此，Tab应该只用于显示信息摘要和内容要点，例如列表，数据图表，或1~2段简短的文字这种形式。

本新闻共5页,当前在第1页 1 2 3 4 5

【收藏】【打印】【进入论坛】

·网页游戏再遇资本扎堆押注竞争门槛大幅提升

·网页游戏急速发展 3年内市场规模翻近10倍

·网页游戏广告色情泛滥：流氓用语加暴露妙龄

·网页游戏遭遇困境：生命周期短玩家流失率高

·消息称九城与盛大将联合运营网页游戏

·迅雷否认推首款自主研发网页游戏坚持联合运

·网页游戏首遭叫停 VC更加望而却步