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

简介:        文章来源URL: http://bjk5.com/post/44698559168/breaking-down-amazons-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

目录
相关文章
|
2月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
|
文字识别 自然语言处理 达摩院
一文上手文档智能Document Mind
简要讲述文档智能Document Mind以及文档智能的功能测试
一文上手文档智能Document Mind
|
前端开发
《the Great Gatsby》Day 26
Gatsby告诉Daisy,她只要说自己从未爱过Tom,便能就此解脱,幸福地和自己在一起;但是当Tom说出曾经的种种,回忆淹没了Daisy,她没办法违背自己的内心——她曾深爱过Tom。Daisy说自己还是会离开Tom,Tom情急之下说出了Gatsby光鲜外表背后的那些不光彩的勾当。Daisy再一次恳求Tom带她回家,Tom却让Gatsby开车送她
95 0
《The Great Gatsby》Day 22
《The Great Gatsby》Day 22 2.大概内容 一度是灯火通明的Gatsby家,在一个夏夜突然暗淡下来,那些怀着希望而来的人们,看到这副景象也都失望地离开了。。。Nick开始以为Gatsby生病了或是去了外地,后来才
88 0
|
Windows
《The Great Gatsby》Day 16
Jordan向Nick讲述了一切:Gatsby和Daisy五年前就认识了,当时Gatsby是个军官,他们相爱了;然而Gatsby被调去海外,两人断了联系,Daisy之后便和Tom结婚了,结婚前夕Daisy收到了一封来信,十分伤心,灌醉了自己说着“改变主意了”,可她最终还是和Tom结婚了。Gatsby一直还爱着Daisy,所以想摆脱Nick邀请Daisy来家中喝下午茶,这样他就可以假装路过来见她一
150 0
《The Great Gatsby》Day 21
在Gatsby的又一次party上,Daisy和Tom也应邀前来参加,一位又一位女客涂脂抹粉,男女狂欢的热闹繁华夜场生活反射出当时赤裸裸的美国梦。Gatsby因Tom去勾搭其
159 0
《The Great Gatsby》Day 20
让Nick感到惊讶的是Tom Mr.Sloane和一个穿着马术服装的女子骑着马来到了Gatsby家,女子还邀请Gatsby和Nick去她家共进晚餐。Tom不放心Daisy自己一个人到处走动,便陪着她来到了Gatsby的一个聚会,聚会上Tom又是一如既往地到处调情,但这也同时给Daisy和Gatsby单独相处的机会
100 0
《The Great Gatsby》Day 18
Gatsby进屋后,尴尬又紧张地依靠在壁炉旁,不知该如何打破沉默,Nick看到两人都很拘谨的样子,说自己有点事就出门了。Nick回屋时看到Gatsby和Daisy正坐在沙发上小声而热切地交谈着,含情脉脉地望着对方,连Nick回来都不知道。雨停后,Gatsby又邀请Daisy和Nick去自己家参观。 3.好词佳句 (1)The rain was still falling,but the darknes
108 0
《The Great Gatsby》Day 14
大致内容 一天早晨,Gatsby开着他的定制轿车出现在Nick家门口,要带他一起去城里吃饭;在路上,Gatsby向Nick讲述自己的故事(他出身在中西部一个富有的家庭,在美国长大,又去了牛津三一学院读书,后来家人相继去世,他便继承了大笔遗产;后来参军,英勇善战,甚至获得了黑山共和国的荣誉勋章。)Gatsby还说有时要拜托Nick,但又执意要等到午饭后才说。 3.好词佳句
114 0
《The Great Gatsby》Day 12
舞会快结束的时候,Jordan和Gatsby也从书房出来了,Jordan告诉Nick她刚刚听到了最不可思议的事,但是又故意卖关子不肯说说是什么;她被伙伴们簇拥着上了车,和Nick告别时叮嘱Nick一定要给她打电话,Nick和Gatsby道别后也回家了。生活一天天过去,Nick也渐渐爱上了纽约。
77 0