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

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

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

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

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

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

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

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

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

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

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!