tab(标签)在使用时的禁忌

回国正好赶上百度用户体验部主办的 UXday 活动,我们小组讨论的话题是tab(标签)在使用时的禁忌。

我们讨论的话题集中在一个点上:如何处理海量的tab?

首先回顾一下Tab的历史。这里的tab,是一类交互元素的统称,既包括在web设计中的导航,也包括在浏览器等桌面软件中的使用。被称为tab的交互元素一般有如下两个特性:

  • 同时具有动作和状态两个含义。tab之所以流行,一个原因就是因为它既方便操作,同时又能够让用户清楚地知道自己目前在哪个位置(tab)
  • 从信息架构的角度来看,tab之间的内容一般是不交叉的。并且tab之间的关系应该是平等的,没有相互隶属的关系。

所以从广义来讲,绝大多数导航菜单其实都可以归结为tab。

在网页设计中tab的使用一般认为是Amazon开了先河。相信大家很多人都读过LukeW的经典回顾文章:The History of Amazon’s Tab Navigation(中文版请猛击 这里 )。从这篇文章中我们可以看到,Amazon的导航从最初只有两个tab:Book和Music,演化到2000年最多的时候有两排tab。很显然,当tab数量增多的时候,tab这种交互方式遇到了一些困难。

另一个例子是Word 2003中的设置对话框。如下图所示,当标签太多而显示空间有限的时候,微软不得不同样把标签排成两排。这样做的一个大问题是,上排的标签在选中的时候,如何表示选中状态和当前内容页的关系?

微软的做法是饱受诟病的。在上图中当用户点击上排标签时,上排自动和下排对调从而保持标签和内容页的紧贴关系。然而这个做法使得标签的位置非常不一致,相信很多人都有着同样的迷茫经历。

时间: 2024-10-03 15:12:36

tab(标签)在使用时的禁忌的相关文章

m1卡-NFC S50卡 M1卡 当作标签来使用时,用手机App进行消息写入成功,但是数据分析问题

问题描述 NFC S50卡 M1卡 当作标签来使用时,用手机App进行消息写入成功,但是数据分析问题 小弟最近在学习NFC的项目,最近把S50卡当标签进行读写时,对读出来的数据有一些疑惑,希望大牛来指点一二. 一.基本情况 1.我在S50卡中写入的消息为:baidu.com 2.可以使用NFC手机正确读取S50卡里面的URI并成功跳转到该网页 二:主要问题 1.黄色背景的数据,我根据NDEF规范,已经解析出来了(用红色字体标识),主要问题就是绿色背景的数据分析不出来代表的是什么意思 2.对照了N

digester解析xml 使用时如何判断一个标签是否存在

问题描述 digester解析xml 使用时如何判断一个标签是否存在 在解析时会碰到比如深搜时,有些标签是结束标志,没有任何值和属性,比如出现就继续解析,没有则回到上层,请问如何判断一个标签是否存在

为EasyUI的Tab标签添加右键菜单的方法_jquery

前期的准备工作: 1.下载DEMO源码,并升级为最新版本(jquery 1.7.2,Easyui 1.2.6),直接替换就可以啦,升级easyui 是的要把css js theme 全部替换 2.在首页的HTML代码中:将 复制代码 代码如下: <div id="mm" class="easyui-menu" style="width:150px;"> <div id="mm-tabupdate">刷新

Android应用中使用ViewPager和ViewPager指示器来制作Tab标签_Android

一.ViewPageIndicator开源框架的基本用法 我们先得去Github上面下载这个库,下载地址:https://github.com/JakeWharton/Android-ViewPagerIndicator,下载下来之后你可以运行例子,来看看我们需要什么样的效果,然后在此基础上改成我们自己想要的效果 1.如何使用开源框架第1步:improt library项目 第2步:导入library进我们自己新建的项目 从Github上Download下来这个zip包之后,里面会有一个libr

JS封装的三级联动菜单(使用时只需要一行js代码)_javascript技巧

前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大家分享我在工作中封装并在项目中使用的三级级联操作代码,如有错误或者不当的地方欢迎大家指正. 使用简单(只需要一行代码) 可以根据需要设置是否显示"请选择"项 支持回调(在三级分类加载完成后触发回调事件) 支持一个页面多个级联菜单 演示效果预览: 三级联动封装 原理:将selec标签以及相关

Android应用中使用ViewPager和ViewPager指示器来制作Tab标签

一.ViewPageIndicator开源框架的基本用法 我们先得去Github上面下载这个库,下载地址:https://github.com/JakeWharton/Android-ViewPagerIndicator,下载下来之后你可以运行例子,来看看我们需要什么样的效果,然后在此基础上改成我们自己想要的效果 1.如何使用开源框架 第1步:improt library项目 第2步:导入library进我们自己新建的项目 从Github上Download下来这个zip包之后,里面会有一个lib

设定的按钮在界面运行使用时出现错误

问题描述 设定的按钮在界面运行使用时出现错误 10C 其catlog中的代码:05-11 03:07:40.315 15986-15986/org.crazyit.multithreadclient W/System.err﹕ java.lang.NullPointerException: Attempt to invoke virtual method 'boolean android.os.Handler.sendMessage(android.os.Message)' on a null

jQuery实现tab标签自动切换的方法

 这篇文章主要介绍了jQuery实现tab标签自动切换的方法,实例分析了jQuery操作tab标签的技巧,涉及addClass.siblings及removeClass链式操作的技巧,需要的朋友可以参考下     本文实例讲述了jQuery实现tab标签自动切换的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww

Lua math.fmod使用时的小数问题

  这篇文章主要介绍了Lua math.fmod使用时的小数问题,math.fmod用于取模运算,使用小数时可能会遇到不可预料的结果,所以应该避免使用小数,需要的朋友可以参考下 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 lua math.fmod使用注意小数: --Returns the remainder of the division of x by y. function math.fmod (x, y) end