一个很酷的设计：Breaking down Amazon’s mega dropdown

       文章来源URL: http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

        奉上我对本文的理解：

        该文大致讲的就是作者从亚马逊网站首页上商品分类的下拉菜单的体验效果引出了一个问题：设计一个什么样的下拉菜单，能让用户得到最好的体验。

        在没有做任何的处理情况下，一个下拉菜单当鼠标迅速在不同的一级菜单上快速移动的时候，子菜单会很快速的变化切换，作者举例了亚马逊下拉菜单改版前的效果。当用户想浏览子菜单（或者说子分类）的时候，移动鼠标的位置就得很小心了，因为一旦鼠标滑过其他一级菜单时候，你想要浏览的子菜单就会被切换成鼠标hover时的一级菜单的子菜单，无疑这种情况下的用户体验很糟糕的。

        大多数情况下，在做这类下拉菜单的效果时候还是会加上一个延迟处理，拿oldKhan Academy举例。就是说当鼠标迅速滑过一组一级菜单的时候，如果在菜单上停留的时间小于一个设定的时间参数时，则子菜单不会切换（或者不会显示），实际上应该就是这样的。作者举了一个反例，就是前端框架bootstrap的下拉效果，尽管他很喜欢bootstrap，但是在这里bootstrap的下拉菜单的体验上确实没做到位，可以说是个BUG。

        然后就是分析亚马逊改版后的效果是怎么脱离延迟处理来达到相同目的的。通过探测用户鼠标移动的行为来判断用户是否是想要查看子分类，在文章中截图的三角蓝色区块标记的就是用户想要查看子菜单意图的鼠标移动路径范围。如果是这种情况，那么当前的子菜单将会有一个延迟处理，会多显示一会儿。至于怎么计算这个三角的蓝色区块呢？实际上很容易，当前鼠标所处位

置和子菜单的顶部还有子菜单的底部三个顶点构成了这个三角区域。如果下一个鼠标移动的位置处于这个三角区域内则可以认为用户很可能是想查看当前鼠标所处一级菜单的子分类，那么就可以触发这个延迟处理了。作者讲述到在图中所示那样，就算用户鼠标hovers over “Appstore forAndroid” momentarily，the user is probably heading toward “Learn more about Cloud Drive.” 瞬间的移动，可以根据上面所述的原因来认为，用户实际是想查看子菜单里的Learn more about Cloud Drive。而如果鼠标移动的路径不在三角区块内，则不做任何处理，迅速的切换。

不得不承认这个效果很酷，很人性化的设计。作者从亚马逊上扒下了部分代码，在几位朋友的协助下了解线性代数的相关知识来如何构建这个起关键作用的“蓝色三角区块”，并封装成了一个 jquery插件叫做 jQuery-menu-aim，并且应用到了 new Khan Academy上。

        这个插件在github 上已经开源了，我们随时都可以使用它。作者做的相当好了，如果说有什么想法的话我只能说：It’svery cool! Well done!

 jQuery-menu-aim