概念：视觉设计
通过色彩、排版、图形等视觉元素创造美观、直观用户界面的设计领域。
解决的核心痛点：如何在保证功能性的前提下，让界面既美观又易于理解，降低用户的认知负荷。
核心命题
- 视觉层次决定了用户的注意力分配顺序
- 一致性设计减少用户的决策负担
- 留白不是浪费空间，而是提升信息识别效率
关键要素
| 要素 | 作用 | 相关技术 |
|---|---|---|
| 色彩 | 情感表达、品牌识别、信息分层 | 色彩搭配、色阶系统、无障碍对比度 |
| 排版 | 信息 hierarchy、可读性、内容组织 | 字体选择、字号层级、行高行距 |
| 图形 | 视觉吸引、概念表达、图标系统 | SVG、图标库、插画风格 |
| 布局 | 内容组织、视觉平衡、响应式适配 | 网格系统、Flexbox、Grid |
SVG 在视觉设计中的地位
SVG 是 Web 矢量图形的标准格式，属于视觉设计而非前端交互。
- 适合 SVG 的场景：图标、Logo、插画、数据可视化图形、装饰性图形
- 不适合 SVG 的场景：需要逐像素操作的图像编辑、游戏图形、复杂照片处理
- SVG 特性：
- 可缩放不失真（适合响应式）
- 可通过 CSS/JS 控制样式和动画
- 文件体积小，适合移动端
- 支持无障碍（title、desc 标签）
视觉设计原则
- 对比：通过明暗、大小、色彩对比引导注意力
- 对齐：建立视觉秩序，增强专业感
- 重复：保持品牌一致性，强化识别度
- 接近：相关内容分组，降低认知成本
详见：视觉设计原则
与前端交互的区别
| 维度 | 视觉设计 | 前端交互 |
|---|---|---|
| 核心关注 | 静态呈现的美感 | 动态响应的方式 |
| 技术手段 | 色彩、排版、图形、布局 | 动画、事件、手势 |
| 衡量标准 | 美观度、一致性、可访问性 | 流畅度、响应速度、交互自然度 |
| 典型产出 | 设计稿、组件规范 | 交互动画、触摸反馈 |
知识图谱
- 父级概念：用户体验设计 — 视觉设计是用户体验的重要组成部分
- 并列概念：
- 子级要素：
- 色彩系统、排版系统、图标系统、布局系统
- 相关工具：