F1.08.3flip not clip设计
屏幕边界处需翻转而非截断
别名: 浮层翻转 · collision flipping · 菜单裁切
概念解释
底栏一颗按钮向上不够展开完整菜单,菜单的下半截被视口裁掉,「退出登录」这类最后一项变得又看不见又点不到。正确的做法是整层翻到按钮上方,箭头跟着改方向,菜单项一张不缺。翻转而非截断(flip not clip)处理的是层和视口相撞:保住完整的可选集合,而不是保住「向下展开」这个默认方向。
滚动菜单内部可以作为不够翻的退路,但不能当第一选择——滚动等于承认有一部分目标默认不可见。
机制
默认方向(按钮下方、输入框右侧)是一条偏好,不是一条物理定律。视口是硬边界,裁切会把一部分目标的可视高度和命中高度同时打到零,Fitts 的 $W$ 对该项变成 0,该项从可选集合里消失。翻转用另一条仍有空间的轴重放整层,集合的基数不变,锚定关系改由新方向的箭头维持。
四个方向都不够时,才轮到缩放层或层内滚动。若先裁切,用户会以为集合就那么几项,把被裁掉的命令当成不存在。
边界
极小的表盘或画中画窗口四个方向都放不下完整层,翻转无效,必须层内滚动或跳到全屏页。方向本身带语义的层(「向下展开 = 进入子级」的级联菜单)翻转后要改箭头和缩进,避免被读成上一级。动画如果先向下再跳到上方,中间那一帧的裁切仍会让人以为项变少了,应在布局计算完成后再出场。从屏幕阅读器看,裁切不可见的项若仍在无障碍树里可以走到,视觉用户和辅助技术用户会看到两套不同的集合——要么都可及,要么都拿掉。
怎么落地
- 打开浮层前用视口剩余空间做碰撞检测,默认方向不够就翻到对侧,箭头改指向。
- 被翻转的层仍要完整露出每一项的命中区;翻完还不够,再允许层内滚动,并露出滚动线索。
- 靠近左右边时优先左右翻,靠近底边时优先上下翻,不要斜着裁成一个缺角矩形。
- 验证:把触发器分别放到四边和四角再打开层,检查是否存在被视口切掉、既看不见也点不到的项。有一项被切掉,这个方向就还在用截断。