F1.09.2side-placed overlay设计

需要对照内容的浮层应侧置而非居中

别名: 侧置浮层 · inspector panel · 对照式面板

概念解释

翻译校对要一边看原文一边改译文。把编辑框做成屏幕正中的模态,原文被盖在底下,对照被拆成「记住一句、关掉层、再打开」。把编辑框停在原文旁边,两段文字可以同时进视野,对照是空间上的并列,不是时间上的切换。侧置(side-placed overlay)给的是对照式任务的默认结构:层与内容共享视口,而不是轮流占用视口。

查词气泡贴着单词、设计软件的检查器停在画布一侧、代码的重构预览开在被改文件旁边,都是这条结构。正中的确认框不是。

机制

对照要的是两块信息同时在中央凹附近,中间只隔一次短扫视。居中模态把其中一块整页级地拿掉,对照被迫改走工作记忆:看 A,关层,看 B,再开层。容量小、还会被层的开关动画打断。侧置把 A 和 B 做成左右或上下两个稳定区域,扫视取代记忆。

侧置会牺牲内容宽度。这是故意的交换:少一列正文,换回对照循环。如果产品选择「内容要最大宽度」而把调节做成居中模态,就是在宽度上赢了、在对照上输了。

边界

不需要对照的决策(是否订阅、是否授予权限)居中更好,因为它阻断背后的操作,避免一边点一边被内容带走。极窄屏幕侧置会把内容压成不可读的一条,这时应改成半屏抽屉,内容仍露出上半或下半,而不是改回居中全遮。多列桌面已经把检查器做成常驻侧栏时,再弹一层侧置会叠出第三条带,应该往常驻栏里塞,而不是再开浮层。

怎么落地

  • 翻译、批注、检查器、属性面板这类对照任务,默认停在内容的左侧或右侧(书写方向的对侧),不要做成全屏居中。
  • 窄屏退化为占一半高度的抽屉,背后内容保持可见且可滚到被对照的那一行。
  • 侧置层打开时不要把背后内容完全锁死滚动——对照常常需要把对象滚进旁边那条缝。
  • 验证:打开层之后,不关闭层,能否把对象和正在改的字段同时指出来。指不出同时在场的一对,层就还是居中那一套。

延伸

  • 同组F1.09.1 浮层不得遮挡其正在操作的目标 · F1.09.3 遮挡不可避免时需允许临时移开
  • 相邻F1.13 操作区与阅读区的分离 · F2.07 信息密度
  • 站内检索side-placed overlay · inspector panel · comparison overlay

同组卡片

快捷操作

分享

分享当前页面

ios_share

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