揭秘Amazon反应速度超快的下拉菜单
揭秘Amazon反应速度超快的下拉菜单
如果你以前觉得Amazon这家公司不太在用户体验上下功夫,这篇文章可能会改变你的看法。
Amazon主页的左上角有一个商品分类浏览的下拉菜单。当鼠标从菜单中的选项上滑过时,子菜单的显示速度是超快的。我们可以看一下:
这个显示速度基本是与鼠标移动同步的,但是绝大多数网站的下拉菜单在显示子菜单时会有一定的延迟,例如:
这个延迟反应是必须的,因为如果没有,当你想把鼠标从一个主菜单选项挪到一个子菜单选项时,子菜单会消失。就像这样:
但是Amazon的下拉菜单没有这个延迟,而且子菜单也不会在不应该的时候消失。它是怎样做到这一点的呢?答案是通过探测鼠标移动的方向和轨迹。
想象在鼠标当前的位置和子菜单的左上角和左下角之间画一个三角形。如果鼠标在这个三角形的范围之内移动,那用户很有可能是在把鼠标从主菜单向子菜单里挪,所以不要立刻更新子菜单。但是如果鼠标挪动到这个三角形之外,则可以马上更新子菜单。这就是Amazon主页反应速度超快的下拉菜单背后的算法。
上帝在细节中(God is in the details)。揭秘一个前端细节,我们看到的不仅是一个精妙的算法,而是一个科技巨头对于产品和用户体验的态度。Amazon的数百亿市值有多少是从这些很小很小,但是明显很用心的产品细节中积累起来的呢?
如果想把这个菜单逻辑运用到你的网站上,这是 Khan Academy工程师 Ben Kamens 写的 jQuery插件。
如果你觉得这个很神奇,很想做这方面的工作,或是觉得这没有什么,你的 UX 设计比这个好,可以考虑给研发出这个细节的 Amazon 团队(chaddes@amazon.com)投一份简历,因为他们正在招聘。
揭秘Amazon反应速度超快的下拉菜单的更多相关文章
- 一款javascript实现的超炫的下拉选择框
今天为给大家带来一款javascript实现的超炫的下拉选择框.下拉的列表由半用透明的幽灵按钮组成.显示下拉的时候,列表项由左右两侧飞入.消息时飞向左右两侧.一起看下效果图 在线预览 源码下载 实 ...
- 3D滚动下拉菜单-简直不要太任性
预览 先看看最终效果 简介 由来 最初看到这个是在14年5月,猛戳这里:妙味官网,觉得非常炫.想要做出来,所以就开始学习web. 那时候是做c/s的,也因为这个走上了b/s之路,(゚Д゚≡゚Д゚) 现 ...
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 推荐10个 CSS3 制作的创意下拉菜单效果
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- Mega Dropdown - 带子分类的响应式下拉菜单
当你在开发一个内容很多的 Web 项目的时候,最具挑战性的部分之一是为了如果更方便用户浏览这些内容.我们都能想到的一个例子是 Amazon,无限的类别以及它们的子类别.Mega Dropdown 是带 ...
- jq+css+html简单实现导航下拉菜单
相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...
- JS 下拉菜单
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- JS列表的下拉菜单组件(仿美化控件select)
JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...
随机推荐
- MySQL二进制日志中保存的上下文信息
1.二进制日志中要保存上下文的原因 二进制日志是要在slave端重放的,记录上下文信息,是为了保证主丛数据库的一致.如rand一个随机数,在主上返回的可以有是100,在从上返回的可能就是1000了. ...
- LBYL与EAFP两种防御性编程风格
检查数据可以让程序更健壮,用术语来说就是防御性编程. 检查数据的时候,有这样的两种不同的风格. LBYL:Look Before You Leap EAFP:It's Easier to Ask ...
- linux中读写锁的rwlock介绍-nk_ysg-ChinaUnix博客
linux中读写锁的rwlock介绍-nk_ysg-ChinaUnix博客 linux中读写锁的rwlock介绍 2013-02-26 13:59:35 分类: C/C++ http://yaro ...
- 【HTML5】DOMContentLoaded事件
这个事件是从HTML中的onLoad的延伸而来的,当一个页面完成加载时,初始化脚本的方法是使用load事件,但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随 ...
- poj2728 Desert King --- 01分数规划 二分水果。。
这题数据量较大.普通的求MST是会超时的. d[i]=cost[i]-ans*dis[0][i] 据此二分. 但此题用Dinkelbach迭代更好 #include<cstdio> #in ...
- jvm的内存管理【转】
[转]JVM内存管理 这些日子一直在研究jvm内存管理的东西,网上的知识很多,总结一下,能沉淀下来的就是自己的! 首先,刚学java的时候就知道java类文件是以 .java为后缀的文件,经过java ...
- Ghost Button制作教程及设计趋势分析
概述:Ghost Button(虚拟按钮)是网页设计中一个非常实用的按钮样式,特别是图片背景中,有出色的效果.今天我们一起来研究Ghost Button的各种效果的制作方法,并对Ghost Butto ...
- Android屏幕适配与切图_汇总
首先和最后,还是先看好官方文档:http://developer.android.com/guide/practices/screens_support.html 对应的翻译blog有牛人做了:And ...
- C++链接库
静态链接库在程序编译链接过程中就导入lib文件并且包含在生成的exe文件里,而动态链接库DLL是在程序运行中由程序加载和卸载的,也就是说它是动态的,当然动态链接库DLL也可以静态加载当做静态来用: 静 ...
- 并发编程:c++11 多线程中随机数重复问题
srand(time(NULL)); 是我们熟悉的c++随机函数,用时间做种子.但由于在多线程环境下若想在子线程中随机出不同的随机数则需随机种子的不同.但time以秒计算,略显不足,故参考这篇文章解决 ...