说说tab设计
作者:光耀 来源:KDUED.COM 发布时间:2009-07-26 09:56:00
标签:tab,设计,淘宝
要想在不宽裕的页面展现丰富的内容,现在通用的做法使用tab,在一块区域通过tab切换来更换该区域的内容。这篇文章分析了tab设计很在理,今天我也谈谈我抓了几个案例,谈谈对tab设计的看法。
我的意见是合理的tab设计应该是这两种类型:
第1种 鼠标单击切换。此种情形下tab是没有链接的(但是在选中的tab区域内增加 更多或者more链接)。
第2种 鼠标悬浮切换。此种情况下很多tab都加了链接,所以 a:hover 应该生效,也就是鼠标停靠时有下滑下或颜色等提示。其实这也是Norman设计理念里,对于用户恰当Feedback(反馈)的实践。
在实际案例中,我们看到了一些好的设计,也有些我不赞成的设计,这里稍做分享。
案例一:yahoo美国首页,属于第1种tab设计,但是注意右下角的框框哦。
案例二:淘宝首页的tab设计有三处,但是仔细看一下,却发觉各有差异。比较疑惑的是,为什么首页只有3个tab设计,但是却各不一样呢?难道一个页面需要多个前端介入?
第一个tab设计属于单击切换,无附加链接。(顶)
第二个tab设计属于悬浮切换,但是没有 a:hover 来反馈tab上的链接。(扁)
第三个tab设计属于悬浮切换,添加了 a:hover 反馈tab上的链接。(顶)
案例三:QQ弹窗。
最不招人喜欢的QQ弹窗,tab上也没有链接反馈,相信qq.com的流量很多是被这样无辜地骗来的。(扁)
插播一段:我一直对QQ弹窗的设计有微辞,一个只能放5个tab的位置居然间接的放了7个,于是不得不多出一个左右翻滚tab的设计。至于增加一个看起来意义不大却比较显眼的 [您可以拖动该页卡进行排序] 真正价值有多少。
0
投稿
猜你喜欢
- #!/usr/bin/python import sys def left_child(node): return node * 2 + 1
- 本文实例讲述了PHP实现登录,注册及密码修改功能的方法。分享给大家供大家参考,具体如下:这里介绍注册,登录,修改密码的界面布局与功能实现:1
- 本文实例讲述了Python实现的远程登录windows系统功能。分享给大家供大家参考,具体如下:首先安装wmi 命令:pip install
- 描述给ChatGPT的描述内容:python在桌面上显示动态的文字,不要显示窗口边框。窗口背景和标签背景都是透明的,但标签内的文字是有颜色。
- Filed under 数据库技术Leave a commentSQL Server命令行导数据两种方式bcp和sqlcmd先说一下bcp:
- 这篇文章主要介绍了python基于property()函数定义属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价
- 这个主要应用于,获取用户输入的时候,防止用户不小心,多输入了一个空格,导致验证无法通过,多用于用户名跟密码的,好多情况下,大家复制的winr
- 使用session保持用户登陆连接在 view 中 login() 视图函数里增加如下语句不允许重复登录语句if request.sessi
- 1、 select top 10 * from ( select top (@Page * 10) ROW_NUMBER() OVER (o
- 本文实例讲述了Python创建xml文件的方法。分享给大家供大家参考,具体如下:这是一个使用ElementTree有关类库,生成xml文件的
- 这篇主要探讨 ** 和 * 前缀运算符,**在变量之前使用的*and **运算符.一个星(*):表示接收的参数作为元组来处理两个星(**):
- 在计算机和信息技术领域里 I/O 这个术语表示输入 / 输出 ( 英语:Input / Output ) ,通常指数据在存储器(内部和外部)
- 将SQL Server中所有表的列信息显示出来: SELECT SysObjects.Name as tb_name, SysColumns
- 1. 前言分形几何是几何数学中的一个分支,也称大自然几何学,由著名数学家本华曼德勃罗( 法语:BenoitB.Mandelbrot)在 19
- 前言自从学过存储过程后,就再也没有碰过存储过程,这是毕业后写的第一个存储过程。因为项目里设备的种类比较多,分别存在不同的数据表中,java中
- xlsxwriter 简介用于以 Excel 2007+ XLSX 文件格式编写文件,相较之下 PhpSpreadsheet 支持更多的格式
- PDOStatement::fetchAllPDOStatement::fetchAll — 返回一个包含结果集中所有行的数组(PHP 5
- 首先,adb实现对设备的reboot命令是:adb reboot . 但是如果是两台/多台设备的时候,需要声明serial number:
- 例如我们有如下结构的文件:pkg/ __init__.py libs/ some_lib.py __init__.py components
- 最近在做的一个项目中需要使用到HTML5中引入的WebSocket技术,本来以为应该很容易就能搞定,谁知道在真正上手开发了以后才发现有很多麻