JunChen Wu / 设计

Tab式位置导航变体

写于 2007年04月18日 13:30 评论(14)

Geoff Teehan 的一篇 The Tabbed Breadcrumb Navigation 介绍了一种新颖的、综合了 Tab 导航的 Breadcrumb(一直找不到合适的中译,位置导航?您的位置?还是面包屑?),如下图:

Tabbed Breadcrumb Navigation

图中不错的表达了网站的层次、结构,单独来看很有新意。Yahoo! 在运用这招的时候加入了一些变化,参见 Yahoo! FoodYahoo! SportsYahoo! TV。不过 Yahoo! Food 的那条 Buzz 确实造成了不小的干扰。当然 Yahoo! 必须考虑更多的因素,比如 Tab 的数量。图:

Yahoo! Tabbed Breadcrumb Navigation

这很容易让我们联想起 Amazon 在导航上面做出的努力和改进,以及目前 Amazon 的动态 Tab 式导航。

除了惊叹于它的创意,我们仔细想想,在交互设计中,我们可以整合两种用户比较习惯的元素,这里是 Tab 导航和 Breadcrumb,这是一种将现存元素组合的创意思考方法。值得学习。

酷归酷,在这种触及核心的导航上,我仍然不改我的观点,最好的体现网站信息架构的交互方式,目前仍然是树型控件,或者称之为目录式导航(至少在国内如此)。

Warm Regards,
J.

原文地址:http://www.junchenwu.com/2007/04/the_tabbed_breadcrumb_navigation.html

评论(14)

青椒土豆丝 - 2007年04月18日 15:31

挺酷的,但不习惯,感觉逻辑上有些问题,对于没有接触过这类导航的,初次访问站点的人来说,可能会造成理解上的障碍。同意还是树型控件最一目了然。

另外发现一个问题,发表评论的时候,在“记住这些信息”的同一行里点击,就可以操作checkbox,容易误操作,不过是小问题。

秦歌 - 2007年04月19日 10:17

Breadcrumb翻译成导航,指引啥的都可以,千万别搞成什么面包屑,因为老外看到Breadcrumb不用思索就知道其含义来源,而我们只能是一头雾水,即使知道那个童话又能如何,一样的难受。

我挺喜欢这个菜单的设计的,如果表达大量的菜单项和子菜单项上应该没有属性菜单方便和扩展容易,但是这种菜单反馈内容结构和具体内容的归属关系上要优胜很多。

xorms - 2007年04月19日 14:20

说实话,有点儿晕

jessica - 2007年04月20日 09:40

首先肯定的是很有创意的设计;将网站的空间感模拟出来了,同时也将网站频道也整合进去,这样节省了不少垂直空间,又将意思表达很淋漓。
不过凡事总有两面性,
1.不得不承认普通网友很难理解它,我给一位网站编辑朋友看,他都没一下子转过弯来;
2.主要频道包含在位置导航里面,即不能一眼看到,这样操作上将多一个步骤,且这个步骤将被经常用到...这样是否会加重用户反复操作的烦躁情绪呢?
3.……暂时还没想到合适的 T_T

怿飞 - 2007年04月20日 15:36

个人感觉给的干扰不少,主次之间有点迷糊

kaven - 2007年04月21日 02:53

呵呵,大家看得迷糊或者感觉干扰满多,或许是因为我们现在单单看的是菜单,如果在真个网页的环境下,整体设计的暗示会让人感觉明确许多。

二手车 - 2007年04月26日 11:19

一个字,酷.

Stony - 2007年04月28日 12:34

Vista的Explorer就是这样的思路,一开始有点不习惯,用了发现还是挺好的。

张韡武 - 2008年01月06日 00:55
另外发现一个问题,发表评论的时候,在“记住这些信息”的同一行里点击,就可以操作checkbox,容易误操作,不过是小问题。
此事说明了两点,一是您在使用标准化的浏览器(Firefox?);二是因为IE对<label&rt;支持不好,引起国人一般都认为checkbox要点到里面才行,反过来觉得原本“正确”的设计不习惯,容易误操作。各位看客可能都知此事懒得评论,我这里照顾不知情的人,抛抛砖,见笑。
JunChen - 2008年01月06日 12:27

@张韡武 label的点击渲染在各浏览器下面基本一致。青椒土豆丝的意思不是你所想的那个意思,而是在原来的模板里面 label 被 display: block 了,占据的整个一行的宽度。请勿望文生义。

张韡武 - 2008年01月09日 14:24

我觉得我从事的工作(企业IT系统实施)给我了很多发挥余地,因为这样的产品往往面临不同类的用户,一般如果将用户分为五类,其中只有一类是偶然性一次用户(像网站的访客),而很多是受培训的业务用户。对于“受培训的业务用户”,我们总是有机会使用创新的界面方案的,有的方案仅仅是用户一下子无法接受,但是经过培训后可以良好接受并提高效率的,我们也可以采用。我知道面向公众的网站设计不能像我们这样负担少地考虑界面。

比如有一位客户的界面中,需要经常性从1000多个选择项中选择30多个。如果使用复选,很快用户就找不到自己选择过什么了。我们使用通用的容器方案,即左边使用有1000多个选择项的容器,右边使用能容30来个已经选中项目的容器,点左边的项目,点“=>”键使之进入右边;反过来,点右边的项目,再点“

后来用另外一种取代了这种:即取消了“=>”和“

张韡武 - 2008年01月09日 14:27

你的flickr上的图片往往不能显示,应该是与我国政府对国民思想层面上提供的保护措施有关系。能否换用少用到的服务商?比如Kodak Easy Photo Sharing等等,这样可能被关的机会少。

草根网 - 2008年11月10日 18:28

好文,收藏至20ju.com

cranelet - 2009年03月20日 11:13

这种导航也是树状的,但是在表现形式上有了两点改变:
1.将树状变为横向水平 2.每打开次级导航,则隐藏上级导航条中的姊妹链。

可能是在视觉设计上还需要有创新,变得更直观一些才好。

发表评论