揭秘 Amazon 反应速度超快的下拉菜单
原文链接:http://www.oschina.net/news/38378/breaking-down-amzons-mega-dropdown
如果你以前觉得 Amazon 这家公司不太在用户体验上下功夫,这篇文章可能会改变你的看法。
Amazon主页的左上角有一个商品分类浏览的下拉菜单。当鼠标从菜单中的选项上滑过时,子菜单的显示速度是超快的。我们可以看一下:
这个显示速度基本是与鼠标移动同步的,但是绝大多数网站的下拉菜单在显示子菜单时会有一定的延迟,例如:
这个延迟反应是必须的,因为如果没有,当你想把鼠标从一个主菜单选项挪到一个子菜单选项时,子菜单会消失。就像这样:
但是 Amazon 的下拉菜单没有这个延迟,而且子菜单也不会在不应该的时候消失。它是怎样做到这一点的呢?答案是通过探测鼠标移动的方向和轨迹。
想象在鼠标当前的位置和子菜单的左上角和左下角之间画一个三角形。如果鼠标在这个三角形的范围之内移动,那用户很有可能是在把鼠标从主菜单向子菜单 里挪,所以不要立刻更新子菜单。但是如果鼠标挪动到这个三角形之外,则可以马上更新子菜单。这就是 Amazon 主页反应速度超快的下拉菜单背后的算法。
上帝在细节中(God is in the details)。揭秘一个前端细节,我们看到的不仅是一个精妙的算法,而是一个科技巨头对于产品和用户体验的态度。Amazon 的数百亿市值有多少是从这些很小很小,但是明显很用心的产品细节中积累起来的呢?
如果想把这个菜单逻辑运用到你的网站上,这是 Khan Academy工程师 Ben Kamens 写的 jQuery插件。
如果你觉得这个很神奇,很想做这方面的工作,或是觉得这没有什么,你的 UX 设计比这个好,可以考虑给研发出这个细节的 Amazon 团队(chaddes@amazon.com)投一份简历,因为他们正在招聘。
相关推荐
Amazon超快下拉菜单
仿Amazon_com菜单效果的简单实现! 很值得下载看看!资源免费,大家分享!!
一个模仿卓越亚马逊网站的弹出式菜单,希望对大家的学习有所帮助!
Amazon 关键词下拉框联想采集 可批量添加关键词,然后进行下拉框联想采集。 如果你是亚马逊卖家,就必须使用关键词联想采集,可以帮助商品的关键词做排名,有利于优化。
97年的信件揭秘Amazon成就巨无霸的原因.docx
亚马逊分析报告(Amazon)2021.pdf 亚马逊分析报告(Amazon)2021.pdf 亚马逊分析报告(Amazon)2021.pdf 亚马逊分析报告(Amazon)2021.pdf 亚马逊分析报告(Amazon)2021.pdf 亚马逊分析报告(Amazon)2021.pdf ...
这是一款很强的menu,根据亚马逊菜单的算法做出来的,很实用。 仿亚马逊菜单导航效果代码 点击查看演示
美国转运亚马逊教程大全,
亚马逊(Amazon)称霸电商的秘诀,亚马逊(Amazon),作为《财富世界500强》(2012年全球排名206),以网络书店起家的公司,是如何做到霸占美国电子商务市场大约三分之一份额的呢?
仿Amazon.com菜单效果的简单实现
Amazon 亚马逊 博弈比赛 棋,用来参考还是可以的
仿 amazon menu jquery 菜单插件 demo
亚马逊弹性计算云(Amazon EC2)是一个Web服务,提供可调整的云计算能力。它旨在为开发人员提供简便的使用网络规模计算。 Amazon EC2简单的Web服务界面,让您可以以最小的代价获取和配置计算能力。它让您完全控制您...
这种效果借助于一款jQuery插件menu-aim,本文将结合实例讲解如何实现速度超快的菜单效果。 HTML 首先建立主菜单,我们借用电商网站常见的商品分类。其html结构代码如下,其中我们用到了html5的data-submenu-id属性...
亚马逊Amazon卖家关键词挖掘软件是从事amazon外贸行业人员的辅助工具,用于亚马逊国际卖家刊登产品时的关键词优化及建议。软件支持amazon的美国,英国,加拿大,德国,西班牙,日本,法国,意大利等国家。完全满足多...
漂亮jQuery+CSS竖直菜单下拉展开菜单(手风琴)动画缓冲效果 42.漂亮jQuery四级滑出菜单插件带动画效果适合大多数网站 43.漂亮绿色jquery下拉菜单导航条源码下载 44.漂亮实用jquery绿色风格水平二级导航菜单 ...
亚马逊Amazon卖家关键词挖掘软件支持amazon的美国,英国,加拿大,德国,西班牙,日本,法国,意大利等国家。完全满足多站点外贸人员需求。
并非巧合!揭秘“杀手级”亚马逊推荐功能.docx