Appearance
选择性注意 Selective Attention
简介说明
将我们的注意力集中于环境中的部分刺激——通常是那些与我们的目标相关的刺激的过程。
选择性注意是一个与冯·雷斯托夫效应密切相关心理学概念。
要点
人们通常会过滤掉不相关的信息。这是为了保持对重要或与当前任务相关的信息的关注。设计师必须引导用户的注意力，防止他们感到不知所措或分心，并帮助他们找到相关信息或采取行动。横幅盲点是一个选择性注意的例子现象，其中网站访问者有意识地或无意识地忽略横幅类信息。用户已经学会了忽略类似于广告、靠近广告或出现在传统广告位置的内容。避免混淆的方法是不要将内容样式设置为类似广告，或将在同一视觉区域放置内容与广告。变化盲点也是选择性注意的另一个例子现象，当界面发生重大变化但由于人类注意力的局限性以及缺乏强烈的提示而未被注意到时会发生。避免这种情况的方法是分析你的设计，以检查任何可能同时发生并可能分散注意力的竞争性变化。理论背景
Selective Attention(选择性注意)是 UX 设计中的核心认知原理,指人类在同一时间只能关注有限的信息,会自动过滤掉大部分刺激,只聚焦于与当前目标相关或突出的内容。理解这一原理对创造有效的用户界面至关重要。
核心概念
什么是选择性注意?
现实情况:
环境中有成千上万的信息刺激
↓
大脑自动筛选
↓
只有少数进入意识层面
比喻:
就像聚光灯 🔦
只照亮舞台的一小部分
其他部分在黑暗中人类注意力的局限:
- 一次只能专注处理少量信息(约 3-5 个对象)
- 注意力是稀缺资源
- 必须主动分配
- 容易被分散
经典实验
1. 看不见的大猩猩(Invisible Gorilla)
实验设计(Christopher Chabris & Daniel Simons, 1999):
任务: 观看视频,数白队传球次数
视频中: 一个穿大猩猩服装的人走过场地
结果:
50%的观众完全没注意到大猩猩!
启示:
当专注于特定任务时
我们会对其他信息"视而不见"
即使是明显的异常2. 鸡尾酒会效应(Cocktail Party Effect)
场景:
嘈杂的派对上,多人同时说话
能力:
• 可以专注听某一个人
• 过滤其他对话
• 但听到自己名字会立即注意
机制:
大脑持续监控环境
选择性放大相关信息3. 变化盲视(Change Blindness)
现象:
场景中的明显变化
如果不在注意焦点
人们常常察觉不到
示例:
• 对话中对方被换成另一个人
• 照片中移除大型物体
• 网页上横幅广告的变化
UX启示:
如果用户不关注某区域
即使大的变化也可能被忽略影响选择性注意的因素
1. 自下而上的注意(Bottom-Up)
由刺激本身特征驱动,自动触发:
✅ 吸引注意的特征:
视觉对比:
• 颜色对比(红色vs灰色)
• 大小对比(大按钮vs小文字)
• 动作(移动的元素)
突出性:
• 唯一不同的元素
• 空白空间中的物体
• 闪烁或动画
感官刺激:
• 声音提示
• 震动反馈
• 突然出现的元素
示例:
[灰色按钮] [灰色按钮] [红色按钮] ← 自动吸引眼球2. 自上而下的注意(Top-Down)
由目标和预期驱动,主动控制:
✅ 目标导向注意:
任务驱动:
用户: "我要找设置按钮"
大脑: 自动扫描齿轮图标⚙️
预期引导:
"登录按钮应该在右上角"
→ 视线首先看向右上角
经验影响:
熟悉的模式更容易注意到
符合预期的位置优先查看
关键词吸引:
搜索"价格"时
自动关注包含"¥"的内容在 UX 设计中的应用
1. 视觉层级(Visual Hierarchy)
引导用户注意力流动:
✅ 层级设计:
# 主标题 (最大,最显眼)
↓ 首先注意
## 副标题 (次要)
↓ 然后注意
正文内容 (普通)
↓ 最后阅读
[主要按钮] [次要按钮]
↑ ↑
明显 低调
F型阅读模式:
F━━━━━━━
F━━━
F━
│
↓ 用户自然扫描路径2. 减少视觉噪音
避免分散注意力:
❌ 注意力分散:
┌────────────────────┐
│[广告] [广告] [广告]│
│[导航] [导航] [导航]│
│ 核心内容 │ ← 淹没在噪音中
│[侧边栏][侧边栏] │
│[弹窗] [横幅] │
└────────────────────┘
✅ 聚焦设计:
┌────────────────────┐
│ 简洁导航 │
│ │
│ 核心内容 │ ← 清晰可见
│ (充足留白) │
│ │
│ [主要操作] │
└────────────────────┘3. 对比和强调
让重要内容脱颖而出:
✅ 有效对比:
颜色对比:
普通文字 [重要按钮]
(灰色) (高对比色)
大小对比:
小文字 | 大标题
↑ 吸引注意
位置对比:
密集内容区
↓
[留白中的CTA按钮] ← 自然焦点
↓
密集内容区
示例:
购物页面:
产品描述(灰色,小字)
¥999 → ¥599 (大字,红色) ← 立即注意
[立即购买] (鲜艳按钮)4. 引导性设计(Directional Cues)
主动引导注意力:
✅ 视觉引导:
箭头指示:
"新功能在这里 ➡️ [功能]"
视线引导:
照片中人物的视线方向
引导用户看向关键内容
动画引导:
元素轻微晃动
"嘿,看这里!"
空白空间:
↓
[孤立的元素]
↑
空白自然引导视线5. 运动和动画
动态元素自动吸引注意:
✅ 有意义的动画:
加载状态:
[○ 正在处理...] (脉动动画)
→ 告诉用户"系统在工作"
通知提示:
右上角图标跳动
"您有新消息"
微交互:
按钮按下缩放
强化操作反馈
❌ 过度动画:
• 多个元素同时动
• 无意义的装饰动效
• 持续的闪烁
结果: 分散注意力,干扰任务6. 分组和接近性(Proximity)
相关元素靠近,便于统一注意:
✅ 格式塔原则应用:
表单分组:
┌─ 个人信息 ─┐
│ 姓名 │
│ 邮箱 │ ← 一组(一次注意)
│ 手机 │
└─────────────┘
┌─ 地址信息 ─┐
│ 省市 │
│ 街道 │ ← 另一组
│ 邮编 │
└─────────────┘
而非混在一起:
姓名
邮箱
省市 ← 认知负荷高
手机
街道7. 注意力热区(Attention Hotspots)
利用用户自然关注的区域:
✅ 黄金位置:
F型布局(内容页):
F━━━━━━━ ← Logo、导航
F━━━ ← 标题
F━ ← 开头段落
│
↓
Z型布局(落地页):
Z━━━━━━━ ← Logo到CTA
╲
╲ ← 视线路径
╲
Z━━ ← 底部CTA
中心视觉:
移动端屏幕中心
大拇指易达区域常见的注意力陷阱
1. 横幅盲视(Banner Blindness)
现象:
用户自动忽略看起来像广告的内容
表现:
┌────────────────┐
│ [横幅图片] │ ← 被忽略
├────────────────┤
│ 实际内容 │ ← 关注这里
└────────────────┘
解决方案:
• 重要内容避免横幅样式
• 减少装饰性图片
• 融入内容流2. 变化盲视(Change Blindness)
问题:
用户不关注的区域
即使变化也注意不到
示例:
侧边栏更新通知(但用户不看侧边栏)
页脚新增链接(很少有人滚动到底部)
解决方案:
• 重要更新用动画吸引注意
• 在用户视线路径上提示
• 使用通知机制3. 注意力隧道(Attentional Tunneling)
现象:
过度专注于某一任务
忽略其他重要信息
示例:
用户专注填表单
→ 错过了顶部的错误提示
→ 提交失败,不知道原因
解决方案:
• 内联错误提示(在填写处)
• 阻止提交并高亮错误
• 视觉/听觉提醒4. 信息过载(Information Overload)
问题:
太多信息竞争注意力
导致无法聚焦
示例:
┌──────────────────┐
│[图标][图标][图标]│
│[通知][通知][通知]│
│[按钮][按钮][按钮]│ ← 不知道看哪里
│[文字][文字][文字]│
└──────────────────┘
解决方案:
• 渐进式披露
• 清晰的视觉层级
• 限制同屏元素数量
• 充足的留白不同场景的应对策略
1. 紧急情况/错误状态
✅ 强制注意:
关键错误:
┌──────────────────┐
│ ⚠️ 警告 │
│ │
│ [模态对话框] │ ← 占据中心
│ 无法忽视 │
│ │
│ [确定] [取消] │
└──────────────────┘
特点:
• 覆盖层(遮罩背景)
• 中心位置
• 高对比色
• 需要交互才能继续2. 引导新用户
✅ 渐进式聚焦:
步骤1:
[聚光灯效果]
↓
┌────┴────┐
│ 这是菜单│ ← 高亮
└─────────┘
周围暗化
步骤2:
移动聚光灯到下一个功能
特点:
• 一次聚焦一个功能
• 其他元素暗化
• 减少认知负荷
• 可跳过3. 复杂工作流
✅ 步骤导航:
当前步骤高亮:
[●]──[●]──[○]──[○]
1 2 3 4
↑
你在这里
上下文提示:
┌─────────────────┐
│ 第2步: 选择配置 │
│ (还有2步完成) │
└─────────────────┘
帮助用户维持注意力在当前任务4. 内容浏览
✅ 可扫描设计:
标题层级:
# 主要章节
## 次级标题
• 要点列表
• 要点列表
视觉锚点:
• 数字
• 图标
• 粗体关键词
• 高亮引用
便于快速扫描
找到感兴趣的内容实际应用案例
案例 1: Google 搜索
极简聚焦设计:
首页:
[Google Logo]
↓
[搜索框] ← 唯一焦点
↓
[搜索按钮]
周围大量留白
无其他干扰元素
100%注意力在搜索任务
结果页:
清晰的视觉层级
蓝色链接吸引点击
广告明确标注(减少混淆)案例 2: Medium
阅读优化:
文章页面:
• 最大化内容区域
• 隐藏非必要UI
• 衬线字体(易读性)
• 充足行距
• 适当字号
侧边栏:
• 只在滚动时出现
• 不干扰阅读
• 半透明设计
目标: 100%注意力在内容案例 3: Stripe 支付页面
关键时刻的聚焦:
支付界面:
┌────────────────┐
│ 订单摘要(小字) │
├────────────────┤
│ │
│ [支付信息表单] │ ← 核心任务
│ │
│ [支付按钮] │ ← 突出显示
│ │
└────────────────┘
特点:
• 移除导航(防止跳出)
• 信任标识(SSL图标)
• 简化表单
• 单一行动号召
• 减少决策点
转化率提升的关键案例 4: Duolingo
游戏化注意力设计:
课程界面:
┌────────────────┐
│ 进度: [██░░] │ ← 顶部状态
├────────────────┤
│ │
│ [问题] │ ← 中心任务
│ [选项] │
│ [选项] │
│ │
├────────────────┤
│ [检查答案] │ ← 底部行动
└────────────────┘
无其他干扰:
• 无广告
• 无通知
• 无多余按钮
• 专注学习
配合:
• 鲜艳颜色(吸引注意)
• 即时反馈
• 动画奖励(峰值注意)案例 5: Slack
通知管理:
多层注意力系统:
1. 红点徽章 🔴 (高优先级)
2. 数字提示 (3) (中优先级)
3. 静默更新 (低优先级)
消息列表:
• 未读消息: 粗体 ← 自动注意
• 提及你: 高亮 ← 强制注意
• 普通消息: 正常显示
设置:
• 用户可控制通知级别
• 勿扰模式
• 关键词提醒
平衡: 必要的注意 vs 不被打扰案例 6: Apple 产品页面
视觉叙事引导注意:
滚动式设计:
[大图 + 简短文案]
↓ 滚动
[特写 + 关键功能]
↓
[对比展示]
↓
[技术参数]
↓
[购买CTA]
特点:
• 每屏一个焦点
• 高质量视觉
• 最小化文字
• 渐进式信息
• 引导滚动到购买
控制注意力流动移动端的特殊考量
小屏幕 = 更少注意力容量
✅ 移动优化:
1. 一次一个任务
┌──────┐
│ 标题 │
│ │
│ 内容 │ ← 单一焦点
│ │
│[操作]│
└──────┘
2. 大拇指区域
易达区 ↓
┌──────┐
│ │
│ │
│[按钮]│ ← 底部
└──────┘
3. 减少滚动
关键信息首屏可见
4. 明确的点击目标
按钮至少44×44像素可访问性(Accessibility)
为所有用户设计注意力
✅ 包容性设计:
视觉障碍:
• 不只依赖颜色传达信息
• 使用图标+文字
• 充足的对比度
• 屏幕阅读器兼容
注意力障碍(ADHD):
• 减少动画干扰
• 提供专注模式
• 清晰的步骤指示
• 减少多任务需求
认知障碍:
• 简化语言
• 一致的布局
• 清晰的视觉层级
• 避免认知过载设计清单
优化选择性注意
✅ 设计检查:
视觉层级:
□ 最重要的内容最显眼?
□ 清晰的视觉权重?
□ 符合用户预期的位置?
对比和聚焦:
□ 主要行动清晰突出?
□ 充足的留白?
□ 减少了视觉噪音?
引导和流动:
□ 视线路径清晰?
□ 步骤引导明确?
□ 用户知道下一步?
动态元素:
□ 动画有目的性?
□ 不会过度干扰?
□ 加强而非分散注意?
上下文:
□ 信息出现在相关位置?
□ 内联提示而非远程?
□ 符合用户当前任务?测量和优化
评估注意力设计
定量方法:
1. 眼动追踪(Eye Tracking)
• 热力图: 用户看哪里?
• 视线路径: 按什么顺序?
• 停留时间: 看多久?
2. 点击追踪
• 点击位置分布
• 误点率
• 查找时间
3. A/B测试
变量: 按钮颜色/位置/大小
测量: 点击率变化
定性方法:
1. 用户测试
"请找到X功能"
观察: 视线、犹豫、困惑
2. 5秒测试
显示界面5秒
问: "你记得什么?"
验证: 重点是否被注意
3. 首次点击测试
任务: "预订会议室"
测量: 第一次点击哪里?
正确率反映注意力引导与其他 UX 原理的关系
Selective Attention ↔ Cognitive Load
└─ 减少认知负荷帮助聚焦注意
Selective Attention ↔ Visual Hierarchy
└─ 层级引导注意力分配
Selective Attention ↔ Gestalt Principles
└─ 分组减少注意力碎片化
Selective Attention ↔ Progressive Disclosure
└─ 渐进披露管理注意力负担
Selective Attention ↔ Fitts's Law
└─ 重要目标应大且近(易注意+易点击)
Selective Attention ↔ Mental Model
└─ 符合预期的位置更易被注意关键要点
🎯 核心理解: 注意力是稀缺资源,设计要争夺和引导它
🎯 设计目标: 让用户注意力聚焦在最重要的信息和操作上
🎯 基本原则:
• 每屏一个主要焦点
• 清晰的视觉层级
• 减少竞争元素
• 对比突出重点
• 引导注意力流动🎯 实践策略:
1. 识别用户目标
2. 确定关键信息
3. 设计视觉层级
4. 测试注意力流
5. 迭代优化🎯 常见错误:
❌ 所有元素都想突出 = 没有突出
❌ 信息过载
❌ 位置不当
❌ 缺乏对比
❌ 过度动画干扰🎯 黄金法则:
"如果所有东西都重要,那么什么都不重要"
优先级排序:
必看 > 应看 > 可看 > 不必看
设计反映优先级🎯 移动端特别注意:
屏幕小 = 注意力容量更有限
• 极简设计
• 一次一件事
• 大触控目标
• 关键信息首屏🎯 可访问性:
不只依赖单一感官:
• 颜色 + 形状 + 文字
• 视觉 + 听觉反馈
• 考虑注意力障碍用户🎯 持续优化:
通过数据了解:
• 用户实际注意什么?
• 忽略了什么?
• 在哪里迷失?
• 如何改进引导?最终思考
Selective Attention 揭示了一个基本真理:用户注意力是 UX 设计中最宝贵的货币。
优秀的设计就像一个熟练的向导,知道:
- 何时吸引注意力(重要时刻)
- 何时让用户专注(复杂任务)
- 何时减少干扰(深度工作)
- 如何引导视线(信息架构)
记住 Steve Jobs 的设计哲学:"Simplicity is the ultimate sophistication"(至繁归于至简)。简化不是移除功能,而是管理注意力——让用户在正确的时间注意到正确的东西。
在信息爆炸的时代,尊重和保护用户的注意力不仅是好的 UX 设计,更是伦理责任。设计不应该争夺注意力,而应该引导它、保护它、让它产生最大价值。