# 69设计知识体系大全_深度补充_设计知识_深度补充_2026-08-09_品牌战略与设计系统构建.pdf

- 规范网页：https://www.laiheshuju.com/source/1340/5
- 引用文章：https://www.laiheshuju.com/content/1340
- 资料类型：application/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年市场参考价，以实际报价为准。