字节跳动：视觉参考
将不同业务的专业表达分开建立。产品界面靠规则与效率，创作者内容靠作品与节奏，商业与技术大会靠任务、演示和支持。
先看真实案例
真实原图、手册页与网页实录。正文显示压缩预览，点击可看清晰大图；出处与日期见图注。
看图重点：用真实人物和办公场景承载企业介绍，图像气质与产品界面不同。
字节跳动 官方原始媒体
看图重点：原始动图展示组件系统进入不同产品后的界面变化，保留动态表现。
字节跳动 官方原始媒体官网与产品页面实录
以下为官方页面的真实浏览器实录，包含产品首屏、功能区域和部分移动端页面。点击“清晰大图”查看文字与界面细节；出处与日期见图注。
字体、数字与斜体 · 案例与视觉素材 · 活动与比赛 · 产品与品牌关系 · 官方账号与宣传矩阵
原文内容摘要
下面直接摘要原始资料中的规则、做法与案例内容。每段附出处；后面的视觉观察另有标记。
Semi 怎样兼顾不变的组件与多变的品牌
Semi 介绍将原则概括为稳定默认基础与灵活自定义。它把设计变量分层，允许全局或组件级调整；DSM 主题编辑器可发布主题 npm 包，并让 token 同时进入代码与 Figma。官方示例覆盖抖音、剪映、飞书和火山引擎，主题支持浅深模式。统一由共同结构与协作机制形成，不要求不同业务外观完全一样。
来源：原始资料。官方原文摘要。
巨量引擎 2020 年升级同时调整主张与形式
官方报道把品牌主张、使命、愿景与视觉升级一起说明。图形延续旋转的动势，同时转为更聚合、简化的四边形；文字细节与图形互相呼应。传播从增长能力走向生态协同的表达，品牌造型也随定位一起调整。具体历史语境与视觉步骤已补到案例章节。
来源：原始资料。2020 年历史品牌案例摘要。
TikTok 广告的结构与声音有明确指南
Creative Codes 将短视频广告拆成平台语境、趋势、制作、结构、刺激与声音六方面。制作建议 9:16、720p 以上并给平台 UI 留空间，叙事按吸引注意、传达内容、行动收尾组织；音乐、旁白和音效各有任务。案例章节逐项摘要这些规则，并与字体和品牌升级案例分开。
来源：原始资料。官方原文摘要。
字体、数字与斜体
字体、数字与斜体
两类产品字体实现的实际依据
字节相关资源应分为字体项目与产品系统。TikTok Sans 的实际轴范围已列在案例页；产品 UI 另外核对 Arco 与 Semi。
Arco 默认主题
官方 default.less在本次主分支样本中声明 Inter、系统字体与中文平台回退；代码字体为 Consolas、Menlo。基础正文 14px、行高 1.5715。这些属于 Arco 产品实现，不是字节集团宣传字体规范。
作者检查方法：让英文、中文、数字、代码各排一行，再让它们进入同一张表单与卡片。分别在字体成功加载与回退情况下比较字面、基线、行长和换行。官网标题可以更大，但不能从 UI 正文数值推导固定海报字号。
Semi 排版与加载
Semi Tokens 文档将字号、字重和字体作为排版决策，并说明英文 Inter 需要由业务自行引入。组件包、字体文件与实际网页呈现是不同层次。作者练习为网页分别准备加载中、成功与失败三种文字情况，检查按钮、长标题与表格是否仍清楚。
中文搭配的具体测试句
直接对照 TikTok Sans 官方样张与 Arco、Semi 的实际组件，分别检查拉丁字形、中文回退、数字与界面信息。
先调整视觉大小，再决定字重，最后判断英文倾斜是否需要。不要同时改变全部参数。交付时保留一张参数表和五张实际用途样张，能看出各角色如何分工。
先排一个中英混合标题：“产品开放日 Product Day”。英文使用 TikTok Sans 时，中文需要另一套字体。我们分别检查视觉大小、字重、基线和数字，才能判断这组搭配是否协调。
已核实的字体信息
TikTok Sans 官方仓库列出了字重、字宽、倾斜和光学尺寸四种可变轴，并说明字体不包含中文、日文或韩文。仓库与开发者说明使用 SIL Open Font License 1.1。官方仓库、官方开源说明
因此，它可以作为英文与数字的选择，但不能当作一套完整中文字体。不同软件和静态字体包对可变轴的支持也可能不同，需要实际检查。
倾斜与字宽
在支持可变字体的工具中，可以分别调整字重、字宽和倾斜，观察同一句英文标题的变化。静态字体则选择字体包里实际存在的款式。
先只改一个参数，再观察较小尺寸下的阅读情况。英文变窄以后，旁边的中文仍可能很宽；需要按整组标题的比例调整，而不是对两种文字进行相同百分比的机械缩放。
产品中的文字
Semi 版式文档提供了标题、正文、辅助文本和省略等组件行为。Arco也将文字纳入主题与设计决策。
界面练习应覆盖长标题、多语言、数值变化和错误提示。传播标题可以更醒目，但操作说明仍需保持可读；两者共享品牌身份，承担不同任务。
回到字节相关资源索引。
案例与视觉素材
案例与视觉素材
本页先摘要 Arco 的默认主题、巨量引擎的品牌升级、TikTok Sans 的字体文件与 TikTok 的视频创意手册，并对照实际成品。可以直接在这里读到来源中的具体做法，链接用于继续核对原文。四个来源分别属于产品、商业品牌、字体和广告制作。
案例一：Arco 怎样把设计决定组织成系统
原文内容摘要：默认主题如何组织颜色、文字与反馈
Arco 官方站是入口，具体参数直接核对官方仓库的 default.less、global.less 和 colors.less。下面是 2026-09-30 查看主分支源码的样本，适用范围是这个开源组件系统的默认主题。
| 项目 | 源码样本 | 怎样理解 |
|---|---|---|
| 基础正文字号 | 14px | 产品正文的基础值，并非活动海报字号 |
| 基础行高 | 1.5715 | 与字号一起决定阅读节奏 |
| 主要色板第六阶 | Arco Blue #165dff | 默认产品主题色板，不是集团全部品牌的统一蓝 |
| 小、中、大圆角 | 2 / 4 / 8px | 不同层级对象的基础选项 |
| 默认控件尺寸 | 32px；另有 24 / 28 / 36px | 根据密度与任务选择，不是所有按钮都同样大 |
| 多档过渡时间 | 0.1—0.5s | 提供组件反馈的时间基础，实际行为仍需按组件确认 |
源码把这些决定分别命名，而不是让每个组件重复填数字。正文和代码字体有各自变量；颜色文件以第六阶为基础色，通过调色算法生成同一色相的多档色阶。过渡除了时长，还区分线性、标准、过冲、加速与减速曲线；浮层、抽屉、对话框、消息和通知分别安排层级。颜色、文字、密度与反馈因此可以在同一个主题里协调。
例如 z-index-popup-base 为 1000，affix 为 999，drawer／modal 为 1001，message／notification 为 1003。这里摘要的是组件系统默认源码，数值不是集团海报或视频的通用规则。
源码字体栈以 Inter 开始，包含 PingFang SC 等平台回退。完整顺序与字体安装见字体章节。这组数字应连同项目、文件和查看日期一起记录；换版本时重新核对。
为什么这比收集一张漂亮页面更有用
作者拆解：颜色、圆角、字号和间距不是每张页面独立决定的。它们先成为有意义的角色，再进入组件，最后组成页面。这样同一处修改会传到多个触点，界面密度和反馈也能保持连贯。
可以画出三个层次：基础值负责提供材料；语义角色负责说明用途；组件负责把这些用途落实到按钮、卡片、输入框和提示。比如主色不应同时无差别表示品牌身份、错误和成功。角色分清之后，页面的内容可以变化，反馈仍然可靠。
要产出什么
交付一页角色表、五个组件和五个真实内容页面，再录一段从报名到确认的演示。修改一个主题变量，检查是否整体更新。这个结果比只做一张首屏更能说明你掌握了系统。
案例二：巨量引擎 2020 品牌升级怎样连接主张与形式
原文内容摘要：为什么升级，以及实际改了什么
2020-08-04 官方品牌升级报道说明，此次升级同时涉及品牌主张、使命、愿景和视觉。图形保留旋转感，改用更聚合、简化的四边形；文字细节与图形呼应。这是历史案例，不自动代表当前全部产品和活动。
原文把新主张解释为让不同规模的企业借助数字化技术找到增长机会，视觉负责传递聚合与协同。升级的支撑来自用户、技术、内容、评估和服务五类能力：内容可以连接平台事件与用户创作，评估用度量与归因核对效果，服务覆盖曝光到转化。品牌主张、业务能力和新图形在同一篇发布里互相解释，而不是只宣布换了一枚 logo。
作者拆解：先有表达意图，再决定造型
值得学习的关系是“主张—图形—文字—触点”。如果主张表达连接、协同或增长，主图形的组织方式应能支持这一解释，文字和图形也应属于同一语法。不能先随便画一个几何形，再给它堆出很多含义。
研究原始资料时，分别记下图形的基本单元、旋转或组合关系、轮廓、正负空间以及字体与图形的关联。只从新闻文字不能确认所有细节尺寸；没有取得完整资产时，不补造角度、间距或安全区。
系列中最容易失控的地方
主海报往往只有十几个字，讲者卡却可能有很长的机构和头衔。不能为塞字改变整个图形比例。应提前定义两行、三行标题和多行说明的版式，图片与信息区可以变化，基本单元不随内容变形。
检查六张物料：拿掉标志，仍能否看出它们属于同一项目；只看文字，能否判断各张的任务；改成单色，主要层级是否还成立。图形语言必须经得起这些变化。
案例三：TikTok Sans 的字重、字宽、倾斜与光学尺寸
原文内容摘要：文件提供哪些变化，以及语言范围
依据 TikTok Sans 官方说明与 designspace 源文件。字体不包含中文、日文或韩文；开源字体与 TikTok 品牌标志的使用条件分别处理。
| 轴 | 源文件的范围 | 作用 |
|---|---|---|
wght | 300—900 | 改变笔画重量 |
wdth | 75—150 | 改变字宽 |
slnt | −6—0 | 改变倾斜程度 |
opsz | 12—36 | 调整不同视觉尺寸的字形细节 |
范围属于当前源文件；实际下载的字体文件和软件支持也要核对。它们不是“字越大越粗”这样一条简单公式。
这四条轴让同一字体同时改变笔画粗细、宽窄、倾斜和光学尺寸。slnt 的 −6 到 0 表示字体文件设计的倾斜范围，与软件任意斜切不同；opsz 则让小字与大字使用更合适的字形细节。官网下载与仓库说明用于核对字体版本、文件格式和开源许可，设计轴是否可调还取决于实际安装的文件与排版软件。中文标题需要另外选择配套字体，不能因为英文用了 TikTok Sans 就假定中文也来自它。
为什么斜体不能只按快捷键
作者拆解：粗、窄、斜分别解决不同表达任务。粗能加强焦点，窄能改变标题节奏，斜能增加方向感。三者同时开到最大，往往会挤压阅读而失去细节。先让一个变量变化，再看结果。
中文搭配需要另一套字体。把中文与英文都设成同一字号，视觉高度也未必相同；要检查字面、笔画、基线和标点。中文仍然直立时，可以靠排版和图形延续方向感，无需把所有字机械拉斜。
字体成为系统需要的记录
交付字体文件名、版本、许可、语言范围、五种文字角色和五张样张。数字、时间、括号、破折号、货币和英文缩写一起测试。不能只有一行好看的大写标题。中文候选与排版示例见字体章节。
案例四：竖版视频怎样连接内容与品牌
原文内容摘要：Creative Codes 的六个原则
Creative Codes 官方指南给出六个方面：贴近平台语境、连接趋势、掌握制作基础、安排内容结构、用动态元素保持注意力、用声音建立体验。下面摘要它的明确做法。
| 原文中的任务 | 具体内容 |
|---|---|
| 平台语境 | 从平台内容与创作者的自然表达中获得方法 |
| 制作基础 | 竖屏 9:16、至少 720p，给平台界面预留空间 |
| 内容结构 | 开头吸引注意，中段讲品牌或产品，结尾明确下一步 |
| 动态元素 | 转场、运动、文字叠层等帮助持续理解与观看 |
| 声音 | 音乐建立情绪，旁白补细节，音效制造故事中的变化 |
这些是 TikTok 广告创意建议；并没有规定所有视频必须采用同一时长或同一种画面包装。
原文内容摘要：SMB 手册怎样把构思、制作与优化连接起来
SMB Creative Playbook共 56 页，按构思、制作、优化组织工具与方法。第 13—15 页连接广告案例、关键词、趋势、脚本与音频资源；第 17—19 页说明前 3—6 秒的开头应与主线相关，随后清楚表达卖点，最后给行动入口。第 48—49 页用关键帧分析与素材疲劳诊断帮助判断观众何时点击或流失，再调整素材。
手册把视频当作可反复迭代的内容资产。工具名称、可用地区与测试状态属于该文件版本，实际使用时再核对；其中的 3—6 秒是开头任务的建议，不是整条视频的长度。
Creative Center负责承接案例研究、趋势、脚本和音乐；上面的两份指南分别解释创意原则与制作流程。
一条视频要完成什么
沿 TikTok Creative Codes 的结构、声音与制作指南，对照 Creative Center 中的真实视频。分辨开场、主体、行动提示与字幕如何配合；以实际原片为例。
横竖版本怎样保持统一
不把横版整体缩进竖版。竖版先安排主体与字幕，横版可把说明与操作并列。片名、标题字体、主图形、署名和片尾格式共享，画面区域重新组织。目标平台的 UI 遮挡和发布规格在导出前重新核对。
封面单独做：它要在静态缩略图上说明任务。优先选择清楚结果图，配简短主题，而不是随意抓一帧带半截字幕的画面。字幕也不等于完整讲稿，旁白负责连贯，字幕负责关键动作和事实。
活动与比赛
活动与比赛
这个目录分别收集火山引擎、TikTok 和扣子的活动。三者服务的人群和目标不同，需要分别学习其内容组织，再建立自己的品牌规则。
官方案例入口
| 案例 | 来源与版本 | 可以研究的部分 |
|---|---|---|
| 火山引擎 FORCE 大会页面 | 官方历史活动；路径标记 2512 | 能力发布、嘉宾、展区、现场工作坊等模块 |
| TikTok TechJam 2025 复盘 | TikTok for Developers 官方 | 命题、72 小时挑战、技术工作坊、评审、获奖项目与现场内容 |
| TikTok TechJam 2024 报道 | TikTok 官方；2024-08-15 | 高校人群、跨地区团队、作品故事和获奖队伍 |
| 扣子活动合作指南 | 官方指南；持续更新 | 活动策划、资源协作、作品提交要求、评审和参赛教程 |
| TikTok Creative Center | 官方工具 | 为活动短视频继续查找具体内容形式 |
扣子指南末尾提供 Show me 挑战赛、AI 工坊和开发者聚会等案例。本轮其中部分跳转显示 404 或无法读取，保留总指南作为可靠入口，不把失败地址列为已经完整核验的案例。
FORCE：技术发布与动手体验一起组织
官方页面同时介绍模型能力、Agent 议题、互动展区和现场工作坊。可研究完整大会页面。
作者解读：适合把调性设为“能看到能力，也能亲手尝试”。预热视频先展示任务结果；报名页写出参与对象和学习产物；现场指引把演讲、演示和操作区区分清楚。技术名词后面加一个具体任务，有助于参加者选择议题。
界面、海报与 PPT 可以复用同一套卡片。单张卡片只支持一种决定，例如选择议题、预约工作坊或观看演示。按钮文案直接写“查看日程”“报名工作坊”“观看回放”。这些是作者建议，不是火山引擎的内部文案规范。
扣子：降低参与门槛要落实到教程
扣子官方指南将活动方案、双方资源、宣传、操作教程、作品要求和评审能力一起考虑。它也区分独立活动与联合活动；品牌露出和平台支持需要按相应流程沟通。具体条件见活动合作指南。
作者解读：如果我们希望活动显得亲近，准备“第一次参赛怎么办”的材料非常有效。报名成功页直接链接工具准备、模板、教程和答疑；每一张提醒海报都告诉参加者下一步完成什么。
字体、斜体与动态
TikTok Sans是可继续核对的拉丁字体资源，不能替代中文活动字体。中文标题、英文口号与数字需要分工设计。
作者建议：如果主题需要速度感，可对短英文标题使用字体本身的斜体或倾斜轴；赛程、规则和长段落仍使用直立文字。动态包装重复同一个主图形的展开、组合或切换动作，让片头、转场、字幕和片尾形成连续关系。
产品与品牌关系
产品与品牌关系
做协作软件、短视频、开发者工具和活动营销时，所参考的字节相关品牌并不相同。本页补充产品地图，避免把一种风格当作整个公司的唯一答案。
本页资料的原文摘要
Semi 怎样兼顾不变的组件与多变的品牌
Semi 介绍将原则概括为稳定默认基础与灵活自定义。它把设计变量分层，允许全局或组件级调整；DSM 主题编辑器可发布主题 npm 包，并让 token 同时进入代码与 Figma。
来源：原文。官方原文摘要。
更完整的来源摘要与版本范围见公司主文章的原文摘要。
按产品形态选择
| 体系或产品 | 官方入口 | 资料性质 | 可以参考什么 |
|---|---|---|---|
| 集团 | ByteDance | 官方公司成品 | 企业叙事与公司信息 |
| 企业产品规则 | Arco、Semi | 官方设计系统 | 组件、主题与文字层级 |
| 抖音直播小玩法 | 视觉规范 | 官方专项平台规则 | 文本、图标、封面与按钮，范围是直播小玩法 |
| TikTok | 品牌入口、字体仓库 | 品牌中心与开源字体 | 短视频品牌与拉丁文字，分别核对许可 |
| 飞书 | Feishu | 官方产品入口；本轮地区跳转到 Lark | 协作任务与产品说明，注意市场版本 |
| Lark | Lark | 官方产品入口；本轮跳转 en_sg | 国际市场的协作内容 |
| CapCut | CapCut | 官方产品成品 | 视频工具的功能、教程与场景 |
| TRAE | TRAE | 官方产品入口；可读内容有限 | 开发者工具的定位与功能入口 |
| 商业营销 | 巨量引擎 | 官方产品与历史品牌资料 | 商业内容、传播与投放形态 |
| 大会与创作活动 | 本地活动章节 | FORCE、TechJam 与扣子等资料汇总 | 发布、比赛与成果展示 |
飞书入口的地区跳转不意味着两地产品信息完全相同；没有据此声明共同 VI。CapCut 与 TRAE 是成品入口，没有取得完整公开内部品牌规范。
抖音文字规则的范围
直播小玩法规范明确要求相应文本采用 PingFang Medium 或 Regular，并给出文字、图标与组件情境。这个条款只属于该专项规范，不能写成“字节所有中文都用苹方”。字体文件的使用许可也不是平台文档替外部项目授予的。原文
一家公司多个产品怎么统一
以下是作者建议。共享公司名称、正式说明与部分基本层级；不同产品保留适合任务的组件和内容方式。活动可以建立当届图形，但仍沿用稳定的品牌信息、字体选择原则和文案。
| 自有产品 | 优先练习 |
|---|---|
| 协作工具 | 真实工作流、清楚状态、操作与结果 |
| 短视频工具 | 创作过程、成品变化、字幕与手机阅读 |
| 开发者工具 | 代码、终端、任务反馈与文档 |
| 品牌合作平台 | 受众、内容、执行与成果 |
| 技术大会 | 议程、演示、报名和回放 |
继续阅读字节字体章节和视觉案例。本轮收集日期：2026-09-30。
业务层的资料和账号分工
集团内容解释公司与团队；产品内容展示任务与更新；设计系统提供实现规则；开发者内容提供教程、代码与支持；创作者内容提供作品与方法；活动内容承接时间、地点与参与。公司规模小时可以用栏目承担不同角色，视觉先保持同一基础规则，再为不同任务设计内容结构。
用账号章节中的正式入口核对每个角色，不将产品名称、公众号昵称和公司主体混为一个层级。
官方账号与宣传矩阵
官方账号与宣传矩阵
如果我们要做一次「创作者与 AI 工具体验日」，可以研究 字节跳动 怎样把公司介绍、产品内容、活动页面和社交账号连接起来。先辨认账号身份，再观察成品的标题、画面、文案和行动入口。
品牌边界与内容定位
集团、抖音、TikTok、飞书、Lark、剪映／CapCut、火山引擎和 AI 工具按产品与市场拆开。
主要研究对象是内容创作者、普通用户、企业团队、开发者与广告主。下面的内容定位与制作方案是作者的观察和练习建议：演示先说明实际效果，再给出明确的参与或试用路径。它们不是该公司公开披露的内部运营制度，也不代表固定的发文频率。
自有发布平台与承接入口
这些入口包括网站、新闻、设计系统、代码、活动、商业服务和企业资料。网站与账号是不同记录：活动网站承接报名或信息，社交账号负责把人带过去。表中“观察内容”说明我们应该研究什么，不表示完整读取了所有子页面。
| 平台或栏目 | 层级 | 观察内容 |
|---|---|---|
| 字节跳动公司 | 公司 | 集团身份与产品边界 |
| TikTok Newsroom | 产品新闻 | 海外产品新闻与地区内容 |
| TikTok 开发者 | 开发者 | 接入指南、技术更新与设计要求 |
| TikTok Creative Center | 广告与创作 | 创意内容与广告主材料 |
| Lark | 国际协作产品 | 产品讲解与国际社交号互链 |
| 飞书 | 中文协作产品 | 企业场景与中文产品承接 |
| CapCut | 国际创作产品 | 创作工具体验与模板入口 |
| TRAE | AI 开发工具 | 产品功能与演示材料 |
| 巨量引擎产品 | 商业化 | 广告主与商业产品内容 |
| Arco Design | 设计系统 | 组件、设计语言与文档 |
| Semi Design | 设计系统 | 组件与技术文档 |
官方账号与证据
A 是官网页面中的出站链接记录；即使平台主页需要登录，链接来源仍可查。B 是平台公开资料或平台矩阵收录，逐号认证／官网互链未全部复核。Q 是官方文字、二维码或图标，仅能确认表内写出的信息。H 是历史官方记录，需要复核现状。主页可用性、当前昵称和活跃状态可能变化。
| 平台 | 账号或官方入口 | 业务与市场范围 | 身份依据 |
|---|---|---|---|
| ByteDance | 集团／国际 | B · 平台公开资料；出处 | |
| 新浪账号内容页 | 字节跳动 | 集团／中文；平台转载的账号内容 | B · 平台公开资料；出处 |
| Larksuite | Lark 国际产品 | A · 官网出站链接；出处 | |
| larksuite | Lark 国际产品 | A · 官网出站链接；出处 | |
| larksuite | Lark 国际产品 | A · 官网出站链接；出处 | |
| TikTok | @lark | Lark 国际产品 | A · 官网出站链接；出处 |
| YouTube | @Larksuite | Lark 国际产品 | A · 官网出站链接；出处 |
| TikTok | TikTok 产品 | B · 平台公开资料；出处 | |
| 微博 | 抖音 | 抖音产品 | B · 平台公开资料；出处 |
只出现二维码时，不补猜微信 ID；出现微博内容转载页时，不把它当作已取得的微博主页。GitHub 项目、知乎专栏和 Discord 活动邀请按其实际形态记录，不能与公司主品牌账号混算。
各平台覆盖状态
这一表方便检查国内与国际渠道。它记录本轮证据覆盖，不是“有号／无号”的判定，也不声称已经收齐所有国家、业务和历史账号。
| 平台 | 本轮记录 | 核对状态 |
|---|---|---|
| 微信公众号 | 本轮未取得可引用的官方账号证据 | 待核对；不表示该公司没有账号 |
| 微信视频号 | 本轮未取得可引用的官方账号证据 | 待核对；不表示该公司没有账号 |
| 微博 | 字节跳动；抖音 | B；详见上表 |
| 抖音 | 本轮未取得可引用的官方账号证据 | 待核对；不表示该公司没有账号 |
| B站 | 本轮未取得可引用的官方账号证据 | 待核对；不表示该公司没有账号 |
| 小红书 | 本轮未取得可引用的官方账号证据 | 待核对；不表示该公司没有账号 |
| ByteDance；larksuite；TikTok | A／B；详见上表 | |
| X | 本轮未取得可引用的官方账号证据 | 待核对；不表示该公司没有账号 |
| YouTube | @Larksuite | A；详见上表 |
| larksuite | A；详见上表 | |
| Larksuite | A；详见上表 | |
| TikTok | @lark | A；详见上表 |
| Threads | 本轮未取得可引用的官方账号证据 | 待核对；不表示该公司没有账号 |
| 本轮未取得可引用的官方账号证据 | 待核对；不表示该公司没有账号 |
本公司特别需要分清的地方
- Lark 的国际账号矩阵不能直接写成飞书中文矩阵。
- 新浪字节账号内容页不等于已取得微博主页 UID 证据。
- 飞书官方微博在平台新闻中可见，但本轮未取得稳定主页地址。
一次发布或活动怎样串联
这个例子用于我们自己的「创作者与 AI 工具体验日」，不是对 字节跳动 真实排期的复述。可以从 字节跳动公司 和上表的活动／内容入口观察呈现方式，再按自己的受众选渠道。
| 阶段 | 内容与格式 | 适合的渠道层 | 下一步 |
|---|---|---|---|
| 公布主题 | 官网专题与一张主海报：项目名称、面向谁、参加后能得到什么 | 自己的公司官网＋已确认身份的主品牌账号 | 进入一张完整的项目说明页 |
| 说明价值 | 产品／作品演示；长文解释一次真实任务；短视频只选一个结果 | 产品内容线＋专业文章＋视频平台 | 试用、阅读教程或了解赛题 |
| 展示人物与议题 | 嘉宾卡、作品卡、议程卡；长图中的信息保持可编辑 | 活动内容线＋公众号／社交图片 | 查看完整嘉宾介绍、时间与报名条件 |
| 帮助参与 | FAQ、报名／提交步骤、示例文件、直播观看说明 | 活动页＋社区／客服内容线 | 完成报名、作品提交或收藏直播入口 |
| 活动当天 | 直播包装、演讲 PPT、现场屏幕、可实时使用的说明 | 现场与视频平台；社交账号发布精选信息 | 观看、互动与获得资料 |
| 活动结束 | 回放目录、作品与结果、资料索引、完整案例 | 官网归档＋专业／社区内容线；品牌号摘要导览 | 继续学习、试用产品或参加下一次活动 |
比赛另做一张信息母表，保存赛题版本、资格、时区、截止时间、提交文件、评审方式、奖励和咨询入口。社交卡片可以简短，母表和规则页需要完整；临时变更同步到全部承接渠道。
官网、公众号、图片、视频和 PPT 的一致性
| 物料 | 共同保留 | 按媒介改变 |
|---|---|---|
| 官网 | 自己的品牌身份、项目标题、主视觉主题与信息来源 | 补全详情、条件、目录和可使用的入口 |
| 公众号／长文 | 标题用词、图片主题、配色层级与链接目标 | 开篇说明受众与收益；正文加入过程、规则和答疑 |
| 社交海报／封面 | 项目名称、主图主题、日期与账号归属 | 重排信息；为头像、平台控件和裁切留出空间 |
| 短视频／长视频／直播 | 品牌署名、字幕样式、图形与章节词汇 | 先给演示或具体问题；短视频删减信息，长视频保留步骤和章节 |
| PPT／现场屏幕 | 同一名称、字体系列、色彩角色和图表表达 | 根据观看距离重新设置字号与信息密度，不缩小公众号长图直接投屏 |
| 比赛／作品／嘉宾系列 | 一致的编号、头像或作品展示位置、署名方式 | 为不同长度姓名与不同尺寸作品准备替代布局 |
字体、斜体、角色、摄影和图形的具体规则继续看本公司的视觉资料与横向字体地图。先查资源许可与规范范围，再给自己的品牌写一份可重复使用的规则。
尚未完成核对的分支
- 飞书、剪映、CapCut、TRAE、Coze、火山引擎各区域账号。
- 抖音产品在抖音平台的官方主页。
- 各产品中文公众号与视频号的认证主体。
复核时保存平台、显示名称、固定 ID／handle、主页 URL、认证主体、市场／语言、官网出处、当前页面截图日期与活动归属。只靠搜索同名账号或第三方排行榜，无法补齐身份链。记录模板和渠道分工见总导航与发布执行手册。
本页账号收集与来源核对日期：2026-09-30。没有发送消息、关注账号或进入需要登录的账号后台。
官方资料与视觉观察
官方资料、真实案例与视觉观察
这篇把 字节跳动 拆成“原始资料、设计判断、案例、制作方案、活动执行与传播矩阵”。适合研究 内容创作者、普通用户、企业团队、开发者与广告主 的内容。引用链接与读取状态是资料记录；标为作者拆解、练习或建议的部分是为自有品牌设计的方法。 具体字体、色号和组件参数只在取得明确来源时记为官方值。
原始资料与读取状态
Arco、Semi、巨量引擎、TikTok、火山引擎和扣子并非一套统一 VI；集团文化也不能替代各产品视觉规范。
| 资料 | 本次核对与适用边界 |
|---|---|
| 字节跳动官网 | 已读取公开文本；不代表逐项核验全部内页 |
| Arco Design | 入口可达，主要为脚本页面；正文未完整读取 |
| Arco 文档仓库 | 已读取公开文本；不代表逐项核验全部内页 |
| Semi Design 介绍 | 已读取公开文本；不代表逐项核验全部内页 |
| Semi 版式组件 | 保留既有官方入口；本次未重新读取文件全文 |
| TikTok Sans 官方仓库 | 保留既有官方入口；本次未重新读取文件全文 |
| TikTok Sans 下载 | 保留既有官方入口；本次未重新读取文件全文 |
| TikTok Sans 开源说明 | 保留既有官方入口；本次未重新读取文件全文 |
| TikTok Sans 初次发布介绍 | 保留既有官方入口；本次未重新读取文件全文 |
| TikTok 开发者设计指南 | 保留既有官方入口；本次未重新读取文件全文 |
| TikTok Brand Hub | 保留既有官方入口；本次未重新读取文件全文 |
| 巨量引擎 2020 年品牌升级 | 保留既有官方入口；本次未重新读取文件全文 |
| 巨量引擎产品样式 | 保留既有官方入口；本次未重新读取文件全文 |
| TikTok Creative Center | 保留既有官方入口；本次未重新读取文件全文 |
| SMB Creative Playbook PDF | 保留既有官方入口；本次未重新读取文件全文 |
| TikTok Newsroom | 保留既有官方入口；本次未重新读取文件全文 |
| TikTok 开发者 | 保留既有官方入口；本次未重新读取文件全文 |
| Lark | 保留既有官方入口；本次未重新读取文件全文 |
收集与复查日期：2026-09-30。历史活动保留其届次；当前主站可能已切换下一届。HTTP 200 不代表已读取脚本内所有内容，也不代表资源许可已经确认。
先理解这套表达如何成立
信息先后与视觉焦点
一个基础图形发展成标记、卡片、背景与动态语言；界面截图和作品内容是主体，装饰承担连接。
作者建议先找一条完整路径：从封面或首屏进入详情，再进入操作、报名、获取或回放。记录主标题怎样改变、同一种图形怎样反复出现、证明材料在哪一层出现。成熟的视觉需要在这条路径上仍然清楚；单张好看的图不能代替完整体验。
配色的角色
作者给一个项目固定主色和语义角色，活动可增加主题色；产品状态、品牌强调和赛道分类不混用。
做自己的系统时，先定义背景、正文、身份强调、分类、状态五类角色。不要先画十张图再逐张取色。主题色可以出现在封面与章节页，长说明、规则、规格和表单回到稳定底色。每个状态都写出名称，颜色之外还有文字或符号。
图像与图形怎样分工
一个基础图形发展成标记、卡片、背景与动态语言；界面截图和作品内容是主体，装饰承担连接。 同一组素材为官网、海报、公众号、视频和演示准备不同裁切。主体完整版本用于详情，局部版本用于解释，缩略版本用于入口。每个版本记录原图、主体位置、文字安全区和署名，避免后期反复猜裁切。
动态与语言
创作者视频用真实任务推进，技术视频用操作和结果推进；短片封面、字幕与片尾保持一套规则。
调性可以概括成“演示先说明实际效果，再给出明确的参与或试用路径”，这是作者提炼。邀请、操作指引、规则和结果公告承担不同任务：邀请说机会，指引说动作，规则说条件，结果说事实。把四类文本放在一起校对，能发现看似统一但实际上语气混乱的地方。
三个案例方向的详细拆解
下面每个方向都给出研究方法与可做的产物。它们是基于上方资料范围的作者分析；受限页面没有被补写成已读取的内部规范。
1. Arco 与 Semi
研究设计 token 怎样在组件与主题之间传递，先做状态完整的产品页。
作者拆解。 沿着基础值、语义角色、组件和页面四层研究。先看规则表达什么，再找按钮、卡片、表单或列表如何调用。默认状态之外，继续检查加载、空内容、错误、完成与恢复，视觉应当帮助用户知道下一步。
迁移到自己的项目。 首屏说任务和结果，接真实演示、能力、案例、教程与报名或获取入口。 先用自有真实内容制作，再放入最长标题、不同图片与异常状态检验。保留的是有解释力的结构关系，原品牌的名称、素材和含义不自动迁移。
可交付产物。 一页语义角色表、一个状态完整的组件和一条可完成的页面路径。用长文字、空结果与错误情况验证，不只交默认画面。
2. 巨量引擎 2020 品牌升级
研究主张、图形和字体如何共同解释商业定位；不直接继承其品牌含义。
作者拆解。 先区分公司、产品、合作与活动身份，记录标志版本、背景、留白、对齐和组合关系。实际手册参数保留页码；没有手册时只记录能够确认的资产，不从网页外观补造规定。
迁移到自己的项目。 一个基础图形发展成标记、卡片、背景与动态语言；界面截图和作品内容是主体，装饰承担连接。 先用自有真实内容制作，再放入最长标题、不同图片与异常状态检验。保留的是有解释力的结构关系，原品牌的名称、素材和含义不自动迁移。
可交付产物。 一页身份关系图、深浅底与单色样张、四种触点的组合示例。最长名称与多合作方仍然有清楚优先级。
3. TikTok Sans 与短视频
研究标题、数字、字幕和片尾的连续性，实际轴参数与分镜见案例和字体章节。
作者拆解。 先把资料拆成家族、文件、款式与用途，确认是字体项目、品牌使用指南还是网页实现。然后比较大标题、长正文、数字、代码和字幕五种用途。可变轴和斜体只记实际提供的款式，专有字形与开放字体分别记录。
迁移到自己的项目。 TikTok Sans 的四种轴与语言范围见章节；Arco 默认字体栈与 Semi 的产品排版单独列出，中文另外选择。 先用自有真实内容制作，再放入最长标题、不同图片与异常状态检验。保留的是有解释力的结构关系，原品牌的名称、素材和含义不自动迁移。
可交付产物。 一份字体资源台账、一页角色表和五张真实文字样张。样张包含中英混排、最长标题与数字变化，能解释每个款式为什么这样用。
可以直接查看的媒体例子
以下来自公开 HTML 的媒体链接，便于查看原始例子；文件存在不等于允许任意使用。没有将它们标成内部模板或完成逐帧分析。
| 类型 | 原始媒体入口 | 所在页面 |
|---|---|---|
| 图片 | 原页媒体文件 | 字节跳动官网 |
| 图片 | 基于 Semi Design 的多元化产品与团队组件 | Semi Design 介绍 |
字体、字号、数字与斜体
TikTok Sans 的四种轴与语言范围见章节；Arco 默认字体栈与 Semi 的产品排版单独列出，中文另外选择。
斜体怎样成为规则
把同一短英文分别用直立款、字体实际提供的 Italic／Oblique 或倾斜轴排出。观察字形、倾角、字宽与旁边中文的关系。若字体没有对应款式，软件的合成倾斜要标为作者处理。中文正文、议程、规则与长注释保持直立；速度感可以由构图与动效承担。可变字体使用范围从实际字体文件读取，不能由另一款字体的数值推断。
宣传平台、账号与矩阵怎样配合
| 平台 | 官方入口样本 | 所属范围 |
|---|---|---|
| Larksuite | Lark 国际产品 | |
| larksuite | Lark 国际产品 | |
| larksuite | Lark 国际产品 | |
| TikTok | @lark | Lark 国际产品 |
完整名称、主页、业务边界和身份依据见宣传平台与账号章节。A 表示官网出站链接；B 表示平台公开依据；Q 表示官网名称或二维码；H 表示历史官方记录。不同等级不混作已经核实当前账号 ID。
具体发布链：宣布时给主题与入口；解释时给可见样例；提醒时给日期与准备；进行时给现场任务；结束时给结果与资料。每次发布只选一个主要行动，并保证账号名称、项目名称与页面信息一致。
交付前的检查与修正
| 需要检查 | 常见问题 | 修正动作 |
|---|---|---|
| 品牌层次 | 公司、产品、活动混成一层 | 按“Arco、Semi、巨量引擎、TikTok、火山引擎和扣子并非一套统一 VI；集团文化也不能替代各产品视觉规范。”重新标注来源与用途 |
| 文字 | 中英混排、型号或长标题破版 | 用实际最长内容试排，调整字重、行数与层级 |
| 图像 | 场景与宣传结论没有对应 | 按本页素材分工补过程、细节与结果 |
| 系列 | 每张图换字体、颜色和装饰 | 固定角色与组件，只让内容变化 |
| 动态 | 演示被包装遮住，字幕看不完 | 按任务顺序减镜头，留出结果观看时间 |
| 活动 | 报名之后不知道下一步 | 补准备、确认、现场支持、提交与回顾 |
| 渠道 | 所有账号转同一张图 | 按解释、演示、行动与归档分别制作内容 |