美文网首页技术
更优质的下拉式菜单体验:给鼠标箭头多一点空间

更优质的下拉式菜单体验:给鼠标箭头多一点空间

作者: 罗小黑写写文字 | 来源:发表于2015-03-30 17:56 被阅读318次

我已经有一段时间没有听到像标题这样的内容了,这是一个相当陈旧的UX概念。但是这仍然和多级下拉菜单有很紧密的关系。像鼠标剪头这样具有细颗粒度的指针(fine-grained pointer),有时候不得不穿过十分狭窄的路线才能准确的找到下拉菜单中的选项。这非常容易找错目标,也许我们可以让这件事情更容易。

你可以找你需要的按钮,不过这里的路线十分狭窄 如果你不小心偏离路线 那么你想要寻找的区域就会消失


一个基础CSS解决方法

下拉式菜单是一个十分典型的设计,子菜单的显示方式,通过对父元素设置:hover实现,或者在Javascript中设置mouseenter/mouseover的状态来实现。所以更优质的下拉菜单技巧就是预防事件发生的太容易或者扩宽路线的范围。

通过思考我得到的结果是:因为在CodePen的下拉菜单的实际路线十分窄,为了拓宽路线并阻挡鼠标触发上下的子菜单项,我在子菜单上增加了两个看不见的元素,如果鼠标移到这两个看不见的元素处,什么事情都不会触发,这就更加符合真实的鼠标使用体验。

(这段真是好狗血,我没有直译,修改了一些内容。【重要内容】我认为作者是CodePen的开发,如今他已经为CodePen添加了两个看不见的元素,所以如今CodePen的下拉列表已经表现十分良好)

红色的部分就是两个看不见的元素的位置 鼠标移上去不会改变任何菜单状态 【译者截图】更加直观的展示一下 鼠标hover在New Post的位置

这真的是十分轻量级的CSS技术,我很喜欢。但有一点危险的是你会遮住一部分临近的菜单项,这可能意味着一个用户把鼠标放在正确的菜单上却无法点击它。我猜测有很多情况下有人只移动鼠标一点点就能正常工作,但是这显然要有一个平衡点,在很小和很大的移动之间。

回到2005年的历史洪流中,这有一个经典的【定位就是一切】(Position is Everything)的演示:

里面详细的展示了所述功能

用CSS扩宽边界

John Gardner创造了一个方法,让所有的菜单都有一个额外的空间包围它们,使鼠标Hover-off的范围增大。

鼠标在红色和蓝色的线框内菜单都不会消失

【这里还有一个动态的代码展示,需要到原文中体验】

(Un)Hover意图

你听说过hover意图么(hover intent)。它的概念是区分你是否有想触发Hover的意图。(【译者】说白了就是鼠标要放在菜单上一会儿才会执行事件)这有点像故意延迟。当UI发生暴走的情况时你就可以用它。

相反的我们就有了unhover意图。当我们能立即得到hover事件的效果时,我们却希望unhover不要立即发生。在CSS中,你可以做下面的事情:

记住我们要使用visibility属性,因为它可以使用transition属性,而不是display。

【这里还有一个动态的代码展示,需要到原文中体验】

Javascript也可以完成。和处理防抖动一样,你应该避免鼠标在不小心离开时,菜单消失的功能被立刻触发。你可以通过setTimeout来实现更好的效果,这是十分简单的,但是:

【这里还有一个动态的代码展示,需要到原文中体验】

不过,这些unhover的演示都没有从源头解决路线狭窄的问题,他们通过降低反应速度来处理鼠标问题。

避开狭窄的路线

没有任何规定说明子菜单一定要从旁边出现,如果它们从菜单的下面出现,那么路线就会保持宽阔。这里有一个Timothy M.LeBlanc:的演示

【这里还有一个动态的代码展示,需要到原文中体验】

一个华丽丽的JsvaScript工具

在几年前Ben Kames在这个课题上发布了一个非常棒的文章。它发现亚马逊网站的下拉菜单用起来十分爽快,相比那些使用延迟方法的人,亚马逊则发挥了数学的魅力。如果鼠标处在:所触发子菜单位置和子菜单之间的三角区域内,鼠标就不会触发任何其他的菜单按钮。快看:

哇哦

Ben把这个东西放进了一个jQuery插件中,并且还制作了一个Demo

他也十分同意下面的话:

我十分确定这个问题已经解决了很多年。但是这个议题却经常被世人遗忘、重新发现、重新解决、又被遗忘、被发现、解决...

在我们的行业中,这真是一个悲伤的事实啊。

【Jon Neal 改进了这个插件并增强了数学逻辑,但译者我觉得不好用,不贴这块内容了】

瞎扯

我想到有一个智者说过:

有时候用户登陆你的网站会拿着一个鼠标,但他们有时候却什么都不拿!

所以,衷心的祝福你的下拉式菜单在触摸屏上也能正常工作,你当然要让他们能工作,你也可以打电话给我如果你希望一起提高代码的效率,或者你想得到一些有趣的发现并为了使用不同的文件需求。

键盘对于控制下拉菜单是另一个经典的问题,我不会吝啬我的任何好主意去帮助你去提高UX。让我们共同提高吧。

翻译自:Dropdown Menus with More Forgiving Mouse Movement Paths

【断断续续翻译了两周,这哥们的书面英语实在是太口语化了,我这个英语渣被虐翻了啊。所以翻译之处很多都是按照意译或者理解之后翻译的,尽可能的在关键部分保持正确性,在非关键部分保持灵活性,谢谢】

相关文章

  • 更优质的下拉式菜单体验:给鼠标箭头多一点空间

    我已经有一段时间没有听到像标题这样的内容了,这是一个相当陈旧的UX概念。但是这仍然和多级下拉菜单有很紧密的关系。像...

  • css学习 第五天

    CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。 基本下拉菜单 当鼠标移动到指定元素上时...

  • 简易下拉菜单

    今天做了一个简易的下拉菜单: 页面头部一个下拉菜单,鼠标滑过下拉菜单下方显示一个菜单项列表,且下拉菜单的背景图片切...

  • Vue中判断点击是否在组件外

    自己使用div模拟select,有如下需求: 组件获得焦点时,自动弹出下拉菜单 鼠标点击下拉菜单时,下拉菜单不能收...

  • CSS下拉菜单

    基本下拉菜单 当鼠标移动到指定元素上时,会出现下拉菜单。 实例 .dropdown {position: rela...

  • WEB交互设计注意事项

    一、鼠标悬浮有用处 1、悬浮引导 简书网页版,鼠标移到头像,出现下拉菜单。体验好。 简书网页版,底部的更多图标,需...

  • 下拉菜单箭头

    利用绝对定位让icon偏移,设置hidden; demo:http://js.jirengu.com/rav/6/...

  • iOS仿微信App添加带箭头的view(链接)

    iOS仿微信App添加带箭头的view 类似微信下拉菜单,可以控制箭头的不同位置

  • js实现菜单下拉框

    1.效果:js实现菜单下拉框,当鼠标放到上面是显示菜单,当鼠标移除时隐藏菜单 2.布局分析 如下图所示,整体结构可...

  • Bootstrap

    Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站...

网友评论

    本文标题:更优质的下拉式菜单体验:给鼠标箭头多一点空间

    本文链接:https://www.haomeiwen.com/subject/xgpmxttx.html