graphic-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Graphic Design

平面设计

Comprehensive guide for creating professional visual designs across digital and print media.

适用于数字与印刷媒体的专业视觉设计综合指南。

Design Fundamentals

设计基础

The 7 Principles of Design

7大设计原则

Principle	Definition	Application
Balance	Visual equilibrium	Symmetrical, asymmetrical, radial
Contrast	Difference between elements	Size, color, shape, texture
Emphasis	Focal point creation	Hierarchy guides the eye
Movement	Visual flow direction	Leading lines, repetition
Pattern	Repetition of elements	Creates rhythm and unity
Rhythm	Visual tempo	Regular, flowing, progressive
Unity	Cohesive whole	Consistent style throughout

原则	定义	应用场景
平衡	视觉平衡状态	对称、不对称、放射状
对比	元素间的差异	尺寸、颜色、形状、纹理
强调	打造视觉焦点	通过层级引导视线
动线	视觉流动方向	引导线、重复元素
图案	元素的重复排列	营造韵律与统一性
韵律	视觉节奏	规则、流畅、递进式
统一	整体协调性	全程保持风格一致

Color Theory

色彩理论

Color Models

色彩模型

Model	Use Case	Components
RGB	Digital screens	Red, Green, Blue (0-255)
CMYK	Print media	Cyan, Magenta, Yellow, Key/Black
HSL	Design tools	Hue, Saturation, Lightness
Hex	Web/CSS	#RRGGBB format

模型	适用场景	组成部分
RGB	电子屏幕	红、绿、蓝（取值0-255）
CMYK	印刷媒体	青、洋红、黄、黑（Key/Black）
HSL	设计工具	色相、饱和度、亮度
Hex	网页/CSS	#RRGGBB格式

Color Harmonies

色彩和谐

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

互补色:    色轮上的对立色（高对比度）
邻近色:    色轮上相邻的颜色（和谐统一）
三色组:    色轮上间距相等的3种颜色（活力感）
分裂互补色: 基础色+互补色的两个邻近色
四色组:    形成矩形的4种颜色
单色:      单一色相，调整饱和度/亮度

Color Psychology

色彩心理学

Color	Associations	Use For
Red	Energy, urgency, passion	CTAs, sales, warnings
Blue	Trust, calm, professional	Corporate, tech, finance
Green	Growth, nature, health	Eco, wellness, money
Yellow	Optimism, attention, warmth	Highlights, caution
Purple	Luxury, creativity, wisdom	Premium, creative
Orange	Enthusiasm, confidence	CTAs, youth brands
Black	Sophistication, power	Luxury, editorial
White	Clean, minimal, pure	Modern, healthcare

颜色	关联意象	适用场景
红色	活力、紧迫感、热情	行动按钮、促销、警告
蓝色	信任、冷静、专业	企业、科技、金融领域
绿色	成长、自然、健康	环保、健康、金融领域
黄色	乐观、吸睛、温暖	高亮提示、警示信息
紫色	奢华、创意、智慧	高端品牌、创意领域
橙色	热情、自信	行动按钮、年轻品牌
黑色	精致、权威	奢华品牌、编辑排版
白色	简洁、极简、纯净	现代设计、医疗领域

Accessible Color Contrast

无障碍色彩对比度

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

WCAG AA 标准要求:
- 常规文本：最小对比度4.5:1
- 大文本（18pt及以上）：最小对比度3:1
- UI组件：最小对比度3:1

WCAG AAA 标准要求:
- 常规文本：最小对比度7:1
- 大文本：最小对比度4.5:1

工具：WebAIM Contrast Checker、Stark、Color Safe

Typography

排版设计

Type Classification

字体分类

Category	Characteristics	Use Cases
Serif	Decorative strokes	Print, editorial, formal
Sans-serif	Clean, no strokes	Digital, modern, UI
Slab Serif	Bold, blocky serifs	Headlines, branding
Script	Handwritten feel	Invitations, logos
Display	Decorative, unique	Headlines only
Monospace	Fixed-width	Code, technical

类别	特点	适用场景
衬线体	带有装饰性笔画	印刷品、出版物、正式场景
无衬线体	简洁无装饰笔画	数字界面、现代设计、UI
粗衬线体	粗重块状衬线	标题、品牌标识
手写体	手写风格	邀请函、品牌logo
装饰体	装饰性、独特性	仅用于标题
等宽体	字符宽度固定	代码、技术文档

Type Hierarchy

字体层级

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)

标题展示字:     48-72px  (主视觉标题)
H1标题:          32-48px  (页面标题)
H2标题:          24-32px  (章节标题)
H3标题:          20-24px  (子章节标题)
正文:        16-18px  (可读文本)
说明文字:     12-14px  (次要信息)
微文本:       10-12px  (法律条文、脚注)

Typography Rules

排版规则

Limit fonts: 2-3 maximum per project
Contrast pairing: Serif + Sans-serif works well
Line height: 1.4-1.6 for body text
Line length: 45-75 characters optimal
Letter spacing: Increase for all-caps text
Alignment: Left-align body text (easier to read)

限制字体数量：每个项目最多使用2-3种字体
对比搭配：衬线体+无衬线体的组合效果佳
行高：正文字体行高设置为1.4-1.6
行长度：最佳为45-75个字符
字间距：全大写文本需增大字间距
对齐方式：正文使用左对齐（更易阅读）

Font Pairing Examples

字体搭配示例

Headlines + Body:
- Playfair Display + Source Sans Pro
- Montserrat + Merriweather
- Oswald + Lato
- Roboto Slab + Roboto
- DM Serif Display + DM Sans

标题 + 正文:
- Playfair Display + Source Sans Pro
- Montserrat + Merriweather
- Oswald + Lato
- Roboto Slab + Roboto
- DM Serif Display + DM Sans

Layout & Composition

布局与构图

Grid Systems

网格系统

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

12列网格（最常用）:
├─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┤
│1│2│3│4│5│6│7│8│9│10│11│12│

常见列跨度:
- 全屏宽度：12列
- 三分之二宽度：8列
- 半宽：6列
- 三分之一宽度：4列
- 四分之一宽度：3列
- 侧边栏：3-4列

Spacing System (8pt Grid)

间距系统（8pt网格）

css

/* 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 */

css

/* 基础单位: 8px */
--space-1: 4px; /* 0.5倍 - 紧凑间距 */
--space-2: 8px; /* 1倍 - 基础间距 */
--space-3: 16px; /* 2倍 - 舒适间距 */
--space-4: 24px; /* 3倍 - 章节间距 */
--space-5: 32px; /* 4倍 - 组块分隔 */
--space-6: 48px; /* 6倍 - 主要区块间距 */
--space-7: 64px; /* 8倍 - 页面区块间距 */
--space-8: 96px; /* 12倍 - 主视觉区域间距 */

Rule of Thirds

三分法原则

┌───────┬───────┬───────┐
│       │       │       │
│   ●───┼───●   │       │  Place key elements
├───────┼───────┼───────┤  at intersection
│       │       │       │  points (●)
│   ●───┼───●   │       │
├───────┼───────┼───────┤
│       │       │       │
└───────┴───────┴───────┘

┌───────┬───────┬───────┐
│       │       │       │
│   ●───┼───●   │       │  将关键元素放置在
├───────┼───────┼───────┤  交叉点位置（●）
│       │       │       │
│   ●───┼───●   │       │
├───────┼───────┼───────┤
│       │       │       │
└───────┴───────┴───────┘

Visual Hierarchy Techniques

视觉层级技巧

Size: Larger = more important
Color: Bright/saturated draws attention
Contrast: High contrast = focal point
Whitespace: Isolation creates emphasis
Position: Top-left (F-pattern) or center
Typography: Bold, different font, caps

尺寸：越大越重要
颜色：明亮/高饱和度颜色更吸睛
对比：高对比度打造视觉焦点
留白：孤立元素可强化重点
位置：左上区域（F型阅读模式）或中心
排版：加粗、不同字体、全大写

File Formats

文件格式

Raster (Pixel-Based)

栅格图（基于像素）

Format	Best For	Notes
JPG/JPEG	Photos, gradients	Lossy, no transparency
PNG	Graphics, transparency	Lossless, larger files
GIF	Simple animations	256 colors max
WebP	Web images	Best compression, modern
AVIF	Web images	Newest, best quality/size

格式	最佳适用场景	说明
JPG/JPEG	照片、渐变效果	有损压缩，不支持透明
PNG	图形、透明元素	无损压缩，文件体积较大
GIF	简单动画	最多支持256种颜色
WebP	网页图片	压缩效果最优，现代格式
AVIF	网页图片	最新格式，画质/体积比最佳

Vector (Math-Based)

矢量图（基于数学公式）

Format	Best For	Notes
SVG	Web graphics, icons	Scalable, animatable
AI	Adobe Illustrator	Native format
EPS	Print, legacy	Universal vector
PDF	Print, documents	Preserves vectors

格式	最佳适用场景	说明
SVG	网页图形、图标	可缩放、可动画化
AI	Adobe Illustrator	原生格式
EPS	印刷、旧版兼容	通用矢量格式
PDF	印刷、文档	保留矢量信息

Export Guidelines

导出指南

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

网页图形:
- 图标：SVG（或PNG作为降级方案）
- 照片：WebP（搭配JPG作为降级方案）
- 插画：SVG或WebP
- 分辨率：最低72 DPI，视网膜屏需2倍分辨率

印刷图形:
- 分辨率：最低300 DPI
- 色彩模式：CMYK
- 格式：PDF/X或TIFF
- 出血位：所有边预留0.125英寸（3mm）

Design Tools

设计工具

Industry Standard

行业标准工具

Tool	Best For	Platform
Figma	UI/UX, collaboration	Web, Desktop
Adobe Photoshop	Photo editing, raster	Desktop
Adobe Illustrator	Vector graphics	Desktop
Sketch	UI design	macOS only
Affinity Designer	Vector (Illustrator alt)	Desktop
Canva	Quick designs	Web

工具	最佳适用场景	平台
Figma	UI/UX设计、协作	网页端、桌面端
Adobe Photoshop	照片编辑、栅格图处理	桌面端
Adobe Illustrator	矢量图形设计	桌面端
Sketch	UI设计	仅支持macOS
Affinity Designer	矢量设计（Illustrator替代工具）	桌面端
Canva	快速设计	网页端

Free Alternatives

免费替代工具

Tool	Replaces	Platform
GIMP	Photoshop	Desktop
Inkscape	Illustrator	Desktop
Photopea	Photoshop	Web
Vectr	Illustrator	Web

工具	替代对象	平台
GIMP	Photoshop	桌面端
Inkscape	Illustrator	桌面端
Photopea	Photoshop	网页端
Vectr	Illustrator	网页端

Design Systems

设计系统

Component Structure

组件结构

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

原子层:
- 色彩、排版、图标
- 按钮、输入框、标签

分子层:
- 表单字段（标签+输入框+辅助文字）
- 卡片（图片+标题+描述）
- 导航项

组织层:
- 页头（logo+导航+操作按钮）
- 表单（多个字段+提交按钮）
- 产品卡片网格

模板层:
- 页面布局
- 网格结构

页面层:
- 带有真实内容的具体实例

Naming Conventions

命名规范

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

色彩:
- primary、secondary、accent
- success、warning、error、info
- gray-100至gray-900
- background、surface、text

组件:
- btn-primary、btn-secondary、btn-ghost
- card-default、card-elevated、card-outlined
- input-default、input-error、input-disabled

Print Design Specifics

印刷设计细节

Standard Print Sizes

标准印刷尺寸

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

美国纸张尺寸:
- Letter: 8.5" × 11"
- Legal: 8.5" × 14"
- Tabloid: 11" × 17"

国际标准（ISO）:
- A4: 210 × 297mm
- A3: 297 × 420mm
- A5: 148 × 210mm

名片:
- 美国: 3.5" × 2"
- 欧盟: 85 × 55mm

Print Checklist

印刷检查清单

Best Practices

最佳实践

DO:

建议:

Start with sketches/wireframes
Use consistent spacing system
Test designs at actual size
Get feedback early and often
Design for accessibility first
Use real content when possible
Create style guides/design systems

从草图/线框开始设计
使用统一的间距系统
按实际尺寸测试设计
尽早并频繁获取反馈
优先考虑无障碍设计
尽可能使用真实内容
创建风格指南/设计系统

DON'T:

禁忌:

Use more than 3 fonts
Rely on color alone for meaning
Ignore whitespace
Stretch or distort images
Use low-resolution images
Center-align long paragraphs
Forget mobile/responsive design

使用超过3种字体
仅依赖颜色传递信息
忽略留白的作用
拉伸或扭曲图片
使用低分辨率图片
长段落使用居中对齐
忘记移动端/响应式设计

graphic-design

Original

Translation

Graphic Design

平面设计

Design Fundamentals

设计基础

The 7 Principles of Design

7大设计原则

Color Theory

色彩理论

Color Models

色彩模型

Color Harmonies

色彩和谐

Color Psychology

色彩心理学

Accessible Color Contrast

无障碍色彩对比度

Typography

排版设计

Type Classification

字体分类

Type Hierarchy

字体层级

Typography Rules

排版规则

Font Pairing Examples

字体搭配示例

Layout & Composition

布局与构图

Grid Systems

网格系统

Spacing System (8pt Grid)

间距系统（8pt网格）

Rule of Thirds

三分法原则

Visual Hierarchy Techniques

视觉层级技巧

File Formats

文件格式

Raster (Pixel-Based)

栅格图（基于像素）

Vector (Math-Based)

矢量图（基于数学公式）

Export Guidelines

导出指南

Design Tools

设计工具

Industry Standard

行业标准工具

Free Alternatives

免费替代工具

Design Systems

设计系统

Component Structure

组件结构

Naming Conventions

命名规范

Print Design Specifics

印刷设计细节

Standard Print Sizes

标准印刷尺寸

Print Checklist

印刷检查清单

Best Practices

最佳实践

DO:

建议:

DON'T:

禁忌:

Design Review Checklist

设计评审检查清单