悬浮显示的提示或菜单在放大状态下可能超出可视窗口
别名: 放大后菜单出画 · hover overflow · magnified popover
概念解释
点开「更多」时,菜单朝屏幕外沿展开。触发器还停在镜头中央,十二个选项已经全部落在镜头外面——不是字太小,是这层浮层根本没进当前窗口。下拉、日期面板、二级弹出、图表上的悬停卡,都会在放大路径上把「刚打开的东西」画到用户看不见的坐标。
贴着字段写错误文案,是提示要靠近对象;这里管的是浮层相对放大窗口的溢出。
机制
浮层的定位算法通常相对触发器或视口边缘:向下展开、不够就向上翻、贴着浏览器窗口。它不知道外面还套着一块放大镜头。镜头只覆盖触发器周围一小块时,向下展开 300 像素的菜单,对全屏用户是顺手的,对 8× 用户是整张菜单出画。
镜头若跟随指针,人一把指针移进菜单去点选项,镜头才姗姗来到——但菜单若因「指针离开触发器」而关闭,用户永远追不上。镜头若跟随键盘焦点,焦点还留在触发器上时,菜单同样在画面外。于是出现一种独特失败:功能已经打开,视觉上却像没打开。
怎么研究
在 4×、8× 下打开各类浮层(选择菜单、日期、溢出「更多」、图表 tooltip),截取打开瞬间的镜头画面。记录:浮层有百分之几的面积落在镜头内、是否必须平移才能看见第一项、平移过程中浮层是否关闭。自变量:定位策略(向下 / 向上 / 覆盖触发器)、镜头跟踪模式。因变量:可见比例、第一次成功点中选项的时间、误关次数。
把「打开后立即把焦点移进浮层」与「焦点留在触发器」对照,能看出跟随焦点的放大软件会不会把镜头带进菜单。
边界
很大、几乎占满浏览器窗口的模态,打开后镜头里至少能看到一块内容,溢出问题弱一些,变成「模态里还要不要再平移」。固定在视口四角的全局通知也不走触发器定位,失败模式变成别处突然出现。触屏长按菜单若出现在手指旁边,放大手势下仍可能出画,但关闭逻辑与桌面 hover 不同。完全键盘操作且焦点进入菜单时,跟随焦点的镜头可以救一部分——前提是焦点真的进去,而不是只在视觉上展开。
怎么落地
- 浮层优先在触发器近旁展开,选项从紧挨触发器的位置开始排,不要先空出一大段再出现第一项。
- 打开后把焦点移到浮层内第一项,让跟随焦点的放大软件把镜头带进去;指针移向菜单时不要因「离开触发器」立刻关闭。
- 空间不够时向另一侧翻转,但翻转后仍应与触发器有可见重叠,而不是跳到屏幕对面。
- 验证:8× 镜头对准触发器,打开菜单,镜头不动拍一张。若一张里看不到任何可选项,就是出画。再把焦点移进菜单,看镜头是否跟上;跟上的过程里菜单不得关闭。