Google：视觉参考
以容易理解的解释连接技术与日常任务。少量颜色、图形与演示提供适度趣味，复杂功能需要清楚的示例和可继续学习的路径。
先看真实案例
真实原图、手册页与网页实录。正文显示压缩预览，点击可看清晰大图；出处与日期见图注。
看图重点：多色曲线与人物、物件穿插；这是设计编辑内容的图像语汇。
Google 官方原始媒体
看图重点：原图标出字形的变化位置；看字母细节，而不只记住字体名称。
Google 官方原始媒体官网与产品页面实录
以下为官方页面的真实浏览器实录，包含产品首屏、功能区域和部分移动端页面。点击“清晰大图”查看文字与界面细节；出处与日期见图注。
原文内容摘要
下面直接摘要原始资料中的规则、做法与案例内容。每段附出处；后面的视觉观察另有标记。
Google Sans 从标志字体发展成阅读系统
官方文章先解释 Product Sans 如何解决产品名与新标志不协调的问题，再说明它在营销、小字号和长文本中遇到限制。Google Sans 改善展示用途，Google Sans Text 进一步调整字高、字宽、字距和数字细节以提高小字号阅读；Google Sans Code 则针对代码中易混淆字符开发。字体扩展来自具体使用问题，同一个品牌也需要不同文字任务的版本。
来源：原始资料。官方原文摘要。
合作方资源按产品品牌分开
Partner Marketing Hub 将 Google、Android、Chrome、Gemini、Pixel、Nest、YouTube 等品牌分别设置入口，先选具体产品，再看对应表达方式。Google 总入口解释如何在外部工作中提及品牌，部分合作资源需要申请访问。它显示的组织逻辑是集团识别与产品识别分层；一个产品的标志或界面规则不自动适用于其他产品。
来源：原始资料。官方原文摘要。
字体、数字与斜体
字体、数字与斜体
“用了 Google 字体”这个说法不够准确。我们需要知道用的是哪个家族、哪份文件、哪些字形和哪一种许可，再判断它是否适合自己的标题和正文。
本页资料的原文摘要
Google Sans 从标志字体发展成阅读系统
官方文章先解释 Product Sans 如何解决产品名与新标志不协调的问题，再说明它在营销、小字号和长文本中遇到限制。
来源：原文。官方原文摘要。
更完整的来源摘要与版本范围见公司主文章的原文摘要。
家族与项目范围
Google Sans Flex 官方文章回顾了 Product Sans、Google Sans、Google Sans Text、Google Sans Code 与 Google Sans Flex 的关系，也说明 Google Sans 和 Flex 的开源安排。早期标志相关字体、界面文字与代码字体不能混成一个名称。
| 资源 | 用途与核验重点 |
|---|---|
| Google Sans | 官方字体平台入口；核对下载文件和许可 |
| Google Sans Flex | 官方可变字体入口；核对实际支持的轴与范围 |
| 字体项目文章 | 家族关系与设计意图；不替代下载包许可证 |
| Material 3 | 产品排版入口；主题与组件按版本读取 |
六个轴可以怎样实验
官方文章为 Flex 列出 weight、width、optical size、slant、grade 和 roundedness。下面是作者实验方法，数值使用字体面板实际允许的范围。
| 调整 | 自有实验 |
|---|---|
| 字重 | 用同一标题比较常规、中等与较粗版本 |
| 宽度 | 比较长标题如何换行，不机械压缩位图 |
| 光学尺寸 | 比较正文和大标题，检查细节与小尺寸阅读 |
| 倾斜 | 只改变倾斜轴，观察英文标题与中文的关系 |
| Grade | 比较明暗背景中的笔画观感，同时检查排版变化 |
| 圆润度 | 比较技术说明与社区活动的语气是否合适 |
一个轴一次变化，记录结果。没有把试验值写成 Google 官方活动海报参数。
中文与斜体
字体项目文章提及家族的多语言扩展，但实际下载包的字形集合需要检查。不能因为文章提到 Chinese，就认定每个 Google Fonts 文件都有完整中文。
中英混排可以使用有明确许可的中文黑体与下载的拉丁字体，比较视觉高度、基线和字重。英文真实 italic、可变 slant 和把整行文字做倾斜变换是三种不同处理，不能互相代替。
文件交付
记录字体家族、版本、许可、下载日期与使用场景。网站检查字体加载失败时的回退，PPT 检查接收方替换字体后的布局，海报保留可编辑文字稿。
案例与活动
案例与活动
本页展开 Google 的三个案例方向，并给出一套可实际制作的自有项目。来源与作者方案分别记录，具体原始入口和年份保留在文末。
本页资料的原文摘要
合作方资源按产品品牌分开
Partner Marketing Hub 将 Google、Android、Chrome、Gemini、Pixel、Nest、YouTube 等品牌分别设置入口，先选具体产品，再看对应表达方式。
来源：原文。官方原文摘要。
更完整的来源摘要与版本范围见公司主文章的原文摘要。
逐项拆解
1. Material
研究主题与组件的关系。自己的营销页面和产品界面共享颜色角色，保持不同信息密度。
作者拆解。 沿着基础值、语义角色、组件和页面四层研究。先看规则表达什么，再找按钮、卡片、表单或列表如何调用。默认状态之外，继续检查加载、空内容、错误、完成与恢复，视觉应当帮助用户知道下一步。
迁移到自己的项目。 首页从用户任务开始，接示例、操作、技术解释和文档；开发者与消费者入口分层。 先用自有真实内容制作，再放入最长标题、不同图片与异常状态检验。保留的是有解释力的结构关系，原品牌的名称、素材和含义不自动迁移。
可交付产物。 一页语义角色表、一个状态完整的组件和一条可完成的页面路径。用长文字、空结果与错误情况验证，不只交默认画面。
2. Google Sans Flex
研究可变轴怎样影响同一标题。把宽度与光学尺寸分开试排，而不是简单横向拉伸。
作者拆解。 先把资料拆成家族、文件、款式与用途，确认是字体项目、品牌使用指南还是网页实现。然后比较大标题、长正文、数字、代码和字幕五种用途。可变轴和斜体只记实际提供的款式，专有字形与开放字体分别记录。
迁移到自己的项目。 Google Sans Flex 官方文章介绍六类可变轴；具体范围由下载文件确认。中文另配，强调字重、字宽与光学尺寸的不同作用。 先用自有真实内容制作，再放入最长标题、不同图片与异常状态检验。保留的是有解释力的结构关系，原品牌的名称、素材和含义不自动迁移。
可交付产物。 一份字体资源台账、一页角色表和五张真实文字样张。样张包含中英混排、最长标题与数字变化，能解释每个款式为什么这样用。
3. I/O
现有案例页保留届次入口。研究发布消息怎样转为课程、代码和回放，让观众能继续学。
作者拆解。 从受众与承诺开始，追到议程、演示、实作、支持和会后资料。记录封面负责邀请、详情负责解释、规则负责限定、结果负责证明。主视觉要和这些阶段一起延伸，不能只研究一张海报。
迁移到自己的项目。 办开发者学习日：主题演讲、专题、实作和回放形成连续路径，比赛另设任务与作品评审。 先用自有真实内容制作，再放入最长标题、不同图片与异常状态检验。保留的是有解释力的结构关系，原品牌的名称、素材和含义不自动迁移。
可交付产物。 一张活动参与路径、八类系列物料和一页会后归档。参加者能够从邀请走到准备、参与、完成与继续使用。
原始案例资料与历史说明
下面保留原来收集的来源和版本。新增的作者分析与原始事实分开使用。 I/O 2026提供主题演讲、开发者内容和回顾入口。把它当成内容组织参考时，应先记录届次和具体栏目，再选一项产品发布进行研究。
三个层次
| 层次 | 官方入口 | 怎样使用 |
|---|---|---|
| 公司识别 | Google 品牌中心当前入口 | 核对公司标志与合作条件 |
| 产品体验 | Material 3 | 构建自己的组件与主题体系 |
| 大会成品 | I/O 2026 | 研究演讲、专题、课程和回顾的连接 |
本轮没有逐项展开所有脚本页面或取得活动源图。下面是自己的活动方案，不是 I/O 内部设计规范。
大会与比赛要补的内容
技术大会需要学习路线、议程、资料和回放。比赛还需要题目、资格、提交格式、评审规则、阶段通知和作品展示。I/O 是大会参考，不因此提供这些比赛规则。
最终检查每张图能否独立读懂，也检查连续看六张时是否仍属于同一个项目。使用交付模板记录每个规则的来源与自有决定。
官方账号与宣传矩阵
官方账号与宣传矩阵
如果我们要做一次「产品发布与开发者工作坊」，可以研究 Google 怎样把公司介绍、产品内容、活动页面和社交账号连接起来。先辨认账号身份，再观察成品的标题、画面、文案和行动入口。
品牌边界与内容定位
Google、Google Design、开发者内容、Android／YouTube／Google Cloud 等产品按业务拆开；Alphabet 信息单独看。
主要研究对象是普通用户、开发者、设计师、企业客户与创作者。下面的内容定位与制作方案是作者的观察和练习建议：以可理解的产品变化与用户任务组织内容。它们不是该公司公开披露的内部运营制度，也不代表固定的发文频率。
自有发布平台与承接入口
这些入口包括网站、新闻、设计系统、代码、活动、商业服务和企业资料。网站与账号是不同记录：活动网站承接报名或信息，社交账号负责把人带过去。表中“观察内容”说明我们应该研究什么，不表示完整读取了所有子页面。
| 平台或栏目 | 层级 | 观察内容 |
|---|---|---|
| The Keyword | 公司与产品新闻 | 新闻分类与 Google 主品牌社交出站链接 |
| Google Design | 设计 | 设计文章与独立账号 |
| Material Design | 设计系统 | 产品规范、组件与教学内容 |
| Google Developers | 开发者 | 开发文档与技术内容 |
| Google I/O 2026 | 大会 | 产品发布、演示与技术讲解 |
| Google 品牌入口 | 品牌与合作 | 主品牌与合作材料的规则 |
官方账号与证据
A 是官网页面中的出站链接记录；即使平台主页需要登录，链接来源仍可查。B 是平台公开资料或平台矩阵收录，逐号认证／官网互链未全部复核。Q 是官方文字、二维码或图标，仅能确认表内写出的信息。H 是历史官方记录，需要复核现状。主页可用性、当前昵称和活跃状态可能变化。
| 平台 | 账号或官方入口 | 业务与市场范围 | 身份依据 |
|---|---|---|---|
| Google 综合品牌 | A · 官网出站链接；出处 | ||
| X | Google 综合品牌 | A · 官网出站链接；出处 | |
| YouTube | Google 综合品牌 | A · 官网出站链接；出处 | |
| Google 综合品牌 | A · 官网出站链接；出处 | ||
| Google 综合品牌 | A · 官网出站链接；出处 | ||
| YouTube | Google Design | Google Design | A · 官网出站链接；出处 |
| googledesign | Google Design | A · 官网出站链接；出处 | |
| X | GoogleDesign | Google Design | A · 官网出站链接；出处 |
只出现二维码时，不补猜微信 ID；出现微博内容转载页时，不把它当作已取得的微博主页。GitHub 项目、知乎专栏和 Discord 活动邀请按其实际形态记录，不能与公司主品牌账号混算。
各平台覆盖状态
这一表方便检查国内与国际渠道。它记录本轮证据覆盖，不是“有号／无号”的判定，也不声称已经收齐所有国家、业务和历史账号。
| 平台 | 本轮记录 | 核对状态 |
|---|---|---|
| 微信公众号 | 本轮未取得可引用的官方账号证据 | 待核对；不表示该公司没有账号 |
| 微信视频号 | 本轮未取得可引用的官方账号证据 | 待核对；不表示该公司没有账号 |
| 微博 | 本轮未取得可引用的官方账号证据 | 待核对；不表示该公司没有账号 |
| 抖音 | 本轮未取得可引用的官方账号证据 | 待核对；不表示该公司没有账号 |
| B站 | 本轮未取得可引用的官方账号证据 | 待核对；不表示该公司没有账号 |
| 小红书 | 本轮未取得可引用的官方账号证据 | 待核对；不表示该公司没有账号 |
| A；详见上表 | ||
| X | google；GoogleDesign | A；详见上表 |
| YouTube | Google；Google Design | A；详见上表 |
| google；googledesign | A；详见上表 | |
| A；详见上表 | ||
| TikTok | 本轮未取得可引用的官方账号证据 | 待核对；不表示该公司没有账号 |
| Threads | 本轮未取得可引用的官方账号证据 | 待核对；不表示该公司没有账号 |
| 本轮未取得可引用的官方账号证据 | 待核对；不表示该公司没有账号 |
本公司特别需要分清的地方
- Google Design 与 Google 综合品牌账号分别记录。
- 社交 URL 的 twitter.com 旧域名按官网实际链接保留。
- 不能把 Google Design 的封面语言当作所有产品统一风格。
一次发布或活动怎样串联
这个例子用于我们自己的「产品发布与开发者工作坊」，不是对 Google 真实排期的复述。可以从 The Keyword 和上表的活动／内容入口观察呈现方式，再按自己的受众选渠道。
| 阶段 | 内容与格式 | 适合的渠道层 | 下一步 |
|---|---|---|---|
| 公布主题 | 官网专题与一张主海报：项目名称、面向谁、参加后能得到什么 | 自己的公司官网＋已确认身份的主品牌账号 | 进入一张完整的项目说明页 |
| 说明价值 | 产品／作品演示；长文解释一次真实任务；短视频只选一个结果 | 产品内容线＋专业文章＋视频平台 | 试用、阅读教程或了解赛题 |
| 展示人物与议题 | 嘉宾卡、作品卡、议程卡；长图中的信息保持可编辑 | 活动内容线＋公众号／社交图片 | 查看完整嘉宾介绍、时间与报名条件 |
| 帮助参与 | FAQ、报名／提交步骤、示例文件、直播观看说明 | 活动页＋社区／客服内容线 | 完成报名、作品提交或收藏直播入口 |
| 活动当天 | 直播包装、演讲 PPT、现场屏幕、可实时使用的说明 | 现场与视频平台；社交账号发布精选信息 | 观看、互动与获得资料 |
| 活动结束 | 回放目录、作品与结果、资料索引、完整案例 | 官网归档＋专业／社区内容线；品牌号摘要导览 | 继续学习、试用产品或参加下一次活动 |
比赛另做一张信息母表，保存赛题版本、资格、时区、截止时间、提交文件、评审方式、奖励和咨询入口。社交卡片可以简短，母表和规则页需要完整；临时变更同步到全部承接渠道。
官网、公众号、图片、视频和 PPT 的一致性
| 物料 | 共同保留 | 按媒介改变 |
|---|---|---|
| 官网 | 自己的品牌身份、项目标题、主视觉主题与信息来源 | 补全详情、条件、目录和可使用的入口 |
| 公众号／长文 | 标题用词、图片主题、配色层级与链接目标 | 开篇说明受众与收益；正文加入过程、规则和答疑 |
| 社交海报／封面 | 项目名称、主图主题、日期与账号归属 | 重排信息；为头像、平台控件和裁切留出空间 |
| 短视频／长视频／直播 | 品牌署名、字幕样式、图形与章节词汇 | 先给演示或具体问题；短视频删减信息，长视频保留步骤和章节 |
| PPT／现场屏幕 | 同一名称、字体系列、色彩角色和图表表达 | 根据观看距离重新设置字号与信息密度，不缩小公众号长图直接投屏 |
| 比赛／作品／嘉宾系列 | 一致的编号、头像或作品展示位置、署名方式 | 为不同长度姓名与不同尺寸作品准备替代布局 |
字体、斜体、角色、摄影和图形的具体规则继续看本公司的视觉资料与横向字体地图。先查资源许可与规范范围，再给自己的品牌写一份可重复使用的规则。
尚未完成核对的分支
- Google Cloud、Android、YouTube、Google Workspace 各语言账号。
- Google 中文新媒体。
- Alphabet 投资者与产品客服号。
复核时保存平台、显示名称、固定 ID／handle、主页 URL、认证主体、市场／语言、官网出处、当前页面截图日期与活动归属。只靠搜索同名账号或第三方排行榜，无法补齐身份链。记录模板和渠道分工见总导航与发布执行手册。
本页账号收集与来源核对日期：2026-09-30。没有发送消息、关注账号或进入需要登录的账号后台。
官方资料与视觉观察
官方资料、真实案例与视觉观察
这篇把 Google 拆成“原始资料、设计判断、案例、制作方案、活动执行与传播矩阵”。适合研究 普通用户、开发者、设计师、企业客户与创作者 的内容。引用链接与读取状态是资料记录；标为作者拆解、练习或建议的部分是为自有品牌设计的方法。 具体字体、色号和组件参数只在取得明确来源时记为官方值。
原始资料与读取状态
公司品牌、Material、Google Sans 与 I/O 分别核对；品牌标志字体与可使用的产品字体不能混称。
| 资料 | 本次核对与适用边界 |
|---|---|
| Google Brand Resource Center | 已读取公开文本；不代表逐项核验全部内页 |
| Material 3 | 本次 HTTP 000／超时；保留入口，不补写未读取细节 |
| Google Design | 已读取公开文本；不代表逐项核验全部内页 |
| Google Sans Flex | 已读取公开文本；不代表逐项核验全部内页 |
| Google Sans | 保留既有官方入口；本次未重新读取文件全文 |
| Google Sans Flex 字体页 | 保留既有官方入口；本次未重新读取文件全文 |
| I/O 2026 | 保留既有官方入口；本次未重新读取文件全文 |
| The Keyword | 保留既有官方入口；本次未重新读取文件全文 |
| Google Design | 保留既有官方入口；本次未重新读取文件全文 |
| Google Developers | 保留既有官方入口；本次未重新读取文件全文 |
收集与复查日期：2026-09-30。历史活动保留其届次；当前主站可能已切换下一届。HTTP 200 不代表已读取脚本内所有内容，也不代表资源许可已经确认。
先理解这套表达如何成立
信息先后与视觉焦点
让几何图形解释关系：组成、连接、对比和步骤。每个图形在系统中有固定角色。
作者建议先找一条完整路径：从封面或首屏进入详情，再进入操作、报名、获取或回放。记录主标题怎样改变、同一种图形怎样反复出现、证明材料在哪一层出现。成熟的视觉需要在这条路径上仍然清楚；单张好看的图不能代替完整体验。
配色的角色
作者用少量主题色区别任务和章节，产品状态保留语义；主视觉可活跃，长文背景保持稳定。
做自己的系统时，先定义背景、正文、身份强调、分类、状态五类角色。不要先画十张图再逐张取色。主题色可以出现在封面与章节页，长说明、规则、规格和表单回到稳定底色。每个状态都写出名称，颜色之外还有文字或符号。
图像与图形怎样分工
让几何图形解释关系：组成、连接、对比和步骤。每个图形在系统中有固定角色。 同一组素材为官网、海报、公众号、视频和演示准备不同裁切。主体完整版本用于详情，局部版本用于解释，缩略版本用于入口。每个版本记录原图、主体位置、文字安全区和署名，避免后期反复猜裁切。
动态与语言
图形的变形服务概念解释，操作演示展示真实输入与输出；章节切换沿用同一运动逻辑。
调性可以概括成“以可理解的产品变化与用户任务组织内容”，这是作者提炼。邀请、操作指引、规则和结果公告承担不同任务：邀请说机会，指引说动作，规则说条件，结果说事实。把四类文本放在一起校对，能发现看似统一但实际上语气混乱的地方。
三个案例方向的详细拆解
下面每个方向都给出研究方法与可做的产物。它们是基于上方资料范围的作者分析；受限页面没有被补写成已读取的内部规范。
1. Material
研究主题与组件的关系。自己的营销页面和产品界面共享颜色角色，保持不同信息密度。
作者拆解。 沿着基础值、语义角色、组件和页面四层研究。先看规则表达什么，再找按钮、卡片、表单或列表如何调用。默认状态之外，继续检查加载、空内容、错误、完成与恢复，视觉应当帮助用户知道下一步。
迁移到自己的项目。 首页从用户任务开始，接示例、操作、技术解释和文档；开发者与消费者入口分层。 先用自有真实内容制作，再放入最长标题、不同图片与异常状态检验。保留的是有解释力的结构关系，原品牌的名称、素材和含义不自动迁移。
可交付产物。 一页语义角色表、一个状态完整的组件和一条可完成的页面路径。用长文字、空结果与错误情况验证，不只交默认画面。
2. Google Sans Flex
研究可变轴怎样影响同一标题。把宽度与光学尺寸分开试排，而不是简单横向拉伸。
作者拆解。 先把资料拆成家族、文件、款式与用途，确认是字体项目、品牌使用指南还是网页实现。然后比较大标题、长正文、数字、代码和字幕五种用途。可变轴和斜体只记实际提供的款式，专有字形与开放字体分别记录。
迁移到自己的项目。 Google Sans Flex 官方文章介绍六类可变轴；具体范围由下载文件确认。中文另配，强调字重、字宽与光学尺寸的不同作用。 先用自有真实内容制作，再放入最长标题、不同图片与异常状态检验。保留的是有解释力的结构关系，原品牌的名称、素材和含义不自动迁移。
可交付产物。 一份字体资源台账、一页角色表和五张真实文字样张。样张包含中英混排、最长标题与数字变化，能解释每个款式为什么这样用。
3. I/O
现有案例页保留届次入口。研究发布消息怎样转为课程、代码和回放，让观众能继续学。
作者拆解。 从受众与承诺开始，追到议程、演示、实作、支持和会后资料。记录封面负责邀请、详情负责解释、规则负责限定、结果负责证明。主视觉要和这些阶段一起延伸，不能只研究一张海报。
迁移到自己的项目。 办开发者学习日：主题演讲、专题、实作和回放形成连续路径，比赛另设任务与作品评审。 先用自有真实内容制作，再放入最长标题、不同图片与异常状态检验。保留的是有解释力的结构关系，原品牌的名称、素材和含义不自动迁移。
可交付产物。 一张活动参与路径、八类系列物料和一页会后归档。参加者能够从邀请走到准备、参与、完成与继续使用。
可以直接查看的媒体例子
以下来自公开 HTML 的媒体链接，便于查看原始例子；文件存在不等于允许任意使用。没有将它们标成内部模板或完成逐帧分析。
字体、字号、数字与斜体
Google Sans Flex 官方文章介绍六类可变轴；具体范围由下载文件确认。中文另配，强调字重、字宽与光学尺寸的不同作用。
斜体怎样成为规则
把同一短英文分别用直立款、字体实际提供的 Italic／Oblique 或倾斜轴排出。观察字形、倾角、字宽与旁边中文的关系。若字体没有对应款式，软件的合成倾斜要标为作者处理。中文正文、议程、规则与长注释保持直立；速度感可以由构图与动效承担。可变字体使用范围从实际字体文件读取，不能由另一款字体的数值推断。
宣传平台、账号与矩阵怎样配合
| 平台 | 官方入口样本 | 所属范围 |
|---|---|---|
| Google 综合品牌 | ||
| X | Google 综合品牌 | |
| YouTube | Google 综合品牌 | |
| Google 综合品牌 |
完整名称、主页、业务边界和身份依据见宣传平台与账号章节。A 表示官网出站链接；B 表示平台公开依据；Q 表示官网名称或二维码；H 表示历史官方记录。不同等级不混作已经核实当前账号 ID。
具体发布链：宣布时给主题与入口；解释时给可见样例；提醒时给日期与准备；进行时给现场任务；结束时给结果与资料。每次发布只选一个主要行动，并保证账号名称、项目名称与页面信息一致。
交付前的检查与修正
| 需要检查 | 常见问题 | 修正动作 |
|---|---|---|
| 品牌层次 | 公司、产品、活动混成一层 | 按“公司品牌、Material、Google Sans 与 I/O 分别核对；品牌标志字体与可使用的产品字体不能混称。”重新标注来源与用途 |
| 文字 | 中英混排、型号或长标题破版 | 用实际最长内容试排，调整字重、行数与层级 |
| 图像 | 场景与宣传结论没有对应 | 按本页素材分工补过程、细节与结果 |
| 系列 | 每张图换字体、颜色和装饰 | 固定角色与组件，只让内容变化 |
| 动态 | 演示被包装遮住，字幕看不完 | 按任务顺序减镜头，留出结果观看时间 |
| 活动 | 报名之后不知道下一步 | 补准备、确认、现场支持、提交与回顾 |
| 渠道 | 所有账号转同一张图 | 按解释、演示、行动与归档分别制作内容 |