F1.08.1overlay anchoring设计

浮层需指向其触发来源

别名: 浮层锚点 · popover caret · 触发源

概念解释

工具栏上并排三颗「…」,点开中间那颗,菜单却从屏幕顶端掉下来,或者在内容区正中展开。三颗按钮哪一颗对上这张菜单,要靠猜。浮层锚定(overlay anchoring)要求浮层用位置、箭头或出场运动指出它的触发控件,让「这张层属于哪一次点击」成为看得见的几何关系。

下拉菜单贴着按钮下沿、日期选择从输入框长出来、气泡尾巴指回头像,都是在画这条关系。居中模态默认切断它。

机制

一次点击可以同时照亮多个候选——尤其当同样的图标在一排里重复。视觉系统用空间连续来消歧:层从哪个控件的边长出来,就归那个控件。箭头、小三角、共享元素转场是把这条连续画实的记号;缺了记号,层就变成无主面板,操作会被套到邻近那颗长得一样的按钮上。

居中出现还有一层错觉:它看起来像全局对话框,人会按「整页级」去理解,于是把应当作用于一行的动作(该行删除、该卡片分享)理解成作用于整个列表。

边界

真正的全局决策(退出登录、系统权限、跨页面的未保存警告)本来就不属于某个控件,居中且不指向任何触发源是对的。键盘触发的菜单没有屏幕坐标上的来源,锚定要改成焦点所在控件。屏幕阅读器不使用箭头,来源关系得写进层的可访问标题或 aria-labelledby。游戏 HUD 的径向菜单围绕准星,来源是准星而不是某个按钮,规则换成「围绕当前焦点」。

怎么落地

  • 由控件打开的菜单、气泡、选择器,默认从该控件的边沿长出,并用箭头或共享元素转场指回去。
  • 同一行里重复的触发器(每张卡片一颗分享),浮层必须贴着被点的那一颗,禁止共用一个屏幕中央的菜单实例。
  • 打开时如果触发器会改变外观(按下态、高亮),保持到层关闭,让来源在层存在期间一直可核对。
  • 验证:在有多个相同触发器的界面上打开浮层,遮住层的内容只留外形和箭头,问「它是哪颗按钮打开的」。指错,锚定就没建立。

延伸

  • 同组F1.08.2 锚定关系断裂时用户无法判断作用对象 · F1.08.3 屏幕边界处需翻转而非截断
  • 相邻F1.01 操作点与作用对象的距离 · F7.07 动效表达空间关系
  • 站内检索overlay anchoring · popover caret · trigger source

同组卡片

快捷操作

分享

分享当前页面

ios_share

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