视觉识别与设计
好的玩家教育，应当和你的其他传播内容一样易读、一样用心设计。本模块涵盖自适应识别模型、Tier 1（第一层级）与Tier 2（第二层级）各自不同的视觉处理，以及品牌系统采用的无障碍要求和设计约定。
Operator note: 请将全文中的
{{PROGRAM_NAME}}替换为贵方的项目名称。默认配色、字体系统和分级规则属于品牌系统的一部分，不应改动。而真正需要你自定义的部分——你的颜色、字体和标志——正是自适应识别模型专门留给你调整的。旁白脚本应以Playbook的Tier 1声音录制，标注为Tier 2的小节除外。
项目： 品牌基础 | 时长： 约20分钟 | 前置条件： RG基础
快速浏览目录
| 章节 | 内容 | 时间 |
|---|---|---|
| 学习目标 | 完成本模块后你将掌握什么 | — |
| 第1节：视觉系统原则 | 自适应识别、配色、字体、图标、摄影 | 约7分钟 |
| 第2节：Tier 1与Tier 2的视觉规则 | 两个级别在视觉上有何不同、在具体语境中审阅设计 | 约7分钟 |
| 第3节：无障碍要求 | WCAG 2.1 AA基线、深色模式、发布前清单 | 约4分钟 |
| 模块测验 | 5道评分题，合格线80% | 约2分钟 |
| 要点总结 | 小结 | — |
| 参考资料 | Playbook品牌资源链接 | — |
学习目标
完成本模块后，你将能够：
- 运用自适应识别模型，就一次新的运营商部署向设计师作简报
- 将Tier 1与Tier 2的视觉规则应用于任何作品——包括它们在流程中途切换的情形
- 在真实作品上检查WCAG对比度要求，以及Playbook关于触控目标尺寸和字体的设计约定
第1节：视觉系统原则
阅读
玩家教育应当得到与运营商其他传播内容同等的用心。清晰的视觉层次、有用的信息和易读的字体，比堆砌装饰效果更重要。
自适应识别模型在保持共同结构的同时，允许运营商使用自己的品牌识别：
- 运营商可以自定义配色、标题和正文字体、标志、联合品牌以及摄影风格。
- 布局模式、间距、信息层次、双线宽图标系统和组件结构保持一致。
Playbook的默认识别以海军蓝#1B2838构成主体结构，以青绿#10B981用于强调和操作，以橙色#FF6B35作为可选的Tier 1点缀色。当前物料可能只用到这套配色的一部分。并不是每件教育物料都必须用橙色。
- 海军蓝 #1B2838主背景、标题和品牌识别
- 青绿 #10B981强调和操作，需核查对比度
- 橙色 #FF6B35可选的Tier 1点缀色
状态颜色另有分工。 成功（#00C853）、警告（#FFB300）、危险（#FF3D00）和信息（#2979FF）用于传达状态。调整品牌识别时，要保持这些含义不变，并配上文字或其他提示，确保颜色绝不是唯一的信号。核查每种背景上的文字对比度。
教学用字体系统用Inter排标题和控件，用Source Sans 3排正文，用Source Code Pro排数据和联系电话范例。Source Code Pro能让形近字符彼此分明。当前已发布的物料可能通篇使用Inter；录音讲的是这套教学用字体系统，而不是每一份现行导出的物料。
图标系统使用两种线宽。 在原生坐标尺寸下，外层结构用2个单位的线宽，内部细节用1个单位的线宽。放大SVG时，渲染出的线条也会随之变粗，所以这些数值并不是在任何显示尺寸下都固定不变的屏幕像素。只在图标有助于识别控件或说明内容时才使用。
摄影和插画必须服务于信息。 避免暗示稳赢、美化高额投注，或分散对支持信息注意力的图像。照片上的文字需要受控的背景处理和实测的对比度；单靠加一层渐变，并不能证明它达标。
旁白脚本
Narrator: [transition slide] {{PROGRAM_NAME}}的视觉系统从三种品牌色开始。海军蓝是主色——信任与权威。祖母绿是辅色——交互元素、链接、行动号召。醒目橙是强调色——为Tier 1素材带来活力,而在Tier 2中彻底消失。
[show three-color palette] 在这些颜色之外,另有一套独立的语义颜色——成功、警告、危险、信息。即便你改动了其他一切,也要保持它们为标准,因为玩家会跨他们使用的每一款产品学习这些颜色。
[show type system] 三个字体,三种职责。Inter用于标题,Source Sans用于正文,Source Code Pro用于求助热线号码——因为当有人需要拨号求助时,它能让0不至于看起来像O。
[show iconography] 图标系统承载着同样的理念：两种线宽——有力的结构、轻盈的细节——在每一家运营商之间都是同一套一致的图标库。
[pause 3s] 整套系统是刻意克制的。视觉噪音是玩家教育的敌人。
第2节：Tier 1与Tier 2的视觉规则
阅读
Tier 1用于日常教育。它可以使用完整配色、照片、插画和有明确目的的动画。按信息的需要选用元素；版式朴素的教育内容，同样可以是Tier 1。
Tier 2用于支持和危机沟通。让求助途径保持清晰：克制的用色、易读的单栏、宽裕的间距和简单的操作。去掉促销图像、玩笑和庆祝效果。
Playbook现行的Tier 2模板采用浅色底面，搭配中性色和青绿。遵循这一设计约定的同时，要核查实际的对比度、阅读顺序和支持途径。
结合情境审核设计。 它和运营商的其他物料放在一起是否协调？制作质量是否相当？视觉层次是否适合这项任务？人们能否读懂、能否操作？这些检查不能取代发布前对链接目的地、内容、无障碍和本地合规的核查。
旁白脚本
Narrator: [transition slide] Tier 1和Tier 2使用相同的品牌质量。区别在于克制,而非质量。
[show tier 1 sample board] Tier 1得到完整的视觉系统。海军蓝背景、青绿点缀、醒目橙高亮、俏皮的图标、品牌插画。个性就活在这里。
[show tier 2 sample board] Tier 2把它削减回去。橙色消失。装饰消失。配色缩减到中性色加用于关键操作的青绿。布局变为单栏,留白打开,而且Tier 2始终以浅色模式渲染——即便玩家启用了深色模式。
[pause 3s] 当有人需要帮助时,每一个多余的视觉元素都是摩擦。
第3节：无障碍要求
阅读
要检查实际的文字、控件和阅读顺序；一个看上去整洁的页面，仍然可能存在无障碍问题。
WCAG 2.1 AA对比度要求： 正常文字至少4.5:1；大号文字至少3:1。大号文字指至少18点（24 CSS像素），或14点粗体（约18.67 CSS像素）。相关的非文字界面组件和图形对象需达到3:1，但适用该准则规定的例外情形。
Playbook的额外设计约定： 控件尽量不小于44 × 44 CSS像素，正文不小于16 CSS像素。不要把这些说成WCAG 2.1 AA要求。44像素的目标尺寸出自WCAG 2.1 AAA级准则2.5.5，且有例外；WCAG 2.2 AA级准则2.5.8规定的最小尺寸是24像素，或满足其规定的间距等例外条件。仅凭字号，既不能证明内容易读，也不能证明符合标准。
#1B2838海军蓝上的白色，对比度约为14.92:1；同一海军蓝上的#10B981青绿约为5.88:1。这些测量值只适用于这两种确切的纯色。每种实际组合都要核查，包括悬停、焦点、禁用和错误状态。照片上的文字，要针对它实际所处的背景来测试。
深色模式检查： #1A1A2E上的#6B6B8A约为3.33:1。即使在你的显示器上看起来清楚，它仍低于正常文字的门槛。正文应改用更浅的文字颜色。在实际部署的主题中检查图像和状态颜色；不要以为套用「一律用深色文字」这类单一规则，就能让每种组合都达标。
签字放行前：
- 用键盘完成每一个操作。检查焦点是否可见、顺序是否合理、有没有键盘陷阱。
- 用辅助技术把页面读一遍。使用有意义的标题、标签和状态播报。
- 为信息性图像提供有用的替代文本，装饰性图像的替代文本留空。不要无谓地重复相邻的文字。
- 确保含义不只靠颜色、动态效果或声音来传达。
- 在窄屏和矮屏上检查缩放、内容重排，以及实际的触控区域。
- 在贵方的内部政策中核实本地要求。
标准原文：W3C对比度（最低）、WCAG 2.1目标尺寸（AAA），以及WCAG 2.2目标尺寸（最低，AA）。
旁白脚本
Narrator: [transition slide] 无障碍不是可选项。它是包容性玩家教育的基础。
[show WCAG checklist] 颜色对比度满足WCAG双A——正文四点五比一,大号文字三比一。触控目标至少四十四像素。每一种布局都可用键盘操作,并对屏幕阅读器清晰可读。切勿仅用颜色来传达含义。每张图像都有替代文本。而Tier 2始终以浅色模式渲染,因为深色模式在危机中可能让人感觉孤立。
[pause 3s] 目标很简单:每一位玩家,无论能力如何,都能访问每一份素材。
[transition to exercise] 测验之前,有六个设计判断正等在你的桌上。对每一个,做出决定:出货,还是修正。每个答案都直接来自你刚学到的规则。逐一做完,然后继续。
Exercise: 发布还是修正？
Type: scenario
Instructions: 发布还是修正？只评判视觉处理。联系方式、链接和告示另行核查。以给出的测量值为准，不要凭目测估算。
| 项目 | 正确分类 | 反馈（正确） | 反馈（错误） |
|---|---|---|---|
| 一张Tier 1场馆海报：海军蓝底、白色标题、青绿色数字，每个庄家优势数字都注明了适用的游戏规则，并说明它们是长期数值；页脚为虚构的示例支持热线和年龄提示。没有橙色，也没有照片。 | 发布 | 视觉层次清晰、字体统一、数字注明规则，正适合这件Tier 1作品。橙色和照片都不是必需的。 | 应当发布。视觉层次和注明规则的数字都到位，Tier 1也不必非用橙色或照片。 |
| 一张展架卡，摆在运营商商业物料旁的卡架里：灰色底、Times New Roman字体、一排装饰性骰子，没有项目或运营商标识；标题是「了解赔率」，正文只有「负责任地博彩。知道何时停手。」 | 修正 | 没有统一的品牌识别，该写赔率信息的地方只有一句口号。改用现行展架卡模板和注明规则的事实。 | 需要修正。千篇一律的样式比不上旁边的商业物料，口号也没有给出任何赔率事实。 |
| 一个Tier 2账户暂停页：深色背景、彩带插画、橙色「确认暂停」按钮，标题是「准备好重新开始了吗？」，正文说明七天暂停要在确认后才开始。 | 修正 | 彩带、促销式标题和橙色按钮，都在和一个支持决定争夺注意力。处理要克制，但不要临床化，也别暗示暂停已经开始。 | 需要修正。彩带和橙色是在为一个Tier 2支持决定庆祝。改用克制的支持类处理，也别暗示暂停已经开始。 |
| 一个Tier 2支持入口页：白底单栏、海军蓝标题、无图像、一个青绿按钮；按钮高48 CSS像素，按钮上海军蓝文字与青绿底色的对比度为5.88:1。 | 发布 | 单栏、清晰的操作、实测的对比度和48像素的点击目标，都适合这项支持任务。 | 应当发布。Tier 2的克制是刻意为之，5.88:1的对比度和48像素的目标也符合本模块的检查标准。 |
| 一个移动端赔率测验：文字对比度为14.92:1，但每个答案按钮的点击区域只有36 × 36 CSS像素。 | 修正 | 36 × 36 CSS像素的点击目标达不到Playbook的44像素目标。WCAG 2.1把44 px列为AAA级，而非AA级。把它们放大。 | 需要修正。文字对比度再好，也弥补不了36像素的点击目标。Playbook的目标是44 × 44 CSS px，在WCAG 2.1中属于AAA级，而非AA级。 |
| 两条账户消息：「限额已保存」用的是品牌橙，「即将达到限额」用的是品牌海军蓝。这套品牌配色也把橙色和海军蓝用于活动点缀和品牌识别。 | 修正 | 这些是账户状态，不是活动点缀色，所以要用标准的成功色和警告色。文字标签也要保留。 | 需要修正。这两条消息借用了品牌橙和海军蓝。账户状态需要标准的成功色和警告色，并配上文字标签。 |
模块测验
Narrator: [transition slide] 该检验你学到了什么了。五道题,涵盖视觉系统、Tier 1与Tier 2的视觉规则,以及无障碍底线。你需要80%——也就是5题答对4题——才能将本模块标记为完成。慢慢来。如果第一次没通过,你可以复习材料后重新参加测验。
Question 1
Assesses: 学习目标1
Stem: {{PROGRAM_NAME}}内容的「视觉质量规则」是什么？
| 选项 | 内容 |
|---|---|
| A | {{PROGRAM_NAME}}内容应当使用一种独特的、临床化的美学，以与商业内容区分开 |
| B | {{PROGRAM_NAME}}内容必须匹配运营商商业营销的制作质量 |
| C | {{PROGRAM_NAME}}内容应当极简，以免与运营商的品牌相竞争 |
| D | {{PROGRAM_NAME}}内容应当遵循政府健康传播的设计标准 |
Correct: B
Explanation: 教育内容若看起来比旁边的推广廉价，就会被当成小字注脚。投入同等的用心；实用性和无障碍另需单独检查。
Source: Visual System
Question 2
Assesses: 学习目标1
Stem: 什么是「自适应识别模型」？
| 选项 | 内容 |
|---|---|
| A | 一种让{{PROGRAM_NAME}}在所有运营商处看起来完全相同的系统 |
| B | 一种让运营商保留{{PROGRAM_NAME}}的结构性识别（布局、视觉层次、图标）、同时应用自己颜色和字体的系统 |
| C | 一种根据玩家细分自动变化的系统 |
| D | 一种使用AI按市场生成定制设计的系统 |
Correct: B
Explanation: 布局、视觉层次、图标和间距保持一致，玩家就能在不同运营商处认出{{PROGRAM_NAME}}；各运营商则保留自己的颜色和字体。
Source: Visual System
Question 3
Assesses: 学习目标2
Stem: 一份Tier 2支持草稿用了海军蓝底面、橙色按钮和庆祝式装饰。修改时应当遵循哪个方向？
| 选项 | 内容 |
|---|---|
| A | 通篇使用红色和警告色以示紧迫 |
| B | 让它在视觉上稀疏——完全不带任何品牌样式 |
| C | 相同的品牌质量，但精简到核心：整洁布局、宽裕留白、最大对比度、零视觉噪音 |
| D | 使用一套与Tier 1完全不同的设计系统 |
Correct: C
Explanation: 任何东西都不应与支持信息争夺注意力。Tier 2保留品牌品质、去掉装饰：克制而不临床化，用浅色底。
Source: Visual System
Question 4
Assesses: 学习目标3
Stem: 规格中的正文为常规字重、16 CSS像素。按WCAG 2.1 AA，它适用的最低对比度是多少？
| 选项 | 内容 |
|---|---|
| A | 2:1 |
| B | 3:1 |
| C | 4.5:1 |
| D | 7:1 |
Correct: C
Explanation: 16 CSS像素的常规正文属于正常文字，所以需要4.5:1。大号文字（3:1）从24 CSS px起，加粗则约从18.67 px起。
Source: Accessibility
Question 5
Assesses: 学习目标1
Stem: 为什么{{PROGRAM_NAME}}的求助热线号码使用Source Code Pro?
| 选项 | 内容 |
|---|---|
| A | 它看起来比其他字体更现代 |
| B | 它是品牌的主字体 |
| C | 它能区分相似字符——0/O和1/l/I在视觉上各不相同 |
| D | 这是博彩监管机构所要求的 |
Correct: C
Explanation: 把0和O、1和l混淆，就可能拨错求助热线号码。Source Code Pro让它们一眼可辨。
Source: Visual System
要点总结
- 与运营商其他传播内容的制作质量看齐。使用清晰的视觉层次、易读的字体，以及适合当前任务的信息。
- 运营商可以调整品牌识别元素，同时保持布局、间距和组件行为一致。
- 默认配色是海军蓝、亮青绿和可选的橙色。功能性状态颜色及其文字标签要保持一致。
- Tier 1可以使用更完整的视觉系统。现行的Tier 2模板采用浅色底面、克制的用色和简单的支持途径。
- 结合情境审核实际作品。视觉上的认可，不能取代对内容、链接目的地、无障碍和本地发布要求的核查。
- WCAG AA的正常文字对比度为4.5:1。Playbook另外规定44 × 44 CSS像素的目标尺寸和16 CSS像素的正文字号。还要检查键盘操作、辅助技术访问和内容重排。
资料依据
你不必读这些，但它们是本模块各项规则背后已发表的标准与研究——以备有同事问起。
- World Wide Web Consortium (2018). Web Content Accessibility Guidelines (WCAG) 2.1. W3C Recommendation. 为何列于此： 对比度和交互方面的准则。44 × 44 CSS像素的目标尺寸准则在WCAG 2.1中属于AAA级；Playbook将其作为额外的设计约定采用。
- Arditi, A. & Cho, J. (2005). Serifs and font legibility. Vision Research, 45(23), 2926–2933. 为何列于此： 字符区分这类功能性字体选择背后的可读性证据——为何一种能分开0/O和1/l/I的字体不是审美偏好。
- Robins, D. & Holmes, J. (2008). Aesthetics and credibility in web site design. Information Processing & Management, 44(1), 386–399. 为何列于此： 关于视觉制作质量如何驱动人们把内容判断为可信的实验证据——视觉质量规则的实证支柱。
参考资料
| 资源 | 用途 |
|---|---|
| Visual System | 自适应识别、配色、字体、图标、摄影 |
| Accessibility | WCAG基线、对比度表、深色模式规则、清单 |
| Collateral templates | 用于作简报和对标的Tier 1与Tier 2样品 |