E4.12.2popover collision flipping设计研究
边界处需自动翻转方向
别名: 弹出层翻转 · 碰撞翻转 · 视口避让 · flip placement
概念解释
弹出层按偏好方向贴着触发器打开，比如默认在下方。靠近视口或滚动容器的边时，这个方向会把层裁出窗口。碰撞翻转（collision flipping）是在画出之前换一个还能整层放下的方向：下变上、右变左，必要时再移位。它保的是层的完整可见，不改锚点属于谁，也不处理层是否盖住触发器。
机制
视口是硬裁切。层的一部分落到窗外，那一部分上的选项等于不存在，人会以为菜单就那么几项。偏好方向是一条先验（多数桌面菜单向下），边界条件来了就要让位给可见性。翻转应在打开的那一帧完成，中途不要先裁再翻，否则会闪一下残缺菜单。滚动容器的边和视口的边都要算：贴着页面底部的按钮，层向页内翻，而不是向已经不可见的窗外翻。可用空间仍不够时，翻转不够，还要在锚点的轴上平移或让层内部滚动；平移仍应保持与触发器的边接触，否则翻转成功了归属却丢了。方向决策是几何问题，不该因内容长度每次打开都跳，否则同一按钮的菜单有时在上有时在下，空间记忆无法形成。
怎么研究
把触发器放在视口四边和四角，记录打开方向、是否被裁切、用户是否找到被裁掉的项。自变量：偏好方向、视口尺寸、层的高度。因变量：裁切像素、第一次打开是否可见完整、同一触发器连续打开方向是否稳定。四角是最容易同时撞两条边的位置，应单独看。
边界
极小视口上任何方向都会裁切，翻转无法拯救，应改用全宽的底部面板。固定方向是产品隐喻的一部分（向下展开的选择器）时，翻转会破坏隐喻，可改为内部滚动并紧贴触发器，而不是翻到上方变成另一种控件。动画若先播偏好方向再翻，用户会以为层在跳动，应直接出现在最终方向。
怎么落地
- 打开前用视口和最近滚动容器做碰撞检测，选一个能放下整层的方向；同一次会话里同一触发器尽量用同一方向。
- 仍放不下就沿锚边平移或让层内滚动，不要让选项露在窗外。
- 不要先以裁切态绘制再纠正。
- 验证：把触发器拖到四个边角各开一次，层应完整可见。任何一次缺一块，翻转就还没覆盖那种碰撞。