登录 |

打印 | 字体大小：小 大« »

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

译文源地址是：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. 更多…

分类：UCD ,06/04/20 6:26 上午 | 129,749 次浏览 |

网友评论(52)

  1. todd - 06/04/21 10:31 上午

    好文

  2. icedebar - 06/04/21 10:49 上午

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

  3. 牛牛@设计 » 导航的流行趋势 - 07/12/27 8:51 上午

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

  4. 导航的流行趋势 at China HCI - 08/01/09 1:34 下午

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

  5. 浏览器tab的设计 - 08/08/04 12:15 上午

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

  6. 招聘公主 - 08/09/19 12:58 下午

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

  7. 《就这么简单》（2） : 随遇而安的幸福 - 09/03/04 11:30 下午

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

  8. cranelet - 09/03/20 9:53 上午

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

  9. 如何处理海量tab？ at 懒人有禅 - 09/04/04 7:25 上午

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

  10. UXday » Blog Archive » tab（标签）在使用时的禁忌 - 09/04/13 7:53 下午

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

  11. 招聘信息 - 09/06/10 5:37 下午

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

  12. 设计：如何处理海量tab？ | 上海网站建设,上海网络公司,上海网页设计，品牌网站建设 - 10/02/18 8:31 下午

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

  13. 设计：如何处理海量tab？ | 上海企业邮局,上海企业邮箱 - 10/02/24 12:23 上午

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

  14. agoodic - 10/03/17 3:38 下午

    值得学习，看看现在做外贸的网站，90%都是模仿的亚马逊～`

  15. wholesale china electronics - 10/04/18 4:49 下午

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

  16. China Electronics Wholesale - 10/05/22 8:53 上午

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

  17. China Electronics Wholesale - 10/05/24 9:40 上午

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

  18. 人人爱新奇 - 11/02/22 9:50 下午

    大网站的一个小改动都是慢慢的微改变过来的

  19. manchester plasterers - 11/02/28 8:01 下午

    love this very informative blog keep up the good work

  20. cheap electronics - 11/03/01 10:31 上午

    this is a good blog

  21. seo manchester - 11/03/14 10:39 下午

    Very interesting post, extemely well thought out and put together. Keep up the good work.

  22. t5 slimming pills - 11/03/18 7:37 下午

    Heard about this site from my friend. He pointed me here and told me I’d find what I need. He was right! I got all the questions I had, answered. Didn’t even take long to find it. Love the fact that you made it so easy for people like me.

    t5 slimming pills

  23. tab标签在网站中使用的合理性研究 | 第一站长站 - 11/03/28 7:42 下午

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

  24. lily - 11/07/14 10:50 上午

    帮你顶一下！！！

  25. Belle Clarenbach - 11/07/27 8:42 下午

    Surprisingly pleasing blog blurb.

  26. UGGs - 11/08/08 8:35 上午

    I’d prefer to use some with the content material on my weblog whether you don’t mind. Natually I’ll give you a hyperlink on your web blog. Thanks for sharing.

  27. ugg boots outlet - 11/08/17 4:08 下午

    I am very impressed with your views and interesting content. I hope you intend to continue writing more informational articles.

  28. SEO Services Company - 11/08/22 1:18 下午

    thanks for your sharing! great helpful!!!Thank you

  29. donghanjin - 11/08/27 5:55 下午

    Brand become rich consumer darling of high society.Fashion comparable to the LVMH group compete in the international luxury goods group, Gucci Group is now only.

  30. Agen Sbobet - 11/09/18 9:15 上午

    Great post! I?m just starting out in community management/marketing media and trying to learn how to do it well – resources like this article are incredibly helpful. As our company is based in the US, it?s all a bit new to us. The example above is something that I worry about as well, how to show your own genuine enthusiasm and share the fact that your product is useful in that case.

  31. Chandler - 11/09/29 12:57 上午

    That is Amazing! Thank you.

  32. joomla extensions - 11/10/03 4:29 下午

    Good information. And i alway like to read the quality content. And i am really happy to found this information on your blog. Thanks for sharing this opportunity to leave a comment.

  33. SEO Services Company - 11/11/02 6:27 下午

    Details are very true and factual, I do really learned something new upon reading this interesting post. Good job! and Thanks!
    SEO Services Company
    SEO Company India
    Organic Wool Clothing

  34. paris turf - 11/12/18 11:06 下午

    Excellent news it is definitely. My teacher has been searching for this content.

  35. Solar Power Ontario - 12/03/22 12:46 下午

    I must say; the work done on this page is exquisite. Rarely do I come across such an informative article. Thanks.

    Ontario Solar Power

  36. Android app developers - 12/03/28 12:30 下午

    Your blog actually sweet as well as thoughtful of others plus reading the blog posts is a wonderful delight in my experience.I liked this post very much as it has helped me a lot in my research and is quite interesting as we

  37. betty - 12/06/28 12:24 下午

    This is a smart blog. I mean it. You have so much knowledge about this issue, and so much passion. You also know how to make people rally behind it, obviously from the responses. Youve got a design here thats not too flashy, but makes a statement as big as what youre saying. Great job, indeed, Thanks betty and friends

  38. 设计：如何处理海量tab？ | 夜阑小雨,飘洒在岁月的流沙。80后，爱网络，爱小说，爱研究。产品设计，编程代码，网络营销，原创文学， 系统研究。 - 12/07/19 7:39 上午

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

  39. Agen Bola - 13/01/07 2:26 上午

    Good information. And i alway like to read the quality content. And i am really happy to found this information on your blog. Thanks for sharing this opportunity to leave a comment.

  40. dewa poker - 15/02/04 11:20 下午

    this is a very nice post.. just wait every your post :)

  41. Judi Online Terpercaya - 19/01/30 2:54 上午

    One of the great and useful post, i really like it. Thanks for sharing this nice post. Great efforts made here keep the efforts up and thanks for the efforts. visit http://pokernet88.co

  42. Agen Poker Resmi - 19/02/03 10:24 下午

    Thanks your for your sharing the great post and i really like it, i want tell my friends you have a good post, just follow http://lagapoker.net

  43. Bandar Togel Terpercaya - 19/02/05 5:34 上午

    I really enjoy simply reading all of your weblogs. Simply wanted to inform you that you have people like me who appreciate your work. Definitely a great post, visit http://indah4d.com

  44. KING4D - 19/03/13 1:50 上午

    HUGO4D merupakan agen hkbgaming terpercaya yang menyediakan game togel singapore togel sydney dan hongkong. Permainan fair dan aman bersmaa kami. Join sekarang dan Jadilah Member Setia kami !!!!

  45. BOLA88 - 19/03/13 1:51 上午

    Ligaciputra merupakan agen BOLA88 terpercaya dimana menyediakan banyak permainan dalam 1 id. slot online, casino online maupun bola online.
    Permainan terpercaya dengan uang asli dan menang berpapaun di jamin cair. Terimakasih telah bergabung dengan kami.

  46. POKER88 - 19/03/13 1:52 上午

    CiputraQQ adalah agen pokerclub88 terpercaya di Indonesia. Menyediakan Permainan poker,dominoqq,ceme online terpercaya dengan ribuan pemain lainnya. Main dan raih jackpot 60 juta sekarang bersama kami dan Jadilah member setia kami sekarang juga !!!!!

  47. Togel Online - 19/03/13 4:33 下午

    Really Love your post guys. You good mand and will share to my friends! join http://oppotogel.us

  48. dewa poker 2019 - 19/03/20 10:15 上午

    Dewapoker Hadir untuk semua pecinta permainan kartu poker online yang khususnya berada di asia. Dengan system teknology baru dan server kecepatan tinggi akan membuat permainan poker anda lebih seru dan menarik bersama teman2x anda maupun saingan anda.

  49. dewa poker - 19/03/23 12:20 下午

    Dewa Poker Dengan system teknology baru dan server kecepatan tinggi akan membuat permainan poker anda lebih seru dan menarik bersama teman2x anda maupun saingan anda. Cukup lakukan login dan langsung bermain tanpa download. Dewapoker.com dengan encrypsi server yang tinggi akan menjamin keamanan data para member.

  50. masuk poker88 - 19/03/25 12:44 下午

    Poker88 dilengkapi dengan server kecepatan dan enkripsi tingkat tinggi menjamin keamanan data dari member kami yang berada di asia, permainan poker dengan technology flash memudahkan para member untuk langsung dapat bermain tanpa perlu melakukan download.

  51. Agen Poker Idn - 19/03/26 8:35 下午

    you have a great post and i like it.. please join us at http://goopoker.com

  52. Agen Judi Bola - 19/04/03 9:25 下午

    I like it and i will share it to others. Join us at http://bolanet88.biz

发表评论

*必填

*必填 (不会被公开)