@ 2013.03.08 , 19:40
46

科学揭秘隐藏在Amazon导航菜单的武林秘籍

直接简单暴力的对比:
[-]
亚马逊的悬停菜单.

[-]
其他网站的悬停菜单.

看出区别来没,亚马逊的悬停菜单可谓如丝般顺滑.而其他菜单却会有一定令人不爽的延迟.这当然不是因为电脑太慢,这种延迟设计是为了避免下面这样的尴尬…
[-]
只是这个例子实在太棒了,我可一点没有黑bootstrap的意思哦!

*所以亚马逊到底用了神马黑科技在菜单上?*

亚马逊的秘密设计在于,他们给菜单加上了一个下图中紫色三角形的缓冲地带.当鼠标移动到紫色三角的范围时,二级菜单并不会立马变化,而是有一定延迟.而当你直上直下地移动鼠标的时候,二级菜单则会很快变化,所以才会保证有如丝般顺滑的感觉却不会出现上面那种尴尬呃情况.
[-]

作为一个有理想有抱负的Geek,怎能无视这么Cooooooool的导航.我已经安全将其借鉴到新网站了,另外我对山寨亚马逊的行为可一点也不羞愧!

"我敢肯定这秘籍早就被发现了,只是我们疑惑之解决之然而忘之,于是再惑之再解决之又则再相忘于江湖.(I’m sure this problem was solved years and years ago, forgotten, rediscovered, solved again, forgotten, rediscovered, solved again.)"
(我是从日文站上看到的英语不是我很菜啊只有乱翻译了)

by Ben Kamens

任何人也想玩的可以下载这个JQuery-menu-aim
试试效果:D

================================
致那些和我一样看到这个就情不自禁打开淘宝找类似导航条却没找到的人们,不要失望,你们可以点一淘看看.
这个似乎应该投稿cb之类的地方=3=

本文译自 bjk5,由译者 Jyo Jyo 基于创作共用协议(BY-NC)发布。


给这篇稿打赏,让译者更有动力
支付宝打赏 [x]
您的大名: 打赏金额:

4.7
赞一个 (0)

TOTAL COMMENTS: 46+1

  1. 菊花爆炸
    @5 years ago
    1817711

    杀!

  2. 琪露诺
    @5 years ago
    1817713

    被能动的首页题图吓尿了

  3. 1817715

    配图好睾端的样子

  4. Scopophobia
    @5 years ago
    1817721

    本文中我认识的单词不超过三个

  5. 燃烧的冰棒
    @5 years ago
    1817723

    高端!

  6. lyhighfly
    @5 years ago
    1817751

    此刻尽丝滑

  7. 1817755

    第三张图看的纠结爆了

  8. 二手临时工
    @5 years ago
    1817769

    左撇子或习惯从左边滑进菜单的呢?有没有这种情况?

  9. 暗殇
    @5 years ago
    1817781

    亚马逊一直是业界良心的说。。。上次买了个mp3用了一个月全款退货这种缺德行为我不会说的。。。

  10. 猫咪咪
    @5 years ago
    1817783

    配图很有才

  11. mty1111
    @5 years ago
    1817785

    我又不在美国的Amazon买东西

  12. 1817791

    美国亚马逊确实是良心啊

  13. 1817793

    我都不用鼠标的

  14. congik
    @5 years ago
    1817817

    不科学啊 怎么不带下载链接

  15. 1817819

    我能吐槽亚马逊 的全场书籍满xxx 减xxx 的活动已经很久没有了么!,
    我还了攒好多书就等着活动一到就购呢。

  16. 1817821

    @congik: https://github.com/kamens/jQuery-menu-aim 原文里有, 要不小编给加这里也加下链接吧

  17. 1817825

    只看亚马逊免费书籍买过一次雀巢咖啡的飘过

  18. chandler
    @5 years ago
    1817839

    我在亚马逊只买过书。。。没买过大件 另外那个界面好素啊

  19. 膝盖君
    @5 years ago
    1817879

    不错,学到老活到老

  20. 骨灰
    @5 years ago
    1817883

    看了第三幅图很久。。

  21. 鸡蛋
    @5 years ago
    1817927

    我怎么记得这个设计是苹果的专利?

  22. 1818061

    36kr也有译这篇文章http://www.36kr.com/p/201751.html

  23. 1818103

    野生前端学习了!

  24. 1818105

    亚马逊作为一个IT巨头顺手卖点三次元货物
    技术岂是普通网站可比

  25. 茱乐斯猫
    @5 years ago
    1818111

    @mty1111: @CVC: 中文亚马逊也有啊。亚马逊导航条的设计人性化一直很出名啊,都收录在各种高考素材必备里面了

  26. 么鱼吃的猫
    @5 years ago
    1818163

    我能说我喜欢第一种设计吗,因为那样我可以快速浏览每项的二级分录是什么

  27. 阿稻
    @5 years ago
    1818213

    第三张图一直闪,一直点不到,强迫症表示非常纠结!!

  28. 很好很强大
    @5 years ago
    1818221

    真是有研究过

  29. 一堆乱码
    @5 years ago
    1818295

    讨厌除中文以外的一切文字语言

  30. 寿司怪兽
    @5 years ago
    1818309

    CB喷子太厉害,整体智商被捉急

  31. loslos
    @5 years ago
    1818379

    我还以为误入了v2ex

  32. 填写称呼和
    @5 years ago
    1818419

    不错,可是 who care?

  33. 1818425

    看来国外的带宽和机器升级不如我们的,所以页面优化的功夫得天天做,想想也是,咱们的机器都要扛着各种恶意插件后台页面各种没优化的弹出菜单恶趣味图片甚至还夹着蜂拥而至的几MB一个广告视频,不快点升级怎么成~

  34. 填写称呼和
    @5 years ago
    1818429

    丝般顺滑也找不到你想要的东西分类,不信找找@读卡器?

  35. 挣脱地平线
    @5 years ago
    1818565

    实测苏宁可以,京东不行

  36. 1818635

    http://www.cnbeta.com/articles/229073.htm
    感谢您对CB的关注。

  37. 白徵明
    @5 years ago
    1818679

    然后被cb转载了……

  38. 二手临时工
    @5 years ago
    1818863

    @暗殇: 我在苏宁买了个NOKIA E52,用了11个月全额退款… 当然,是同一个问题修过三次.

  39. 二手临时工
    @5 years ago
    1818865

    @LJ: CB越来越没节操了.

  40. cnbeta观光团
    @5 years ago
    1818893

    cb越来越没节操了

  41. 1818967

    特意去看了看,升级了以后确实好了很多,但还是那种我很不喜欢的排版策略,把内容直接横向铺满我的23寸显示器。结果所有文字都拉成了奇长的一条,主页也因此显得凌乱和重点不明。既然没为大屏幕做适配就限制下宽度嘛

  42. mamer88
    @5 years ago
    1819357

    我对amazon不提供批量删除功能表示很不爽。

  43. 暗殇
    @5 years ago
    1819391

    @二手临时工: mp3没有任何问题。。。音质不够好而已。。。

  44. 节操君
    @5 years ago
    1823957

    原来Amazon的导航页背后是那么先进的黑色科技!!!
    我之前一直吐槽它怎么可以那么丑!!!!!!!!!!

  45. 1824929

    @暗殇: 确实是很良心咯。我买过洗衣机货到付款,然后到货了,后悔了,跟客服说不要了 ,然后他们就退回去了。然后…………然后就没有了。。。

    作为一个IT宅男,凭良心讲,亚马逊的网站做得确实不好看,下订单啊什么的好多地方的细节都做得很粗糙。估计跟老外的习惯有关系,他们大多数网站都是没我们这边做得这么花俏。

发表评论


24H最赞