A1.02.6Placement by processing demand设计

细节判读类信息应放在预期注视点,变化类提示应放在周边可覆盖区域

别名: 信息布局分层 · 注视点布局 · foveal placement · peripheral placement

概念解释

界面上的信息按它需要哪种视觉能力来处理,可以分成两类:一类需要看清楚——读文字、辨认图标细节、判断精确数值,这类信息只有落在中央凹能覆盖的位置才处理得了;另一类只需要被察觉——有没有新消息、状态是否变了,这类信息即使停留在周边视野也能完成任务。这条是一条布局原则:把第一类信息放进用户预期会注视的位置,把第二类信息放进周边视觉够得着但不强求用户直视的区域。

这不是一条新的能力发现,而是把中央凹的能力边界(强在识别、弱在覆盖)和周边视觉的能力边界(强在探测、弱在识别)直接翻译成"什么内容该放在哪"的布局判断。

机制

违反这条原则会在两个方向上分别造成浪费。把需要精确识别的内容硬塞进周边区域(比如把关键数值放在屏幕边角、指望用户"扫一眼"就看懂),会因为周边视觉分辨率不足而根本读不出来,用户被迫转移注视才能看清,等于变相制造了额外的眼动成本。反过来,把只需要"被察觉"的状态提示做成必须直视才能发现的样式(比如放进密集文字区域中间、不给任何能被周边视觉捕捉的显著特征),会让它在用户没有主动扫视到那个位置之前一直不被发现,错失了周边视觉本可以免费提供的探测能力。

这两种浪费的共同根源是:设计时把"信息摆在屏幕上什么位置"和"信息需要什么等级的视觉加工"当成两件不相关的事来决定,而实际上二者必须匹配——决定信息该放哪,前提是先想清楚它究竟需要中央凹的识别能力,还是只需要周边视觉的探测能力。

边界

  • 两类需求可能在同一条信息里同时存在:一条通知既要"被察觉到有新内容",也最终要"被读懂具体内容",这种情况下正确做法是分两层设计——用周边可辨的显著特征(图标、色块、动效)负责被察觉的一层,用户注意到后主动移动视线,再由靠近预期注视点的文字完成被读懂的一层,不能指望一个视觉元素同时满足两种能力要求。
  • "预期注视点"因任务而变,不是屏幕上的固定坐标:阅读任务里预期注视点沿文字行推进,编辑任务里预期注视点常年停在光标附近,界面不同区域承担的任务不同,套用同一个"中心位置最重要"的假设会错判真正的预期注视点在哪。
  • 这条只处理单个用户在单次使用中的典型情形;如果同一界面被多种任务模式共用(如同一个仪表盘既给专注操作的人看也给巡视监控的人看),预期注视点会随任务模式漂移,需要分别设计而不是找一个折中位置。

怎么落地

  • 列出界面上每一处信息,先判断它属于"需要识别"还是"只需要察觉",再决定摆放位置,而不是先确定视觉稿的构图再往里面塞内容。
  • 需要识别的内容(数值、正文、需要判断对错的状态)放进用户当前任务的预期注视点附近,字号和对比度按视锐度的可辨识标准核实,不能假设"反正用户会凑近看"。
  • 只需要察觉的内容(新消息提醒、后台任务完成、非紧急状态变化)放进周边视觉可覆盖的区域,并给它一个能被周边视觉捕捉的显著特征(形状轮廓、色块、位置变化),不要求用户为了发现它而专门扫视过去。
  • 兼具两种需求的信息拆成两层:周边层负责让用户"知道有事发生",识别层等用户主动看过去后再呈现具体内容,两层可以是同一个组件的不同状态(如未展开的角标 vs. 展开后的详情)。
  • 验证办法:分别测试"用户能否在不直视的情况下发现该信息存在"(考察周边可探测性)和"用户直视后能否在预期时间内读懂内容"(考察识别可行性),两项分开验证,不要用同一次测试笼统判定"这条信息设计得好不好"。

延伸

  • 同组A1.02.1 中央凹提供高分辨率但覆盖角度极小 · A1.02.3 周边可用于提示存在,不能用于传递细节 · A1.02.5 中央凹与周边视觉在自然场景中协同完成"周边探测—中央确认"的两阶段加工
  • 相邻A1.01.3 界面元素超出有效视区就需要眼动或头动
  • 站内检索foveal placement · peripheral placement · information layout · glanceable

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/A1.02.6