Back to Details

web-interface-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Web Interface Design

Web界面设计

Overview

概述

Design exists to separate the primary from the secondary. Users should instantly recognize what matters. Good interface design is invisible—users accomplish goals without noticing the interface.
This skill orchestrates domain-specific reference files. Read only what you need for the task.
设计的核心意义是区分主次内容。用户应该能立刻识别出重要信息。优秀的界面设计是无形的——用户无需注意到界面就能完成目标。
本技能整合了领域相关的参考文件，你可以仅阅读任务所需的内容。

Reference File Index

参考文件索引

TaskLoad Reference
Font sizes, line spacing, heading hierarchy, vertical rhythm
references/typography.md
Input fields, validation, checkboxes, radios, selects, textareas
references/forms-and-inputs.md
Button hierarchy, sizing, states, CTAs, ghost buttons
references/buttons.md
Color palettes, dark mode, tints/shades, state colors
references/color-systems.md
Navigation, cards, tabs, accordions, modals, tables, toasts
references/ui-components.md
Grids, spacing scales, responsive patterns, whitespace
references/layout-and-spacing.md
Focus techniques, hierarchy principles, action pyramid
references/visual-hierarchy.md
Contrast ratios, focus states, screen readers, WCAG
references/accessibility.md
CSS implementation patterns, variables, common styles
references/css-patterns.md
任务加载参考
字体大小、行间距、标题层级、垂直韵律
references/typography.md
输入框、校验规则、复选框、单选框、下拉选择器、文本域
references/forms-and-inputs.md
按钮层级、尺寸、状态、CTA、幽灵按钮
references/buttons.md
调色板、深色模式、色调/阴影、状态色
references/color-systems.md
导航、卡片、标签页、手风琴、模态框、表格、吐司提示
references/ui-components.md
网格、间距尺度、响应式模式、留白
references/layout-and-spacing.md
焦点处理技巧、层级原则、行动金字塔
references/visual-hierarchy.md
对比度、焦点状态、屏幕阅读器、WCAG
references/accessibility.md
CSS实现模式、变量、通用样式
references/css-patterns.md

Quick Decision: Which Reference?

快速决策：该用哪个参考文件？

What's the problem?
├─ Text hard to read, spacing feels off → typography.md
├─ Form not working well, validation issues → forms-and-inputs.md
├─ Users don't know what to click → buttons.md OR visual-hierarchy.md
├─ Colors look wrong, dark mode broken → color-systems.md
├─ Need nav/cards/tabs/modals/tables → ui-components.md
├─ Spacing inconsistent, layout cramped → layout-and-spacing.md
├─ Everything competes for attention → visual-hierarchy.md
├─ Accessibility audit or contrast issues → accessibility.md
└─ Need CSS implementation → css-patterns.md
What's the problem?
├─ Text hard to read, spacing feels off → typography.md
├─ Form not working well, validation issues → forms-and-inputs.md
├─ Users don't know what to click → buttons.md OR visual-hierarchy.md
├─ Colors look wrong, dark mode broken → color-systems.md
├─ Need nav/cards/tabs/modals/tables → ui-components.md
├─ Spacing inconsistent, layout cramped → layout-and-spacing.md
├─ Everything competes for attention → visual-hierarchy.md
├─ Accessibility audit or contrast issues → accessibility.md
└─ Need CSS implementation → css-patterns.md

Universal Quick Reference

通用快速参考

Spacing Scale (4px base)

间距尺度（4px基准）

4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96
4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96

Typography Baseline

排版基线

  • Body: 16px, line-height 1.5
  • Heading:body ratio max 1:3 (48px heading for 16px body)
  • Paragraph spacing: line-height ÷ 1.5
  • 正文：16px，行高1.5
  • 标题与正文字号最大比例为1:3（正文16px对应标题最大48px）
  • 段落间距：行高 ÷ 1.5

Touch Targets

触控目标

  • Minimum: 44×44px
  • Recommended: 48×48px
  • 最小值：44×44px
  • 推荐值：48×48px

Contrast Minimums (WCAG)

最低对比度要求（WCAG）

  • Normal text: 4.5:1
  • Large text (18px+ or 14px+ bold): 3:1
  • UI components: 3:1
  • 普通文本：4.5:1
  • 大文本（18px+ 或14px+加粗）：3:1
  • UI组件：3:1

Button Hierarchy

按钮层级

LevelUse ForTreatment
PrimaryMain action (ONE per view)Solid fill, high contrast
SecondaryAlternative actionsOutlined or subtle fill
TertiaryMinor actionsText-only or ghost
层级用途样式处理
主按钮核心操作（每个视图仅1个）实色填充，高对比度
次按钮备选操作描边或低饱和度填充
三级按钮次要操作仅文本或幽灵按钮样式

Dark Mode Essentials

深色模式要点

  • Background: #121212 (not pure black)
  • Text: #E0E0E0 (not pure white)
  • Reduce color saturation
  • 背景：#121212（不要使用纯黑）
  • 文本：#E0E0E0（不要使用纯白）
  • 降低色彩饱和度

Common Mistakes Checklist

常见错误检查清单

  • Multiple primary buttons per view
  • Placeholder used as only label
  • Pure white on pure black
  • Thin/light font weights
  • Color-only error indicators
  • Long centered text
  • Inconsistent spacing values
  • 单个视图存在多个主按钮
  • 仅用占位符作为输入框唯一标签
  • 纯黑背景搭配纯白文本
  • 使用过细/过浅的字重
  • 仅用颜色标识错误状态
  • 长文本居中对齐
  • 间距值不统一

Design Review Protocol

设计评审流程

  1. Hierarchy: Is primary action obvious? Can you tell what matters?
  2. Readability: Text contrast OK? Line length reasonable (45-75 chars)?
  3. Forms: Labels above fields? Touch targets 44px+? Helpful errors?
  4. Spacing: Consistent scale? Breathing room around elements?
  5. Accessibility: Color not sole indicator? Focus states visible?
  1. 层级：核心操作是否显而易见？能否快速区分内容优先级？
  2. 可读性：文本对比度是否合格？行长度是否合理（45-75字符）？
  3. 表单：标签是否位于输入框上方？触控目标≥44px？错误提示清晰有用？
  4. 间距：是否使用统一尺度？元素周围是否有足够留白？
  5. 可访问性：未仅用颜色作为信息标识？焦点状态可见？

When NOT to Use This Skill

何时不适合使用本技能

  • Pure visual branding/identity work
  • Marketing copy decisions
  • Backend architecture
  • Mobile native patterns (iOS/Android differ)
  • 纯视觉品牌/标识设计工作
  • 营销文案决策
  • 后端架构设计
  • 移动端原生模式（iOS/Android规范存在差异）

Sources

参考来源

  • Web Interface Handbook by Aleksei Baranov (Imperavi)
  • User Interface Typography by Imperavi
  • Refactoring UI by Wathan & Schoger
  • WCAG 2.1 accessibility guidelines
  • 《Web Interface Handbook》 作者 Aleksei Baranov（Imperavi）
  • 《User Interface Typography》 作者 Imperavi
  • 《Refactoring UI》 作者 Wathan & Schoger
  • WCAG 2.1 可访问性指南