F1.08.3flip not clip设计

屏幕边界处需翻转而非截断

别名: 浮层翻转 · collision flipping · 菜单裁切

概念解释

底栏一颗按钮向上不够展开完整菜单,菜单的下半截被视口裁掉,「退出登录」这类最后一项变得又看不见又点不到。正确的做法是整层翻到按钮上方,箭头跟着改方向,菜单项一张不缺。翻转而非截断(flip not clip)处理的是层和视口相撞:保住完整的可选集合,而不是保住「向下展开」这个默认方向。

滚动菜单内部可以作为不够翻的退路,但不能当第一选择——滚动等于承认有一部分目标默认不可见。

机制

默认方向(按钮下方、输入框右侧)是一条偏好,不是一条物理定律。视口是硬边界,裁切会把一部分目标的可视高度和命中高度同时打到零,Fitts 的 $W$ 对该项变成 0,该项从可选集合里消失。翻转用另一条仍有空间的轴重放整层,集合的基数不变,锚定关系改由新方向的箭头维持。

四个方向都不够时,才轮到缩放层或层内滚动。若先裁切,用户会以为集合就那么几项,把被裁掉的命令当成不存在。

边界

极小的表盘或画中画窗口四个方向都放不下完整层,翻转无效,必须层内滚动或跳到全屏页。方向本身带语义的层(「向下展开 = 进入子级」的级联菜单)翻转后要改箭头和缩进,避免被读成上一级。动画如果先向下再跳到上方,中间那一帧的裁切仍会让人以为项变少了,应在布局计算完成后再出场。从屏幕阅读器看,裁切不可见的项若仍在无障碍树里可以走到,视觉用户和辅助技术用户会看到两套不同的集合——要么都可及,要么都拿掉。

怎么落地

  • 打开浮层前用视口剩余空间做碰撞检测,默认方向不够就翻到对侧,箭头改指向。
  • 被翻转的层仍要完整露出每一项的命中区;翻完还不够,再允许层内滚动,并露出滚动线索。
  • 靠近左右边时优先左右翻,靠近底边时优先上下翻,不要斜着裁成一个缺角矩形。
  • 验证:把触发器分别放到四边和四角再打开层,检查是否存在被视口切掉、既看不见也点不到的项。有一项被切掉,这个方向就还在用截断。

延伸

  • 同组F1.08.1 浮层需指向其触发来源 · F1.08.2 锚定关系断裂时用户无法判断作用对象
  • 相邻F1.05 边缘与角落的可达性 · F1.12 固定元素与安全区
  • 站内检索flip not clip · collision flipping · viewport overflow

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F1.08.3