69设计知识体系大全_深度补充_设计知识_深度补充_2026-08-09_品牌战略与设计系统构建.pdf
本页仅提供在线查看，平台不提供原文件下载。
设计知识深度补充：品牌战略与设计系统构建
版本：2026-08-09 | 适⽤⼈群：品牌设计师、设计总监、UI/UX设计师、产品经理、品牌策略顾问
前置知识：基础设计理论、⾊彩学基础、排版基础、UI设计经验
⼀、品牌战略理论
1.1 品牌原型（Archetype）
品牌原型理论源⾃Carl Jung的"集体⽆意识"理论，由Margaret Mark和Carol Pearson在《The Hero and the Outlaw》中引⼊品牌领域。12个品牌原型代表
了⼈类共通的⼼理模式，是品牌⼈格化设计的核⼼⼯具。
1.1.1 ⼗⼆原型详解
原型 核⼼渴望 恐惧 策略 视觉特征 代表品牌
天真者（Innocent） 幸福/纯净 惩罚/罪恶 简单/真诚 明亮⾊彩、圆润形状、简洁排版 可⼝可乐、Dove、任天堂
探险者（Explorer） ⾃由/⾃我实现 被困/从众 探索/冒险 ⼤地⾊系、粗犷质感、动感排版 Jeep、The North Face、Patagonia
智者（Sage） 真理/理解 ⽆知/欺骗 分析/研究 深蓝/藏⻘、衬线字体、权威排版 Google、BBC、Harvard
英雄（Hero） 证明价值/掌控 软弱/失败 挑战/克服 红/⾦⾊、锐利形状、⼒量感排版 Nike、BMW、FedEx
亡命之徒（Outlaw） 颠覆/⾰命 ⽆⼒/平庸 打破规则 ⿊⾊、反叛元素、⾮主流排版 Harley-Davidson、Virgin、Diesel
魔法师（Magician） 愿景/实现 负⾯后果 转变/创造 紫⾊/深蓝、神秘元素、优雅排版 Disney、Apple、Tesla
普通⼈（Everyman） 归属/连接 排斥/孤⽴ 平易近⼈ 暖⾊调、朴素质感、友好排版 IKEA、Walmart、Home Depot
情⼈（Lover） 亲密/感官体验 孤独/不吸引 美感/魅⼒ 红/粉⾊、优雅曲线、浪漫排版 Chanel、Victoria's Secret、Godiva
⼩丑（Jester） 快乐/享受 ⽆聊 幽默/娱乐 鲜艳⾊彩、夸张元素、活泼排版 M&M's、Old Spice、Snickers
照顾者（Caregiver） 保护/关怀 ⾃私/忘恩 服务/利他 绿/蓝⾊、温暖质感、安全排版 Johnson & Johnson、Volvo、UNICEF
创造者（Creator） 创新/⾃我表达 平庸/⽆原创 创造/完善 多彩/对⽐⾊、独特排版、艺术感 Lego、Adobe、Pinterest
统治者（Ruler） 控制/秩序 混乱/失控 领导/权威 ⾦⾊/⿊⾊、经典排版、奢华质感 Rolex、Mercedes-Benz、Microsoft
1.1.2 原型在视觉设计中的应⽤
应⽤流程：
1. 品牌战略层确定核⼼原型（通常1个主原型+1个辅原型）
2. 原型→视觉映射：
- ⾊彩：原型决定主⾊调和情感基调
- 形状：原型决定⼏何语⾔（圆形=天真者/照顾者，棱⻆=英雄/亡命之徒）
- 字体：原型决定字体性格（衬线=智者/统治者，⽆衬线=创造者/Explorer）
- 影像⻛格：原型决定摄影/插画调性
- 动效语⾔：原型决定动态表达（流畅=魔法师，直接=英雄，温暖=照顾者）
3. ⼀致性检查：所有视觉元素是否与原型⼈格⼀致
1.2 品牌定位
1.2.1 差异化定位
差异化维度 说明 案例
功能差异化 产品功能的独特优势 Dyson（技术领先）
情感差异化 品牌情感连接的独特性 Nike（激励/赋能）
体验差异化 购买/使⽤体验的独特性 Apple（端到端体验）
⾝份差异化 ⽤⼾⾝份认同的独特性 Patagonia（环保主义者）
价格差异化 价格/价值的独特定位 IKEA（⺠主化设计）
⽂化差异化 品牌⽂化内涵的独特性 Aesop（⽂学/哲学⽓质）
1.2.2 价值主张画布（Value Proposition Canvas）
客⼾侧（右）：
1. 客⼾任务（Customer Jobs）
- ⽤⼾想要完成什么任务？
- 功能性任务/社交性任务/情感性任务
2. 客⼾痛点（Pains）
- 完成任务过程中遇到什么困难？
- 阻碍/⻛险/负⾯结果
3. 客⼾收益（Gains）
- 期望什么结果和好处？
- 必须收益/期望收益/意外收益
品牌侧（左）：
1. 产品/服务（Products & Services）
2. ⽌痛药（Pain Relievers）
3. 增益器（Gain Creators）
⽬标：找到"契合点"（Fit）——品牌提供的价值恰好匹配客⼾需求
1.3 品牌架构
架构类型 说明 优势 劣势 适⽤场景
单⼀品牌 所有产品使⽤同⼀品牌 品牌资产集中、认知成本低 ⻛险集中、延伸受限 聚焦型业务
⺟⼦品牌 ⺟品牌+⼦品牌 ⺟品牌背书+⼦品牌独⽴ 管理复杂、资源分散 多品类/多市场
背书品牌 ⼦品牌为主+⺟品牌背书 ⼦品牌灵活性+⺟品牌信任 ⺟品牌价值被稀释 收购/合资品牌
多品牌 完全独⽴的品牌组合 ⻛险隔离、市场覆盖 ⽆品牌协同、成本⾼ 竞品覆盖策略
典型案例： - 单⼀品牌：Apple（所有产品均为Apple品牌） - ⺟⼦品牌：Marriott（Courriott by Marriott, Residence Inn by Marriott） - 背书品牌：
Instagram by Meta, YouTube by Google - 多品牌：P&G（Pampers/Tide/Ariel各独⽴运营）
1.4 品牌故事与叙事设计
1.4.1 品牌叙事结构
经典品牌叙事结构（Story Branding Framework）：
1. 主⻆（Hero）= 客⼾（不是品牌）
2. 问题（Problem）= 客⼾⾯临的挑战
3. 向导（Guide）= 品牌（提供指导，⽽⾮做主⻆）
4. ⽅案（Plan）= 品牌提供的解决⽅案
5. ⾏动（Call to Action）= 引导客⼾采取⾏动
6. 成功（Success）= 客⼾使⽤后的理想状态
7. 失败（Failure）= 不⾏动的负⾯后果
1.4.2 品牌故事要素
要素 说明 设计影响
起源故事 品牌为何⽽创⽴ 品牌起源视觉（创始故事⻚⾯）
使命宣⾔ 品牌存在的理由 品牌标语/Tagline设计
价值观 品牌坚持的信念 品牌调性和视觉⻛格
愿景 品牌追求的未来 品牌影像中的未来感/理想化
品牌⼈格 品牌像什么样的⼈ 品牌声⾳/语⾔/视觉⻛格
⼆、VI设计系统⽅法论
2.1 标志设计
2.1.1 ⼏何构建法
⼏何构建是专业标志设计的核⼼⽅法论，通过数学⽐例和⼏何关系确保标志的和谐与精确：
构建⽅法 说明 适⽤场景 案例
圆形构建 以圆形为基础元素组合 圆润/友好型品牌 Pepsi、BP
⽹格系统 在⽅格⽹格中构建标志 精确/技术型品牌 IBM、BBC
⻩⾦⽐例 φ=1.618的⽐例关系 经典/⾼端品牌 Twitter（旧版）、Apple
等⽐例系统 1:1, 1:2, 1:3等简单⽐例 现代/极简品牌 多数科技品牌
⾃由⼿绘 ⼿绘后⽮量化 个性/⼿⼯感品牌 Instagram（旧版）、Virgin
2.1.2 可缩放性设计
标志必须在以下尺⼨范围内均保持可识别性：
应⽤场景 典型尺⼨ 设计要求
⽹站Favicon 16×16px / 32×32px 最简化版本（可能需要移除⽂字）
App图标 60×60px - 1024×1024px 需要安全区域和适配不同平台
名⽚ 25mm宽度 确保⼩尺⼨下清晰可辨
信纸抬头 20-40mm⾼度 ⽂字需可读
⼾外⼴告 数⽶宽 需要考虑远距离识别
⽔印 半透明⼩尺⼨ 需要极简化版本
2.1.3 标志版本体系
⼀套完整的标志系统应包含：
1. 主标志（Primary Logo）
- 完整标志（图形+⽂字）
- ⽤于主要品牌展⽰场景
2. 简化标志（Secondary Logo）
- 仅图形或仅⽂字
- ⽤于空间有限的场景
3. 图标/缩写（Icon/Favicon）
- 最简化的图形元素
- ⽤于Favicon/头像/⽔印
4. 横版/竖版（Horizontal/Vertical）
- 横向排列（⽹⻚/横幅）
- 纵向排列（名⽚/海报）
5. 最⼩版本（Minimum Version）
- 单⾊/反⽩版本
- 最⼩使⽤尺⼨限制
6. 动态标志（Animated Logo）
- ⼊场动画
- 交互动画
2.2 ⾊彩系统
2.2.1 ⾊彩架构
⾊彩⻆⾊ 占⽐ ⽤途 ⽰例
主⾊（Primary） 60% 品牌核⼼⾊彩，⼤⾯积使⽤ Apple：深灰/⽩⾊
辅助⾊（Secondary） 30% 辅助图形、强调元素 Google：红⻩蓝绿
强调⾊（Accent） 10% CTA按钮、重要提⽰、⾼亮 Stripe：紫⾊渐变
2.2.2 ⾊彩⽆障碍
确保⾊彩系统满⾜WCAG 2.1 AA标准：
场景 对⽐度要求 说明
正⽂⽂字 ≥ 4.5:1 正常⼤⼩⽂字
⼤字号⽂字 ≥ 3:1 18pt以上或14pt粗体以上
UI组件 ≥ 3:1 按钮/图标/表单元素
⾮⽂本内容 ≥ 3:1 图形/图表/图⽚中的关键信息
常⽤⽆障碍⾊彩⼯具： - WebAIM Contrast Checker（在线） - Stark（Figma插件） - Color Oracle（屏幕滤镜） - Accessible Colors Generator
2.2.3 暗⿊模式⾊彩
暗⿊模式不是简单地将⽩⾊换成⿊⾊，需要重新设计⾊彩系统：
层级 亮模式 暗⿊模式 说明
背景-0 #FFFFFF #121212 最底层背景
背景-1 #F5F5F5 #1E1E1E 卡⽚/⾯板
背景-2 #EEEEEE #2C2C2C 次级⾯板
主⾊ 标准饱和度 降低饱和度+提⾼亮度 避免暗⿊模式下过于刺眼
正⽂ #212121 #E0E0E0 ⽂字颜⾊反转
次级⽂字 #757575 #A0A0A0 辅助⽂字
分割线 #E0E0E0 #333333 边界区分
2.2.4 渐变设计
渐变类型 适⽤场景 设计要点
线性渐变 按钮/背景/卡⽚ ⻆度统⼀（通常45°或135°）
径向渐变 头像框/焦点效果 从中⼼向外扩散
⽹格渐变 ⼤⾯积背景 多⾊交叉，Instagram⻛格
品牌渐变 品牌专属 定义起⽌⾊、⻆度、应⽤场景
2.3 字体系统
2.3.1 字体配对原则
配对策略 说明 ⽰例
对⽐配对 衬线标题+⽆衬线正⽂ Playfair Display + Inter
统⼀配对 同⼀字族不同字重 Roboto Thin → Black
相似配对 两种⻛格相似的字体 Source Sans + Source Serif
层级配对 展⽰字体+正⽂字体+代码字体 Montserrat + Open Sans + JetBrains Mono
2.3.2 字体层级规范
典型字体层级系统：
Display（展⽰）：
- 字号：36-72px
- 字重：Bold/Black
- ⽤途：⼤标题/Hero区域
H1（⼀级标题）：
- 字号：28-36px
- 字重：Bold/SemiBold
- ⽤途：⻚⾯标题
H2（⼆级标题）：
- 字号：22-28px
- 字重：SemiBold/Medium
- ⽤途：章节标题
H3（三级标题）：
- 字号：18-22px
- 字重：Medium
- ⽤途：⼦标题
Body（正⽂）：
- 字号：14-16px
- 字重：Regular
- ⾏⾼：1.5-1.75
Caption（辅助⽂字）：
- 字号：12-14px
- 字重：Regular/Light
- ⽤途：图注/标签/元信息
2.3.3 字间距与⾏⾼
元素 字间距 ⾏⾼ 段间距
展⽰标题 -0.02em to -0.04em 1.1-1.2 0.5em
正⽂标题 -0.01em to 0 1.2-1.3 0.5em
正⽂ 0 to 0.02em 1.5-1.75 1em
辅助⽂字 0.02em to 0.05em 1.4-1.5 0.5em
⼤写⽂字 0.05em to 0.1em 1.2-1.4 0.5em
2.4 图形语⾔
2.4.1 纹理/图案系统
纹理类型 品牌调性 应⽤场景
⼏何图案 现代/科技/精确 背景/装饰/包装
有机纹理 ⾃然/温暖/⼿⼯ ⻝品/⽣活⽅式品牌
线条图案 优雅/简洁/专业 商务/⾦融品牌
点阵图案 数字/科技/数据 科技/SaaS产品
渐变⾊块 活⼒/年轻/创意 互联⽹/创意品牌
2.4.2 图标⻛格
⻛格 线条粗细 圆⻆ 适⽤品牌类型
线性（Outlined） 1-2px 可调节 通⽤、技术型
填充（Filled） — 可调节 强调、功能型
双⾊（Duotone） 1-2px+填充 统⼀ 友好、现代
⼿绘（Hand-drawn） 不均匀 不规则 个性、创意
3D — 可调节 ⾼端、游戏
图标设计原则： 1. 统⼀视觉⻛格（线条粗细/圆⻆⼤⼩/视觉重量） 2. 统⼀光学尺⼨（不同⼤⼩的图标视觉重量⼀致） 3. 统⼀像素⽹格对⻬（避免模糊） 4. 提
供多种尺⼨（16/20/24/32/48px）
2.5 影像系统
2.5.1 摄影⻛格定义
维度 选项 设计影响
⾊调 暖调/冷调/中性 品牌整体氛围
饱和度 ⾼饱和/低饱和/去饱和 品牌情感强度
对⽐度 ⾼对⽐/低对⽐ 品牌视觉⼒度
景深 浅景深/深景深 焦点引导
光线 ⾃然光/⼈⼯光/混合 品牌真实感
构图 对称/不对称/留⽩ 品牌排版感
⼈物 真实/艺术化/抽象 品牌亲和⼒
2.5.2 影像处理规范
标准影像处理流程：
1. ⾊彩校正（⽩平衡/曝光）
2. 品牌⾊彩LUT应⽤（统⼀⾊调）
3. 裁剪（统⼀⽐例：1:1/4:3/16:9/2:1）
4. 锐化（适配输出设备）
5. 压缩（WebP/JPEG质量设置）
6. Alt⽂字（⽆障碍描述）
三、设计系统（Design System）构建
3.1 Design Token体系
3.3.1 什么是Design Token
Design Token是设计系统中最⼩的决策单元，以命名变量的形式存储设计决策（颜⾊、间距、字体等），实现设计-开发共享的"单⼀真相来源"（Single
Source of Truth）。
Token层级：
1. Global Token（全局Token）
- 最原始的命名，如 color-blue-500 = #3B82F6
- 与具体语义⽆关
2. Alias Token（别名Token/语义Token）
- 赋予语义的命名
- 如 color-primary = {color-blue-500}
- 如 color-text-error = {color-red-500}
3. Component Token（组件Token）
- 组件级别的Token
- 如 button-primary-bg = {color-primary}
- 如 button-primary-text = {color-white}
3.3.2 Token命名规范
推荐命名结构：{类别}-{属性}-{变体}-{状态}
颜⾊Token⽰例：
- color-primary-500（主⾊-500⾊阶）
- color-text-primary（⽂字⾊-主要）
- color-text-secondary（⽂字⾊-次要）
- color-text-disabled（⽂字⾊-禁⽤）
- color-bg-surface（背景⾊-表⾯）
- color-bg-overlay（背景⾊-遮罩）
- color-border-default（边框⾊-默认）
- color-border-focus（边框⾊-聚焦）
间距Token⽰例：
- spacing-0 = 0
- spacing-1 = 4px
- spacing-2 = 8px
- spacing-3 = 12px
- spacing-4 = 16px
- spacing-5 = 20px
- spacing-6 = 24px
- spacing-8 = 32px
- spacing-10 = 40px
- spacing-12 = 48px
- spacing-16 = 64px
圆⻆Token⽰例：
- radius-none = 0
- radius-sm = 4px
- radius-md = 8px
- radius-lg = 12px
- radius-xl = 16px
- radius-full = 9999px
阴影Token⽰例：
- shadow-sm = 0 1px 2px rgba(0,0,0,0.05)
- shadow-md = 0 4px 6px rgba(0,0,0,0.1)
- shadow-lg = 0 10px 15px rgba(0,0,0,0.1)
- shadow-xl = 0 20px 25px rgba(0,0,0,0.1)
3.3.3 Token⼯具链
⼯具 功能 价格
Figma Token Studio Figma中管理Token 免费版/$15/⽤⼾/⽉
Style Dictionary Token转换引擎（AWS开源） 免费
Tokens Studio (原Figma Tokens) Token→代码/设计⽂件同步 $5-20/⽤⼾/⽉
Theo Salesforce的Token⼯具 免费
Specified Token管理和⽂档 $10-30/⽤⼾/⽉
3.2 组件库架构
3.2.1 原⼦设计⽅法论（Atomic Design）
Brad Frost提出的原⼦设计是组件库架构的经典⽅法论：
层级 定义 ⽰例 复杂度
原⼦（Atoms） 最⼩不可分的UI元素 按钮/输⼊框/标签/图标 ★
分⼦（Molecules） 原⼦的组合，具有特定功能 搜索框（输⼊框+按钮）/表单字段（标签+输⼊框+提⽰） ★★
有机体（Organisms） 分⼦+原⼦的组合，形成独⽴模块 导航栏/卡⽚/表单/⻚脚 ★★★
模板（Templates） 有机体的布局框架，⽆真实内容 列表⻚模板/详情⻚模板/表单⻚模板 ★★★★
⻚⾯（Pages） 填⼊真实内容的具体⻚⾯ ⾸⻚/产品⻚/登录⻚ ★★★★★
3.2.2 组件设计规范
每个组件应包含以下⽂档：
组件⽂档结构：
1. 概述
- 组件名称
- 组件描述（⼀句话）
- 使⽤场景说明
- 相关组件链接
2. 设计规范
- 视觉规范（尺⼨/颜⾊/间距/字体）
- 状态规范（默认/悬停/聚焦/激活/禁⽤/加载）
- 变体规范（⼤⼩/类型/颜⾊变体）
3. 交互规范
- 交互⾏为描述
- 键盘操作⽀持
- 动画/过渡效果
- ⽆障碍要求（ARIA属性）
4. 代码⽰例
- HTML结构
- CSS/组件代码
- 使⽤⽰例
- 最佳实践
5. Do & Don't
- 正确使⽤⽰例
- 错误使⽤⽰例
3.3 ⽂档与规范
3.3.1 使⽤指南（Usage Guide）
⾯向设计师和开发者，说明"如何使⽤"组件：
内容 说明
何时使⽤ 明确适⽤场景和不适⽤场景
如何使⽤ 参数说明/配置选项/代码⽰例
最佳实践 推荐⽤法/常⻅陷阱
版本历史 变更记录/废弃提醒
3.3.2 设计规范（Design Spec）
⾯向设计师，说明"为什么这样设计"：
内容 说明
设计原则 组件背后的设计理念
视觉规范 像素级精确的视觉规格
交互规范 交互⾏为定义
⽆障碍规范 WCAG合规要求
响应式规范 不同屏幕尺⼨的适配规则
3.3.3 代码规范（Code Standard）
⾯向开发者，说明"如何实现"：
内容 说明
组件API Props/Events/Slots定义
CSS变量 Token在CSS中的映射
样式命名 BEM/模块化命名规范
浏览器兼容 ⽀持的浏览器版本
性能指南 渲染性能/包体积优化
3.4 跨平台⼀致性
3.4.1 平台适配策略
平台 设计规范 关键差异
iOS Human Interface Guidelines 底部Tab栏/⼤标题/圆⻆卡⽚
Android Material Design 3 顶部App Bar/浮动按钮/Material You
Web 响应式Web设计 ⿏标交互/Hover状态/键盘导航
Desktop 平台原⽣规范 菜单栏/快捷键/窗⼝管理
HarmonyOS HarmonyOS Design 分布式能⼒/原⼦化服务
3.4.2 跨平台Token映射
Token跨平台适配策略：
同⼀个Semantic Token在不同平台的映射：
color-primary:
- iOS: UIColor(named: "primary")
- Android: ?attr/colorPrimary / R.color.primary
- Web: var(--color-primary)
- Desktop: NSColor(named: "primary")
spacing-md:
- iOS: 16.0 (CGFloat)
- Android: 16.dp
- Web: 1rem (16px)
- Desktop: 16.0 (CGFloat)
实现⽅式：
1. Token定义（JSON/YAML）
2. Style Dictionary转换
- 输出iOS: Swift⽂件
- 输出Android: XML资源⽂件
- 输出Web: CSS Custom Properties
- 输出Desktop: 平台原⽣格式
四、设计⼯具链
4.1 Figma深度应⽤
4.1.1 组件系统
功能 说明 使⽤场景
Component 可复⽤设计元素 按钮/图标/卡⽚
Variants 组件的多个变体集合 按钮（主要/次要/⽂字）的不同状态
Component Properties 组件的可配置属性 ⽂字内容/图标选择/开关切换
Auto Layout ⾃适应布局 ⾃动间距/⾃动填充/响应式
Constraints 约束规则 响应式尺⼨变化规则
4.1.2 样式库
样式类型 说明 管理⽅式
Color Styles 颜⾊样式 按语义命名（primary/secondary/surface）
Text Styles ⽂字样式 按层级命名（display/h1/body/caption）
Effect Styles 效果样式 阴影/模糊/内阴影
Grid Styles ⽹格样式 布局⽹格定义
4.1.3 Dev Mode
Dev Mode是Figma⾯向开发者的⼯作模式（2023年推出，2024-2025持续迭代）：
功能 说明
代码⽣成 ⾃动⽣成CSS/Swift/Kotlin代码
标注查看 像素级精确的尺⼨/间距/颜⾊标注
资产导出 ⼀键导出图标/图⽚/资源
Token链接 设计Token与代码变量关联
变更对⽐ 设计变更的可视化diff
就绪状态 设计师标记开发就绪的组件
4.2 Figma Token Studio
Token Studio（原Figma Tokens）是连接设计与开发的桥梁⼯具：
⼯作流程：
1. 在Token Studio中定义Token（JSON格式）
2. 将Token应⽤到Figma设计（颜⾊/间距/圆⻆/阴影等）
3. 推送到Git仓库（版本管理）
4. Style Dictionary读取Token JSON
5. 转换为各平台格式（CSS/Swift/Kotlin/XML）
6. 开发者在各平台代码中使⽤
Token JSON⽰例：
{
"color": {
"primary": {
"50": { "value": "#EFF6FF" },
"500": { "value": "#3B82F6" },
"900": { "value": "#1E3A8A" }
},
"text": {
"primary": { "value": "{color.neutral.900}" },
"secondary": { "value": "{color.neutral.600}" }
}
}
}
4.3 Storybook
Storybook是前端组件开发和⽂档⼯具，与设计系统深度配合：
功能 说明
组件⽂档 每个组件的可视化⽂档⻚⾯
交互测试 组件的交互状态测试
视觉回归 ⾃动检测视觉变化
可访问性测试 内置a11y检查
设计集成 通过插件链接Figma设计稿
Storybook组件⽂档结构：
Button/
├── Button.stories.tsx # Story定义
├── Button.tsx # 组件代码
├── Button.module.css # 组件样式
├── Button.test.tsx # 单元测试
├── Button.docs.md # 设计⽂档
└── index.ts # 导出
五、品牌资产管理
5.1 品牌⼿册制作规范
5.1.1 品牌⼿册结构
标准品牌⼿册⽬录：
第⼀部分：品牌战略
1.1 品牌愿景与使命
1.2 品牌价值观
1.3 品牌定位
1.4 品牌个性/原型
1.5 品牌故事
第⼆部分：视觉识别
2.1 标志
- 主标志展⽰
- 安全空间/最⼩尺⼨
- ⾊彩版本（全彩/单⾊/反⽩）
- 禁⽌⽤法
2.2 ⾊彩系统
- 主⾊/辅助⾊/强调⾊
- ⾊彩⽐例
- ⽆障碍对⽐度
- 暗⿊模式⾊彩
2.3 字体系统
- 主字体/辅助字体
- 字重层级
- 排版规范
2.4 图形语⾔
- 图案/纹理
- 图标⻛格
- 插画⻛格
2.5 影像系统
- 摄影⻛格
- ⾊彩处理
- 构图规范
- ⼈物表现
第三部分：应⽤规范
3.1 名⽚
3.2 信纸/信封
3.3 PPT模板
3.4 社交媒体
3.5 ⽹站/APP
3.6 包装
3.7 环境导视
3.8 周边/礼品
第四部分：声⾳与语⾔
4.1 品牌声⾳特征
4.2 写作⻛格指南
4.3 常⽤表达
4.4 禁⽤表达
5.2 品牌审核流程
品牌审核流程：
1. 提交审核
- 设计/市场团队提交物料⾄品牌审核系统
- 附上设计⽂件+品牌合规⾃检清单
2. 品牌初审
- 品牌专员检查基础合规性
- 标志使⽤是否正确
- ⾊彩是否符合规范
- 字体是否正确
3. 品牌复审
- 品牌经理审核整体调性
- 是否与品牌战略⼀致
- 是否传达正确品牌信息
4. 反馈与修改
- 合规：通过，可发布
- 需修改：给出具体修改建议
- 不合规：说明原因，需重新设计
5. 发布与存档
- 通过后标记品牌版本号
- 存⼊品牌资产管理系统
- 定期审计已发布物料
5.3 品牌⼀致性评估指标
评估维度 评估指标 评分⽅式
标志使⽤ 正确版本/安全空间/最⼩尺⼨ 是/否
⾊彩合规 使⽤指定⾊彩/对⽐度达标 合规/部分合规/不合规
字体合规 使⽤指定字体/层级正确 合规/部分合规/不合规
影像⻛格 符合品牌摄影⻛格 1-5分
声⾳⼀致 ⽂案⻛格与品牌调性⼀致 1-5分
布局规范 ⽹格/间距/留⽩符合规范 1-5分
平台适配 在各平台保持品牌⼀致 1-5分
5.4 品牌焕新（Rebrand）
5.4.1 Rebrand类型
类型 说明 时间 成本
微调（Refresh） 标志简化/⾊彩更新/字体优化 1-3个⽉ 低
演进（Evolution） 保持核⼼识别，更新视觉系统 3-6个⽉ 中
重塑（Rebrand） 全新品牌识别，可能包含品牌名变更 6-12个⽉ ⾼
5.4.2 Rebrand流程
阶段⼀：诊断（1-2个⽉）
- 品牌资产评估（哪些资产要保留）
- 市场调研（品牌认知/竞品分析）
- 利益相关者访谈
- 确定Rebrand⽬标和范围
阶段⼆：策略（1-2个⽉）
- 品牌定位重新梳理
- 品牌原型/个性确定
- 品牌架构确定
- 品牌故事/叙事设计
阶段三：设计（2-4个⽉）
- 标志设计（多⽅案→收敛）
- 视觉系统设计（⾊彩/字体/图形/影像）
- 关键应⽤设计
- 内部测试/外部测试
阶段四：实施（2-6个⽉）
- 品牌⼿册制作
- 品牌资产管理系统搭建
- 内部培训
- 分批替换（线上→线下→环境）
- 对外发布（PR/社交/⼴告）
阶段五：管理（持续）
- 品牌⼀致性监控
- 品牌健康度追踪
- 品牌资产定期更新
六、实践案例
案例1：Apple — 极简主义设计系统
品牌原型：魔法师（创新/愿景）+ 创造者
设计系统特点：
SF Pro字体系列（覆盖iOS/macOS/watchOS/tvOS）
Human Interface Guidelines（业界最完善的平台设计规范）
严格的视觉⼀致性（圆⻆/间距/动效全平台统⼀）
Design Token跨平台同步
关键设计决策：
1997年"Think Different"重新定义品牌
Jony Ive时期确⽴极简美学
2013年扁平化设计转型
2020年Apple Silicon统⼀芯⽚架构
案例2：Airbnb — 品牌设计进化
品牌原型：探险者（探索）+ 普通⼈（归属）
Rebrand历程：
2014年：从⼿绘标志→Bélo（⼈/地点/爱/空⽓的融合）
2016年：DLS（Design Language System）设计系统发布
2022年： Icons by Airbnb图标库
设计系统特点：
品牌⾊Coral（#FF5A5F）的演变
Cereal字体系列（定制品牌字体）
基于Token的跨平台⼀致性
设计-开发⽆缝协作
案例3：Material Design — Google的设计系统
品牌原型：智者（知识/理性）+ 创造者
发展历程：
2014年：Material Design 1.0（纸质隐喻）
2018年：Material Theming（可定制主题）
2021年：Material You（动态⾊彩/个性化）
2023年：Material Design 3（跨平台统⼀）
设计系统特点：
基于Elevation的空间系统（阴影层级）
动态⾊彩系统（从壁纸提取主题⾊）
可访问性优先设计
开源组件库（MDC/Compose Material）
案例4：Ant Design — 蚂蚁集团企业级设计系统
品牌原型：智者（理性/可靠）+ 照顾者（服务/安全）
发展历程：
2015年：Ant Design 1.0发布
2018年：Ant Design 3.0（Pro/Charts/Mobile）
2019年：Ant Design 4.0（Dark Mode/国际化）
2023年：Ant Design 5.0（CSS-in-JS/Design Token全⾯化）
设计系统特点：
最完善的企业级组件库（70+组件）
完整的Design Token体系（种⼦Token→Map Token→Alias Token）
多框架⽀持（React/Vue/Angular）
中⽂优先但国际化完善
案例5：IBM Carbon — 企业级开源设计系统
品牌原型：智者（理性/专业）+ 统治者（秩序/可靠）
发展历程：
2015年：IBM Design Language发布
2017年：Carbon Design System开源
2020年：Carbon v10（全⾯更新）
2023年：Carbon v11（Token化/可访问性升级）
设计系统特点：
开源+社区驱动
IBM Plex字体家族（6种字体覆盖所有场景）
严格的可访问性标准（WCAG AAA）
跨产品线⼀致性（Watson/Cloud/Security）
案例6：Shopify Polaris — 电商设计系统
品牌原型：普通⼈（平易近⼈）+ 创造者（赋能）
设计系统特点：
为"⾮设计师"设计（帮助商家⾃助建站）
内容优先设计原则
完整的Design Token体系（Polaris Tokens）
详细的内容⻛格指南（写作规范）
关键设计决策：
绿⾊品牌⾊（#008060）传达信任/成⻓
简洁友好的插画⻛格
真实摄影（⾮图库照⽚）
案例7：Microsoft Fluent Design — 跨平台设计系统
品牌原型：普通⼈（⼈⼈可⽤）+ 创造者（赋能）
发展历程：
2017年：Fluent Design System发布（取代Metro）
2021年：Fluent 2（跨平台统⼀）
2023年：Fluent UI React v9
设计系统特点：
五⼤原则：光/深度/动效/材质/缩放
跨平台（Windows/Web/iOS/Android/macOS）
⾃适应设计（根据设备和输⼊⽅式调整）
与Windows 11设计语⾔深度整合
案例8：Spotify — 品牌设计进化
品牌原型：情⼈（感官体验）+ ⼩丑（娱乐/快乐）
设计系统演进：
2015年：品牌重塑（绿⾊+⿊⾊+圆形标志）
2018年：Design System发布
2022年：品牌升级（更柔和的绿⾊/新字体Spotify Circular）
2024年：Design System 2.0（Design Token化）
设计系统特点：
品牌⾊演变（#1DB954 → #1ED760）
暗⾊优先设计（⾳乐/内容为主⻆）
⽆障碍设计（⾊彩对⽐度/屏幕阅读器⽀持）
动效系统（节奏感/⾳乐感过渡）
七、供应商与⼯具价格
7.1 品牌设计公司报价
服务类型 报价区间 包含内容
标志设计（初创公司） ¥5,000-30,000 3-5个⽅案，2-3轮修改
标志设计（知名品牌公司） ¥50,000-300,000 深度调研，完整策略+设计
VI全案设计 ¥30,000-200,000 标志+⾊彩+字体+应⽤规范
品牌全案策略 ¥100,000-1,000,000+ 策略+命名+VI+品牌⼿册
品牌⼿册制作 ¥20,000-100,000 标准品牌⼿册（50-200⻚）
品牌焕新 ¥200,000-2,000,000+ 全流程Rebrand服务
年度品牌维护 ¥50,000-200,000/年 品牌审核+物料更新+培训
7.2 Figma定价
⽅案 价格 功能
Free ¥0 3个项⽬，基础功能
Professional ¥90/⽤⼾/⽉ ⽆限项⽬，团队库
Organization ¥300/⽤⼾/⽉ 设计系统管理，SSO
Enterprise 定制 ⾼级安全/管理/⽀持
7.3 字体授权价格
授权类型 价格区间 说明
免费商⽤字体 ¥0 思源⿊体/阿⾥巴巴普惠体/霞鹜等
单款桌⾯授权 ¥200-2,000/款 个⼈电脑使⽤
单款Web授权 ¥500-5,000/款/年 ⽹站嵌⼊使⽤
单款App授权 ¥1,000-10,000/款 嵌⼊App使⽤
企业年度授权 ¥5,000-100,000/年 全公司使⽤
定制品牌字体 ¥100,000-1,000,000+ 全新字库设计
字体平台订阅 ¥500-3,000/年 Monotype/Adobe Fonts等
7.4 设计系统搭建成本
项⽬ 成本 说明
基础Token定义 2-4⼈⽉ Token命名/定义/⽂档
组件设计（30-50个） 6-12⼈⽉ 设计稿+⽂档+规范
组件开发 6-12⼈⽉ 前端组件+测试
⽂档系统搭建 1-2⼈⽉ Storybook/⽂档站
Design Token⼯具链 1-2⼈⽉ CI/CD集成
持续维护（年） 2-4⼈⽉/年 更新/修复/新组件
总计（初始） 16-32⼈⽉ 约2-4⼈团队，4-8个⽉
总计（年度维护） 2-4⼈⽉/年 约0.5-1⼈全职
⼋、购买决策问答（15条）
Q1：我们是初创公司，需要品牌设计吗？预算多少合适？
建议：初创公司需要基础品牌识别，但不需要过早投⼊⼤型品牌项⽬。建议预算：¥2-5万（标志设计+基础VI），选择有创业服务经验的设计师/⼩型⼯作室。
核⼼是：①⼀个好标志；②基础⾊彩+字体规范；③名⽚+社媒头像+简单品牌⼿册。等产品/市场验证后再投⼊全⾯品牌升级。
Q2：品牌设计和UI设计应该先做哪个？
建议：品牌设计应该在UI设计之前完成。品牌定义了视觉语⾔（⾊彩/字体/影像⻛格），UI设计是这个语⾔在数字产品中的具体应⽤。如果先做UI再补品牌，
容易出现UI与品牌不⼀致的问题。建议流程：品牌策略→品牌VI→设计系统→UI设计→开发。
Q3：Design Token有必要引⼊吗？
建议：如果你的产品有3个以上平台（iOS/Android/Web），或有超过2个设计师+3个开发者协作，强烈建议引⼊Design Token。Token解决了"设计改了颜⾊
但开发不知道"的核⼼痛点。初始投⼊约1-2⼈⽉搭建Token体系，但⻓期维护成本降低60%以上。
Q4：应该⽤Figma还是Sketch做设计系统？
建议：2026年，Figma是设计系统建设的标准选择。优势：①实时协作（多⼈同时编辑）；②跨平台（Mac/Windows/Web）；③Dev Mode（设计-开发⽆缝
衔接）；④社区⽣态（插件/资源/模板丰富）；⑤企业级功能（SSO/品牌套件/权限管理）。Sketch仍有⽤⼾基础，但已不再是⾸选。
Q5：定制品牌字体值得投⼊吗？
建议：对于⼤型企业/知名品牌（年营收>10亿），定制品牌字体是值得的战略投资。案例：Apple（SF Pro）、Google（Product Sans）、IBM（IBM
Plex）、Airbnb（Cereal）。定制字体的价值：①品牌独特性（不可复制的视觉资产）；②跨平台⼀致性；③⻓期节省字体授权费。对于中⼩企业，使⽤优质
免费/授权字体更经济。
Q6：品牌⼿册需要多厚？⼀定要印刷吗？
建议：品牌⼿册的厚度取决于品牌复杂度。简单品牌50-80⻚⾜够，复杂品牌150-300⻚。2026年趋势是数字优先：①在线品牌中⼼（Notion/Confluence/⾃
建⽹站）便于更新；②可下载PDF版⽤于离线查看和供应商沟通；③仅在必要时印刷（如年度品牌回顾/⼤型发布会）。关键是可发现性和可维护性，⽽⾮物
理厚度。
Q7：设计系统的ROI如何计算？
建议：设计系统的ROI主要体现在：①设计效率提升（减少30-50%重复设计⼯作）；②开发效率提升（组件复⽤减少40-60%前端开发时间）；③⼀致性提升
（减少UI缺陷和设计偏差）；④协作效率（减少设计-开发沟通成本）。量化公式：ROI = (节省的设计⼈⽉+节省的开发⼈⽉) × ⼈均成本 - 系统搭建维护成
本。通常在12-18个⽉内回本。
Q8：Ant Design和Material Design可以直接⽤于商业项⽬吗？
建议：都可以。Ant Design（MIT协议）和Material Design（Apache 2.0协议）都是开源免费的，可直接⽤于商业项⽬。但建议：①基于它们做定制化（修改
⾊彩/字体/圆⻆以匹配品牌）；②不要完全照搬（避免产品看起来像"通⽤模板"）；③关注版本更新（获取新组件和bug修复）。
Q9：品牌设计公司怎么选？
建议：核⼼评估维度：①⾏业经验（是否有同⾏业案例）；②设计质量（作品集⽔平）；③策略能⼒（是否提供品牌策略服务）；④团队配置（策略+设计+项
⽬管理）；⑤沟通效率（响应速度/理解能⼒）；⑥售后⽀持（品牌落地指导/培训）。建议先进⾏1-2⼩时的付费咨询（¥3,000-8,000），评估合作默契度再签
正式合同。
Q10：品牌⾊应该怎么选？
建议：品牌⾊选择应考虑：①⾏业惯例（蓝⾊=信任/科技，红⾊=热情/能量，绿⾊=⾃然/健康）；②竞品差异化（避免与主要竞品同⾊系）；③原型匹配（参
考品牌原型对应的⾊彩）；④⽆障碍考量（确保⾊彩对⽐度和⾊盲友好）；⑤⽂化含义（不同市场的⾊彩⽂化差异）。建议：先确定1个主⾊+1-2个辅助⾊，
构建完整的⾊彩系统（含⾊阶/语义⾊/暗⿊模式⾊）。
Q11：设计系统的维护成本有多⾼？
建议：初始搭建后，年度维护成本约为搭建成本的15-25%。主要维护内容：①新组件设计+开发（5-10个/年）；②现有组件优化/修复；③Token更新（品牌
⾊/新平台适配）；④⽂档更新；⑤设计-开发同步。建议指定0.5-1名专职维护⼈员。如果维护跟不上，设计系统会在1-2年内"腐化"——组件过时、⽂档缺
失、团队绕过系统⾃⾏设计。
Q12：⼩团队（3-5⼈）适合建设计系统吗？
建议：适合，但应"轻量建设"。⼩团队不需要Ant Design级别的庞⼤系统，⽽是需要：①核⼼Token定义（⾊彩/间距/字体，约1周）；②基础组件库（按钮/
输⼊框/卡⽚/导航等10-15个核⼼组件，约2-3周）；③简单⽂档（Notion/Figma标注即可，约1周）。总投⼊约1-1.5个⽉，但可以显著提升协作效率和产品⼀
致性。关键是"渐进式"——先解决最痛的点，再逐步扩展。
Q13：品牌焕新的最佳时机是什么？
建议：以下情况适合考虑品牌焕新：①业务转型/拓展（产品/市场发⽣根本变化）；②品牌⽼化（⽬标⽤⼾群变化，现有形象不再吸引）；③并购整合（多品
牌需要统⼀）；④技术平台迁移（如从B2C转向B2B）；⑤标志性的⾥程碑事件（如上市/周年/新总部）。不建议因为"看腻了"或"领导换了"就Rebrand——
品牌资产是⻓期积累的结果。
Q14：如何衡量品牌设计的成功？
建议：品牌设计成功的衡量指标：①品牌认知度（调研：⽬标⼈群中品牌知名度提升）；②品牌联想（调研：⽬标⼈群对品牌的联想词是否符合预期）；③品
牌⼀致性（审计：各触点品牌⼀致率>90%）；④业务指标（⽹站流量/转化率/客单价的变化趋势）；⑤内部认同（员⼯对品牌的理解和认同度）；⑥设计效
率（设计系统使⽤率/组件复⽤率）。建议在Rebrand前建⽴基准数据，6-12个⽉后再次测量。
Q15：AI⼯具（Midjourney/DALL-E）能替代品牌设计师吗？
建议：短期不能，但会深度改变品牌设计⼯作流。AI的优势：①概念探索阶段快速⽣成⼤量视觉⽅向；②情绪板/Moodboard快速构建；③素材/纹理/图案⽣
成。AI的局限：①⽆法理解品牌战略（为什么⽤这个⾊⽽不是那个⾊）；②⽆法保证多触点⼀致性；③⽆法进⾏标志的⼏何构建和知识产权保护；④⽣成结果
不可精确控制。建议：将AI作为品牌设计师的"灵感加速器"，⽽⾮替代品。核⼼品牌决策（原型/定位/⾊彩策略）仍需⼈类设计师的判断。
免责声明：品牌设计具有⾼度主观性，本⽂提供的框架和标准仅供参考。具体品牌决策应结合企业实际情况、⽬标市场和⾏业特征综合考量。价格为
2026年市场参考价，以实际报价为准。