06 · 可读性与视觉语言:画面必须服务玩法
06 · 可读性与视觉语言:画面必须服务玩法
好看但看不清的游戏,不是"美术太强",是技术美术失职。 本文件是 TA 唯一拥有"一票否决权"的领域。
1. 可读性第一定律
玩家看不清的关键物,等于不存在。
这不是审美问题,是数学问题。任何关键元素(敌人、平台、拾取物、危险区、可交互物) 必须在任何背景、任何光照、任何时刻都能被识别。
TA 的职责:不是等美术画完再评价"看不清",而是从技术上保证它不可能看不清。
2. 可读性的七个通道(按可靠性排序)
| 通道 | 可靠性 | 说明 | 技术实现 |
|---|---|---|---|
| 1. 明度 | ★★★★★ | 最可靠,色盲也有效 | 明度分层,强制 ≥30 L* 差值 |
| 2. 运动 | ★★★★★ | 动的东西一定被看见 | 微动、呼吸、闪烁、次级运动 |
| 3. 形状/剪影 | ★★★★ | 轮廓区分 | 独特剪影 + 描边 |
| 4. 尺寸 | ★★★★ | 大 = 重要 | 比例系统 |
| 5. 位置 | ★★★ | 屏幕中心/视线焦点 | 构图规则 |
| 6. 色相 | ★★ | 最不可靠(色盲占男性 8%) | 只能做辅助,不能做唯一通道 |
| 7. 纹理/细节 | ★★ | 远看无效 | 只在近景有效 |
铁律:关键元素必须同时满足 ≥2 个通道,且其中必须有明度或运动之一。
3. 量化判据(写进校验器)
明度差
| 关系 | 最小明度差(L*) | 说明 |
|---|---|---|
| 可交互物 vs 背景 | ≥ 30 | 硬指标 |
| 敌人 vs 背景 | ≥ 35 | 更高,因为要看反应 |
| 玩家 vs 背景 | ≥ 25 | 玩家自己在动,可略降 |
| 危险区 vs 安全区 | ≥ 25 | |
| 同屏两个不同阵营 | ≥ 20 | 友军/敌军区分 |
色相差
| 关系 | 最小色相差 |
|---|---|
| 可交互物 vs 背景 | ≥ 40° |
| 敌我区分 | ≥ 60° |
屏幕占比
| 元素 | 最小屏幕高度占比 |
|---|---|
| 玩家角色 | 8%(正常 15–25%) |
| 敌人(需要反应) | 5% |
| 拾取物 | 2% |
| 关键 UI 提示 | 1.5% |
反应时间
可见时间 ≥ 反应时间 × 1.5
- 人类平均视觉反应时间 ≈ 250ms
- 需要操作决策的 ≈ 400ms
- 所以敌人从"出现在屏幕"到"能伤害玩家"至少 600ms
4. 实现可读性的七个技术手段(TA 的工具箱)
1) 明度保险通道(Luminance Insurance)
给关键物在 shader 里留一个保底通道:
// 关键物 shader:保证最低明度
float3 finalColor = baseColor;
float lum = dot(finalColor, float3(0.2126, 0.7152, 0.0722));
finalColor *= max(1.0, _MinLuminance / max(lum, 0.001));
效果:无论环境多暗,关键物永远不低于某个亮度。一行代码解决一类问题。
2) 边缘光 / Rim Light(Fresnel)
float rim = 1.0 - saturate(dot(normal, viewDir));
rim = pow(rim, _RimPower) * _RimIntensity;
finalColor += _RimColor * rim;
作用:让主体从任何背景中"浮出"。成本低,效果极好。独立游戏必备。
3) 描边(Outline)
| 方式 | 成本 | 适用 |
|---|---|---|
| 背面外扩(Backface Hull) | 低 | 卡通/2.5D,最常用 |
| 后处理深度/法线边缘检测 | 中 | 全场景统一描边 |
| 顶点色标记描边宽度 | 低 | 可控粗细 |
| 手绘贴图描边 | 0 | 2D |
4) 动态遮罩(Dynamic Occlusion Fade)
玩家/敌人被遮挡时,用深度测试的剪影显示:
// 被遮挡时的玩家轮廓
if (depthTest_Fail) {
return _PlayerSilhouetteColor; // 纯色剪影
}
作用:永远知道玩家在哪。平台/动作游戏必备。
5) 地面投影/指示环(Blob Shadow / Decal Ring)
- 廉价(一个圆片 decal + 投影矩阵)
- 解决"这个东西在空中还是地上"的问题
- 跳跃游戏的核心可读性技术
6) 屏幕外指示器(Off-screen Indicator)
- 屏幕边缘的箭头/光晕
- 屏幕外敌人、目标、危险
- 实现:把世界坐标投到屏幕空间,clamp 到边缘
7) 动态景深/降饱和聚焦
- 除焦点外全部降饱和 + 轻模糊
- 强引导,但谨慎使用(会削弱环境沉浸感)
- 只在教学/关键提示时用
5. 常见可读性事故与修法
| 事故 | 原因 | 修法 |
|---|---|---|
| 玩家找不到自己 | 角色与背景色相/明度接近 | 明度保险 + Rim + 动态遮罩 |
| 看不清平台边缘 | 平台与地面同材质 | 平台边缘描边/亮边/顶点色高亮 |
| 敌人藏在背景里 | 敌人设计太"融入" | 敌我用不同明度层 + 描边 |
| 拾取物看不见 | 太小/太暗 | 加光晕 + 微动 + 地面指示环 |
| 太乱看不出主体 | 元素太多且对比接近 | 明度分层 + 局部降饱和 |
| 特效盖住敌人 | 特效 overdraw + 加性混合 | 特效降低不透明度/用加色但保留敌人明度保险 |
| 夜关卡全黑 | 亮度全压 | 夜景要有"月光边缘光",不是纯黑 |
| 危险区不明显 | 只靠颜色 | 加运动(闪烁/流动) + 明度差 |
6. 视觉语言:让读者能"读懂"世界
可读性之上是视觉语言——一套一致的、可学习的符号系统。
建立视觉词典(Visual Dictionary)
| 语义 | 视觉符号 | 全项目统一 |
|---|---|---|
| 可交互 | 高亮描边 + 微动 + 提示环 | 所有可交互物一致 |
| 危险 | 强调色 + 脉动 + 尖锐形状 | 所有危险一致 |
| 安全/存档 | 暖光 + 慢呼吸 + 圆形 | |
| 可破坏 | 裂纹材质 + 轻微震动 | |
| 已探索 | 去饱和 / 变暗 | |
| 未探索 | 高饱和 + 光 | |
| 路径 | 地砖/光带/颜色引导 | |
| 隐藏 | 与背景同色但轻微异常(玩家学会后能发现) |
关键:词典一旦建立,绝不能有一个例外。一次例外就摧毁玩家的学习。
视觉引导三件套
- 光:最自然的引导。亮处 = 去那里。
- 线:道路、栏杆、河流、光带——形状引导视线。
- 对比:周围暗,目标亮(或反之)。
禁止:用箭头/文字 UI 做主要引导(那是失败的可读性设计)。
7. "Juice"与可读性的关系
Juice(打击感/反馈)是可读性的一部分,不是装饰。
打击感五件套(按重要性)
| 元素 | 时长 | 参数建议 |
|---|---|---|
| Hitstop(顿帧) | 40–120ms | 轻击 40ms,重击 100ms,Boss 击杀 200ms |
| 屏震 Screen Shake | 100–300ms | 振幅 2–8px,衰减曲线 ease-out,频率 > 20Hz 会晕 |
| 闪白 Hit Flash | 60–120ms | 被打物体变纯白/强调色,1–2 帧全白最有效 |
| 形变 Squash & Stretch | 80–200ms | 挤压 0.8 / 拉伸 1.2,回弹用弹性曲线 |
| 击退 Knockback | 100–200ms | 敌人后移,给玩家"我打中了"的物理证明 |
再加一层(廉价但极有效):
- 击中粒子(4–8 个,不要多)
- 击中音效与闪白同帧(不同步会显著削弱手感)
- 数字/伤害飘字(仅在需要时)
- 命中处的短促径向冲击波(一个 mesh + 缩放动画)
技术侧要点:所有这些必须参数化并可全局调节,设计/策划能自己调。TA 提供 HitFeedback(intensity, type) 接口。
8. 可读性检查流程
每关必做的三重检查
- 灰度检查:截图转灰度,还能分清主次吗?不能 → 明度没分层。
- 色盲检查:用色盲模拟(红绿色盲/全色盲)过一遍,关键物还能分辨吗?
- 缩略图检查:截图缩到 320×180,还能看出主体和危险吗?不能 → 屏幕占比不够。
压力场景测试
找游戏里最乱的一帧(满屏敌人 + 满屏特效),检查:
- 玩家在哪?(5 秒内找到)
- 最近的威胁在哪?
- 出口在哪?
任何一项超过 2 秒 = 不合格。
9. 自检清单
- 每个关键元素有 ≥2 个识别通道吗?且含明度或运动?
- 灰度测试通过吗?
- 色盲测试通过吗?
- 缩略图测试通过吗?
- 最乱的一帧,玩家/威胁/出口能在 2 秒内找到吗?
- 关键物有明度保险吗?
- 被遮挡时还能看到玩家吗?
- 打击感五件套齐了吗?音效与视觉同帧吗?
- 视觉词典有例外吗?
- 主要引导是靠画面还是靠 UI 箭头?靠箭头的部分要重做。
10. 一句话总结
美术让画面"好看",技术美术让画面"好用"。 玩家不会抱怨"我看不清"——他只会说"这游戏手感差",然后退款。 可读性是体验的下限,不是加分项。