从下拉菜单设计细节看Amazon对用户体验的把握

Amazon网站分类导航的下拉菜单被使用得非常频繁,但你有没有注意过它的反应非常迅速?

 

 

当然,这在技术上并非难题,但是大多数网站下拉菜单显示子菜单有一定的延迟,这比如老版的可汗学院网站:

 

 

注意到延迟没有?这样做并非没有缘由,若不如此,斜着移动鼠标时子菜单就会消失,因此你只能小心翼翼地平移鼠标指针,非常影响用户体验:

 

 

也许你会感到疑惑,在Amazon上购物时并没有遇到这样不愉快的体验啊!这正是其设计的睿智之处:

 

 

你将鼠标光标从主菜单移向子菜单的时候,图中三角形区域会停止事件判定,很高明的解决办法?

如果你很Geek,可以自己实现这一想法,或者你不想重复发明轮子,可汗学院的工程师Ben Kamens已经开发出了这样的jQuery插件——jQuery-main-aim(MIT协议),可以直接拿来使用。下面是可汗学院使用了该插件之后的效果:

 

 原文链接:http://www.csdn.net/article/2013-03-07/2814390-breaking-down-amazons-mega-dropdown

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值