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

http://www.itjxue.com  2015-08-07 22:18  来源:未知  点击次数: 

如果标签之间存在重要程度的不同,也可以考虑显示最重要的一批标签,同时以“更多”等按钮来提供余下的标签(交互设计模式中的extra on demand模式)。如Amazon在实在不能忍受双排标签之后就这样做了(如下图)。此外,还可以根据用户目前的位置提供相关性最高的标签。

如果标签之间不存在重要程度的区别,也不存在显然的结构呢?比如浏览器的标签?不同的浏览器有不同的做法。firefox和IE的默认做法是只显示一行标签,设定标签的最短长度,然后在两端加入向左/向右的箭头,同时还在标签栏左侧或者右侧加入显示全部标签按钮。Safari 4只在最右侧加入一个”…”的“显示全部标签”按钮。而Chrome做的比较奇怪,没有最短标签长度这一设置,也不管三七二十一将所有标签都显示在一行里面,于是当标签数目过多时就会变成如下图这个悲剧的样子。我们建议,如果只显示一行标签的时候,best practice是:在左右两侧显示滚动的箭头,并且提供以某种方式(通常是平铺或下拉菜单)显示全部标签列表的按钮,并且设定标签最短的长度。

总结浏览器的做法,可以看出还是以对标签栏的横向操作为主。举个手持设备的例子。facebook的iPhone App中,对于不同的feed是将其显示在一个“window”中,手指滑动可以拖动feed条在window下移动(语言很难描述清楚,看图)。另一个对标签条横向操作例子是苹果的Mac页面,在这里苹果使用了交互设计模式中的“注释滚动条”模式,将滚动条加上了标签的功能,这同时也是标签分组的使用。

总结以上讨论

  1. 在静态页面设计中,尽量避免使用多排水平标签的布置。可以使用垂直标签代替。
  2. 如果标签之间存在结构,可以将标签分组。分组可以以下拉菜单,颜色分组等多种方式进行。
  3. 如果标签重要性或相关性存在区别,可以显示最重要的标签,然后加入“更多”(全部)按钮。
  4. 如果标签之间都是相互平等的,可以考虑对标签栏进行操作,如加入左右移动按钮,允许用户拖动/滑动等。

(责任编辑:IT教学网)

更多