SuperAPI AI 工具集

law-of-similarity

设计与创作

查看项目

更新于 10-13 20:09

技能介绍

用途

该技能面向格式塔视觉知觉与系统性视觉语言设计,核心是把“相似律”用于实践:用共享的视觉属性(形状、颜色、大小、风格)来传达元素属于同一类别或同一组,并保持一致编码,使该信号持续有效。适用于需要跨越空间距离表达关系的场景。

原理

共享视觉特征的元素会被感知为相关,即使它们在空间上并不相邻;大脑会自动、无需提示地按相似性进行分组。相似性可以通过以下属性承载:

  • 颜色:相同填充表示相同类别、角色或状态
  • 形状:图标采用同一种风格(描边 vs. 填充 vs. 圆角)会被读作一组
  • 大小:同等大小的元素被读作同级;大小差异表示层级
  • 风格:相同的插画粗细、相同的字体处理、相同的圆角半径、相同的描边宽度

相似律与接近律

这两条是最基本的格式塔分组原则,它们相互作用,也可能冲突:

  • 元素距离近、颜色相同:两者相互强化,是最强的分组信号
  • 元素距离远、颜色相同:相似性使其跨越距离仍被分为一组
  • 元素距离近、颜色不同:接近律与相似律竞争,颜色把它们拉入不同子组
  • 元素距离近、风格不同:接近律把整体归为一组,风格差异在组内产生子组

当二者冲突时,相似性可能压过接近性:嵌入在一组蓝色元素中的红色元素,即使空间上紧邻,也会被读作独立。可有意识地借此标示类别边界。

设计应用

交互状态标记:所有可交互元素应共享一个非交互元素不具备的视觉属性(颜色、下划线处理、光标提示),无需显式说明即可让用户知道什么可点击;相似集合定义了交互类别。

类别与角色编码:导航项作为一组使用一致字体处理;破坏性操作使用仅属于该类别的独特颜色,集合内部的相似性传递“这些具有相同风险”;状态指示器使用一致的“颜色—含义”映射(绿=成功、琥珀=警告、红=错误)并统一应用。任何元素若无目的地偏离既有相似集合,用户会把该偏离读作有意义的信号,仿佛它属于另一类别。

设计系统与组件一致性:相似性是让设计系统感觉是“一个整体”而非无关组件堆砌的机制,包括所有按钮变体使用相同按钮形状、所有表单元素使用相同输入高度与边框处理、所有图标使用相同描边粗细与风格。非预期的相似性断裂——两个本应同类型的按钮存在略微不同的圆角半径——会被读作类别差异,应视作缺陷。

数据可视化:同一颜色在所有图表中代表同一数据系列;同一标记形状在不同图表类型中代表同一变量;多系列可视化中先按相似性(颜色、形状)分组、再看空间接近性是通行做法。

常见错误

  • 无意破坏相似性:本应统一的集合中出现细微视觉不一致,会传达出设计者并未意图的差异
  • 过度使用单一属性:用同一种颜色编码过多不同类别,会使该属性失去信号意义
  • 仅依赖颜色相似性:色盲用户无法区分仅靠色相编码的分组,应始终使用冗余编码

最佳实践

  • 在设计令牌中定义相似性词汇表:哪些视觉属性编码哪类关系
  • 把非预期的视觉差异当作缺陷:若两个元素应被读作同一类型,它们必须看起来完全一致
  • 对关键类别信号使用冗余编码(形状+颜色,而非仅颜色),使信息在色盲观看与单色渲染下仍可保留
  • 在不依赖颜色的前提下测试相似性分组:仅凭形状与大小,元素是否仍被读作相关
  • 检查密集布局,看相似性与接近性交互是否产生了非预期的子分组

限制

资料未提供该技能的具体安装方式、命令、平台支持、收费或价格信息。