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
投稿猜你喜欢
- 本文实例讲述了python实现的config文件读写功能。分享给大家供大家参考，具体如下：1、设置配置文件[mysql]host = 123
计划任务工具-windows计划任务工具根据自己设定的具体时间，频率，命令等属性来规定所要执行的计划。效果图代码# -*- coding:- FCKeditor的样式设置涉及到了两个文件，一个是你定义好的样式表文件.css，另一个是告诉fck样式表如何使用的xml文件，两个文件确一
- 测试语法如下：powered by jb51.netexec GetRecordFromPage news,newsid,10,100000
- 2009年 6月6日,空间4岁啦！与此同时Qzone月登录用户2亿，同时在线用户也突破了1000万。这是让人欢欣雀跃的数字，在空间同事眼里，
- 针对这种情况，人工智能自动SQL优化工具应运而生。现在我就向大家介绍这样一款工具:SQLTuning for SQL Server。1. S
- 本文以实例分析了Python中asyncore模块的原理及用法，分享给大家供大家参考。具体分析如下：asyncore库是python的一个标
- 1. 为什么要使用协程在上一篇中，我们从生成器的基本认识与使用，成功过渡到了协程。但一定有许多人，只知道协程是个什么东西，但并不知道为什么要
- 我们在.NET程序的开发过程中，常常需要和用户进行信息交互，比如执行某项操作是否成功，“确定”还是“取消”，以及选择“确定”或“取消”后是否
- 因为函数或类都是对象，它们也能被四处传递。它们又是可变对象，可以被更改。在函数或类对象创建后但绑定到名字前更改之的行为为装饰(decorat
- 在面向对象的理论中，有两个核心的概念：类和实例。类可以看成是一个模板，实例就是根据这个模板创建出来的对象。但在 Python 里面，类和实例
- 本文实例讲述了mysql实现合并同一ID对应多条数据的方法。分享给大家供大家参考，具体如下：如 ：CREATE TABLE `c_class
- golang 1.7版本中context库被很多标准库的模块所使用，比如net/http和os的一些模块中，利用这些原生模块，我们就不需要自
- 如何修改NT的登录密码？ 代码见下：<％Sub ChangeUserPassword(C
- golang并没有像C语言一样提供三元表达式。三元表达式的好处是可以用一行代码解决原本需要多行代码才能完成的功能，让冗长的代码瞬间变得简洁。
- 视频加密流程图:后端获取保利威的视频播放授权token,提供接口api给前端参考文档:http://dev.polyv.net/2019/v
- 目录openpyxl介绍openpyxl安装openpyxl基本概念openpyxl对excel进行操作新建excel打开已存在的文件读取单
- 本文也是开发项目中的一个小经验Tip，虽然很简单，但对很多朋友也有小帮助。我们实际工程中，可能遇到开发环境、预上线环境、线上环境等环境场景，
- 描述max() 方法返回给定参数的最大值，参数可以为序列。语法以下是 max() 方法的语法:max( x, y, z, .... )参数x
- Python是一种面向对象的语言，但它不像C++一样把标准类都封装到库中，而是进行了进一步的封装，语言本身就集成一些类和函数，比如print
