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

作者:戴雨森 来源:uxday 时间:2009-04-16 13:06:00 

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

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

在其他一些软件中,如firefox 3(如下图),点击上排标签时,仅仅将标签显示变为选中状态,这样的好处是保持了标签位置的一致性,然而却失去了一些位置上的指示功能。

那么如果多排标签不是个好主意,如何处理很多的标签呢?

一个显然的思路是把标签从惯用的水平排列换到竖直排列。一般这样的排列是在视图的左侧,可能是以图标或者文字的形式。

不过这种做法存在一些问题。首先,如果标签的名字很长,将会占据很多宝贵的左侧空间,而这一空间正好是屏幕上用户注意焦点,兵家必争之地。有的网站的做法是将文字垂直摆放,这样的做法,特别对于英文网站来说,可读性简直就是灾难。如果放在右侧,有可能和滚动条相互干涉,并且用户也不容易注意到。其次,当标签不多的时候(考虑标签数目可变的情况),标签下方放什么内容也是比较头疼的。


(左)一个设计网站的纵向标签排列,可读性很差。(右)雅虎易搜里面采用的右侧垂直标签导航

标签:导航,禁忌,tab,标签
0
投稿

猜你喜欢

  • python matplotlib坐标轴设置的方法

    2022-03-26 03:44:04
  • Python pandas 列转行操作详解(类似hive中explode方法)

    2021-02-18 15:12:31
  • Python3.x版本中新的字符串格式化方法

    2021-10-12 17:32:23
  • Django利用cookie保存用户登录信息的简单实现方法

    2021-03-22 16:47:26
  • python连接池实现示例程序

    2022-04-30 21:59:54
  • php中对象引用和复制实例分析

    2023-10-20 23:05:02
  • python字典的元素访问实例详解

    2023-06-10 10:54:11
  • bootstrap multiselect 多选功能实现方法

    2024-05-28 15:38:25
  • python使用plot绘制未来15天气温折线图

    2022-11-06 02:09:41
  • python 读取yaml文件的两种方法(在unittest中使用)

    2021-04-20 17:38:30
  • OpenCV实现车辆识别和运动目标检测

    2023-09-22 18:55:40
  • Python实现针对给定字符串寻找最长非重复子串的方法

    2022-12-05 14:38:53
  • 详解如何在微信小程序开发中正确的使用vant ui组件

    2024-05-25 15:18:33
  • OpenCV制作Mask图像掩码的案例

    2023-09-20 16:34:04
  • 改变链接,让别人永远找不到你的程序

    2008-09-13 18:57:00
  • 详解numpy.ndarray.reshape()函数的参数问题

    2022-02-06 20:22:57
  • MYSQL 表的全面总结

    2024-01-13 12:01:25
  • Python将QQ聊天记录生成词云的示例代码

    2022-03-06 03:20:47
  • PyTorch预训练的实现

    2021-03-29 07:18:18
  • JavaScript实现简单图片轮播效果

    2024-04-22 13:02:05
  • asp之家 网络编程 m.aspxhome.com