揭秘Amazon反应速度超快的下拉菜单

如果你以前觉得Amazon这家公司不太在用户体验上下功夫,这篇文章可能会改变你的看法。

Amazon主页的左上角有一个商品分类浏览的下拉菜单。当鼠标从菜单中的选项上滑过时,子菜单的显示速度是超快的。我们可以看一下:

这个显示速度基本是与鼠标移动同步的,但是绝大多数网站的下拉菜单在显示子菜单时会有一定的延迟,例如:

这个延迟反应是必须的,因为如果没有,当你想把鼠标从一个主菜单选项挪到一个子菜单选项时,子菜单会消失。就像这样:

但是Amazon的下拉菜单没有这个延迟,而且子菜单也不会在不应该的时候消失。它是怎样做到这一点的呢?答案是通过探测鼠标移动的方向和轨迹。

想象在鼠标当前的位置和子菜单的左上角和左下角之间画一个三角形。如果鼠标在这个三角形的范围之内移动,那用户很有可能是在把鼠标从主菜单向子菜单里挪,所以不要立刻更新子菜单。但是如果鼠标挪动到这个三角形之外,则可以马上更新子菜单。这就是Amazon主页反应速度超快的下拉菜单背后的算法。

上帝在细节中(God is in the details)。揭秘一个前端细节,我们看到的不仅是一个精妙的算法,而是一个科技巨头对于产品和用户体验的态度。Amazon的数百亿市值有多少是从这些很小很小,但是明显很用心的产品细节中积累起来的呢?

如果想把这个菜单逻辑运用到你的网站上,这是 Khan Academy工程师 Ben Kamens 写的 jQuery插件

如果你觉得这个很神奇,很想做这方面的工作,或是觉得这没有什么,你的 UX 设计比这个好,可以考虑给研发出这个细节的 Amazon 团队(chaddes@amazon.com)投一份简历,因为他们正在招聘。

揭秘Amazon反应速度超快的下拉菜单的更多相关文章

  1. 一款javascript实现的超炫的下拉选择框

    今天为给大家带来一款javascript实现的超炫的下拉选择框.下拉的列表由半用透明的幽灵按钮组成.显示下拉的时候,列表项由左右两侧飞入.消息时飞向左右两侧.一起看下效果图 在线预览   源码下载 实 ...

  2. 3D滚动下拉菜单-简直不要太任性

    预览 先看看最终效果 简介 由来 最初看到这个是在14年5月,猛戳这里:妙味官网,觉得非常炫.想要做出来,所以就开始学习web. 那时候是做c/s的,也因为这个走上了b/s之路,(゚Д゚≡゚Д゚) 现 ...

  3. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  4. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  5. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  6. Mega Dropdown - 带子分类的响应式下拉菜单

    当你在开发一个内容很多的 Web 项目的时候,最具挑战性的部分之一是为了如果更方便用户浏览这些内容.我们都能想到的一个例子是 Amazon,无限的类别以及它们的子类别.Mega Dropdown 是带 ...

  7. jq+css+html简单实现导航下拉菜单

    相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...

  8. JS 下拉菜单

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  9. JS列表的下拉菜单组件(仿美化控件select)

    JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...

随机推荐

  1. J2SE知识点摘记(九)

    1.         线程操作的一些方法 方法名称              方法说明 public static int activeCount()             返回线程组中目前活动的线 ...

  2. 2016 Multi-University Training Contest 7 总结

    第七场多校的排名稍微有了一点回升,然而也并不太乐观. 开场欣君秒出了02题的公式,磊哥开始打表验证,发现可行,一A. 我觉得06题有些思路,开始写,但是发现复杂度优化不下去,于是弃疗. 磊哥做了10题 ...

  3. LDAP Authentication for openNebula3.2

    LDAP Authentication 3.2 The LDAP Authentication addon permits users to have the same credentials as ...

  4. #include <functional>

    1 bind(引用内部函数, 实体对象的地址, 占位符); 2 bind1st 3 function 1 auto 变量名 = bind(引用内部函数, 实体对象的地址, 占位符); #include ...

  5. Trailing Zeroes (III)(lightoj 二分好题)

    1138 - Trailing Zeroes (III)   PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit:  ...

  6. 仅仅需手动添加一行代码就可以让Laravel4执行在SAE (v. 1.0.0)

    Github:https://github.com/chariothy/laravel4-sae (已更新至v1.1.0) laravel4-sae (v. 1.0.0) 仅仅需手动添加一行代码就可以 ...

  7. 使用MyBatis搭建一个访问mysql数据库的简单示例

    MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以使用简单的XML或注解用 ...

  8. redolog

    总结: 教育我们:redo文件组需要创建多个组,建议至少3个,每个组至少2个文件,最好放在不同的硬盘上. 当联机日志文件丢失一般使用清除日志的方法: alter database clear logf ...

  9. apache rewrite rule

    http://10.58.104.19:8008/site/833/3f11d2b44b7d3baa2149f26a30f8c68d/b.js?siteid=332323 将一个静态请求转换成一个动态 ...

  10. 网络技术教程笔记(20)ISDN

    广域网与接入网技术 广域网与接入网技术 常见接入技术--ISDN 综合业务数字网(Integrated Services Digital Network,ISDN)由电话综合数字网IDN演化而成,能够 ...