marketing-vs-product-system

营销与产品是同一品牌的两个界面

官网负责销售；产品负责使用。访客花 90 秒读完一个营销页面，然后离开。运营人员每天早上打开同一品牌的产品，一用就是几个小时。为两者制定同一套规范，结果要么是用起来令人疲惫的宣传册，要么是无法促成销售的产品界面。

因此，这两个界面本来就应该有所不同。问题从来不是要不要不同，而是哪些层可以有所不同。

营销与产品是迫使我们面对这个问题的一对，因为没人能假装它们是同一项工作。但其背后的规则并不局限于两个界面。大多数品牌都有四五种界面：网站、产品、文档、交易邮件、状态页，有时还有销售演示文稿。每种界面面向不同时间点、承担不同任务、服务不同读者。**品牌负责定义各层；每种界面都从中选择。**增加第六种界面也不会改变这条规则，这正是检验规则是否正确的方法。

新界面应归属哪一层，要用层级规则提出的同一个问题来判断，而不是看哪个团队负责构建。文档的读者每次会花几分钟阅读，且往往正在处理任务，因此在信息密度上接近产品，在阅读宽度上接近网站。交易邮件无法控制主题，也没有悬停状态，因此只采用共享值，很少使用其他值。两者都不是特殊情况；它们都是对一般规则的具体应用。

层级规则

品牌值共享；应用值按界面选择。

共享，两者使用同一值	按界面选择
色调：品牌强调色、暖色强调色、状态颜色	哪种颜色主导界面
字体系列	使用的字号阶梯
圆角阶梯（允许使用的尺寸集合）	界面采用哪个尺寸
图标库	图标尺寸和粗细
文本对比度下限（正文为 4.5:1，大号文本为 3:1）	信息密度、间距节奏
组件约定（按钮是什么）	按钮的默认尺寸

如果一个值回答的是我们是谁，它就是共享值。如果回答的是这个界面要做什么，就由该界面自行决定。产品界面选择更紧凑的圆角，是设计。产品界面选择另一种蓝色，就是偏离品牌。

合理的差异

这些差异是健康的，值得明确说明，而不是任其偶然出现：

• 字号层级。 营销内容使用展示字号，确实会用到醒目的主视觉字号。产品内容会低两到三个层级，因为界面中占比最大的往往是较小的字号。字号层级是同一套阶梯；两个界面各自落在不同的阶梯上。
• 字重。 营销内容偏向粗体，因为标题需要争取注意力。产品内容偏向中等和半粗体，因为屏幕上的所有内容都已是用户想要的。
• 圆角。 营销内容可以采用更大、更柔和的卡片圆角：元素少，留白多。产品界面则会收紧圆角，因为在高密度布局中，大圆角会侵占相邻元素的角落，看起来显得模糊。两个界面可能会使用五到六个级别，这并不意味着层级体系出了问题，只要每个级别都来自同一套阶梯。真正会破坏体系的，是使用完全不属于这套阶梯的数值。
• 密度和宽度。 营销内容按阅读栏宽度衡量，因为限制在于眼睛沿着一行文字扫视的距离。产品界面按工作区宽度衡量，因为限制在于数据，而数据不会因为屏幕更宽就变窄。这也是为什么宽度应由外壳决定，而不是由页面决定：如果产品中的每个页面都自行选择栏宽，导航时内容就会左右跳动。
• 动效。 营销内容可以在进入时播放动效，因为此时还没有要求访客做任何事。产品界面则会响应用户操作播放动效，但有两个例外：引导流程中，动效能向首次使用的用户展示某个元素从何而来；空状态中，动效能表明屏幕正在等待，而不是出了故障。这两者都是对用户当前情境的回应，因此并不违背这条规则。
• 主题。 产品可能需要浅色模式，而营销网站不需要。使用工具六小时的人有权选择；只是路过的访客则不需要这个切换选项。

同时在两个界面中渲染的组件

页眉、主要行动号召、定价组件、页脚：少数组件会出现在两个界面中，而它们正是界面规则变成争论的地方。它们不属于任何一个界面。

规则：共享组件从上下文中读取所在界面，而不是为每个界面分别携带一个变体。 如果组件带有 marketing 属性和 app 属性，就已经分叉了；下次修改时，这两个分支会逐渐偏离，却没人察觉，因为它们仍然都能正常渲染。

实际做法如下：

• 组件从其挂载所在界面获取设计令牌。如果产品有主题而网站没有，那么组件在所有地方都支持主题，而网站只需保持数值不变。
• 界面特定的尺寸可以作为组件已有的属性。落地页上用大型、工具栏中用中型的行动号召，是一个组件的两种尺寸，而不是两个组件。
• 如果两个界面确实需要不同的行为，而不只是不同的尺寸，那就应该是两个有不同名称的组件。把分支明确说出来，不要用布尔值把它藏起来。
• 共享组件的所有者应是设计令牌来源的所有者，而不是最近修改过它的团队。

什么是偏移，而非差异

• 只存在于一个界面中的第二种灰色或第二种品牌蓝
• 在网站和产品中含义不同的组件：在一处是链接、另一处却是标签的胶囊
• 营销页面上的对比度达到最低要求，却在密集的产品界面中悄悄低于该要求；小字会让问题更严重
• 仅存在于一个界面的交互提示：产品有而网站没有的焦点可见状态、键盘操作路径和 ARIA 角色，或反过来的情况

Token 层必须唯一

在一个代码库同时服务两个界面的情况下，这通常是最容易出问题的地方，而且问题会悄无声息地发生。

问题表现为三种机制同时承载相同的值：只定义一次的 CSS 自定义属性、粘贴在标记中的字面十六进制值，以及按主题返回类名的运行时辅助程序。每一种机制单独看都有合理的局部原因。合在一起，就意味着无法在一个地方更改颜色，也没有任何东西会报告不一致。

规则：值只有一个真实来源，消费者可以有任意多个。 主题化界面在运行时解析 token 没问题，只要它解析的是共享 token，而不是持有自己的副本。验证方式很直接：在一个地方更改品牌强调色，看看两个界面是否都会随之改变。如果有一个没有改变，那你就有两套共用一个标志的设计系统。

标记中的字面值是需要重点排查的对象，原因有二，而且都可以验证：token 审计看不到它们，主题也无法触及它们。满是字面值的界面并非选择了不使用主题，而是悄悄让主题化成为不可能。

边界究竟在哪里

比起偶尔出现的十六进制值，第二种蓝色更常出现在代码库或系统边界。边界所在之处决定了唯一来源需要承担哪些工作：

• 一个代码库，两个界面。 这是最简单的情况，也是最容易出问题的情况。值必须存放在两个界面的文件夹之外，否则先构建的界面就会悄悄成为定义来源。
• 独立代码库。 真实来源必须是双方都会使用的已发布、带版本的构件，更新它也必须通过发布，而不是复制。如果对于“网站如何获取新的强调色”的诚实回答是“有人把它粘贴进去”，那就没有唯一来源，只有一种习惯。
• 产品旁边的 CMS 或营销平台。 必须在构建步骤中将值导出到平台自身的主题配置，而不是在管理界面中手动重新输入。任何输入设置字段的内容都是一个没有历史记录的分支。
• 以设计工具为源头。 没问题，前提是只有一个方向具有权威性。设计工具与代码之间的双向同步并不是唯一来源，而是两个来源，只不过合并冲突会延迟出现。

人们真正优化的是跨越边界的成本。如果使用共享来源比硬编码值更慢，值就会被硬编码，没有任何规则能经得住这种情况。

明确源的负责人

由所有人共同负责的真实来源，等于无人负责；这是本文提到的所有问题中最持久的一个。token 会过时，每个界面都会在本地打补丁，因为提出请求更费时；等有人提议解决时，分裂已经完成。

为 token 来源指定一位负责人：可以是个人，也可以是单一团队，并将其记录在 token 所在之处。 负责人不决定每个界面应该是什么样子。他们决定哪些内容进入共享层，审查对共享层的更改，并作为界面团队添加新值前的咨询对象。

另外两条规则能让职责真正落实，而不只是挂名：

• 是否将内容加入共享层由负责人决定；从中选择则不是。 如果每个页面使用什么圆角半径都要咨询负责人，他们就会成为瓶颈，一个月内大家就会绕过他们。
• 负责人有责任确保跨越边界的成本足够低。 如果团队总是在硬编码值，那是负责人需要解决的问题，而不是该责怪团队缺乏自律。

从分叉走向统一

大多数读者来到这里时，项目已经分叉；而规定正确的最终状态并不等于制定了计划。顺序很重要， 因为按直觉采取的顺序行不通。

1. 先盘点，再统一。 根据实际运行的界面，而不是文档，列出每个界面实际使用的所有值。两者之间的差距才是真正需要解决的问题。
2. 区分冲突与重复。 两个界面在两处使用相同的值，这是重复，修复成本很低。两个界面在同一角色上使用不同的值，这是冲突，需要由人来做决定。不要让工具按出现频率来选出胜者。
3. 先把冲突定下来，并形成书面结论。 一个强调色、每种角色对应一个灰色值、一套圆角梯度。这是设计决策，不是重构，也是唯一无法自动化的一步。
4. 然后创建来源，并让一个界面指向它。 只能选一个，不能两个都选。经过单个使用方验证的来源才算来源；同时为两个使用方编写的来源，只是在猜测它们各自的需求。
5. 迁移第二个界面，并在同一次变更中删除旧值。 如果迁移后旧机制仍然存在，那只是增加了一个机制，而不是移除了一个，这正是机制最初会变成三个的原因。
6. 添加一项能让构建失败的检查。 只要标记中的字面值还不能让 CI 失败，数量就只会增加，分叉也会以团队发布的速度自行重建。

团队会跳过第三步，因为这一步需要有人否决自己并不负责的界面。这正是负责人存在的意义。

实用检查

• 提取两个界面的调色板并进行比较。只存在于一方的色相是需要回答的问题，不是可以照单全收的事实。
• 列出两个界面中正在使用的圆角值。关键不在数量，而在于每个值是否都是既定尺度中的一个档位。一个不在梯度内的值，比六个符合梯度的值更值得关注。
• 检查产品信息最密集的屏幕上最小字号文本的对比度，而不是营销文案正文：正文文本为 4.5:1，18.66px 粗体或 24px 常规字重及以上为 3:1。营销页面仅凭字号就能达标，却无法告诉你那个会不达标的屏幕是什么情况。
• 搜索标记中的字面颜色值。这个数量就是设计漂移的欠债，而且只会自行增加。

另请参阅：ui-density，了解如何选择产品的信息密度；color-mode-and-theme，了解如何为一个界面添加主题；component-family-consistency，了解如何确保组件在各处含义一致。