页签的交互设计和标准

  我先给出我对页签的名词解释。页签是利用网页小空间表现展现多信息传递的一种形式,俗名:标签,耳朵;在英文中叫“tab”。

  一种典型的页签表现形式,Yahoo中文站首页的页签。如下图:

  • 当前页签区域使用高亮文字、图形表现,再次点击“焦点”出现下划线并打开新窗口Yahoo子站:Yahoo资讯。同时,在每一个页签的右下角也使用了“>>更多”
  • 当鼠标经过页签标题“财经”,页签标题出现颜色变化触发点击区域,文字颜色变化并出现下划线,表示可以点击切换页签。
  • 点击“财经”文字或文字区域,“焦点”页签开始切换,点击过后,当前页签切换到“财经”并使用高亮文字和图形表现,同时页签内容也变更为财经新闻。
  • 在“财经”页签为当前页签时,鼠标移到其它页签时,都有相应交互触发变化;但鼠标没有点击其它页签文字或区域时,“财经”页签内容不会发生变化,

  如下图:

  页签的表现形式多种多样的。

Ps:taobao的导航今天又换了回去,我想:网站改版不应太快,这是一条真理

  这些都是体验很好的页签交互,这里我想说的是这一种交互,他出现在导航中、出现在搜索中,使用了一种滑动式页签交互,不能不说在技术上是有着优势,但在体验上出现了一些问题,看下面出现在it168首页上的一个交互问题,我始终不能进行软件搜索,一碰上去就到了“术语/手册/维修”页签,如果鼠标走直角线路也是可以进行软件搜索,但似乎这些的体验另人不爽,两点之间的距离最短,上过初中的人都学过,不让我走直线,让我拐着走,什么是挫折感和误操作,就是这么产生的。

如图:

  当然可能有人会提到MS的首页竖页签,问:“MS的首页也是没有点击就可以切换页签啊?”我想说的是:MS的页签切换没有挫折感和停滞感。如图

  给出了一个名词“页签”,既然他存在,也有应用,为什么页签的交互不能成为标准呢?

  仅以此文抛砖一下。

9 Responses

  1. it168首页上的tag应该加一个鼠标经过停留时的一个时间值。这样就不会有挫折感了

  2. 可能有很多“不合理”的交互方式要调整,
    但不可能成立“标准”

    因为决定页签用什么交互方式的是“使用的环境”和“使用的人”。

  3. Yahoo pattern是另外一层意义上的“标准”,标准在于通用性和一致性。最终还是为了让用户在完整庞大的网站系统中体验一致。但baiya提到的是标准的扩展性问题,我想。解决的方式可以是多场景来定义标准。个人看法,个人看法,呵呵。

  4. 想问,类似it168的标签:
      1、标签间没有明显隔断或框架,如:A B C, 而不是 A | B | C;
      2、当前标签突出加粗,但无页面链接;
      3、非当前标签无特殊格式;
    像这种会不会弱化标签的可切换性?至少会减少一些点击的欲望?
    🙂

  5. PS:第一次评论,“注册”没有链接,于是勾选了复选框(以为可直接注册),填完各项内容后一提交,说偶没有权限…然后很郁闷的找到注册的入口再注册…

  6. to yucy:这个LBS的评论系统是有一些问题,一直没改好。关于如:A B C, 而不是 A | B | C,这种形式,我个人认为不能归于“页签”类别。成为页签的条件,我记得在《Dont make me think》里记载的比较清晰,但是,目前的网站在打破这些条件,我想最基本的一个条件是:各个页签应属于一个大类,如:CPU/内存/硬盘/风扇,这个属于主板里的;但如果把CPU/显示器/键盘归为一类,这个是属于电脑,两者都不为错,看信息构架是如何针对的。至于点击的欲望应该是GUI或架构来配合,如果一个页签位于页面底部或是不突出,点击率一定会比页面上部的要低。

  7. xiaoxiao不说,我还真没注意,原来雅虎那个tab是可以二次点击的 – –
    以为点一下仅仅就是切换内容用的,还挺微妙

    说到标准,既然RSS标识图形、HTML、CC创作协议等等都可以有标准,为什么页面上这些细节功不能有标准呢?
    网络上网站无数,各有各的风格,但存在的公共体验一致越多,岂不是更方便网民
    虽然界面设计可以再创意表现外观,但也不会差别很多,因为在功能性上是统一的

    譬如说分类列表:如淘宝的宝贝目录、爱问的问题分类
    就是很早Yahoo搜索门户分类那种形式,被用户习惯的接受,可归为一类标准等等

    ms说太多了。。。常来

  8. xiaoxiaox兄职业病阿..
    说来 taobao的确变的太频繁了 有几天不去 就不会找东西了..

© 2022 Xiaoxiao’s Weblog. All Rights Reserved. 粤ICP备15088982号