位置：首页>> 网络编程>> 网页设计>> Tab(选项卡)的产品设计原则及应用[译]（2）

Tab(选项卡)的产品设计原则及应用[译]（2）

作者：西乔　来源：西乔的九卦　发布时间：2009-07-09 19:05:00　

标签：产品设计,应用,tab,选项卡

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

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

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

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

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

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

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

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

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

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

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

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

投稿

猜你喜欢