视觉、字体与物料
先确定下面六件事，再把同一套规则用到官网、海报、公众号、视频和 PPT。详细表格、字体来源与示例按需展开。
| 决定 | 先做什么 |
|---|---|
| 文字 | 定中文、英文、数字与代码的字体和字重 |
| 色彩 | 定背景、正文、主色与状态色的职责 |
| 图形 | 选一个可以重复使用的基本形状 |
| 图片 | 为主体、细节、过程和成果安排素材 |
| 版式 | 固定标题、正文、署名和行动入口的位置关系 |
| 延伸 | 用同一份真实内容试做六种物料 |
真实品牌的跨媒介案例
真实品牌的跨媒介案例
OPPO：字标、字体、印刷、广告与发布现场
下列六张均为 Pentagram 的 OPPO 原始项目档案中的成品。它们属于该历史品牌项目，设计团队为 Pentagram／Eddie Opara 团队。
观察同一套字标、OP 组合图形和绿色体系如何进入不同载体；照片中的字体、广告与现场均可对照原页查看。
国美“梦溪”：主视觉、画册、空间与公共屏幕
这是 2026 年第 61 届威尼斯国际艺术双年展中国国家馆的真实视觉项目。下面四张为中国美术学院美术馆原文公开的主视觉、画册、展厅入口和威尼斯机场应用。项目总负责人为袁由敏，原文列有完整团队署名。
官网、产品界面、公众号、视频与 PPT 的真实入口
| 要看什么 | 真实资料 | 对照重点 |
|---|---|---|
| 产品官网 | Qoder 官网与官方博客 | 首屏、功能演示和更新文章怎样连接 |
| 产品界面 | Semi Design 官方介绍 | 同一组件结构怎样进入多种真实产品 |
| 公众号图文 | 国美官方页面引出的推文目录 | 征集、预告、攻略与回顾的实际标题和原文 |
| 品牌视频 | OPPO《Oppolence》原始项目 | 原片由 Studio Lernert & Sander 制作 |
| 演示文稿 | 腾讯官方季度业绩演示入口 | 真实标题页、图表与数据说明的排法 |
图片来源：Semi Design 官方介绍。保留原始 GIF。
OPPO《Oppolence》原片
字体、数字与斜体
字体、数字与斜体
一张海报有成熟感，常常来自稳定的文字层级。先定中文与拉丁字体、正文与标题、数字与代码的角色，再考虑斜体、字宽和展示效果。
可定位的字体项目
| 资源 | 已确认的信息 | 使用前要看什么 |
|---|---|---|
| 阿里巴巴字体平台 | 官方字体资源，详见阿里章节 | 每个家族的许可、版本与字形 |
| OPPO Sans | 4.0 官方文档与当前官网字体声明分别核对 | 官方下载与条款；独立 italic／斜轴未确认 |
| Google Sans / Flex 项目 | 官方说明开源安排与 Flex 六轴 | 从官方字体页检查实际文件、许可和语言覆盖 |
| TikTok Sans | 官方开源字体；不包含中日韩字形 | OFL、字宽、倾斜、光学尺寸与静态包区别 |
| GitHub Typography | 当前以 Mona Sans 与 Mona Sans Mono 为中心 | 下载版本；常规品牌与活动宽度例外 |
| IBM Plex | 官方开源字体家族与许可证 | 子家族、语言覆盖与实际字重 |
| Geist | 官方仓库列 Sans、Mono、Pixel，标明 OFL 1.1 | 展示与代码角色、版本、字形和许可 |
| MiSans | 官方说明免费使用与商用安排 | 官方下载包和知识产权许可协议；非默认 OFL |
| 思源黑体 | 官方开源 CJK 字体项目 | 简繁与地区字形、子集和字体文件类型 |
这里没有提供未知许可的第三方字体镜像，也没有把字体许可延伸到同名公司的标志与摄影。
定制品牌与平台字体
| 项目 | 可学的内容 | 不能由此推断 |
|---|---|---|
| Tencent Sans | 品牌字形与传播的关系 | 已取得通用下载或使用权 |
| 京东朗正体 | 字重角色及礼盒、视频与界面应用 | 官网提到下载就必然可外部免费商用 |
| Spotify Mix | 定制字体怎样连接产品与传播 | 独家字体自动成为开放字体 |
| DB Sharp Grotesk | 可变标题与不同构图 | 所有可变参数都适合自己的中文 |
| OpenAI Sans | 字重、真实斜体与等宽数字 | 完整字体包已对外开放下载 |
| Feather 创作案例 | 角色与字形的一致性 | 历史创作文章即现行公开字库 |
| Apple Fonts | 平台字体与多种文字角色 | 下载后可用于任何公司官网与商标 |
| Windows Typography | 平台字体、语言回退与层级 | 平台规则覆盖微软全部平面活动 |
| Atlassian Typography | 新家族与产品迁移的版本关系 | 全部产品已同时采用同一字体 |
| Meta 沉浸式文字 | 空间体验可读性与斜体限制 | 平面传播也被统一禁止斜体 |
三种“斜”的区别
字体的 italic 是专门设计的款式，slant 是字体可变轴，软件对整行做倾斜变换则改变几何外形。中文、英文与数字分别试排，不能把软件生成效果叫作字体本身提供的斜体。
实际字形与可变轴请直接对照上方字体项目的官方样张、源文件与说明；品牌成品中的倾斜处理还需要结合具体来源判断。
给自己的品牌做一张字体表
| 角色 | 必填项 |
|---|---|
| 中文标题 | 家族、款式、许可、长标题处理 |
| 英文标题 | 家族、字重、真实斜体或可变轴 |
| 正文 | 大小、行距、平台回退、长句与链接 |
| 日期与数字 | 等宽数字、符号、单位与对齐 |
| 代码 | 等宽家族、易混字形、较小显示 |
| 视频字幕 | 显示时间、手机试读、背景对比 |
| PPT | 替换字体后的布局、嵌入条件与接收方测试 |
字体选型直接对照官方字形、语言覆盖、数字与标点样张，并记录文件版本和使用条件。
国美与汉字艺术补充
国美字体与文字设计定位 2021 方正国美进道体、2026 六字重家族与国美博约体线索，并以署名节气海报区分字库、标题字形和文字图形。公开产品页未确认进道体的独立 italic；学校项目中的笔势或软件倾斜不能写成官方斜体款式。
消费硬件与Qoder网页字体采样
| 样本 | 可复核的声明 | 范围 |
|---|---|---|
| 大疆 | Open Sans＋中文系统回退 | 官方样本页，Dji／FontAwesome图标另看 |
| 拓竹 | Inter、EB Garamond、JetBrains Mono | 官方博客CSS，不是全部硬件VI |
| Qoder | Instrument Sans＋代码等宽回退 | 官网样式，QoderStaticSeti属图标字体 |
| 影石 | Noto Sans SC／MiSans VF／Roboto Mono相关样式 | Press Hub样本 |
| 宇树 | OPPOSansR／OPPOSansB／Alibaba_PuHuiTi | 官方样本CSS |
| 云深处 | Arial／Helvetica／sans-serif | 中文最终回退家族未确认 |
这些是页面声明证据，不自动证明每个字体已加载或用于所有物料。本轮未确认这些品牌全部媒介的独立italic或统一标题倾斜角度；具体CSS与解释见公司页及 font-css-reference.json。
OPPO 字体专题另有网页别名／文件版本对照、字重样本与历史 H5 规范范围；对应结构化记录保存在 OPPO 子目录。
官网、海报、公众号、视频与 PPT
官网、海报、公众号、视频与 PPT
上面的 OPPO 和“梦溪”展示了完整项目的实际延伸。以下再按载体对照官方资料；数值注明具体来源和版本。
先建立一页视觉规则
| 研究对象 | 真实依据 | 可以直接核对的内容 |
|---|---|---|
| 字标、组合图形与品牌字体 | OPPO 原始品牌项目 | 上方字标、OP 纹样、OPPO Sans 与实际应用原图 |
| 字重、字宽与倾斜 | TikTok Sans 官方字体项目 | 实际字体文件的轴与官方样张；详见字节字体章节 |
| 产品字号、行高与圆角 | Arco 默认主题源码 | 本库 2026-09-30 样本为正文 14px、行高 1.5715、圆角 2／4／8px；属于组件默认主题 |
| 展览文字、图形与出版 | 2026“梦溪”项目说明 | 主视觉、画册、中文直排与英文横排的实际处理 |
官网与产品界面
看 Qoder 官网的产品呈现，再看官方博客中的更新与客户案例。对应的原图与原页已放在Qoder 案例章节。
产品界面的真实样例使用 Semi Design 官方介绍中的多产品组件展示。Arco 的基础参数、主题分层和默认反馈另外见字节案例章节。它们分别是实际产品成品和开源实现依据。
活动系列物料
“梦溪”原文把主视觉、画册设计和场景应用分开呈现。上方四张原图可依次对照平面信息、出版物、展厅入口和机场屏幕；完整原图及团队署名见官方项目说明。
比赛系列则看腾讯教育与赛事素材，其中保留真实活动的桌面／移动封面、手册、作品和报道入口。
公众号与社交图片
国美推文原址目录收录从学校与学院官方页面取得的微信链接。比较同一机构的征集、预告、攻略与回顾，能直接看到栏目、标题、署名和信息先后。
海报文字还可对照 2022 年官网转载的春分、惊蛰、雨水。署名海报目录逐张保留作者与原图。
视频与动态包装
OPPO《Oppolence》使用上方原始播放器；导演署名和品牌项目关系可在 Pentagram 原文核对。
竖版视频方法看 TikTok Creative Codes与字节视频案例摘要。资料明确涉及 9:16、720p 以上、界面安全区、内容结构与声音；本库摘要保留原始来源。
PPT 与图表
从腾讯官方季度业绩页选择具体季度的 Earnings Presentation，打开对应原件，对照实际标题、图表、注释与章节关系。
另有OPPO 官方课件中的 ColorOSHack 2023 泛在服务系统与开发套件介绍 PPTX，属于开发者课程成品。
用一组物料验收
对照同一个真实项目的多个成品：记录反复出现的字体、图形与命名，再记录因载体变化而调整的信息。需要区分原图中可观察的处理和有文档支持的规则；没有公开的参数仍保留未知。
消费硬件的图片与发布
消费硬件的图片与发布
一家公司第一次发布硬件时，先让读者看清设备是什么、能完成什么任务、使用条件是什么，再把这些信息延伸到官网、海报、公众号、视频、PPT和体验活动。成熟感来自内容有出处、型号有版本、物料有稳定层级，以及图像与使用任务的对应。
现有大疆、拓竹、OPPO、影石、安克、石头，并连接宇树、云深处、强脑与Rokid的不同硬件形态。下方方法是自己的制作方案；公司页保存官方入口和能核验的案例。
按项目选参考
| 自己正在做什么 | 主要参考 | 配套研究 |
|---|---|---|
| 影像设备官网、创作者活动 | 大疆 · 影石 | 器材图、成片、拍摄动作、影像主题与投稿方式 |
| 手机、工业设计与影像创作 | OPPO | 字体、设计故事、产品过程、影像／艺术／开发者比赛 |
| 桌面制造、创客社区、教育 | 拓竹 | 成品、制作过程、基础模型、作者、材料与挑战任务 |
| 多品类消费电子发布 | 安克创新 | 总品牌、品类、具体产品和体验场景的层级 |
| 家庭清洁设备 | 石头科技 | 家庭任务、型号比较、使用条件和合作内容 |
| 机器人产品与任务活动 | 宇树 · 云深处 | 动作演示与行业任务分别拆解，记录设备与条件 |
| 人机交互和可穿戴体验 | 强脑 · Rokid | 人物、设备、实际操作与屏幕示意的关系 |
| AI工具、演示和企业工作坊 | Qoder | 需求、过程、预览、结果和客户任务；另见独立字体页 |
准备六种图像，建立一致的素材库
| 图像类别 | 需要拍摄／制作什么 | 放在哪里 |
|---|---|---|
| 产品外观 | 正式外观、统一角度、材质与比例参照 | 官网首屏、产品卡、PPT章节封面 |
| 使用情境 | 人、环境、设备的空间关系 | 公众号故事、体验活动、宣传片 |
| 操作过程 | 手部操作、步骤、屏幕与接口 | 教程、产品页、现场讲解 |
| 实际成果 | 成片、打印成品、任务结果、完成界面 | 功能证明、作品卡、比赛回顾 |
| 技术解释 | 结构、系统关系、单位与条件 | PPT正文、方案手册、媒体说明 |
| 人物与现场 | 参与者、嘉宾、合作方、作品作者 | 招募、新闻、活动现场与回顾 |
每份资源记录标题、型号／版本、作者、拍摄或渲染、日期、语言市场、出处、用途、导出版本。产品图不要因换场景改变外观版本；效果示意和实际拍摄在图注中区分。原图和可编辑母稿分别归档。
一套能做出来的物料方案
下面采用假设项目“桌面制造开放日 2026”。它是作者练习，不是某家公司公开的内部尺寸规范。尺寸以自己的渠道当前要求和裁切测试为准。
| 物料 | 作者起稿方案 | 固定信息 | 变化内容 |
|---|---|---|---|
| 总海报 | 1080×1440，保留裁切安全区 | 项目名、时间、地点、主办关系、入口 | 代表性成品与一句主题说明 |
| 社交方图 | 1080×1080 | 同一名称、相同文字角色、品牌位置 | 作品、讲者或任务 |
| 视频封面／PPT | 1920×1080 或16:9画布 | 标题、版本、章节或演示者 | 外观、过程、结果与图表 |
| 官网首屏 | 桌面与手机各一版 | 产品名、具体价值、主入口 | 产品图和简短实际任务 |
| 公众号长文 | 单列阅读，图片带图注 | 活动名、完整流程与报名地址 | 故事、案例、讲者与步骤 |
| 比赛作品卡 | 建立一张可复用母版 | 作者、作品名、类别、版本 | 成果图、简述与过程链接 |
文字先分四个角色：项目主标题、章节标题、正文、注释／型号。颜色先分品牌主色、强调色、中性色、状态色；用自己的素材确定对比和可读性。摄影、渲染、截图采用不同图注模板。不要把截图提取的颜色写成品牌标准色号。
如果需要一个可调整的起点，可用8为间距基数，正文先试16–18px、行高1.5–1.7，手机长标题先试28–36px，再用实际内容校正。以上均为作者试排参数；投影PPT与印刷海报另做观看距离和输出测试。
字体为什么要单独整理
| 样本 | 可核验声明 | 作用边界 |
|---|---|---|
| OPPO | OPPO Sans 4.0 官方文档；官网样本另记版本 | 字体、页面实现与历史 H5 规范分层 |
| 大疆 | Open Sans＋中文系统回退 | 2026样本网页CSS，题字与图标另看 |
| 拓竹 | Inter／EB Garamond／JetBrains Mono | 官方博客模板声明，不覆盖包装或全部活动 |
| Qoder | Instrument Sans＋代码等宽回退 | 官网样式；QoderStaticSeti为图标字体 |
| 影石 | Noto Sans SC／MiSans VF／Roboto Mono相关样式 | Press Hub样本，不代表所有页面最终渲染 |
| 宇树 | OPPOSansR／OPPOSansB／Alibaba_PuHuiTi | 官方站样式声明 |
斜体要记录是实际 italic 款式、字体轴还是软件变换。硬件型号、价格、日期与单位可以先保持直立；短展示标题再实验变化。字体文件、许可、语言覆盖和PPT嵌入条件分别核对。
体验活动与比赛，选择不同的调性
| 活动形态 | 调性与组织方法（作者建议） | 对应公开案例 |
|---|---|---|
| 产品体验日 | 安静且清楚地演示任务；保留讲解、操作、体验与问答的顺序 | 大疆产品页、安克发布、OPPO产品与设计故事 |
| 创作者影像赛 | 主题作品统领系列；明确器材、作品要求、投稿和展示 | SkyPixel、OPPO 2026影像大赛、2026影石徕卡挑战赛 |
| 创客模型挑战 | 成品吸引参与，基础模型与步骤支持完成，作品卡说明作者与材料 | 拓竹×影石联名挑战 |
| 校园与STEM工作坊 | 任务可完成、演示可理解、成果可带走；教程和组织信息齐备 | 拓竹Emma Albert署名案例、酷家乐校园赛 |
| 开发者应用比赛 | 给需求、工具、教程、提交物、评选与成果展示 | ColorOSHack 2023、Rokid高校AR、Qoder企业案例 |
| 行业技术展示 | 专业议题、任务、方案和合作身份有明确层级 | 云深处产品与展会、群核空间设计大会 |
从同一项目延伸：招募封面 → 完整说明页 → 教程与FAQ → 参与者／作品卡 → 现场PPT与导视 → 结果与回顾。每一步都用相同活动名、年份、角色与稳定网址。
最后做一次跨媒介检查
把海报、官网、公众号、视频封面和PPT并排放：是否能立即看出同一项目，是否使用同一型号／版本，人物与作品是否有出处，长短文字是否有固定层级，报名与资料是否能回到正确入口。随后在手机、投影和实际裁切尺寸上试读。
完整执行流程见活动比赛制作清单、发布与账号执行手册，原资料见各公司子目录。本轮原资源直链和状态保存在 hardware-hangzhou-resources.json，CSS采样保存在 font-css-reference.json。
资源记录与交付模板
资源记录与交付模板
收集一个案例以后，先保存原始地址和适用范围，再记录自己的观察。这样以后查找“可以参考的视频片尾”或“中文斜体设计”，就不需要重新翻完整篇文章。
单条资源记录
| 字段 | 记录内容 |
|---|---|
| 公司与产品 | 公司、业务线、产品或活动名 |
| 资料标题 | 保留来源原题 |
| 来源地址 | 官方页面与原始文件链接 |
| 资料类型 | 官方规范、资源入口、项目案例、个人观察 |
| 媒介 | 官网、产品、海报、公众号、视频、PPT |
| 日期 | 文件版本、项目发生时间、查阅日期分别记录 |
| 字体 | 已核实的名称、版本、字重与语言；未知则写未确认 |
| 颜色 | 官方色值与截图测量分开记；测量只作近似观察 |
| 版式 | 对齐轴、边距、层级、图片裁切方式 |
| 动态 | 入场、转场、字幕、片尾的观察 |
| 可借鉴规则 | 能迁移到自己的设计中的具体方法 |
| 使用说明 | 下载包许可或来源页面的用途说明 |
页面暂时不可访问时，保留官方总入口和原地址，记录失败情况。没有观察到的字体、时长和尺寸不补写成事实。
活动视觉任务书
品牌名称：
活动主题：
目标受众：
希望传达的三个具体特征：
主要行动入口：
参考项目和官方链接：
选用字体及版本：
颜色及各自用途：
固定图形与图片规则：
固定版式与可变模块：
官网与报名页面：
主海报、嘉宾、倒计时、议程、回顾：
公众号封面、章节图与结尾图：
PPT 页面类型：
视频分镜、字幕与片尾：
移动端、投影与静音观看的检查结果：
建议的交付结构
brand-project/
references/ 来源链接、观察笔记和允许保存的资料
guidelines/ 字体、颜色、版式、图片和动效规则
website/ 页面设计与响应式说明
posters/ 主海报与系列模板
social/ 公众号和社交图片模板
presentations/ 母版、图表与 PDF
video/ 分镜、字幕、姓名条、片尾与导出文件
source/ 可编辑源文件
exports/ 各发布位置对应的导出版本
交付完成后，再记录哪些模板能直接换内容、哪些页面需要重新排版。这样下一场活动可以从已经验证过的规则开始。
活动与比赛的补充记录
记录目标参加者、活动类型、主题与文案语气、赛道或议题、赛程版本、主办与合作身份、提交要求、评审、作品展示、现场服务和赛后资料。每个参考案例同时保留来源年份与核验情况。
制作阶段使用活动与比赛清单，选方向使用调性指南，查公司案例使用活动导航。
宣传平台与账号记录
| 字段 | 保存内容 |
|---|---|
| 身份 | 公司、产品、内容线、市场与语言 |
| 平台与账号 | 平台、当前名称、固定 ID／handle、主页 URL |
| 证据 | 官网互链、平台资料、认证主体、名称／二维码、历史记录与日期 |
| 职责 | 公司、产品、设计、开发者、活动、招聘、投资者或客服 |
| 承接 | 新闻、活动详情、报名、教程、文档、代码、回放或帮助 |
| 参考物料 | 同一项目的官网、图文、海报、视频、PPT 与活动版本 |
| 缺口 | 无法读取的主页、未识读的二维码、区域或业务账号未核对 |