网页设计模式

面向生产环境界面的 CSS 实现模式。有关设计基础与决策方法，请参阅 ui-design。本技能聚焦于代码实现。

另请参阅： ui-design（排版 / 色彩 / 间距理论）、frontend-design（创意美学）。

安装

OpenClaw / Moltbot / Clawbot

npx clawhub@latest install web-design

布局原则

使用 CSS Grid 实现二维布局，使用 Flexbox 实现一维流式布局。针对不同场景选择合适的工具。

空间构成

突破常规布局限制。有意识地采用非对称构图、元素交叠及打破网格的强调元素，可提升视觉表现力。对重叠元素优先使用网格层叠（grid-area: 1/1），而非 position: absolute。为营造高端/杂志风格，宜采用充裕的负空间；而面向数据密集型界面，则宜采用受控的高密度布局——所有选择均须明确且有意为之。

排版

排版承载了设计 90% 的个性特征。应根据界面用途选择匹配的字体。

字号比例

采用一致的比例关系。1.25（大三度）比例适用于大多数界面：text-xs 0.64rem，text-sm 0.8rem，text-base 1rem，text-lg 1.25rem，text-xl 1.563rem，text-2xl 1.953rem，text-3xl 2.441rem，text-4xl 3.052rem。正文设为 1rem（最小 16px），正文行高为 1.5，标题行高为 1.1–1.2。单行长度限制在 60–75ch。

色彩

构建配色方案

每套配色方案需包含五个功能性角色：

对比度与层次感

通过表面分层（而非仅依赖阴影）来构建深度感：

:root {
  --surface-0: hsl(220 15% 8%);    /* 页面背景 */
  --surface-1: hsl(220 15% 12%);   /* 卡片 */
  --surface-2: hsl(220 15% 16%);   /* 抬起元素 */
  --surface-3: hsl(220 15% 20%);   /* 气泡框 / 模态框 */
}

推荐使用 HSL 或 OKLCH 进行感知均匀的色彩调节。以主色为基调、辅以鲜明点缀色的方案，优于色彩平均分布的方案。务必验证 WCAG 对比度：普通文本 ≥ 4.5:1，大号文本 ≥ 3:1。

间距

一致的间距可形成视觉节奏。采用 8px 基础单位（高密度 UI 可选 4px）：

统一应用间距规则：在 Grid/Flexbox 容器上使用 gap，而非在子元素上设置 margin。此举可避免 margin 合并问题，并简化响应式调整。

视觉层级

通过尺寸、字重、色彩与空间的刻意对比，引导用户视线流动。

层级构建技巧

实践范式 —— 卡片层级

在卡片内部构建层级：导语（xs、全大写、低饱和度）→ 标题（xl、半粗体）→ 正文（base、辅助色、1.6 行高）→ 操作项（通过 margin-top 分离）。使用表面色进行视觉分离，并通过间距标记确保内边距一致性。

响应式设计

断点策略

流体式技术

在可能的情况下，优先采用流体式尺寸而非刚性断点：

/* 流体排版 —— 在 640px 至 1440px 视口范围内缩放 */
h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }

/* 流体间距 */
section { padding-block: clamp(2rem, 1rem + 4vw, 6rem); }

/* 内在网格 —— 无需媒体查询 */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-6); }

当组件自身布局需响应其容器尺寸（而非视口尺寸）时，使用容器查询（@container）实现组件级响应式。

可访问性

可访问性不是可选项，必须从开发之初即纳入考量。

/* 强健的焦点指示器 */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 尊重动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

组件设计

优质组件的构成要素

每个 UI 组件都应具备清晰的状态定义、一致的间距规则与可预测的行为表现：

设计标记架构

为便于维护，将标记划分为三层结构：

/* 第一层：基础值 */
--blue-500: oklch(0.55 0.2 250);
--gray-100: oklch(0.95 0.005 250);
--radius-md: 0.5rem;

/* 第二层：语义别名 */
--color-primary: var(--blue-500);
--color-surface: var(--gray-100);
--radius-button: var(--radius-md);

/* 第三层：组件专属 */
--btn-bg: var(--color-primary);
--btn-radius: var(--radius-button);
--btn-padding: var(--space-2) var(--space-4);

该三层结构支持通过重映射第二层实现主题切换，而无需修改组件本身。

交互模式

动效与动画

动效应用于传达状态变化，而非纯粹装饰。聚焦于高价值交互时刻：

/* 交错进入动画 */
.stagger-item {
  opacity: 0;
  translate: 0 1rem;
  animation: reveal 0.5s ease-out forwards;
}
.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 60ms; }
.stagger-item:nth-child(3) { animation-delay: 120ms; }

@keyframes reveal {
  to { opacity: 1; translate: 0 0; }
}

滚动驱动效果

利用原生 animation-timeline: scroll()（置于 @supports 条件后）实现视差与渐显效果，无需 JavaScript。通过特性检测包裹，确保降级体验平滑。

设计质量检查清单

上线前，请对照以下标准逐一验证：

• 排版：字体搭配有明确意图、字号比例一致、行长度适宜阅读
• 色彩：配色协调统一、满足 WCAG 对比度要求、已定义语义化反馈色
• 间距：统一使用间距标记构建节奏，杜绝随意像素值
• 层级：视觉流向清晰明确，视线路径符合预期阅读顺序
• 响应式：已在移动设备、平板、桌面端完成测试，无水平溢出
• 可访问性：支持键盘导航、焦点可见、经屏幕阅读器测试、动效安全
• 状态：所有可交互元素均已实现悬停、激活、聚焦、禁用及加载态
• 个性表达：设计具有明确观点，非通用模板化风格
• 性能：图片已优化、字体已子集化、动画已 GPU 加速（transform、opacity）
• 深色模式：若支持，表面色应基于分层明度设计，而非简单颜色反转