Tab(选项卡)的产品设计原则及应用[译]
作者：西乔 来源：西乔的九卦 发布时间：2009-07-09 19:05:00
Module Tabs(也称选项卡，后文中简称Tab，以便更符合中国设计师的日常叫法) 是一个常见的交互元素——将不同的内容重叠放置在某一布局区块内，重叠的内容区里的每次只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签上，来请求显示该层内容区。
（译注：本文中指的是狭义的Tab，指在界面的某一版块区域内所应用的Tab设计。实际上，绝大多数网站导航也是Tab的一种应用。）
web界面的设计趋势是缩短页面屏长，降低信息的显示密度，但同时又不能牺牲可视的信息量。在这种趋势下，Tab 这种交互元素成为了一个越来越普遍的应用。例如在Blog界面的设计中，人们在侧边栏使用Tab模式来显示 ”最新更新|最热更新“ 的文章列表以引导用户快速跳转到文章内容页，这种模式令页面结构紧凑同时在视觉上不那么喧宾夺主。
本文将讨论基于web页面或其它web应用中如何设计Tab，同时分享一些产品设计原则、真实的应用案例、教程以及一些能帮助你直接实现Tab应用的免费脚本。
分析Tab元素的构成
为了统一叫法以便于进行讨论，我们先花时间来认识一下Tab元素的每个构成部分。
标签：用户控制切换内容区的操作区域。
标签和内容区在视觉上看起来应该是一个整体。
标签上的文字应该简洁、无歧义并能准确描述出它所对应的内容区的信息特征。
标签有选中和未选中两种状态，每次只能有一个标签是选中状态，在页面刚载入时，默认第一个标签是选中状态。
内容区：Tab元素中重叠的区块。用于显示信息内容。
内容区和标签一一对应，
当前显示的内容区对应选中状态的标签，当前隐藏的内容区对应未选中状态的标签。
用户应当能很轻易地通过控制标签来切换对应的内容区。
默认被选中的内容区应该在页面载入后立即显示。
0
投稿猜你喜欢
- 当然可以，我们使用强大的fso对象来获取文件夹的大小请敲入如下代码即可：<％Set MyFileSize =&nb
- 最近没事，写了个在项目经常要取城市或省份名的方法，所以改成了一个类．方便以后调用//****************************
如果不是因为总监审查严格，一定要求这个细节解决掉，也许我也不会去深究根源性的解决办法，再此感谢MTIME负责而严格的同事。首先描述一下问题：- 我有个MM在网上面安了家，想做一个关于特效的网站。她虽然懂一点网页制作，但是她的机器配置比较低，有时为了反复试验页面上一些特殊效果，而打开D
- 迄今为止，导出/导入工具集仍是跨多个平台转移数据所需劳动强度最小的首选实用工具，尽管人们常常抱怨它速度太慢。导入只是将每条记录从导出转储文件
- 采集中 或者 在线添加文章中 都可以用到此功能俺自己在baidu上搜索的保存远程图片到本地的代码 感觉比较难用点 而且没有现成的比较全的代码
- 本文回答了如下问题：“MySQL服务器有多稳定?”，以及“在本项目中我能依靠My
- 两组字符串数据，需要比较其中相同的数据，并将其值相加并组成一个新的字符串数据a1="sp2=20;sp1=34;"a2=
- 数字函数 ABS():求绝对值。 CEILING():舍入到最大整数。 FLOOR():舍入到最小整数。 ROUND():四舍五入 ROUN
- <％ dim week_ymd(8) '测出可以手动设定日期,比如this_ymd=#2008-04-1
- MySQL GUI工具很多，本文就常用的Navicat for MySQL与MySQL-Front的特色功能做一个详细介绍与比较。(一)My
- 不夸张地说，XML正在接管这个世界，正在成为今天一切Web服务和大多数SOA的基础。XML本身并非一种技术，而是程序设计语言，可支持开发者为
- EXISTS该函数返回集合中第一个元素的索引，如果集合为空，返回NULLNULLNULLCollection.EXISTS(index)CO
- SQL语句参考及记录集对象详解1. ASP与Access数据库连接：2. ASP与SQL数据库连接：建立记录集对象：set rs=serve
- 相关验证码文章：asp制作验证码的方法 轩魂ASP中文验证码下载 先产生一个4位数的随机码源代码：ychar="0,1,2,3,4
- JavaScript游戏开发之键盘控制层的移动截图：<html> <head> <meta http-equi
- gzip 是什么东东呢？百科跟我们说gzip是GNU zip的缩写，它是一个 GNU 自由软件的文件压缩程序。…gzip 的基础是 DEFL
- 其实这个问题落伍谈了n次了其中care4也说了两次所以如果你有问题最好先搜索一下 说不定问题早有人解决了http://www.im286.c
- 无论是在小得可怜的免费数据库空间或是大型电子商务网站，合理的设计表结构、充分利用空间是十分必要的。这就要求我们对数据库系统的常用数据类型有充
- 最近，为了能在数据库服务器中运行其他应用程序，在保持数据库操作系统版本不变的前提下对数据库服务器进行了软、硬件上的升级。在软件上，将操作系统
