U6.06.3The transition between focus and context must be continuous and legible设计
焦点区与上下文区之间需要连续可辨的过渡
别名: 焦点过渡 · 渐变放大
概念解释
焦点区与上下文区的交界处是这类模式的成败点:从放大的焦点到压缩的上下文,尺度变化必须连续可辨——渐变的放大率、清晰的边界处理、可追踪的对应关系。生硬的断崖式切换(一半正常一半压扁、或突然的接缝)会让用户在交界处丢失对应感,"哪里是焦点的边"变成持续的小困惑。
机制
过渡可辨性的作用是支撑"对应追踪":用户在焦点区看到的元素要能无缝地对应到上下文区的同一元素,这依赖两点——尺度变化连续(相邻元素的大小差异不超过可感知的跳跃)与映射关系可见(能看出焦点区是上下文区的哪一段的放大)。尺度断崖破坏前者:边界两侧相邻元素尺寸突变,"它们是相邻元素"的知觉被切断;边界处理不当破坏后者:焦点像浮在上下文上方的一块玻璃,与底图没有对位关系。渐变过渡(如鱼眼的连续变形)天然满足连续性,分块式设计(折叠树)则需要显式的对应标记(展开箭头、高亮同步)来补足。
边界
连续性不必是几何连续:折叠树在"展开"处是硬边界,但展开箭头与缩进结构提供了明确的结构对应,可辨性达标。相反,几何上连续但语义断裂的过渡(变形导致元素重叠错位)反而有害。过渡的幅度也要克制——焦点的放大倍率越高,周边压缩越剧烈,交界处的变形越难读;高倍率需求应该改用双视图方案而不是硬拉变形。动画过渡(焦点移动时的连续变形)能极大帮助对应追踪,但要遵循动效可关的规范。
怎么落地
- 焦点边界两侧的元素尺寸差设上限,超出时平滑过渡或补对应标记。
- 分块式焦点(折叠、抽屉)在边界处提供结构指示(箭头、缩进、编号)。
- 验证:让用户在焦点区选一个元素,指出它在上下文区的对应位置;指认顺畅即过渡合格,反复寻找即对应断裂,补过渡或标记。