企业官网建设流程全解析

• 文档

导读

本文基于 awesome-design-md 仓库中收录的 design-md/vodafone/DESIGN.md 展开深度解析。该文档将沃达丰（Vodafone）官网的设计语言提炼为一份可直接交给 AI 编码代理读取的纯文本设计系统：以猩红#e60000单色 CTA、专有 Vodafone 显示字体 800 字重超大号大写标题、以及“深色英雄带 → 白色内容带 → 深色页脚”的双带式页面节奏为核心骨架。读完本文，你将掌握该设计系统的全部设计令牌（色彩、字体、圆角、间距、组件）、层级表、响应式断点策略与守则（Do's and Don'ts），并能在自己的项目中复制这份 DESIGN.md 让 AI 代理生成风格一致的 UI。

一、文档定位：一份写给 AI 代理的品牌设计系统

在 awesome-design-md 仓库中，每个品牌目录都包含一个DESIGN.md，其概念源于 Google Stitch：DESIGN.md 是一份纯文本设计系统文档，AI 编码代理读取它即可生成视觉一致的 UI。它只是 Markdown 文件，无需 Figma 导出、无需 JSON Schema、无需特殊工具链，直接放入项目根目录即可被 AI 代理理解。

Vodafone 目录下还附带一份 design-md/vodafone/README.md，说明该设计系统的详情、预览与下载已迁移至在线托管页；仓库内的 design-md/vodafone/DESIGN.md 本身则以「YAML 前导令牌块 + Markdown 规范章节」两段式组织：

• YAML 前导块：以colors、typography、rounded、spacing、components五个命名空间声明全部设计令牌，组件令牌通过{colors.primary}、{typography.button-md}这种花括号引用语法引用基础令牌，形成可编程的令牌网络；
• 规范章节：用 Overview、Colors、Typography、Layout、Elevation、Shapes、Components、Do's and Don'ts 等章节把令牌的使用规则讲清楚——令牌回答“是什么”，章节回答“怎么用”。

下文将逐层展开这套系统。

二、设计语言总览：广告海报，而非企业官网

文档的 Overview 给出了整套系统的气质判断：沃达丰的网页读起来更像一张 campaign 海报而不是企业官网。其核心特征可归纳为五条（原文 Key Characteristics）：

1. 单一主 CTA 色：{colors.primary}（#e60000）Vodafone Red，主按钮用红色实心胶囊，次按钮用红色描边胶囊，没有第三种按钮变体；
2. 超大号大写 800 字重显示体：{typography.display-hero}（144px）及其同族字级是品牌签名，300 字重的{typography.display-lg}/{typography.display-md}负责更平静的次级标题时刻；
3. speechmark-logo-orb 视觉锚点：承载引号图标（quotation-mark icon）的红色方块，是页面上唯一非 CTA 的装饰性元素，锚定每一页的视觉重心；
4. 胶囊几何贯穿所有交互形状：按钮用{rounded.pill-lg}（60px），行内徽章用{rounded.pill-md}（32px），卡片保持{rounded.card}（6px）；
5. 两带式页面节奏：{colors.ink}深色英雄带 /{colors.canvas}浅色内容带，没有中间灰带——品牌用表面反差而非柔和中性色来表现层级；
6. 编辑式摄影是唯一一致的装饰系统：真实人像、真实城市、真实布线，没有插画、没有氛围渐变。

文档特别强调两个“决定性声音”：

• 色彩声音：整个装饰色板只有 Vodafone Red、近黑{colors.ink}以及白色/灰阶中性色，没有第二个强调色来竞争注意力；
• 字体声音：专有显示无衬线体（提取为Vodafone）以 800 字重大写承载英雄级标题（144px / 126px），以 300 字重承载后续次级显示体；正文保持 400 字重中性字距。“先是一声呐喊（800 字重），再是一句平静的话（300 字重）”就是品牌的字体叙事。

三、色彩系统：红、墨、灰的三色律

3.1 品牌与强调色

3.2 表面色

3.3 文字色

3.4 语义色说明

文档明确指出：品牌不维护独立语义色板。主红色在需要时同时承担校验/破坏性信号；成功/警告用途仅保留在产品内场景（in-product contexts），不属于文档化的营销系统范围。在落地时，这意味着你不要为表单校验自行引入绿色/琥珀色体系，而是复用主红。

四、字体系统：一个家族讲完整个品牌的两种声音

4.1 字体族

整个系统由单一自定义字体承载：Vodafone专有显示无衬线体。它覆盖 300（Light）、400（Regular）、600、700、800 五个字重，系统中的每个角色都从这个家族取字。没有等宽字体的“伴生角色”——技术性标签（营销表面罕见）也只是同族更小字号借用。文档还提到 icomoon 图标字体用于专有字形，但不作为排版角色渲染。

4.2 完整层级表（继承原文档全部 16 个令牌）

4.3 排版原则

• 800 字重 + 大写 = 英雄声音：这是品牌读起来像广告牌而非技术站点的全部原因；
• 300 字重 = 更平静的次级声音：用于 40–48px 的子显示体，从不低于 24px，以保证可读性；
• 全系统单一字体族：从不混入衬线体或等宽体，一致性本身就是“平静”；
• 显示级字号保持紧凑字距：144px 下的-1px是品牌校准值，回到中性字距会削弱模板化的“stencil”观感。

4.4 开源替代字体（font substitutes）

Vodafone 显示体是专有的，文档给出开源替代方案：

• 显示级（800 字重）：Inter800 字重 +letter-spacing: -1px是最接近的免费方案；Geist700–800 字重次之；
• 300 字重显示体：Inter300 在 48px 显示字号下能很好地保持行高。

五、布局系统：4px 基线的栅格与留白哲学

5.1 间距系统

• 基准单位：4px（基本都是 4 的倍数；少量 5/7px 出现在图标内边距补偿中）；
• 完整令牌阶梯：{spacing.xxs}2px ·{spacing.xs}4px ·{spacing.sm}8px ·{spacing.md}12px ·{spacing.lg}16px ·{spacing.xl}20px ·{spacing.2xl}24px ·{spacing.3xl}32px；
• 区块内边距：英雄带与内容带使用{spacing.3xl}（32px）留白；英雄带内部垂直间距是流式的（fill-the-band）；
• 卡片内边距：故事卡在“图片 + 标题”四周使用{spacing.lg}（16px）；
• 行内间隙：按钮行与徽章行兄弟元素之间使用{spacing.md}（12px）。

5.2 栅格与容器

• 营销内容使用宽容器（桌面端实际为带{spacing.3xl}边距的通栏，移动端收缩）；
• 故事卡栅格：桌面 2 列，移动 1 列；
• 英雄摄影铺满视口，超大标题覆盖在左上角。

5.3 留白哲学

英雄级超大标题占据整个页面上部，下方留白充裕让第二个带“呼吸”；内容卡内标题与文案紧贴（{spacing.sm}8px 间隙），卡片之间用更宽的{spacing.3xl}分隔；页脚带深色且内容密集。

5.4 响应式策略

断点表

触摸目标

button-primary胶囊高度约 52px（12px 垂直内边距 + 28px 行高），文档声明所有按钮在任意断点均满足 WCAG AAA 舒适度。

折叠策略

• 导航：桌面为完整链接行；移动折叠为汉堡菜单，菜单以深色遮罩层打开，同一组链接纵向堆叠；
• 英雄区：超大标题流式缩放；移动端摄影裁切收紧到只保留人物面部；
• 故事卡栅格：2 列 → 1 列（在上述断点发生）；
• speechmark 徽标球：相对周围内容保持稳定尺寸，永不缩至约 48px 以下。

图片行为

• 英雄摄影：桌面为通栏 16:9 或 4:3 人像；移动端收紧裁切；
• 故事卡缩略图：16:9 横向，置于{rounded.card}（6px）圆角框架内；
• speechmark 球：始终渲染为红色 SVG 引号图标，绝不用其他图形替换；
• 合作方页面上的 logo 条（如有）：统一高度的单色 SVG。

六、层级与深度：用表面反差，而非投影

品牌不使用柔和投影；深度来自{colors.ink}与{colors.canvas}带之间的极性翻转（polarity-flip）。

装饰性深度

• 编辑式摄影：英雄照片（真实人像或环境镜头）是品牌唯一真正的氛围化效果；
• speechmark 球作为视觉锚点：承载引号图标的红色球，在平铺的内容节奏中央构成唯一的焦点深度点。

七、形状系统：胶囊是交互的语言，6px 是内容的语言

7.1 圆角刻度表

7.2 摄影几何

• 英雄人像：无边线框的通栏 16:9 或 4:3；
• 故事卡缩略图：{rounded.card}框架内的 16:9 横向图；
• speechmark 标志球：方形 +{rounded.sm}圆角（视觉上是倾斜方形标记，SVG 标记本身填满球体）。

八、组件体系：从令牌到可落地的 UI 部件

组件层把基础令牌组合成可直接生成 UI 的部件规格。以下按原文档顺序完整继承：

8.1 按钮（四种变体）

8.2 卡片与容器

• card-content：默认故事卡框架。背景{colors.canvas}、文字{colors.ink}、内边距{spacing.lg}、形状{rounded.card}（6px）。顶部 16:9 缩略图 + 标题 + 说明文字；
• card-hero：用作头条故事的大型卡片变体。框架同card-content，但标题字号升至{typography.display-sm}。

8.3 输入框与表单

• text-input：规范文本输入框。背景{colors.canvas}、文字{colors.ink}、1px 实线{colors.ink}边框、正文{typography.body-sm}、内边距{spacing.md} {spacing.lg}、形状{rounded.sm}（6px）。

8.4 导航与页脚

• nav-bar：固定在页面顶部的深色导航。背景{colors.ink}、文字{colors.on-dark}、内边距{spacing.lg} {spacing.3xl}；布局为 logo 居左、链接行居右（含登录/搜索入口）；
• nav-link：nav-bar内的链接项，文字{colors.on-dark}，{typography.body-sm}；
• footer：深色页脚带。背景{colors.ink}、文字{colors.on-dark}、内边距{spacing.3xl} {spacing.3xl}；正文{typography.body-sm}，列眉题{typography.caption-uppercase}。

8.5 签名组件

• hero-band-dark：承载超大显示标题的深色英雄带。背景{colors.ink}，叠加降透明度的通栏编辑式摄影；文字{colors.on-dark}；内边距{spacing.3xl} {spacing.3xl}；标题{typography.display-hero}（大写、800 字重）；
• hero-band-red：签名 campaign 才用的罕见通栏红色英雄带。背景{colors.primary}、文字{colors.on-primary}、内边距同上；标题{typography.display-xl}；
• content-band-light：跟随每个英雄带的白色内容带。背景{colors.canvas}、文字{colors.ink}、内边距{spacing.3xl} {spacing.3xl}；章节标题{typography.display-md}或{typography.display-lg}（300 字重）；
• speechmark-logo-orb：承载沃达丰引号图标的红色方块，品牌视觉锚点。背景{colors.primary}、白色图标字形、形状{rounded.sm}；常位于长页中部、内容带之间作焦点元素；
• badge-chip：故事卡内分类标签的行内元数据胶囊。背景{colors.canvas-soft}、文字{colors.ink}、标签{typography.caption-strong}、内边距{spacing.xs} {spacing.md}、形状{rounded.pill-md}（32px）；
• divider-on-dark：深色表面上区块/列之间的 1px 细线，1px 实线{colors.on-dark}（组件层面常以 25% 不透明度呈现）。

8.6 自动推导的示例表面（ex-* 系列）

原文档在 YAML 尾部声明了 10 个ex-*示例表面，说明其由自动推导流程生成，供/preview-design、/generate-kit等下游消费方一致地“换肤”同一批表面；TO_FILL标记表示缺失的原语，由 LLM 判断阶段解析。这些示例全部复用品牌原生原语：

注意：ex-pricing-tier-featured的极性翻转、ex-modal-card的阴影等，说明示例层允许在品牌原语上叠加通用 UI 语义，但色彩/圆角/间距仍严格引用品牌令牌。

九、设计守则：Do's and Don'ts

这份守则对 AI 代理生成 UI 时的约束力最强，直接决定了输出是否“像沃达丰”。

Do（应当）

• 将{colors.primary}Vodafone Red 只保留给主 CTA 与speechmark-logo-orb；每个转化目标都用红色胶囊；
• 英雄标题用{typography.display-hero}800 字重大写 + 紧-1px字距——那个模板（stencil）观感就是品牌声音；
• 每个交互胶囊都用{rounded.pill-lg}（60px）——品牌从不在 CTA 上用直角；
• 页面表面按{colors.ink}深色英雄带 →{colors.canvas}浅色内容带 →{colors.ink}页脚循环——表面反差就是深度线索；
• 将编辑式人像摄影与超大显示标题叠加配对——这个组合就是品牌签名；
• speechmark 标志球相对周围内容保持稳定尺寸——它是每页的视觉重心。

Don't（禁止）

• 不要引入第二个强调色——品牌只用红 + 墨 + 灰阶；
• 不要在英雄级渲染句首大写（sentence case）标题——英雄显示体就是大写 + 800 字重；
• 不要把主 CTA 画成方矩形——60px 胶囊不可妥协；
• 不要在卡片上投柔和投影——品牌靠表面色彩反差，不靠阴影；
• 不要用文字标或异形图形替代 speechmark 球——这个球就是标志性标记；
• 不要在 144px 的 800 字重显示体上使用 0 字距——-1px字距是品牌校准的一部分。

十、实战：把这份 DESIGN.md 用进自己的项目

按仓库 README.md 给出的标准用法，接入流程只有两步：

1. 复制文件：把 design-md/vodafone/DESIGN.md 复制到你的项目根目录；
2. 让 AI 代理使用它：对你的编码代理说“build me a page that looks like this”（参照这份 DESIGN.md 建一个页面），代理即可依据其中的令牌与守则生成视觉一致的 UI。

由于它是纯文本 Markdown，任何支持 Markdown 的编码代理（或 Google Stitch）都能直接读取，无需解析或配置。生成时建议把上文第 4.4 节的开源字体替换方案一并告诉代理（如用 Inter 800 替代专有 Vodafone 字体），避免专有字体不可用导致视觉偏移。仓库 CONTRIBUTING.md 还说明，如果你发现某份 DESIGN.md 的色值或令牌有误，可以通过 issue 反馈改进；仓库采用 MIT 许可，所有设计令牌均来自公开可见的 CSS 值。

结语

Vodafone DESIGN.md 是“少即是多”的品牌设计样本：一套色彩（红 + 墨 + 灰）、一个字体家族（Vodafone 专用无衬线体）、两种字体声音（800 字重呐喊 / 300 字重低语）、一套胶囊几何（32/60/9999px）、两条页面带（深色英雄带 / 浅色内容带）。它的工程价值在于——所有决策都被提炼成了可引用的令牌和可执行的守则，AI 代理只需读取这份文件就能复现“广告海报式”的电信品牌观感，而不是停留在“红色加黑色”的粗浅描述上。对想学习品牌级设计系统提炼方法的读者，这份文档本身就是一个极佳的拆解范本。

• 文档