平面设计
全面介绍如何在数字媒体和印刷媒体中创作专业视觉设计的指南。
设计基础
设计的 7 大原则
| 原则 | 定义 | 应用 |
|---|
| 平衡 | 视觉均衡 | 对称、不对称、放射状 |
| 对比 | 元素间的差异 | 尺寸、颜色、形状、纹理 |
| 强调 | 创建焦点 | 层次引导视线 |
| 动感 | 视觉流动方向 | 引导线、重复 |
| 图案 | 元素的重复 | 营造节奏感和统一感 |
| 节奏 | 视觉节奏 | 规律、流畅、渐进 |
| 统一 | 协调的整体 | 始终保持风格一致 |
色彩理论
色彩模型
| 模型 | 用途 | 组成 |
|---|
| RGB | 数字屏幕 | 红、绿、蓝（0-255） |
| CMYK | 印刷媒体 | 青、品红、黄、黑 |
| HSL | 设计工具 | 色相、饱和度、亮度 |
| Hex | Web/CSS | #RRGGBB 格式 |
色彩搭配
Complementary: Opposite on wheel (high contrast)
Analogous: Adjacent colors (harmonious)
Triadic: 3 equidistant colors (vibrant)
Split-Comp: Base + 2 adjacent to complement
Tetradic: 4 colors forming rectangle
Monochromatic: Single hue, varying saturation/lightness
色彩心理学
| 颜色 | 联想 | 用途 |
|---|
| 红色 | 活力、紧迫感、激情 | CTA、促销、警告 |
| 蓝色 | 信任、平静、专业 | 企业、科技、金融 |
| 绿色 | 成长、自然、健康 | 环保、健康、金钱 |
| 黄色 | 乐观、吸引注意、温暖 | 突出显示、谨慎提示 |
| 紫色 | 奢华、创意、智慧 | 高端、创意 |
| 橙色 | 热情、自信 | CTA、年轻品牌 |
| 黑色 | 精致、力量 | 奢华、编辑设计 |
| 白色 | 简洁、极简、纯净 | 现代、医疗保健 |
无障碍色彩对比度
WCAG AA Requirements:
- Normal text: 4.5:1 minimum contrast ratio
- Large text (18pt+): 3:1 minimum
- UI components: 3:1 minimum
WCAG AAA Requirements:
- Normal text: 7:1 minimum
- Large text: 4.5:1 minimum
Tools: WebAIM Contrast Checker, Stark, Color Safe
字体排印
字体分类
| 类别 | 特征 | 使用场景 |
|---|
| 衬线字体 | 带装饰性笔画 | 印刷、编辑设计、正式场合 |
| 无衬线字体 | 笔画简洁、无衬线 | 数字、现代、UI |
| 粗衬线字体 | 粗重、块状衬线 | 标题、品牌设计 |
| 手写字体 | 手写质感 | 请柬、Logo |
| 展示字体 | 装饰性强、独特 | 仅用于标题 |
| 等宽字体 | 固定宽度 | 代码、技术内容 |
字体层级
Display: 48-72px (Hero headlines)
H1: 32-48px (Page titles)
H2: 24-32px (Section headers)
H3: 20-24px (Subsections)
Body: 16-18px (Readable text)
Caption: 12-14px (Secondary info)
Micro: 10-12px (Legal, footnotes)
字体排印规则
- 限制字体数量：每个项目最多使用 2-3 种字体
- 搭配对比：衬线字体 + 无衬线字体效果很好
- 行高：正文设置为 1.4-1.6
- 行长：45-75 个字符为宜
- 字距：全大写文本应增大字距
- 对齐方式：正文左对齐（更易阅读）
字体搭配示例
Headlines + Body:
- Playfair Display + Source Sans Pro
- Montserrat + Merriweather
- Oswald + Lato
- Roboto Slab + Roboto
- DM Serif Display + DM Sans
布局与构图
网格系统
12-Column Grid (Most Common):
├─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┤
│1│2│3│4│5│6│7│8│9│10│11│12│
Common Column Spans:
- Full width: 12 columns
- Two-thirds: 8 columns
- Half: 6 columns
- One-third: 4 columns
- One-quarter: 3 columns
- Sidebar: 3-4 columns
间距系统（8pt 网格）
/* Base unit: 8px */
--space-1: 4px; /* 0.5x - tight */
--space-2: 8px; /* 1x - base */
--space-3: 16px; /* 2x - comfortable */
--space-4: 24px; /* 3x - section gap */
--space-5: 32px; /* 4x - group separation */
--space-6: 48px; /* 6x - major sections */
--space-7: 64px; /* 8x - page sections */
--space-8: 96px; /* 12x - hero spacing */
三分法
┌───────┬───────┬───────┐
│ │ │ │
│ ●───┼───● │ │ Place key elements
├───────┼───────┼───────┤ at intersection
│ │ │ │ points (●)
│ ●───┼───● │ │
├───────┼───────┼───────┤
│ │ │ │
└───────┴───────┴───────┘
视觉层级技巧
- 尺寸：越大越重要
- 颜色：明亮或高饱和度的颜色更能吸引注意力
- 对比：高对比度可形成焦点
- 留白：通过隔离来突出强调
- 位置：左上角（F 型模式）或中心
- 字体排印：粗体、不同字体、全大写
文件格式
栅格（基于像素）
| 格式 | 最适合用于 | 说明 |
|---|
| JPG/JPEG | 照片、渐变 | 有损压缩，不支持透明度 |
| PNG | 图形、透明效果 | 无损压缩，文件较大 |
| GIF | 简单动画 | 最多 256 种颜色 |
| WebP | 网页图片 | 压缩效果最佳，较新 |
| AVIF | 网页图片 | 最新，质量与体积最佳 |
矢量（基于数学）
| 格式 | 最适合用于 | 说明 |
|---|
| SVG | 网页图形、图标 | 可缩放、可制作动画 |
| AI | Adobe Illustrator | 原生格式 |
| EPS | 印刷、旧版用途 | 通用矢量格式 |
| PDF | 印刷、文档 | 保留矢量内容 |
导出指南
Web Graphics:
- Icons: SVG (or PNG fallback)
- Photos: WebP with JPG fallback
- Illustrations: SVG or WebP
- Resolution: 72 DPI minimum, 2x for retina
Print Graphics:
- Resolution: 300 DPI minimum
- Color: CMYK mode
- Format: PDF/X or TIFF
- Bleed: 0.125" (3mm) on all sides
设计工具
行业标准
| 工具 | 最适合用于 | 平台 |
|---|
| Figma | UI/UX、协作 | Web、桌面 |
| Adobe Photoshop | 照片编辑、栅格图像 | 桌面 |
| Adobe Illustrator | 矢量图形 | 桌面 |
| Sketch | UI 设计 | 仅限 macOS |
| Affinity Designer | 矢量图（Illustrator 替代品） | 桌面 |
| Canva | 快速设计 | Web |
免费替代品
| 工具 | 替代产品 | 平台 |
|---|
| GIMP | Photoshop | 桌面 |
| Inkscape | Illustrator | 桌面 |
| Photopea | Photoshop | Web |
| Vectr | Illustrator | Web |
设计系统
组件结构
Atoms:
- Colors, typography, icons
- Buttons, inputs, labels
Molecules:
- Form fields (label + input + helper)
- Cards (image + title + description)
- Navigation items
Organisms:
- Header (logo + nav + actions)
- Forms (multiple fields + submit)
- Product cards grid
Templates:
- Page layouts
- Grid structures
Pages:
- Specific instances with real content
命名约定
Colors:
- primary, secondary, accent
- success, warning, error, info
- gray-100 through gray-900
- background, surface, text
Components:
- btn-primary, btn-secondary, btn-ghost
- card-default, card-elevated, card-outlined
- input-default, input-error, input-disabled
印刷设计要点
标准印刷尺寸
US Paper:
- Letter: 8.5" × 11"
- Legal: 8.5" × 14"
- Tabloid: 11" × 17"
International (ISO):
- A4: 210 × 297mm
- A3: 297 × 420mm
- A5: 148 × 210mm
Business Cards:
- US: 3.5" × 2"
- EU: 85 × 55mm
印刷检查清单
最佳实践
应做：
- 从草图／线框图开始
- 使用一致的间距系统
- 按实际尺寸测试设计
- 尽早且经常获取反馈
- 优先考虑无障碍设计
- 尽可能使用真实内容
- 创建样式指南／设计系统
不应做：
- 使用超过 3 种字体
- 仅依靠颜色表达含义
- 忽略留白
- 拉伸或扭曲图片
- 使用低分辨率图片
- 将长段落居中对齐
- 忘记移动端／响应式设计
设计审查清单
