用面包屑来简化多层的tabs

六月 12th, 2011 47 Comments »

一个网站信息结构需要表现给用户看,这样用户才能知道当前是在哪儿,才有可能去猜测某个内容可能会在哪儿。
如何表现网站的信息结构给用户呢?
用导航。

Tabs导航不错!
Tabs导航是一种表现形式,可以很直观的表现出当前所在的栏目和与之同级的其他栏目。

用tabs这种形式来表现导航是个很好的办法,也是很常见的。然而,如果一个网站的信息结构很复杂,层级很多,那么就经常会是tabs套tabs套tabs套tabs…

四层tabs…
我们抽象一下就成了下面这样:

怎么优化过多层的tabs?
最直接的想法当然是收起一些tabs来。
实际上,时时刻刻展示出所有层级的tabs并不必要,是有浪费的,浪费了用户的注意力。
上图的例子中,当我点开第三层tabs中的“歌手”后,我的诉求更多的是看“歌手”下更多的分类,以便我找到某位特定的歌手,这个时候并不会太关注“背景音乐”“我的收藏”“留言板”“相册”…这些tabs项此时成了干扰信息。
仍旧显示出一二三层tabs的价值主要在于告诉用户,当前的“歌手”栏目是在“音乐盒”->“正版音乐库”下的。那么,对于上面那些层tabs,可以只保留有价值的信息—表明当前所在栏目,而不显示与之同级的其他栏目。
去掉一、二、三级tabs中可供访问的tabs后的样子:

再整理一下…

是的,这就成了面包屑导航导航。
面包屑导航是另外一种反应网站信息结构的形式。因为省略掉了与当前栏目同级的其他栏目,所以面包屑导航的信息量小。

将上面演绎的过程总结一下:面包屑导航可以简化多层tabs导航中那些不太重要的层级。

要省略哪层呢?
就象上面说的那样,把当前页面以上以及同级的tabs都简化掉?显然不是,设计如果是这么简单的,那就不要设计师了。

我们来看看yahoo:

进入Autos栏目中,只展示Autos下的tabs,而不再展示与Autos同级的其他栏目。
看Autos的时候并不会经常会想着切换到财经、游戏等其他栏目,那么,简化掉第一级,只显示Autos栏目隶属于Yahoo!下。Autos频道下的两级菜单需要经常不断切换着看,即便当前是“LATEST MODELS”,上一级tabs“Home,New cars…”也依旧保留着,不简化。

再看amazon:

不断寻找商品的过程是不断往下找的过程,目前已经到达“Bikes”了。“Sports & Outdoors › Bikes & Scooters › Bikes & Accessories ›”这些都是当前页面“Bikes”的父级。相比之下,当前,用户更需要在“Bikes”里进一步筛选,而不是退回去选sports&outdoors类的其他产品,所以,“Bikes”下的进一步分类要充分的展示,而之前逐层筛选过的那些父级,统统的面包屑掉。

从上面的两个例子中,我们可以看到:
可以省略,也是需要省略的,是那些当前较少可能去选的、不需要反复切换的…
并非凡是当前页面上一级和平级的tabs都要简化,当然也不是都不简化。

这里说的用面包屑来简化多层tabs,要解决的问题源于网站结构层级太多,解决这个问题最好的方法当然是让信息层级结构本身简化点儿,少几个层级。

有47 条对“用面包屑来简化多层的tabs”的评论

  1. bom 说:

    学习了,谢谢。

  2. Sandox 说:

    一直关注博主,最近才入手PM行业,想问下博主这些图是用啥画的呢?谢谢。

  3. Kai 说:

    “怎么优化过多层的tabs?” 的一段写的很赞,看了会让人‘哦~真的耶’的感觉。:)

  4. CH5iRe 说:

    臭鱼好久没更新了,赞一个

  5. 互联网的一些事 说:

    好文章,转载到互联网的一些事(yixieshi.com)

  6. 用面包屑来简化多层的tabs | 优酪网 说:

    […] 源地址:http://www.chouyu.com.cn/?p=324 […]

  7. […] 源地址:http://www.chouyu.com.cn/?p=324 […]

  8. […] 源地址:http://www.chouyu.com.cn/?p=324 […]

  9. Mr.Outman 说:

    实际上,时时刻刻展示出所有层级的tabs并不必要,是有浪费的,浪费了用户的注意力。

    赞同。在设计的时候我们往往关心一个页面上的信息是不是必须的。但是忘了交互过程是个动态变化的过程,开始必须的,在用户操作后,重要程度会改变,必须的也会变成干扰信息。

  10. 朱小萱 说:

    很不错的设计想法,学习了!

  11. 西米的博客 说:

    受教,谢谢分享!

  12. chefsu 说:

    TAB融入到面包屑曾经也想过。觉得不太符合大众的使用习惯。比如点错的同学就悲剧了,而且如果对商城的浏览用户不友好。

  13. ellis 说:

    换一个角度考虑,不简化也是为了方便用户,可能qzone的用户就是要随意的点来点去呢,也可以说是用户体验做的好,呵呵

  14. 物流公司 说:

    嗯,支持下啦,支持博主!

  15. 衣衣红 说:

    楼主很给力,来观摩一下.很不错的一个.

  16. 不浪漫是罪 说:

    文章写得很不错,tabs引导分析得更棒。期待下一篇精彩文章。

  17. 北京微微冰冰 说:

    面包屑简化层级关系,能让用户更好的关注当前纵向层次的数据信息
    如何让用户再纵横交错的层次中更便捷的寻找自己关注的信息。。。

  18. 北京微微冰冰 说:

    发现一个问题啦:刚刚回复的时间是晚上 0:57,回复后显示的上午12:57!!

  19. 一周摘录总结 说:

    […] 这周摘录的文章有:臭鱼的《用面包屑来简化多层的tabs》,BlueUI的《从“告诉用户在哪里”说开去》 ,以及彩程设计团队的《iOS APP体验设计》 […]

  20. 深蓝 » Blog Archive » 用面包屑来简化多层的tabs 说:

    […] 本篇Blog转自臭鱼 […]

  21. weucd 说:

    分析的很到位

  22. 香鱼 说:

    不明白,我想问的是,如果要回去的话怎么办?我要选择别的选项怎么回去啊???

  23. 商道网 说:

    很不错的博客,竟然今天才发现。

  24. 陈丽伊 说:

    牛!顶~~

  25. lexia 3 说:

    不错,希望多发几个像这样的文章!

  26. 美国硕士留学 说:

    这篇文章结构清晰文笔勾勒都不错,已经被mr.shjfy.com.cn所收录。

  27. 什么减肥药最有效果 说:

    这个很有深度啊

  28. 哪种减肥药效果最好 说:

    终于来更新了,支持下,说的很好

  29. 大笨鱼 说:

    弱弱的问一句,为啥您的这个网站上面没有文章目录呢?您为什么不用tabs给自己的文章也建个导航条呢?
    O(∩_∩)O~

  30. 麦包包26 说:

    原来博主是搞网站建设和运营的,我以后多多向你学习了,望不吝赐教。26

  31. 灰指甲 说:

    我楼下的有美女么,有木有。

  32. 乐蜂网 说:

  33. CWX 说:

    臭鱼是wsd的?比CDC的人实在多了,CDC华而不实

  34. chouyu 说:

    @CWX:我不是CDC的,也不是WSD的。我曾经在TX互联网业务系统(ISD)工作,目前已经离职了。

  35. www.tclook.com 说:

    博主 你的那个 头像 是你自己设计的吗?

  36. CWX 说:

    @chouyu
    冒昧问一下,你是要自己创业还是跳槽呢?不方便就不回答吧 : )

  37. chouyu 说:

    @CWX,方便,我刚去方便过了。我只是在休息,没有去别的公司,也没有创业。

  38. tennylyj 说:

    受教,谢谢

  39. sherryjiang772 说:

    请问是否考虑了用户的“方便的退出”这个可用性呢?博主可能考虑较多的是怎么向前走这条路,退路呢?请赐教,谢谢!

  40. Godwin 说:

    @sherryjiang772 ,个人感觉,从哪里来就回哪里去,这样才是最明白的退路,浏览器的后退键是web设计很重要的一环

  41. […] <http://www.chouyu.com.cn/?p=324&gt; 返回 分享到: var jiathis_config={ siteNum:12, […]

  42. […] (来源:臭鱼的交互设计) 返回 […]

  43. 用面包屑来简化多层的tabs | 無我 说:

    […] 文章来源:臭鱼的交互设计 此条目由 6yc1G 发表在 SEO总汇 分类目录,并贴了 多层、面包屑 标签。将固定链接加入收藏夹。 […]

  44. 用面包屑来简化多层的tabs | 無我 说:

    […] 文章来源:臭鱼的交互设计 此条目由 6yc1G 发表在 网站建设资源 分类目录,并贴了 多层、面包屑 标签。将固定链接加入收藏夹。 […]

  45. 用面包屑来简化多层的tabs | 站长站 说:

    […] (来源:臭鱼的交互设计) 发表于 设计教程 « Photoshop打造超酷按钮 需求的采集 » 敬请 留言, 或从本站 引用本文。 […]

  46. 用面包屑来简化多层的tabs | 站长站 说:

    […] (来源:臭鱼的交互设计) 发表于 设计教程 « 电商大战催生书价虚高 图书定价进入”50元时代” 王建宙:到2017年全年应用下载数将超1100亿次 » 敬请 留言, 或从本站 引用本文。 […]

  47. mervin 说:

    受教