登录 |

打印 | 字体大小: « 近日阅读06年度广东、南京地区第一次同行交流会地点和名单 »

亚马逊网站导航栏的变迁史

译文源地址是:http://www.junchenwu.com/2006/04/the_history_of_amazons_tab_navigation.html

——————————————————————————
可以说是亚马逊网站普及了 Tab 式导航。这么多年来,他们一直在探索着一种用户界面,可以使他们越来越多的产品清晰的呈现在用户眼前。我们现在回头去看看亚马逊网站顶部导航的历史变迁也是一件非常有趣的事情。

attachments/200604/21_095201_131762077_47722dbf06_o.jpg
在1998年,亚马逊网站只有两个一级大类:书籍和音乐。即使增加了一些分类,比如音像和礼物,水平的 Tab 式导航也能够扩展的非常平滑,并且通过颜色的不同,很容易区分产品。

attachments/200604/21_095252_131762077_47722dbf06_o.jpg
在1999年到2000年的时候,亚马逊还在不断增加新的分类,并且是它的 Tab 式导航到达极限。店铺(zShops)、玩具与游戏、电器和电子贺卡这些新的产品分类的增加,使得亚马逊的 Logo 也没地方放了,并且页面文字也随之缩小了(当时页面仍然是按 800×600 分辨率设计的)。一直等到把 Tab 标签做成两排,才给 Logo 腾出了空间。很显然,Tab 式的导航已经被拉伸到了极限并且快要控制不住了。

attachments/200604/21_095451_131762077_47722dbf06_o.jpg
在2000年的时候,亚马逊尝试着把所有的 Tab 去掉,但是在2001年还是增加了商店目录和特色商店 (Store Directory/Featured Stores)。这次重新设计,用一些特色的商店替代了日益增长的分类,并且提供了一个比较方便的途径让用户可以访问剩下的那些商店。当“我的店铺(personal stores)”的概念被提出后,亚马逊再一次回到了单行 Tab 式导航结构,并添加了“see more stores”链接来查看更多 Tab。

attachments/200604/21_095604_131762077_47722dbf06_o.jpg
2003年到2004年,亚马逊仍然继续增加新的分类。但为了市场推广及促销考虑,Tab 导航反而变短了。Tab 会基于公司的促销活动以及用户的行为变化——增加或减少。很少 Tab 会一直在那里(除了“Welcome”和“Your Store”)。根据市场推广及促销,图片式 Tab 被运用起来,并且切换 Tab 时的颜色变化也变成随机的了。

attachments/200604/21_095647_131762077_47722dbf06_o.jpg
为了解决 Tab 变化带来的疑惑,亚马逊开始试验一种可替代的方案,即单行动态 Tab 式导航(PPT)。2004年的时候作了一个线上测试,将 Tab 的数量减少至 2(就像 1998 年的设计)。第一个 Tab 是动态的(它取决于你所在的产品分类),第二个就是“所有分类”。在2005 年的一个版本中,导航从两个 Tab 开始,然后将当前分类作为新 Tab 插入其中,替代了之前的解决方案,不会替换掉当前任何 Tab。

JunChen 翻译自LukeW’s Functioning Form

本文作者简介:
Luke Wroblewski is an interface designer, strategist, and author. He is currently a Principal Designer at Yahoo! and Principal of LukeW Interface Designs, a digital product design consultancy he founded in 1996. 更多…

搜藏 | RSS
分类:UCD ,06/04/20 6:26 AM | 16,600 Views |

网友评论(17)

  1. 好文

  2. 我刚开始留意amazon时已经是“单行动态 Tab 式导航”了。。。多多学习。。。记录点滴

  3. […] 如果说google是整合网络服务,看看信息层面的导航吧,上一次的UCDChina书友会上,大家简单地讨论过amazon的导航的变化,amazon可以说是在网络产品导航上的鼻祖了。白鸦原来介绍过amazon的导航的变化历史,直到现在导航。 可以从上图看到,是否很有点“开始菜单”的影子?amazon在每个子页面都有一个亮橙色按钮“Shop All Departments”你可以在任何一个子页面切换到其他的任何父、子页面。 其实,随着技术的革新,软件和在线服务的概念将越来越模糊,交融。随着google在线产品对传统软件的冲击,从Gmail、google doc我们可以看到,颠覆的只是概念,用户体验基本上完全沿袭了传统软件的使用习惯。目录、右键菜单、拖拽、快捷键等等这些原本只有客户端产品才会出现的名词,现在在浏览器中同样开始流行起来,用户也非常容易上手。 […]

  4. […] 如果说google是整合网络服务,看看信息层面的导航吧,上一次的UCDChina书友会上,大家简单地讨论过amazon的导航的变化,amazon可以说是在网络产品导航上的鼻祖了。白鸦原来介绍过amazon的导航的变化历史,直到现在导航。 可以从上图看到,是否很有点“开始菜单”的影子?amazon在每个子页面都有一个亮橙色按钮“Shop All Departments”你可以在任何一个子页面切换到其他的任何父、子页面。 其实,随着技术的革新,软件和在线服务的概念将越来越模糊,交融。随着google在线产品对传统软件的冲击,从Gmail、google doc我们可以看到,颠覆的只是概念,用户体验基本上完全沿袭了传统软件的使用习惯。目录、右键菜单、拖拽、快捷键等等这些原本只有客户端产品才会出现的 名词,现在在浏览器中同样开始流行起来,用户也非常容易上手。 […]

  5. […] 浏览器tab的历史 在10年以前,互联网萌芽的时候,所有的网站设计的原型都是来自于软件,IE也刚刚奠定它在浏览器世界的霸主地位,但在当时,浏览器的tab设计就已经有了原型。记得当初我见过有一款浏览器的tab是在浏览器的下方,类似excel下方的sheet。在当时,也获得了不少用户的喜爱。 但自从amazon将tab的设计从软件工程引进到网站设计之后,用户体验的tab时代到来了。 […]

  6. 如果每个版本的变化做一个源码出来就好了,;)

  7. […] (http://uicom.net/blog/?p=292  亚马逊网站导航栏的变迁史) […]

  8. 从《就这么简单》里看到对亚马逊导航条的推崇,于是在搜索引擎细查,第一条就到你这里来啦,原来你老人家早在06年就对“动态TAB式导航条”进行分析啦,赞~~~

  9. […] 在网页设计中tab的使用一般认为是Amazon开了先河。相信大家很多人都读过LukeW的经典回顾文章:The History of Amazon’s Tab Navigation(中文版请猛击这里)。从这篇文章中我们可以看到,Amazon的导航从最初只有两个tab:Book和Music,演化到2000年最多的时候有两排tab。很显然,当tab数量增多的时候,tab这种交互方式遇到了一些困难。 […]

  10. […] 在网页设计中tab的使用一般认为是Amazon开了先河。相信大家很多人都读过LukeW的经典回顾文章:The History of Amazon’s Tab Navigation(中文版请猛击这里)。从这篇文章中我们可以看到,Amazon的导航从最初只有两个tab:Book和Music,演化到2000年最多的时候有两排tab。很显然,当tab数量增多的时候,tab这种交互方式遇到了一些困难。 […]

  11. 现在很多网站只想着赚钱,但却没有多少以用户为中心去做了。。

  12. […] 在网页设计中tab的使用一般认为是Amazon开了先河。相信大家很多人都读过LukeW的经典回顾文章:The History of Amazon’s Tab Navigation(中文版请猛击这里)。从这篇文章中我们可以看到,Amazon的导航从最初只有两个tab:Book和Music,演化到2000年最多的时候有两排tab。很显然,当tab数量增多的时候,tab这种交互方式遇到了一些困难。 […]

  13. […] 在网页设计中tab的使用一般认为是Amazon开了先河。相信大家很多人都读过LukeW的经典回顾文章:The History of Amazon’s Tab Navigation(中文版请猛击这里)。从这篇文章中我们可以看到,Amazon的导航从最初只有两个tab:Book和Music,演化到2000年最多的时候有两排tab。很显然,当tab数量增多的时候,tab这种交互方式遇到了一些困难。 […]

  14. 值得学习,看看现在做外贸的网站,90%都是模仿的亚马逊~`

  15. 主要是符合人们使用习惯就可以了 不管模仿是谁

  16. 所有的网站设计的原型都是来自于软件,IE也刚刚奠定它在浏览器世界的霸主地位,但在当时,浏览器的tab设计就已经有了原型。记得当初我见过有一款浏览器的tab是在浏览器的下方,类似excel下方的sheet。在当时,也获得了不少用户的喜爱。 http://www.ebay-cellphone.com

  17. 白鸦原来介绍过amazon的导航的变化历史,直到现在导航。可以从上图看到,是否很有点“开始菜单”的影子? amazon在每个子页面都有一个亮橙色按钮“Shop All Departments”你可以在任何一个子页面切换到其他的任何父、子页面。http://www.ebay-cellphone.com

发表评论

*必填

*必填 (不会被公开)