J2.07.5floating UI overflow under magnification设计研究

悬浮显示的提示或菜单在放大状态下可能超出可视窗口

别名: 放大后菜单出画 · hover overflow · magnified popover

概念解释

点开「更多」时,菜单朝屏幕外沿展开。触发器还停在镜头中央,十二个选项已经全部落在镜头外面——不是字太小,是这层浮层根本没进当前窗口。下拉、日期面板、二级弹出、图表上的悬停卡,都会在放大路径上把「刚打开的东西」画到用户看不见的坐标。

贴着字段写错误文案,是提示要靠近对象;这里管的是浮层相对放大窗口的溢出。

机制

浮层的定位算法通常相对触发器或视口边缘:向下展开、不够就向上翻、贴着浏览器窗口。它不知道外面还套着一块放大镜头。镜头只覆盖触发器周围一小块时,向下展开 300 像素的菜单,对全屏用户是顺手的,对 8× 用户是整张菜单出画。

镜头若跟随指针,人一把指针移进菜单去点选项,镜头才姗姗来到——但菜单若因「指针离开触发器」而关闭,用户永远追不上。镜头若跟随键盘焦点,焦点还留在触发器上时,菜单同样在画面外。于是出现一种独特失败:功能已经打开,视觉上却像没打开。

怎么研究

在 4×、8× 下打开各类浮层(选择菜单、日期、溢出「更多」、图表 tooltip),截取打开瞬间的镜头画面。记录:浮层有百分之几的面积落在镜头内、是否必须平移才能看见第一项、平移过程中浮层是否关闭。自变量:定位策略(向下 / 向上 / 覆盖触发器)、镜头跟踪模式。因变量:可见比例、第一次成功点中选项的时间、误关次数。

把「打开后立即把焦点移进浮层」与「焦点留在触发器」对照,能看出跟随焦点的放大软件会不会把镜头带进菜单。

边界

很大、几乎占满浏览器窗口的模态,打开后镜头里至少能看到一块内容,溢出问题弱一些,变成「模态里还要不要再平移」。固定在视口四角的全局通知也不走触发器定位,失败模式变成别处突然出现。触屏长按菜单若出现在手指旁边,放大手势下仍可能出画,但关闭逻辑与桌面 hover 不同。完全键盘操作且焦点进入菜单时,跟随焦点的镜头可以救一部分——前提是焦点真的进去,而不是只在视觉上展开。

怎么落地

  • 浮层优先在触发器近旁展开,选项从紧挨触发器的位置开始排,不要先空出一大段再出现第一项。
  • 打开后把焦点移到浮层内第一项,让跟随焦点的放大软件把镜头带进去;指针移向菜单时不要因「离开触发器」立刻关闭。
  • 空间不够时向另一侧翻转,但翻转后仍应与触发器有可见重叠,而不是跳到屏幕对面。
  • 验证:8× 镜头对准触发器,打开菜单,镜头不动拍一张。若一张里看不到任何可选项,就是出画。再把焦点移进菜单,看镜头是否跟上;跟上的过程里菜单不得关闭。

延伸

  • 同组J2.07.1 屏幕放大后可视范围极小 · J2.07.2 相关元素分散会导致来回寻找 · J2.07.3 提示需靠近其对应的元素 · J2.07.4 屏幕放大软件下鼠标指针容易在界面中丢失定位 · J2.07.6 部分低视力用户依赖特定配色而非放大,需要兼顾两种适配路径 · J2.07.7 动态加载的内容若不触发焦点提示,放大用户难以察觉其出现
  • 相邻F1.08 浮层的锚定 · J3.02 焦点顺序与焦点陷阱
  • 站内检索magnified popover · hover overflow · lens clipping

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/J2.07.5