U6.06.2The difference from overview-plus-detail is whether they occupy two views设计

与总览加细节的区别在于是否分处两个视图

别名: 两种模式对比 · 总览加细节

概念解释

焦点加上下文与总览加细节(overview + detail)都承诺"既要细节又要全局",区别只在一个几何事实:前者的两个尺度共处同一视图,后者分处两个视图(主视图加小地图,或大图加概览窗)。这个差别决定了两者的成本结构与适用任务——选型就是在这两者之间做。

机制

分不分视图改变的是三类成本:视线成本——同视图对照零切换,双视图每次对照都要往返;空间成本——同视图模式要为焦点与上下文分画布(各让一步),双视图模式各自独占完整画布;实现成本——同视图模式的过渡与变形实现复杂,双视图只需布局加联动。由此得出选型规则:对照频繁且单次细节需求浅,同视图赢;细节需求深(要看完整分辨率)或全局图复杂(需要完整尺寸的概览),双视图赢。多数成熟产品两者并用——主图加小地图是双视图,树形折叠是同视图——关键是让每种任务落在更便宜的那个模式上。

边界

两者不是互斥选项而是连续谱:嵌在主图角落的小地图介于中间(空间上同一画布,逻辑上是两个视图)。判断标准仍是对照成本与空间成本的权衡,而不是形式上的"几个窗口"。屏幕尺寸也参与选型:小屏上双视图的空间代价急剧上升,同视图模式(折叠、抽屉)在移动端更常用。联动的存在弱化了双视图的切换成本——联动好的双视图(选择即时同步)体验上接近同视图,但视线往返仍在。

怎么落地

  • 设计前先估对照频率与细节深度:高频浅对照用同视图模式,低频深细节用双视图。
  • 双视图必配联动(选择同步、视野互指),把切换成本压到最低。
  • 验证:让用户在两种模式原型下完成同一对照任务,计时与出错率对比;差异显著时按便宜的模式落地。

延伸

  • 同组U6.06.1 焦点加上下文在同一视图内同时保留细节与全局 · U6.06.3 焦点区与上下文区之间需要连续可辨的过渡 · U6.06.4 该模式省去视线切换但增加了空间理解负担 · U6.06.5 焦点位置必须可由用户移动
  • 相邻U6.02.1 一个视图的选择应同步到相关视图 · U6.04.3 缩放需保留返回全局的入口
  • 站内检索overview plus detail · focus context comparison · minimap design

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/U6.06.2