A2.11.5Over-symmetry masking importance hierarchy设计

过度追求对称会掩盖内容本身的重要性差异

别名: 对称掩盖重要性 · symmetry versus hierarchy

概念解释

把版面里所有元素都做成对称、等重的视觉处理(同样的大小、同样的间距、镜像的位置),看起来整齐,但如果这些元素背后的重要程度本来就不一样,这种一刀切的对称会让用户看不出该先看哪个——这是一个具体的设计陷阱,和"版面显得杂乱"是两种不同性质的问题,杂乱是信息太多,这里是信息重要性被抹平了。

机制

用户在一个画面里先看哪里、后看哪里,通常靠的是各处视觉特征(大小、对比度、位置、是否孤立)相对于周围的差异有多大,而不是绝对属性本身。严格的对称处理,按定义就是把镜像两侧的这些属性都做成一致——大小一致、间距一致、位置对称——这恰好抹掉了早期注意力用来分先后的那类差异。结果是画面里没有一处特别"跳出来",用户只能按照阅读顺序或者随意的顺序去扫视,而不是按照内容真正的重要程度去扫视,即便这些内容本来并不是同等重要的。

边界

这个陷阱专指"内容本身重要程度不一样,但设计者仍然坚持给它们对称、等重的视觉处理"这种情况,比如把"删除账户"和"保存修改"这两个后果完全不同的按钮做成位置、样式都对称呼应的一对。这不是在反对对称本身:如果内容确实同等重要、是一组真正平行的选项,对称处理正确地反映了这一点,不该为了制造出并不存在的主次之分而强行打破对称。

怎么落地

  • 在最终确定一处对称布局之前,先列出这几个元素实际的重要程度排序;如果排序不是完全持平的,就在其中至少一个维度上(大小、颜色权重、位置偏移)故意打破对称,而不是把所有维度都调成一致。
  • 验证办法:让用户极短暂地看一眼这个版面(一闪而过),然后问他们会先点哪个、觉得哪个是主要操作;如果回答和设计意图的重要性排序对不上,说明当前的视觉处理相对于实际的重要程度差异还是太对称了,需要在某个维度上拉开差距。

延伸

  • 同组A2.11.3 版面中的对称暗示平衡与正式,打破对称暗示动态与强调
  • 相邻F3.01 视觉权重的构成 · A2.02 相似性
  • 站内检索visual hierarchy · saliency · over-symmetry

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/A2.11.5