Back to Details

frontend-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend Design

前端设计

Create interfaces with intentional aesthetics and professional execution. Avoid generic "template" looks.
打造具有独特美感和专业质感的界面，避免千篇一律的“模板化”外观。

Design Process

设计流程

Before writing code, answer these questions:
  1. Purpose — What problem does this interface solve? Who uses it?
  2. Tone — What aesthetic direction? (brutalist, luxury, playful, editorial, retro-futuristic, etc.)
  3. Constraints — Device targets, accessibility requirements, performance budget
  4. Signature — What single element makes this memorable?
Commit to a direction. Timid design is worse than bold design with flaws.
编写代码前，先回答以下问题：
  1. 目的 — 这个界面要解决什么问题？目标用户是谁？
  2. 风格基调 — 采用哪种美学方向？（Brutalist、奢华风、趣味风、编辑风、复古未来主义等）
  3. 约束条件 — 目标设备、无障碍要求、性能预算
  4. 标志性元素 — 哪个单一元素能让界面令人难忘？
确定方向后就坚定执行。犹豫不决的设计，不如有缺陷但风格鲜明的设计。

Typography

排版

Font Selection

字体选择

Avoid overused defaults. Choose typefaces that reinforce the interface's personality.
css
/* BAD: Generic, seen everywhere */
font-family: 'Inter', 'Roboto', 'Arial', sans-serif;

/* GOOD: Distinctive and paired intentionally */
--font-display: 'Instrument Serif', serif;      /* headings */
--font-body: 'Satoshi', sans-serif;              /* body text */
--font-mono: 'Berkeley Mono', monospace;         /* code */
避免过度使用默认字体。选择能强化界面个性的字体。
css
/* BAD: Generic, seen everywhere */
font-family: 'Inter', 'Roboto', 'Arial', sans-serif;

/* GOOD: Distinctive and paired intentionally */
--font-display: 'Instrument Serif', serif;      /* headings */
--font-body: 'Satoshi', sans-serif;              /* body text */
--font-mono: 'Berkeley Mono', monospace;         /* code */

Typographic Details

排版细节

css
/* Tabular numbers for aligned columns */
.data-cell { font-variant-numeric: tabular-nums; }

/* Balanced headings prevent widow words */
h1, h2, h3 { text-wrap: balance; }

/* Proper ellipsis character */
.truncate::after { content: '\2026'; } /* … not ... */
Handle text overflow deliberately:
css
/* Single line truncation */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Multi-line clamping */
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Flex children need min-w-0 for truncation to work */
.flex-child { min-width: 0; }
css
/* Tabular numbers for aligned columns */
.data-cell { font-variant-numeric: tabular-nums; }

/* Balanced headings prevent widow words */
h1, h2, h3 { text-wrap: balance; }

/* Proper ellipsis character */
.truncate::after { content: '\2026'; } /* … not ... */
谨慎处理文本溢出：
css
/* Single line truncation */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Multi-line clamping */
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Flex children need min-w-0 for truncation to work */
.flex-child { min-width: 0; }

Color Systems

颜色系统

Theme Architecture

主题架构

Build on CSS custom properties with clear semantic naming.
css
:root {
  /* Primitives */
  --gray-50: oklch(0.98 0.005 240);
  --gray-900: oklch(0.15 0.01 240);
  --accent: oklch(0.65 0.25 30);

  /* Semantic tokens */
  --color-bg: var(--gray-50);
  --color-text: var(--gray-900);
  --color-text-muted: oklch(0.55 0.01 240);
  --color-border: oklch(0.88 0.005 240);
  --color-accent: var(--accent);
  --color-accent-hover: oklch(0.58 0.28 30);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--gray-900);
    --color-text: var(--gray-50);
    --color-text-muted: oklch(0.65 0.01 240);
    --color-border: oklch(0.28 0.005 240);
  }
}
基于CSS自定义属性构建，采用清晰的语义化命名。
css
:root {
  /* Primitives */
  --gray-50: oklch(0.98 0.005 240);
  --gray-900: oklch(0.15 0.01 240);
  --accent: oklch(0.65 0.25 30);

  /* Semantic tokens */
  --color-bg: var(--gray-50);
  --color-text: var(--gray-900);
  --color-text-muted: oklch(0.55 0.01 240);
  --color-border: oklch(0.88 0.005 240);
  --color-accent: var(--accent);
  --color-accent-hover: oklch(0.58 0.28 30);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--gray-900);
    --color-text: var(--gray-50);
    --color-text-muted: oklch(0.65 0.01 240);
    --color-border: oklch(0.28 0.005 240);
  }
}

Color Principles

颜色原则

  • Commit to a palette — 1 dominant + 1–2 accents. Avoid 5-color rainbows.
  • Use oklch — Perceptually uniform, better than hex/hsl for programmatic palettes.
  • Contrast ratios — 4.5:1 minimum for body text, 3:1 for large text (WCAG AA).
  • 坚持统一调色板 — 1种主色调 + 1-2种强调色。避免使用5色以上的彩虹配色。
  • 使用oklch — 感知均匀的颜色空间，比hex/hsl更适合程序化生成调色板。
  • 对比度要求 — 正文文本最小对比度4.5:1，大文本最小3:1（符合WCAG AA标准）。

Motion & Animation

动效与动画

Rules

规则

  1. Respect user preference: Always honor 
    prefers-reduced-motion
  2. Animate only 
    transform
    and 
    opacity
    : These are GPU-composited, everything else triggers layout/paint
  3. Never use 
    transition: all
    : List specific properties
  4. Animations must be interruptible: User actions should cancel running animations
css
/* GOOD: Specific properties, respects user preference */
.card {
  transition: transform 200ms ease-out, opacity 150ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}
  1. 尊重用户偏好：始终遵循
    prefers-reduced-motion
    设置
  2. 仅对
    transform
    和
    opacity
    设置动画    ：这两个属性由GPU合成，其他属性会触发布局/重绘
  3. 切勿使用
    transition: all
    ：明确列出具体属性
  4. 动画必须可中断：用户操作应能取消正在运行的动画
css
/* GOOD: Specific properties, respects user preference */
.card {
  transition: transform 200ms ease-out, opacity 150ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

High-Impact Moments

高影响力场景

Focus animation budget on:
  • Page transitions — Orchestrated staggered reveals
  • State changes — Loading → content, collapsed → expanded
  • Feedback — Button press, form submission confirmation
Skip: random hover effects on every element, scroll-jacking, decorative background animations.
将动画预算集中在以下场景：
  • 页面过渡 — 协调的分步展示效果
  • 状态切换 — 加载→内容、折叠→展开
  • 反馈提示 — 按钮点击、表单提交确认
避免：所有元素添加随机悬停效果、滚动劫持、装饰性背景动画。

Spatial Composition

空间布局

Layout Principles

布局原则

  • Asymmetry is interesting — Perfectly centered grid layouts are predictable
  • Intentional negative space — White space is a design element, not a mistake
  • Grid-breaking elements — One element that overlaps or extends beyond the grid creates focus
  • Diagonal flow — Eye movement along diagonals is more engaging than horizontal scan
  • 不对称更具吸引力 — 完全居中的网格布局过于可预测
  • 留白是设计元素 — 空白区域是设计的一部分，而非失误
  • 打破网格的元素 — 某个超出网格或重叠的元素能创造视觉焦点
  • 对角线视觉流 — 沿对角线的视线移动比水平扫描更具吸引力

Responsive Strategy

响应式策略

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

/* Container queries for component-level responsiveness */
.card-container { container-type: inline-size; }

@container (min-width: 400px) {
  .card { grid-template-columns: 200px 1fr; }
}
css
/* Fluid typography */
h1 { font-size: clamp(2rem, 5vw, 4rem); }

/* Container queries for component-level responsiveness */
.card-container { container-type: inline-size; }

@container (min-width: 400px) {
  .card { grid-template-columns: 200px 1fr; }
}

Backgrounds & Atmosphere

背景与氛围

Build visual depth through layered treatments:
css
/* Noise texture overlay */
.surface::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/noise.svg');
  opacity: 0.03;
  pointer-events: none;
}

/* Gradient mesh */
.hero {
  background:
    radial-gradient(ellipse at 20% 50%, oklch(0.7 0.15 250 / 0.3), transparent 50%),
    radial-gradient(ellipse at 80% 20%, oklch(0.7 0.2 30 / 0.2), transparent 50%),
    var(--color-bg);
}
通过分层处理营造视觉深度：
css
/* Noise texture overlay */
.surface::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/noise.svg');
  opacity: 0.03;
  pointer-events: none;
}

/* Gradient mesh */
.hero {
  background:
    radial-gradient(ellipse at 20% 50%, oklch(0.7 0.15 250 / 0.3), transparent 50%),
    radial-gradient(ellipse at 80% 20%, oklch(0.7 0.2 30 / 0.2), transparent 50%),
    var(--color-bg);
}

Images & Media

图片与媒体

tsx
// Explicit dimensions prevent layout shift
<Image src={src} width={800} height={600} alt="Description" />

// Below-fold: lazy load
<Image src={src} loading="lazy" alt="..." />

// Above-fold: prioritize
<Image src={src} priority alt="..." />

// Decorative: empty alt
<Image src={pattern} alt="" aria-hidden="true" />
tsx
// Explicit dimensions prevent layout shift
<Image src={src} width={800} height={600} alt="Description" />

// Below-fold: lazy load
<Image src={src} loading="lazy" alt="..." />

// Above-fold: prioritize
<Image src={src} priority alt="..." />

// Decorative: empty alt
<Image src={pattern} alt="" aria-hidden="true" />

Interactive States

交互状态

Every interactive element needs 4 states:
StateTreatment
DefaultBase appearance
HoverIncreased contrast or subtle shift
FocusVisible ring via 
:focus-visible
Active/PressedSlight scale or color change
DisabledReduced opacity + 
cursor: not-allowed
css
.button {
  background: var(--color-accent);
  transition: background 150ms ease-out, transform 100ms ease-out;
}
.button:hover { background: var(--color-accent-hover); }
.button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.button:active { transform: scale(0.98); }
每个交互元素需包含5种状态：
状态处理方式
默认基础外观
悬停提高对比度或轻微位移
聚焦通过
:focus-visible
显示可见的外框
激活/按下轻微缩放或颜色变化
禁用降低透明度 + 
cursor: not-allowed
css
.button {
  background: var(--color-accent);
  transition: background 150ms ease-out, transform 100ms ease-out;
}
.button:hover { background: var(--color-accent-hover); }
.button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.button:active { transform: scale(0.98); }

Anti-Patterns

反模式

AvoidInstead
Inter/Roboto/Arial everywhereChoose distinctive, project-appropriate typefaces
Purple gradient on whiteCommit to a specific, cohesive palette
Uniform card gridsVary sizes, add featured/hero cards
Shadows on everythingUse shadow purposefully for elevation hierarchy
border-radius: 9999px
on all elements		Match radius to content type and context
Identical hover effectsTailor interaction feedback to element function
避免做法替代方案
所有地方都用Inter/Roboto/Arial选择符合项目调性的独特字体
白色背景配紫色渐变采用统一、协调的调色板
统一尺寸的卡片网格调整卡片尺寸，添加特色/主卡片
所有元素都加阴影有目的地使用阴影构建层级关系
所有元素都设
border-radius: 9999px
根据内容类型和场景匹配圆角大小
所有元素使用相同的悬停效果根据元素功能定制交互反馈