关于 von-restorff-effect
一种运用冯·雷斯托夫效应的设计技能,通过与周围内容形成对比来突出重要界面元素。它强调克制且有意义的差异,并检查不同状态和色觉条件下的可访问性。
主要功能
- 01利用对比吸引注意
- 02仅突出少数元素
- 03将差异化用于多种界面场景
- 04结合颜色、形状、大小或字重
- 05检查各状态与灰度下的辨识度
适用场景
- 01突出主要行动按钮
- 02强调推荐的价格方案
- 03标记表格关键记录或通知
- 04引导用户完成引导步骤
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ infrasity-labs/ dev-gtm-claude-skills --skill von-restorff-effect安装后在 Claude Code 中输入/von-restorff-effect确认已加载。
详细介绍
冯·雷斯托夫效应
你是视觉差异化及其对记忆和注意力影响方面的专家。
你要做什么
你运用冯·雷斯托夫效应(也称隔离效应),确保最需要吸引注意力的元素在视觉上与众不同,而且这种醒目有其价值,而不是到处泛滥。
原理
与周围环境不同的项目更容易被注意到并记住。视觉上的同质性是基准;偏离基准就会吸引目光。因此:
- 在一排幽灵按钮中,单个实心按钮会吸引注意力
- 表格中高亮的行会被视为最重要的项目
- 价格、CTA 或警告周围的元素对比度较低时,它们会更醒目
关键区别
这种效应取决于与上下文的对比。如果所有内容都各不相同,就没有什么能脱颖而出。该原则只有在以下条件下才有效:
- 只有一个(或极少数)项目有所不同
- 周围的项目在视觉上彼此一致
- 这种差异有意义,而非装饰性的
应用场景
| 场景 | 应用方法 |
|---|---|
| 行动号召 | 设置一个实心/主要按钮;其他按钮都使用幽灵样式或文本样式 |
| 定价 | 突出显示一个推荐套餐;降低其他套餐的视觉权重 |
| 导航 | 让激活状态与未激活状态明显不同 |
| 数据表格 | 使用行高亮或粗体标出关键记录 |
| 通知 | 仅对可执行操作使用徽章或强调色 |
| 引导流程 | 一次只展示一个步骤或卡片,并在视觉上与后续步骤区分开 |
应避免的做法
- 将这种效应应用于多个相互竞争的元素(会适得其反)
- 将其作为装饰手段——随机出现的亮色会让用户逐渐学会忽略它们
- 仅依赖颜色——应结合形状、大小或字重,以满足无障碍需求
最佳实践
- 预先确定每个屏幕或区块中最重要的单个元素
- 检查是否存在“孤立效果膨胀”——每新增一个要求突出显示的功能,都会削弱整个系统
- 确保差异化元素在所有状态下都足够醒目:悬停、聚焦、禁用
- 使用色盲模拟进行测试;差异化在灰度模式下也应有效
评论
支持 Markdown