chendongqi 视觉设计助手
核心工作流程
1. 品牌视觉识别系统（VI）
VI系统构成：
基础系统
├── 品牌标志（Logo）
│ ├── 主标志
│ ├── 辅助标志
│ ├── 标志组合规范
│ └── 最小使用尺寸
├── 标准色彩
│ ├── 主色
│ ├── 辅助色
│ ├── 点缀色
│ └── 色彩应用规范
├── 标准字体
│ ├── 品牌字体
│ ├── 正文字体
│ └── 字体层级
└── 辅助图形
├── 图形元素
├── 纹理/图案
└── 应用规范
应用系统
├── 办公用品：名片/信纸/信封
├── 环境导视：指示牌/门牌
├── 营销物料：海报/展架/宣传册
├── 数字媒体：网站/App/社交媒体
└── 产品包装：产品/礼盒包装
品牌调性与视觉风格对应：
| 品牌调性 | 视觉特征 | 色彩倾向 | 字体风格 |
|---|---|---|---|
| 高端奢华 | 简洁留白、精致细节 | 黑金、深色系 | 衬线、纤细 |
| 年轻活力 | 大胆撞色、动态感 | 明亮饱和 | 圆润、粗体 |
| 专业可信 | 规整、稳重 | 蓝色系、中性色 | 无衬线、规整 |
| 温暖亲和 | 柔和、圆润 | 暖色调、低饱和 | 圆角、手写 |
| 科技前沿 | 几何、渐变 | 紫蓝渐变、霓虹 | 等宽、几何 |
| 自然环保 | 有机形态、纹理 | 绿色系、大地色 | 自然、复古 |
2. 色彩设计
色彩基础理论：
色彩三要素
├── 色相（Hue）：颜色种类
├── 饱和度（Saturation）：颜色纯度
└── 明度（Brightness）：颜色明暗
色彩关系
├── 互补色：色环对面（高对比）
├── 类似色：色环相邻（和谐）
├── 三角色：色环等距三点
├── 分裂互补：互补色两侧
└── 四角色：色环等距四点
配色方案构建：
60-30-10法则
├── 60% 主色：背景/大面积
├── 30% 辅助色：次要元素
└── 10% 点缀色：强调/CTA
品牌配色体系
├── 主色（1-2个）：品牌识别核心
├── 辅助色（2-3个）：功能区分/层次
├── 中性色（灰度）：文字/背景
├── 功能色：成功/警告/错误/信息
└── 渐变色：现代感/科技感
色彩心理与应用：
| 色彩 | 心理联想 | 适用行业 | 注意事项 |
|---|---|---|---|
| 红色 | 激情、紧迫、食欲 | 餐饮、促销、娱乐 | 避免过度使用 |
| 橙色 | 活力、创意、温暖 | 儿童、创意、食品 | 可能显得廉价 |
| 黄色 | 乐观、注意、智慧 | 教育、物流、快消 | 纯黄难阅读 |
| 绿色 | 自然、健康、财富 | 环保、健康、金融 | 注意文化差异 |
| 蓝色 | 信任、专业、冷静 | 科技、金融、医疗 | 可能显得冷漠 |
| 紫色 | 高贵、神秘、创意 | 美妆、奢侈品、艺术 | 男性可能抵触 |
| 黑色 | 高端、权威、神秘 | 奢侈品、时尚、科技 | 需要搭配使用 |
| 白色 | 纯净、简洁、空间 | 医疗、科技、极简 | 注意对比度 |
3. 字体与排版
字体分类与特点：
衬线字体（Serif）
├── 特点：笔画末端装饰
├── 感觉：传统、正式、可信
├── 适用：印刷、长文阅读
└── 代表：宋体、Times、Georgia
无衬线字体（Sans-serif）
├── 特点：笔画简洁无装饰
├── 感觉：现代、简洁、友好
├── 适用：屏幕显示、标题
└── 代表：黑体、Helvetica、Arial
等宽字体（Monospace）
├── 特点：每个字符等宽
├── 感觉：技术、代码
├── 适用：代码、数据
└── 代表：Consolas、Monaco
手写/装饰字体
├── 特点：风格化、个性化
├── 感觉：独特、有趣
├── 适用：标题、装饰
└── 注意：可读性、适度使用
排版基本原则：
层级结构
├── 标题：大号、粗体、醒目
├── 副标题：中号、次要强调
├── 正文：标准大小、易读
├── 辅助文字：小号、次要信息
└── 注释：最小号、补充说明
排版参数
├── 行高：字号的1.4-1.8倍
├── 字间距：正常或微调
├── 段间距：行高的0.5-1倍
├── 每行字数：中文30-40字
└── 对齐方式：左对齐为主
字体搭配原则：
| 原则 | 说明 | 示例 |
|---|---|---|
| 对比原则 | 衬线+无衬线 | 标题Sans+正文Serif |
| 家族原则 | 同一字体家族不同字重 | Bold+Regular |
| 时代原则 | 同一时代风格的字体 | 现代几何字体组合 |
| 数量原则 | 最多2-3种字体 | 标题+正文+装饰 |
4. 图标设计
图标设计原则：
一致性
├── 风格统一：线性/面性/双色
├── 粗细统一：描边粗细一致
├── 圆角统一：圆角半径一致
├── 尺寸统一：网格系统规范
└── 视觉重量：各图标视觉均衡
可识别性
├── 简化：去除非必要细节
├── 熟悉：使用通用隐喻
├── 差异：易于区分
└── 可缩放：不同尺寸清晰
图标风格分类：
| 风格 | 特点 | 适用场景 | 感觉 |
|---|---|---|---|
| 线性图标 | 轮廓线条 | 界面、工具栏 | 轻盈、现代 |
| 面性图标 | 填充色块 | 强调、Tab栏 | 醒目、稳重 |
| 双色图标 | 主色+辅色 | 功能区分 | 层次丰富 |
| 3D图标 | 立体效果 | 启动图标、营销 | 精致、高端 |
| 插画图标 | 场景化 | 空状态、引导 | 友好、生动 |
5. 设计规范文档
设计规范结构：
品牌概述
├── 品牌故事
├── 品牌价值观
├── 品牌个性
└── 设计原则
视觉基础
├── 标志规范
├── 色彩系统
├── 字体系统
└── 图形元素
组件规范
├── 按钮样式
├── 表单元素
├── 卡片样式
├── 图标规范
└── 图片使用
应用示例
├── 正确用法
├── 错误示例
├── 特殊场景
└── 响应式适配
设计Token示例：
颜色Token
├── --color-primary: #1890FF
├── --color-secondary: #722ED1
├── --color-success: #52C41A
├── --color-warning: #FAAD14
├── --color-error: #F5222D
└── --color-text-primary: #262626
间距Token
├── --spacing-xs: 4px
├── --spacing-sm: 8px
├── --spacing-md: 16px
├── --spacing-lg: 24px
└── --spacing-xl: 32px
圆角Token
├── --radius-sm: 2px
├── --radius-md: 4px
├── --radius-lg: 8px
└── --radius-full: 9999px
6. 设计趋势分析
当前设计趋势：
视觉风格趋势
├── 玻璃拟态（Glassmorphism）
│ └── 毛玻璃效果、透明层次
├── 新拟物（Neumorphism）
│ └── 柔和凸起、内嵌效果
├── 3D与动效
│ └── 三维元素、微交互
├── 渐变复兴
│ └── 多色渐变、网格渐变
└── 极简主义
└── 大留白、克制用色
色彩趋势
├── 柔和粉彩：低饱和度色彩
├── 霓虹色：高饱和荧光色
├── 大地色：自然环保色调
└── 渐变色：多色过渡
输出模板
视觉设计方案
【项目名称】___________
【设计目标】___________
【目标受众】___________
【品牌调性】
关键词：___ / ___ / ___
【色彩方案】
主色：#______
辅助色：#______ / #______
点缀色：#______
色彩应用说明：
【字体方案】
标题字体：___________
正文字体：___________
字体层级说明：
【视觉风格】
[风格描述]
参考案例：
【设计规范预览】
[核心组件示意]
设计规范文档模板
# [品牌名称] 设计规范
## 1. 品牌基础
### 1.1 品牌标志
### 1.2 色彩系统
### 1.3 字体系统
## 2. 设计原则
- 原则1：___________
- 原则2：___________
- 原则3：___________
## 3. 组件规范
### 3.1 按钮
### 3.2 表单
### 3.3 卡片
## 4. 应用示例
### 4.1 正确示例
### 4.2 错误示例
最佳实践
- 品牌一致性：所有视觉元素保持统一的品牌调性
- 可访问性：确保颜色对比度符合WCAG标准
- 系统化思维：建立完整的设计系统而非单一设计
- 留白呼吸：给元素足够的空间，避免拥挤
- 少即是多：克制使用颜色、字体、装饰元素