Visual Designer

视觉设计师

优秀的设计令人察觉不到——用户只会在设计糟糕时注意到它，而不会在设计出色时注意到它。

核心原则

一致性胜过创意。

视觉设计服务于用户体验。每一种颜色、字体和间距的选择都应该有其目的。

---

阶段 1：色彩系统

色彩理论基础

色轮：

• 互补色： 相对的颜色（蓝色 + 橙色）——高对比度
• 类似色： 相邻的颜色（蓝色 + 绿色 + 蓝绿色）——和谐
• 三角色： 均匀分布的三种颜色——平衡
• 单色： 同一种颜色的不同色调——稳妥、简约

创建调色板

60-30-10 规则：

• 60% 主色（主导）
• 30% 次要色（辅助）
• 10% 强调色（行动号召）

调色板示例：

/* Primary (60%) - Backgrounds, large areas */
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-200: #bfdbfe;
--color-primary-500: #3b82f6; /* Main brand color */
--color-primary-600: #2563eb;
--color-primary-900: #1e3a8a;

/* Secondary (30%) - Complementary elements */
--color-secondary-500: #8b5cf6;
--color-secondary-600: #7c3aed;

/* Accent (10%) - CTAs, highlights */
--color-accent-500: #f59e0b;
--color-accent-600: #d97706;

/* Neutrals - Text, borders */
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-300: #d1d5db;
--color-gray-500: #6b7280;
--color-gray-700: #374151;
--color-gray-900: #111827;

/* Semantic colors */
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
--color-info: #3b82f6;

无障碍色彩对比度

WCAG 要求：

• 正文（< 18pt）：对比度至少为 4.5:1
• 大号文本（≥ 18pt 或 14pt 粗体）：对比度至少为 3:1
• UI 组件：对比度至少为 3:1

/* ✅ Good: Sufficient contrast (8:1) */
.text {
  color: #111827; /* gray-900 */
  background: #ffffff;
}

/* ❌ Bad: Insufficient contrast (2.1:1) */
.text-bad {
  color: #d1d5db; /* gray-300 */
  background: #ffffff;
}

工具：

• Coolors.co - 生成调色板
• Color Contrast Checker
• Adobe Color

深色模式策略

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --text-primary: #111827;
  --text-secondary: #6b7280;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
  }
}

深色模式检查清单：

• 减少纯白色（#fff）的使用 → 改用米白色（#f9fafb）
• 减少纯黑色（#000）的使用 → 改用深灰色（#111827）
• 提高深色背景上的对比度
• 邀请实际使用深色模式的用户进行测试
• 支持系统偏好设置

---

阶段 2：排版

字体搭配原则

黄金法则： 最多使用 2 种字体

• 标题字体： 独特、醒目
• 正文字体： 易读、中性

常见搭配：

/* Modern & Clean */
--font-heading: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;

/* Classic & Professional */
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans Pro', sans-serif;

/* Tech & Minimal */
--font-heading: 'Space Grotesk', sans-serif;
--font-body: 'IBM Plex Sans', sans-serif;

/* Creative & Friendly */
--font-heading: 'Poppins', sans-serif;
--font-body: 'Open Sans', sans-serif;

字号比例（模块化比例）

基础字号： 16px（1rem） 比例系数： 1.25（大三度）

--text-xs: 0.64rem; /* 10.24px */
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31.25px */
--text-3xl: 2.441rem; /* 39px */
--text-4xl: 3.052rem; /* 48.83px */
--text-5xl: 3.815rem; /* 61px */

/* Font weights */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;

行高与间距

/* Headings: Tighter line-height */
h1,
h2,
h3 {
  line-height: 1.2;
}

/* Body text: Comfortable reading */
p {
  line-height: 1.6;
  max-width: 65ch; /* 65 characters max for readability */
}

/* Small text: More line-height */
.text-sm {
  line-height: 1.8;
}

/* Letter spacing */
.heading {
  letter-spacing: -0.02em; /* Tighter */
}

.uppercase {
  letter-spacing: 0.05em; /* Wider for all-caps */
}

响应式排版

/* Fluid typography */
h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

/* Or breakpoint-based */
h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  h1 {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 3.5rem;
  }
}

---

阶段 3：间距系统

8pt 网格系统

为什么使用 8pt？

• 大多数屏幕尺寸都能被 8 整除
• 能营造视觉节奏
• 更容易保持一致性

--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */

用法：

/* Component padding */
.button {
  padding: var(--space-3) var(--space-6); /* 12px 24px */
}

/* Section spacing */
.section {
  padding: var(--space-16) 0; /* 64px top/bottom */
}

/* Element margins */
.heading {
  margin-bottom: var(--space-4); /* 16px */
}

.paragraph {
  margin-bottom: var(--space-6); /* 24px */
}

垂直节奏

/* Consistent vertical spacing */
* + * {
  margin-top: var(--space-4);
}

/* Specific overrides */
h1 + p {
  margin-top: var(--space-6);
}

p + p {
  margin-top: var(--space-4);
}

---

阶段 4：布局与构图

视觉层级

通过以下方式确立重要性：

1. 尺寸： 越大越重要
2. 字重： 越粗越重要
3. 颜色： 越明亮越重要
4. 间距： 留白越多越重要

/* Primary heading */
h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-8);
}

/* Secondary heading */
h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

/* Body text */
p {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

/* Supporting text */
.caption {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

网格系统

12 列网格：

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}

/* Full width */
.col-12 {
  grid-column: span 12;
}

/* Half width */
.col-6 {
  grid-column: span 6;
}

/* Third width */
.col-4 {
  grid-column: span 4;
}

/* Responsive */
@media (max-width: 768px) {
  .col-6 {
    grid-column: span 12; /* Stack on mobile */
  }
}

留白（负空间）

/* ❌ Cramped */
.card-bad {
  padding: 8px;
}

/* ✅ Breathing room */
.card-good {
  padding: var(--space-8); /* 32px */
}

/* Content spacing */
.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4); /* Side padding */
}

响应式断点

/* Mobile first */
:root {
  --breakpoint-sm: 640px; /* Small devices */
  --breakpoint-md: 768px; /* Tablets */
  --breakpoint-lg: 1024px; /* Laptops */
  --breakpoint-xl: 1280px; /* Desktops */
  --breakpoint-2xl: 1536px; /* Large screens */
}

/* Usage */
@media (min-width: 768px) {
  .container {
    padding: var(--space-8);
  }
}

---

阶段 5：视觉润色

阴影与层级

/* Elevation levels */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

/* Usage */
.card {
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

圆角

--radius-sm: 0.25rem; /* 4px - small elements */
--radius-md: 0.5rem; /* 8px - buttons, inputs */
--radius-lg: 0.75rem; /* 12px - cards */
--radius-xl: 1rem; /* 16px - modals */
--radius-full: 9999px; /* Fully rounded */

/* Usage */
.button {
  border-radius: var(--radius-md);
}

.avatar {
  border-radius: var(--radius-full);
}

过渡与动画

/* Transition timing */
--transition-fast: 150ms;
--transition-base: 200ms;
--transition-slow: 300ms;

/* Easing functions */
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

/* Button hover */
.button {
  transition: all var(--transition-base) var(--ease-in-out);
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* Fade in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn var(--transition-slow) var(--ease-out);
}

---

设计原则

1. 对比

让元素之间形成清晰的区分

/* ✅ Good contrast */
.hero {
  background: var(--color-primary-600);
  color: white;
}

/* ❌ Poor contrast */
.hero-bad {
  background: #ddd;
  color: #aaa;
}

2. 对齐

对齐元素以营造秩序感

/* ✅ Aligned */
.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

3. 重复

重复使用视觉元素以保持一致性

/* Consistent button styles */
.button {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
}

4. 接近

将相关元素分组

/* Form fields grouped */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

---

组件设计模式

按钮

/* Primary button */
.btn-primary {
  background: var(--color-primary-600);
  color: white;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn-primary:hover {
  background: var(--color-primary-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Secondary button */
.btn-secondary {
  background: transparent;
  color: var(--color-primary-600);
  border: 2px solid var(--color-primary-600);
}

/* Ghost button */
.btn-ghost {
  background: transparent;
  color: var(--text-primary);
}

.btn-ghost:hover {
  background: var(--color-gray-100);
}

卡片

.card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

表单

.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  transition: border-color var(--transition-base);
}

.input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input:invalid {
  border-color: var(--color-error);
}

---

设计工具

色彩工具

• Coolors - 生成调色板
• Color Hunt - 精选调色板
• Adobe Color - 色轮
• Contrast Checker

排版工具

• Google Fonts
• Font Pair - 字体搭配
• Type Scale - 生成字号比例

设计系统

• Tailwind CSS - 实用优先的 CSS
• Radix Colors - 色彩系统
• Open Color - 配色方案

---

视觉设计检查清单

颜色

• 已定义主色、次要色和强调色
• 已定义中性灰（50-900）
• 已定义语义色（成功、警告、错误）
• 所有文本均符合 WCAG 对比度要求
• 已定义深色模式颜色

字体排版

• 最多使用 1-2 种字体
• 定义字号比例（8-10 种字号）
• 指定字体粗细
• 适当设置行高
• 设置最大宽度以提高可读性（65ch）

间距

• 使用 8pt 网格系统
• 采用一致的间距比例
• 留出充足的空白
• 保持垂直节奏

组件

• 按钮样式保持一致
• 表单输入框样式保持一致
• 卡片具有适当的层级感
• 定义悬停状态
• 焦点状态清晰可见

响应式设计

• 采用移动端优先的方法
• 定义断点
• 触控目标 ≥ 44px
• 文本大小适当缩放

---

相关资源

技能：

• design-system-architect - 构建设计系统
• ux-designer - 用户体验设计
• accessibility-engineer - 色彩对比度、可读性

外部资源：

• Refactoring UI
• Design Systems Repo
• Laws of UX

---

优秀的设计让产品易于使用。卓越的设计让产品隐于无形。 🎨