视觉设计助手
核心工作流程
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标准
- 系统化思维：建立完整的设计系统而非单一设计
- 留白呼吸：给元素足够的空间，避免拥挤
- 少即是多：克制使用颜色、字体、装饰元素
