E4.12.1popover anchoring to trigger设计研究

弹出层需锚定到触发元素

别名: 弹出层锚点 · 锚定弹出 · 触发器对齐 · anchored popover

概念解释

弹出层是由某个控件唤出的小层,内容属于那个控件。锚定到触发器(anchoring to the trigger)要求弹出层的位置从该控件算起:贴着它的边,用箭头或对齐边声明「这份菜单、这份日期、这组操作是这个按钮的」。居中浮在屏幕上的是对话框,不是弹出层。锚定回答的是「这层属于谁」,不是到了边缘怎么翻,也不是会不会挡住触发器本身。

机制

人用空间归属来理解临时层。层若贴着刚点的按钮出现,归属几乎自动成立:这是刚才那个动作的下文。层若出现在屏幕中央或上一次弹出留下的位置,归属要靠阅读标题来补,标题一含糊就会点错对象——尤其一排相同图标时,弹出层不知道该服务于哪一枚。锚定还把关闭范围说清:点另一个触发器应关掉这个再开那个,因为归属已经换了。实现上锚点是触发器的边框矩形,弹出层沿指定边对齐;触发器在滚动中移动时,层要跟着移动,否则归属在滚动的第一帧就断。锚定不是装饰性的小箭头,箭头可以加强声明,真正起作用的是层与触发器的相邻关系。

怎么研究

在一排相同按钮上打开弹出层,比较紧贴触发器、居中、以及停在上一次坐标三种。问「这层管的是哪一枚」并让被试对正确对象执行动作。自变量:锚点是否跟随、按钮间距、有无箭头。因变量:对象归属错误、开错按钮后的纠正。滚动容器里再测层是否跟住触发器。居中条件下归属错误应明显高于锚定条件。

边界

没有单一触发器的弹出(从空白处右键)锚的是指针位置,仍是一个空间原点,只是原点不是控件。键盘唤出时锚仍应是当前焦点控件,而不是指针。触发器在视口外时,锚定会把层也带到看不见的地方,应先把触发器滚进视口再弹出,而不是改成居中。大到几乎全屏的「弹出层」已经失去锚定的意义,应改用对话框或面板。

怎么落地

  • 弹出层的坐标以触发器矩形为原点,沿明确的边对齐;滚动时同步更新。
  • 同一排触发器各自锚定,禁止共用一个全局弹出坐标。
  • 用相邻和可选的箭头声明归属,不要把标题当作唯一归属手段。
  • 验证:在一排图标上打开层,问这层属于哪一枚。指错就还没锚上。

延伸

  • 同组E4.12.2 边界处需自动翻转方向 · E4.12.3 弹出层不得遮挡其触发对象
  • 相邻E4.10 模态对话框 · E4.13 工具提示 · E5.12 下拉菜单与子菜单
  • 站内检索anchored popover · trigger alignment · floating UI

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E4.12.1