Tab(选项卡)的产品设计原则及应用[译]（2）
作者：西乔 来源：西乔的九卦 发布时间：2009-07-09 19:05:00
一、什么情况下应用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段简短的文字这种形式。
0
投稿猜你喜欢
- 为什么会有这个需求呢？有没有发现在国外的一些网站，当你向上滚动时，导航条浮动在顶部位置。用户如果是想看内容就可以直接点击到达，省去很多拖动的
这是 COMSHARP CMS 团队翻译的2009年海外Web设计风潮的第二部分，着重讲解了反 Box 式布局，单页布局，多栏布局，巨型插图- 本文实例为大家分享了python将两个txt文件内容合并的具体代码，供大家参考，具体内容如下分析: 先分别将两个文件中的内容读入列表中,再将
- Windows下将gvim8配置为Python IDE大概分为以下四步，每步介绍的都非常详细，一起看看吧。1.准备工作将下面的安装包或者文件
- 安装：pip install wave在wav 模块中 ，主要介绍一种方法：getparams()，该方法返回的结果如下:_wave_par
- CKEditor官方演示是有上传图片和浏览服务器文件功能的，但是我们自己下载回来的却没有这两个功能…… 其实还需要下载另外一个组件：CKFi
- 调用Windows API锁定计算机本来想用Python32直接调用，可是没有发现Python32有Windows API LockWork
- 前言：分区是一种表的设计模式，通俗地讲表分区是将一大表，根据条件分割成若干个小表。但是对于应用程序来讲，分区的表和没有分区的表是一样的。换句
- 索引概述介绍索引（index）是帮助MySQL高效获取数据的数据结构(有序)。在数据之外，数据库系统还维护着满足 特定查找算法的数据结构，这
- Python作为一种脚本语言，其要求强制缩进，使其易读、美观，它的数据类型可以实现自动转换，而不需要像C、Java那样给变量定义数据类型，使
- 1.什么是Blazor? 有什么优势？ASP.NET Core Blazor 简介Blazor 是一个使用 Blazor 生成交互式客户端
- PIL vs PillowPIL: Python Imaging Library，是python的图像处理库。由于PIL不兼容setupto
- 这篇文章主要介绍了python matplotlib饼状图参数及用法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考
- 企业管理器中的Tools，Database Maintenance Planner，可以设置数据库的定期自动备份计划。并
- 本文实例讲述了php常用字符串长度函数strlen()与mb_strlen()用法。分享给大家供大家参考，具体如下：int strlen (
- 文章是从stackoverflow翻译过来的，原文地址：Relative imports for the billionth time本文要
- 一、传入的参数类型要求不同：1、 file.write(str)需要传入一个字符串做为参数，否则会报错。write( "字符串&q
- 解决方法：先encode再quote。原理：msg.encode('utf-8')是解决中文乱码问题。quote()：假如U
- 1. 路由概念路由的本质就是一种对应关系，根据不同的URL请求，返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路
- 一、硬件要求首先，TensorFlow-gpu不同于CPU版本的地方在于，GPU版本必须有GPU硬件的支撑。TensorFlow对NVIDI
