视觉识别与设计
如果你的玩家教育看起来像是合规部门做的,玩家就会把它当作合规文件来读——也就是说,他们根本不会读。本模块把标准设在营销级别,并给你三条规则带你抵达那里:自适应识别模型(运营商保留自己的品牌,结构保持不变)、Tier 1与Tier 2的视觉克制(相同质量,不同的摩擦预算),以及作为底线、而非天花板的WCAG 2.1 AA。
Operator note: 请将全文中的
{{PROGRAM_NAME}}替换为贵方的项目名称。默认配色、字体系统和分级规则属于品牌系统的一部分,不应改动。而你确实要自定义的部分——你的颜色、你的字体、你的标志——正是自适应识别模型为之而设、让你得以改变的。除非某一节标注为Tier 2,旁白脚本均应以Playbook的Tier 1声音录制。
项目: 品牌基础 | 时长: 约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 2.1 AA
为什么这很重要: 签字放行的人是你。设计师可以做出一张漂亮的卡片,但如果它带着不合格的对比度出货,或者在一个危机界面里混进了一抹橙色,那就是审核者的责任——而审核者就是你。本模块给你规则,让你能快速做出这些判断,并在有人提出异议时为之辩护。
想一想: 回想你上一次看到的负责任博彩告示——页脚的一个链接、一个警示框、门边的一张传单。它看起来像是属于它周围的那个品牌,还是像被硬贴上去的?把那个画面记在心里。等学完本模块,你将确切地知道它错在哪里。
第1节:视觉系统原则
阅读
大多数负责任博彩内容看起来像是合规部门设计的。因为通常确实如此。{{PROGRAM_NAME}}采取相反的做法:玩家教育内容应当在质量上与运营商的商业内容视觉上难以区分。
视觉质量规则: {{PROGRAM_NAME}}内容必须匹配运营商商业营销的制作质量。如果它看起来很普通,玩家就会把它当作小字注脚来对待。
自适应识别模型。 {{PROGRAM_NAME}}不是一套每家运营商都原样照搬的僵化视觉。它是一种自适应识别。运营商保留自己的颜色和字体,结构则保持不变。运营商自定义配色、标题与正文字体、标志与联合品牌,以及摄影风格。而在每一家运营商之间保持一致的,是布局与间距、信息层级、双线宽图标系统,以及组件结构。它带来的回报是:一位在某家运营商处遇到{{PROGRAM_NAME}}内容的玩家,会在另一家认出它的形态,尽管两者看起来不同。可辨识,而不雷同。
默认配色。 {{PROGRAM_NAME}}的默认颜色经过选择,使其感觉像一个生活方式品牌,而非一个健康项目。共有三种品牌色。**深海军蓝(#1B2838)**是主色——用于页眉、背景与品牌识别。它读起来是权威与精致。**电光青绿(#00D4AA)**是辅色——用于交互元素与高亮。它读起来是活力与现代感。**醒目橙(#FF6B35)**是强调色——用于CTA与引起注意。它读起来是行动与紧迫感,且仅出现在Tier 1中。
- 深海军蓝 #1B2838主色——页眉、背景、品牌识别。
- 电光青绿 #00D4AA辅色——链接、高亮、操作。
- 醒目橙 #FF6B35强调色——仅Tier 1。Tier 2中消失。
- 底色 #F5F5FA大多数布局所立的浅色地面。
- 白 #FFFFFF卡片与面板。白底海军蓝=14.9:1。
语义颜色是独立的,而且是功能性的。 在品牌色之外,另有一小套状态颜色:**成功(#00C853)**用于测验通过或限额已设,**警告(#FFB300)**用于接近限额,**危险(#FF3D00)**仅用于Tier 2危机,**信息(#2979FF)**用于提示与讲解。即便你自定义了其他一切,也要保持这些为标准。玩家会跨他们接触的每一款产品学习这些关联。你的品牌色表达识别;语义颜色表达功能。把两者混在一起,你就丢掉了信号——一个红色危险警报旁的红色CTA按钮,会失去任何含义。
字体使用三个字族,各司其职。 Inter承担标题与UI——大标题、章节标题、测验题目、CTA、文字标志。Source Sans 3承担正文——段落、说明、表单标签。Source Code Pro承担数据与求助热线号码——赔率、RTP数值、电话号码。最后这一项是功能性选择,而非装饰:Source Code Pro让0与O、1与l与I在视觉上彼此分明。当有人试图拨打求助热线时,把这些字符区分开来,可能就是获得帮助与拨错号码之间的差别。
图标呼应文字标志。 标志把Play(粗,800字重)与BOOK(细,300字重)分开。图标系统以两种线宽镜像这种对比:2px主线宽用于外层形状与结构,1px细节线宽用于内部点缀。这个2:1的比例在每个图标内部构建层级,并把整套图标系统连结回文字标志。图标库覆盖6个类别共31个图标:游戏类型、赔率与数学、玩家工具、内容与教育、社交与分享,以及支持与安全。
摄影应当让人感觉像生活方式专题。 抓拍式、光线讲究、真实的人、电影感的氛围。任何一张图的检验问题是:「这张图让博彩看起来像是朋友之间有趣的娱乐,还是像一种孤立的、高风险的活动?」 多用温暖、有方向性的光、真实的人、特写细节、玩家自己的视角。避免让人感觉孤立的昏暗、阴郁光线,避免没有人、没有故事的通用素材填充。在此之上还有一条硬规则:切勿把白色文字直接放在未经处理的照片上。{{PROGRAM_NAME}}会把文字放在渐变叠加层之上,这样对比度才始终成立——大多数处理用海军蓝,正面与面向行动的信息用青绿,破除迷思的内容用海军蓝加橙色点缀。
旁白脚本
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] 图标系统承载着同样的理念:两种线宽,呼应粗重的Play与纤细的BOOK,在每一家运营商之间都是同一套一致的图标库。
[pause 3s] 整套系统是刻意克制的。视觉噪音是玩家教育的敌人。
第2节:Tier 1与Tier 2的视觉规则
阅读
《RG基础》快速回顾。 Tier 1是约95%——娱乐素养:自信、机智、品牌前置。Tier 2是约5%——支持与危机:温暖、直接、零幽默。《RG基础》讲了它们各自如何听起来。本节讲它们各自如何看起来。
两个级别使用同一套设计系统。区别在于你把其中多少打开。
Tier 1是娱乐素养。 它是{{PROGRAM_NAME}}产出的大多数,应当引人入胜、富有动感、品牌前置——完整配色、丰富布局、摄影、动画、个性。注意那共享的DNA:海军蓝背景、青绿点缀、Inter标题、PlayBOOK文字标志、用于引起注意的橙色。Tier 1模板涵盖社交卡片、故事格式、海报、邮件、场馆标识、展架卡和数字展示。每一种都被打造来与运营商最好的商业内容一较高下。
Tier 2是支持与危机,而克制正是全部要义。 设计目标是零摩擦——没有任何东西与支持信息相竞争。所以你削减到本质:最大对比度、无装饰、最少颜色、大触控目标、单栏。而且Tier 2始终以浅色模式渲染,即便玩家开了深色模式,因为深色模式在危机中可能让人感觉孤立。一眼看清这种对比:Tier 1用完整配色,Tier 2只用中性色加青绿。Tier 1自由变化字重,Tier 2则保持大、清晰、扁平。Tier 1构建动态网格与卡片,Tier 2则是单栏加宽裕间距。Tier 1倚重摄影、插画和数据可视化,Tier 2则完全不带任何图像——只有文字与链接。Tier 1通过测验、工具和动画邀请互动;Tier 2只提供简单按钮,别无其他。
把这种区别并排看清楚:
两个级别使用相同的品牌质量。 区别在于克制,而非质量。Tier 2不是「更丑的Tier 1」——它刻意稀疏,因为当有人需要帮助时,视觉噪音就是摩擦。
四点整合测试。 在出货任何{{PROGRAM_NAME}}内容之前,用四个问题过一遍。四项全过,就出货。它属于这里吗? 把它放在运营商商业内容旁边——它看起来是原生的,还是像从另一个品牌硬贴上来的?CMO会签字认可吗? 如果它看起来像合规部门做的,就退回去;标准是营销级质量,而非监管勾选。它感觉现代吗? 如果它可能是2010年设计的,那就不够好——玩家整天都在消费最前沿的内容。它无障碍吗? 跑一遍对比度、检查触控目标、用屏幕阅读器测试。无障碍是前提条件,而非事后补救。
旁白脚本
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是基线。 每一个{{PROGRAM_NAME}}触点都应当满足它。在实践中,这是一份你可以逐项核对的短数字清单。文字对比度必须达到正常文字4.5:1、大号文字3:1——每一种前景对背景的组合都必须可测量地可读。UI对比度——按钮、图标、图表、控件——必须达到与其背景3:1。触控目标必须至少44x44px,这样每个按钮、链接和字段都易于点按。在这些数字之上,还有三条结构性规则:一切都可用键盘操作(Tab顺序合理、焦点可见、无键盘陷阱),一切对屏幕阅读器都清晰可读(语义化HTML,必要处加ARIA标签),且正文至少16px。最后这一条没有例外——给人读的内容,必须可读。
把这些数字落到实处:海军蓝上的白色是13.5:1,轻松通过。海军蓝上的青绿是7.2:1,通过。白色上的海军蓝是13.5:1,通过。浅色背景上的浅色文字落在约1.4:1,未通过——而这恰恰是一次快速核查能在出货前抓住的那类问题。
深色模式有它自己的陷阱。 淡色文字是最大的一个:neutral_900(#1A1A2E)上的neutral_500(#6B6B8A)只有3.33:1,对大号文字通过,但对正常文字未通过——所以要谨慎使用,且仅在18px以上、或14px以上加粗时使用。对于状态颜色,在彩色背景(成功、警告、危险、信息)上,无论浅色还是深色模式,始终使用深色文字;切勿用白色。把图像亮度降至85-90%,这样照片在深色背景上才不会眩光。还要记住第2节那条规则:Tier 2页面始终以浅色模式渲染。
Operator integration point: 在任何内容出货前,过一遍这份清单。视觉与对比度——每一种文字/背景组合都满足4.5:1(正常)或3:1(大号);所有交互元素至少44x44px;没有任何含义纯靠颜色传达(用文字、图标或图案为它撑腰);求助热线号码使用Source Code Pro,且已确认0/O与1/l/I彼此分明。交互与设备——每个操作都可用键盘完成;内容被屏幕阅读器线性朗读时讲得通;每张图像都有替代文本(信息性图像用描述性,装饰性图像留空);布局已在手机、平板、桌面和辅助设备上核查过。在WCAG之外,贵组织可能还有自己的无障碍政策或法律义务。请在此处链接:内部政策
旁白脚本
Narrator: [transition slide] 无障碍不是可选项。它是包容性玩家教育的基础。
[show WCAG checklist] 颜色对比度满足WCAG双A——正文四点五比一,大号文字三比一。触控目标至少四十四像素。每一种布局都可用键盘操作,并对屏幕阅读器清晰可读。切勿仅用颜色来传达含义。每张图像都有替代文本。而Tier 2始终以浅色模式渲染,因为深色模式在危机中可能让人感觉孤立。
[pause 3s] 目标很简单:每一位玩家,无论能力如何,都能访问每一份素材。
[transition to exercise] 测验之前,有六个设计判断正等在你的桌上。对每一个,做出决定:出货,还是修正。每个答案都直接来自你刚学到的规则。逐一做完,然后继续。
Exercise: 出货还是修正?
Type: scenario
Instructions: 六件玩家教育的设计稿在你桌上等着签字放行。对每一件,决定:是原样出货,还是退回设计?对照本模块的规则来判断——视觉质量规则、Tier 2克制、语义颜色,以及WCAG 2.1 AA底线。
| 项目 | 正确分类 | 反馈(正确) | 反馈(错误) |
|---|---|---|---|
| 一张破除「热机」迷思的Tier 1社交卡片:海军蓝背景、青绿点缀、醒目橙CTA、一张朋友们在酒吧的编辑级照片——标题置于海军蓝渐变叠加层之上。对比度检查通过。 | 出货 | 正确——这就是Tier 1在做它该做的事。完整配色、个性、营销级摄影,而且标题坐在海军蓝渐变叠加层上、而非未经处理的照片上,所以文字叠加规则和WCAG对比度双双成立。 | 这件没毛病。Tier 1得到完整的视觉系统——包括橙色——而标题置于海军蓝渐变叠加层上,这正是{{PROGRAM_NAME}}让照片上的文字保持WCAG AA对比度的做法。 |
| 一张用免费素材模板做的「了解赔率」展架卡:灰色系统字体、剪贴画骰子、没有品牌元素——就摆在运营商光鲜的促销卡旁边的卡架里。 | 修正 | 正确——这违反了视觉质量规则。{{PROGRAM_NAME}}内容必须匹配运营商商业营销的制作质量。如果它看起来像合规部门做的,玩家就会把它当作小字注脚。 | 把它放到促销卡旁边,它就过不了整合测试的第一问。视觉质量规则说,玩家教育必须匹配商业营销的质量——一个剪贴画素材模板差得远。 |
| 一个「歇一歇」确认页:醒目橙的「确认」按钮、庆祝彩带插画,以及跟随玩家深色模式偏好的布局。 | 修正 | 正确——一屏之内三处Tier 2违规。橙色在Tier 2中消失,装饰元素消失,而且Tier 2始终以浅色模式渲染,因为深色模式在危机语境中可能让人感觉孤立。把它削减到中性色加青绿。 | 这是Tier 2领地,克制规则适用。橙色消失,装饰消失,而且无论系统偏好如何,Tier 2始终以浅色模式渲染。当有人需要帮助时,视觉噪音就是摩擦。 |
| 一个Tier 2支持页面:单栏、仅中性色加青绿、无图像、大而易点的按钮——即便玩家启用了深色模式,它也以浅色模式渲染。 | 出货 | 正确——这是教科书般的Tier 2克制。中性色加青绿、单栏、零装饰、锁定浅色模式。没有任何东西与支持信息相竞争,而这正是全部要义。 | 稀疏不等于有问题——它是刻意的。Tier 2削减到本质,让任何东西都不与支持信息竞争,而强制浅色模式是规则,不是漏洞。这一件按原设计出货。 |
| 一个移动端赔率测验,全程对比度清晰利落——但为了在屏幕上塞下更多选项,答案按钮只有36x36px。 | 修正 | 正确——这些按钮没达到触控目标底线。WCAG 2.1 AA要求每个交互元素最小44x44px,而36px不够。对比度过关,赎不回不合格的触控目标。 | 检查触控目标。WCAG 2.1 AA要求每个交互元素最小44x44px,而这些按钮只有36px。再好的对比度也不能开脱——先修按钮,再出货。 |
| 为了让配色显得统一,设计师把「限额已设」的成功状态改成运营商的品牌橙,把接近限额的警告改成品牌海军蓝。 | 修正 | 正确——语义颜色是功能性的,不是装饰性的。成功、警告、危险、信息在每个产品和平台上都保持标准。玩家会学习这些关联;用品牌色重涂它们会摧毁信号。 | 品牌色表达识别;语义颜色表达功能。即便其他一切都被自定义,成功/警告/危险/信息配色也保持标准——穿上品牌海军蓝的警告,就不再被读作警告。 |
模块测验
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: 如果{{PROGRAM_NAME}}内容看起来比周围的推广内容更普通、更过时或质量更低,玩家就会把它当作小字注脚来对待。把它当作产品发布来设计——因为它就是产品。
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(支持/危机)内容在视觉上应当与Tier 1有何不同?
| 选项 | 内容 |
|---|---|
| A | 通篇使用红色和警告色以示紧迫 |
| B | 让它在视觉上稀疏——完全不带任何品牌样式 |
| C | 相同的品牌质量,但削减到本质:整洁布局、宽裕留白、最大对比度、零视觉噪音 |
| D | 使用一套与Tier 1完全不同的设计系统 |
Correct: C
Explanation: Tier 2使用相同的品牌质量和设计系统,但带着最大限度的克制:整洁布局、宽裕留白、高对比度、无装饰。目标是零摩擦——没有任何东西与支持信息相竞争。而且Tier 2应当始终以浅色模式渲染,即便用户启用了深色模式。
Source: Visual System
Question 4
Assesses: 学习目标3
Stem: 在WCAG 2.1 AA下,正常文字的最小对比度是多少?
| 选项 | 内容 |
|---|---|
| A | 2:1 |
| B | 3:1 |
| C | 4.5:1 |
| D | 7:1 |
Correct: C
Explanation: 4.5:1是正常文字(小于18px或小于14px加粗)的最小值。大号文字需要3:1。UI组件和图形对象需要3:1。这些没有商量余地——无障碍不是一项功能,而是一项要求。
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
要点总结
- 视觉质量规则: {{PROGRAM_NAME}}内容必须匹配运营商商业营销的制作质量。如果它看起来像合规做的,玩家就会把它当作小字注脚来对待。
- 自适应识别: 运营商自定义颜色和字体,但结构——布局、层级、图标、间距——在每一次实现中都保持一致。
- 三种品牌色: 深海军蓝(主色)、电光青绿(辅色)、醒目橙(强调色——仅Tier 1)。外加用于功能状态的独立语义颜色。
- Tier 1得到完整系统。Tier 2把它削减回去——无橙色、无装饰、单栏、仅浅色模式。相同质量,最大克制。
- 四点测试: 它属于这里吗、CMO会签字吗、感觉现代吗、它无障碍吗?四项全过才出货。
- WCAG 2.1 AA没有商量余地: 正常文字4.5:1对比度、44x44px触控目标、键盘导航、屏幕阅读器支持。它在Tier 2中最为要紧——压力意味着更高的认知负荷和更低的耐心。
资料依据
你不必读这些,但它们是本模块各项规则背后已发表的标准与研究——以备有同事问起。
- World Wide Web Consortium (2018). Web Content Accessibility Guidelines (WCAG) 2.1. W3C Recommendation. 为何列于此: 第3节里每一个数字的出处——4.5:1与3:1的对比度、44x44px的目标指引,以及{{PROGRAM_NAME}}奉为底线的AA合规等级。
- 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样品 |