9 个品牌，一套决策方式
业务已经长成产品矩阵，官网还是一个旗舰软件的销售页。我重新划定品牌、排版、组件、模块、模板、端与协作的边界，让 9 个产品品牌长在同一套规则上，又各自看得出性格。
- 我的角色
- UI 设计师 / 动效负责人
- 我交付什么
- 全局规范 · 组件与模块规范 · 核心页面模板 · 首页动效 · 上线验收
- 其他设计师做什么
- 依据模板扩展各产品线与业务页面
- 协作规模
- 3 产品经理 · 4 设计师（含我）· 3 前端
首页 Banner 动效：使用 After Effects 做的产品生态动效方案，导出分层切图与两版压缩预览，最终选用 959 KB 的轻量版作为交付预览。
页面在增长，规则在分散
旧站的结构假设只有一个主角：DVDFab 既是母品牌又是具体产品名。每条新产品线上线时都在这个假设外面再加一层，于是导航里产品、功能和价格属性挤在同一级，同一个按钮在不同页面有不同高度，同一种模块在不同产品线被重画一遍。整个站没有一个地方能回答「这里该用哪个值」。一次重设计救不了这种局面，能救的只有一套规则，所以我把项目重新拆成两步：先确定哪些决策必须收归系统，再确定哪些差异必须留给产品。
旧版分析 · 一张首页已经装不下五条产品线
旧官网延续了单一产品时期的组织方式。业务扩展以后，品牌介绍与产品入口连续叠加，技术内容也被放进同一条页面里。用户需要自行判断母品牌和产品线之间的关系。
01 · 产品关系需要重新解释
母品牌与具体产品共用 DVDFab 名称，新增产品线很难找到稳定位置。
02 · 页面缺少明确的阅读顺序
品牌信息、产品入口与内容推荐连续出现，视觉强调也在多个模块之间来回切换。
03 · 主站承担了过多解释工作
功能、技术和购买信息同时进入首页，产品页与主站之间缺少清晰分工。
系统必须吸收的复杂度
- 9 个产品品牌，各有品牌色、场景隐喻与营销语气
- 同一产品线内并存 AIO、单品、平台专供、Android 等多种页型
- DVDFab 单品页需要 4 套模板，Passkey 需要 3 套
- 营销页之外还有购买、支付、下载、安装、支持、条款与状态页
- 英文与日文两套排版基线，PC 与 375px 两套字阶
- 4 位设计师并行产出，前端分批上线
前期 Demo · 从首页方案里找到网站的页面语法
前期 Demo 保留了多组首页方向和滚动状态。我把产品发现效率、信息完整度与首页阅读成本放在一起比较，最终确定主站与产品页的分工。
主站负责建立全局认知
首页说明 DVDFab 的业务范围，展示主要产品入口，再补充可信度证据与内容资源。
产品页负责完成具体判断
完整功能、兼容信息与购买方式留在产品页，用户进入之后再沿着稳定顺序阅读。
把产品色写进 token
母品牌与产品线的边界，如果只写在规范文档里，一定会在赶版本时失守。所以我把它变成了选样式时的必然结果。
这一步决定了后面所有事情的成本。设计师给 StreamFab 页面套样式时，只能在 StreamFab 的颜色角色里选；想给它用 DVDFab 蓝，得先想清楚为什么要越过角色。前端拿到的同样是一个有名字的角色。
8 个产品品牌色，每个配一支浅背景
成对存在是关键：品牌色负责动作与强调，浅背景负责该产品的内容区底色。没有配对的话，产品页一旦需要大面积着色，设计师就会自己调一个淡一点的品牌色，八条产品线会调出八种不同的淡。
语义色只有一套，不跟产品变
#00101F成功#00D44F警告#FAAD14错误#FF3141禁用#83C3FF图标默认#B1B5BC产品色作用于：主 CTA、产品名、特性图标、Banner 渐变、产品页内容区底色
产品色不作用于：全站导航、页脚、文字链、公共页面、成功/警告/错误状态
禁用态单独出 token（DVDFab #83C3FF），不靠透明度模拟，因为透明度叠在不同底色上会得到不同结果
规范要写到前端不需要问我
还原度从 70% 提到 90% 以上，靠的是把数值和规则提前写进规范，让「照着做」比「猜一下」更省力。
并排出现不同宽度的按钮时，以最宽的那个为基准统一宽度（适用 Banner 与推荐模块）。这条规则是从实现返工里长出来的
亮底与暗底各出一套完整状态矩阵。幽灵按钮额外注明「文案及 icon 颜色以卡片背景颜色为主」，因为它会被放在 8 种产品底色上
符号命名法让状态可被检索
_n 常态 / _h 悬停 / _d 禁用）命名即索引：前端要「DVDFab 中号带前置图标的悬停态」，不需要来问我在哪块画板
间距写成四组关系
大多数规范把间距写成 4 / 8 / 12 / 16 的数列，然后现场自由组合。我把它拆成关系：谁和谁之间、在什么容器里、标题多长时怎么处理。8 块专项画板分别定义模块↔模块、卡片↔卡片、卡片↔内容、标题↔内容，加上容器内间距、卡片四周间距、标题长度限制。
| 关系 | 规范画板 | 解决的实际问题 |
|---|---|---|
| 模块 ↔ 模块 | 模块与模块间距（1920×6614） | 长产品页里 10 多个模块串接时的呼吸节奏 |
| 卡片 ↔ 卡片 | 卡片与卡片间距 | 同一栅格内多卡并列时的视觉分组 |
| 卡片 ↔ 内容 | 卡片与内容间距 / 卡片四周间距 | 卡片内部留白，避免文字贴边 |
| 标题 ↔ 内容 | 标题与内容间距 / 标题长度限制 | 标题换行后与正文的关系不塌陷 |
交付给前端的是标注稿
条款页也出了标注版，以便前端最大化地还原。长文本页最容易被实现成「差不多」，而它恰好是用户投诉退款时会仔细读的页面。
12 块组件规范
设计系统不能停在组件层
组件解决「这个按钮长什么样」。让 4 个人并行做 9 个品牌不走形的，是再往上一层：模块有多少种、各自负责什么、按什么顺序组合成页面。
11 个内容模块
| 模块 | 在页面里负责 | 规范尺寸 |
|---|---|---|
| Banner | 第一屏说清是什么产品、给谁、下一步做什么 | 1920 × 6628 |
| 对比表格 | 版本之间的能力差异，支撑选型决策 | 1920 × 5960 |
| 推荐板块 | 交叉推荐同生态其他产品 | 1920 × 5760 |
| FAQ | 拦截购买前的犹豫与常见误解 | 1920 × 4220 |
| 使用方法 | 把「能做到」落成「我能做到」 | 1920 × 3850 |
| 评价板块 | 第三方背书，建立可信度 | 1920 × 3340 |
| 系统要求 | 排除不兼容用户，减少退款 | 1920 × 3196 |
| 产品板块 | 产品线内多产品的并列陈列 | 1920 × 2348 |
| 推荐文章 | 承接搜索流量与内容营销 | 1920 × 2248 |
| 联系我们 | 兜底路径 | 1920 × 2012 |
| MyCombo 模块 | 组合购买入口 | 1920 × 1148 |
7 类特性组件，覆盖不同「说明难度」
功能点的解释成本差别很大：有的一句话加一个图标就够，有的需要界面截图，有的需要前后对比，有的需要分步流程。我定义了 7 类特性组件，让设计师按内容类型挑，不用每次现场排版。
模板数量跟着需求差异走：DVDFab 单品页出了 4 套模板、Passkey 3 套、StreamFab 覆盖 AIO / 单品 / 平台专供 / Android 四种页型。
共享构图语法，不共享同一张皮
统一多品牌最容易走向两个失败：要么八条产品线长得一模一样，要么各做各的、母品牌消失。我的解法是把 Banner 拆成有名字、有尺寸、有规则的层。
换产品线时，变的是每层的内容，不变的是层的职责与尺寸。图标词汇跟着产品能力走，差异化在这一层发生，也最容易被偷懒做成「换个色」。
CTA 层级在 8 条产品线上固定：主行动「Try for Free」用品牌色填充，次行动「Buy Now │ 价格」用品牌色描边
标题里产品名用品牌色，后半段功能名用中性色，「DVDFab」在任何页面都读作同一个符号
不允许为了视觉惊喜改变构图位置。惊喜留给主体配图，不留给信息位置
保留层级数量，重映射值域
移动端如果只是把 PC 字号乘一个系数，会同时得到两个结果：小屏上标题太大，正文太小。所以我保留层级数量，重映射值域。
| PC 端 | 移动端 | 决策 | |
|---|---|---|---|
| 字阶级数 | 9 级 | 9 级 | 层级数量不变，信息结构才能跨端复用 |
| 值域 | 12 → 52px | 10 → 32px | 顶部收窄 20px，底部下探 2px |
| 级差 | 12 / 14 / 16 / 18 / 24 / 30 / 38 / 48 / 52 | 10 / 12 / 14 / 16 / 18 / 20 / 24 / 28 / 32 | 移动端在小号区间加密，大号区间压缩 |
| 字重 | Regular / SemiBold / Bold | Regular / SemiBold / Bold | 保持一致，避免跨端认知差异 |
| 颜色角色 | 中性 + 状态 + 8 品牌 | 中性 + 状态 + DVDFab | 移动端收敛为 4 种，产品色改由组件承载 |
两套 token 放在同一个 Sketch 文件里（209 条文本样式 = 131 条 PC + 72 条移动 + 6 条辅助），设计师改移动端时能直接看到对应的 PC 层级，不用切文件比对。
移动端重新设计排版
小屏没有走等比缩放，几处高频界面按移动端的使用场景重新排版。
系统的强度，在没人截图的页面上暴露
首页最容易做好看。检验系统的是购买弹窗、下载安装、兑换码和打开失败，这些页面有状态、有异常、有金额，而且每条产品线都不一样。
7 条产品线各一套购买弹窗
购买弹窗是整套系统里状态最密的组件：默认态、右侧卡片展开态、订阅态，还有一版专门加了进度条组件，因为长时间的支付等待没有反馈时，用户会重复点击。
MyCombo：状态来自用户的选择数量
组合购买的界面必须同时处理「选得太少」和「选满」两种情况。我按选择数量做了状态排列，并且在多条产品线上各验证一遍，因为不同产品线的可选项数量不同，同一个规则在边界上会失效。
下载到安装成功，是一条要设计的路
这些页面加起来的访问量远低于首页，但它们是用户已经付了钱之后才看到的。做不好，前面所有转化都会变成退款。
表格密度做了三版才定
StreamFab 产品状态页要在一张表里说明多个版本对多个流媒体平台的支持情况。我做了三种列数方案，然后选了能同时满足「覆盖够」和「读得动」的那一版。
取舍是怎么发生的
Changelog 走了三版，Technology 汇总页换过组织方式，上线后新需求也没停过。这一章讲几处关键取舍，以及规则怎么接住后来的改动。
Changelog 页是这套系统里信息结构最难定的一页：既要让老用户快速找到「我关心的版本改了什么」，又要让搜索进来的新用户看懂产品还在活跃更新。我做了三版探索才收敛。
上线之后，需求没有停
改版上线只是起点，新的业务要求持续进来，仅这一批就有七条：
系统好不好用，就看这些改动有没有把规则撑破。进度条组件后来进了购买弹窗和试用成功页两处，用的是同一个组件，没有长出两个相似物。 2025 年 7 月和 8 月还各做了一轮素材增补，特性图迭代到 V3。
我怎么让 4 个人并行不走形
| 角色 | 输入 | 产出 | 我的介入点 |
|---|---|---|---|
| 产品经理 × 3 | 业务目标与内容范围 | 各产品线需求与优先级 | 确认页面职责是否已有模板覆盖 |
| 我 | 需求 + 旧站审查 + 竞品对照 | 全局规范、组件与模块规范、核心模板、动效 | — |
| 设计师 × 3 | 我的模板与规范 | 各产品线与业务页面适配稿 | 评审是否越过 token 与模块职责 |
| 前端 × 3 | 带标注的规范与切图 | 组件实现、响应式、分批上线 | 上线前逐项对照标注验收 |
从交付页面，转向交付一套还在长的系统
这套系统把页面职责、组件规则、跨端逻辑和协作验收放进同一条增长路径，帮助团队持续扩展而不重新发明规则。
上线后的反馈
这套系统的规模
回头看
这个项目里我改变最大的判断是，设计系统的价值，要看它能不能替人做决定。138 条文本样式听起来是负担，但正因为产品色被写进了样式名，「这里用什么颜色」这个每天要问几十次的问题消失了。
如果重做一次，我会更早开始做压力测试。购买弹窗和安装流程是在规范基本成型后才铺开的，结果在那里发现了几条必须回头补的规则（并排按钮取最宽、幽灵按钮跟随卡片底色）。这些规则本该从最复杂的场景里先长出来。
