web-design-methodology

Web Design Methodology

用于构建生产级 HTML/CSS 的通用模式。本技能涵盖实现方法论——搭配 web-design-patterns 使用，了解具体组件设计。

产出内容

可用于生产环境的 HTML/CSS 原型，包含：

• 语义化 CSS 自定义属性（令牌）
• 使用 BEM 命名的组件
• 移动端优先的响应式设计
• 无障碍标记
• 可选的三态深色模式

文件结构

prototype/
├── index.html
├── about.html
├── services.html
├── contact.html
├── favicon.svg
├── css/
│   ├── variables.css     # Tokens: colours, typography, spacing
│   ├── styles.css        # All component styles (BEM)
│   └── mobile-nav.css    # Mobile menu styles
├── js/
│   ├── theme.js          # Dark mode toggle (only if requested)
│   └── mobile-menu.js    # Hamburger menu
└── media/
    └── images/

构建顺序：

1. variables.css — 优先定义令牌
2. favicon.svg — 使用品牌色制作简单的 SVG
3. styles.css — 包含所有 BEM 组件
4. mobile-nav.css — 响应式导航
5. JS 文件 — 使用 assets/ 中的模板
6. index.html — 优先构建首页
7. 内页 — 关于、服务、联系
8. 移动端检查 — 在 375px 宽度下验证

BEM 命名

使用 Block-Element-Modifier 命名。无一例外。

/* Block */
.hero { }
.card { }
.nav { }

/* Element (child of block) */
.hero__title { }
.hero__subtitle { }
.hero__cta { }
.card__image { }
.card__content { }

/* Modifier (variation) */
.hero--split { }
.hero--minimal { }
.card--featured { }
.btn--primary { }
.btn--lg { }

规则：

• Block 是独立组件
• Element 是子元素，使用 __ 连接
• Modifier 表示变体，使用 -- 连接
• 嵌套不得超过一层：.hero__content__title 是错误的
• 不要脱离所属 Block 单独使用 Element：.card__image 只能用于 .card 内部

CSS 自定义属性

使用语义化令牌。不要硬编码颜色、间距或排版数值。

完整的令牌模板请参阅 references/css-variables-template.md。

/* Always this */
.card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

/* Never this */
.card {
  background: #ffffff;
  color: #333333;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  padding: 24px;
}

深色模式（可选）

深色模式并非必需——只有需求明确要求时才添加。大多数商业网站仅采用浅色模式，交付速度更快。

适用情况：

• 需求明确要求
• 科技/开发者受众（通常会期待）
• 作品集/创意类网站（出于美学考虑）

不适用情况：

• 技工、酒店餐饮、专业服务
• 更看重简洁和快速交付时

添加深色模式时

使用基于 class 的切换，不要使用 CSS 媒体查询。

/* Light mode (default) */
:root {
  --background: #F9FAFB;
  --foreground: #0F172A;
  --card: #FFFFFF;
  --card-foreground: #1E293B;
}

/* Dark mode (via .dark class on html) */
.dark {
  --background: #0F172A;
  --foreground: #F1F5F9;
  --card: #1E293B;
  --card-foreground: #F1F5F9;
}

规则：

• 在 <html> 上添加 .dark class，并通过 JavaScript 切换
• 切勿使用 @media (prefers-color-scheme: dark)——系统偏好由 JS 处理
• 每个背景令牌都需要对应的前景令牌
• 深色模式下，品牌色要更亮或饱和度更高
• 背景使用 #0F172A 至 #1E293B 范围内的颜色（不要用纯黑）
• 每组背景上的文字组合都必须符合 WCAG AA（4.5:1）

使用 assets/theme-toggle.js 实现三态切换。

响应式设计

移动端优先。以 375px 为基准设计，再逐步增强。

断点

/* Base: 375px (mobile) — no media query needed */
@media (min-width: 640px) { /* sm — large phone */ }
@media (min-width: 768px) { /* md — tablet */ }
@media (min-width: 1024px) { /* lg — small desktop */ }
@media (min-width: 1440px) { /* xl — standard desktop */ }

移动端优先事项

1. 无需滚动即可看到并拨打电话号码
2. 无需滚动即可看到主要 CTA
3. 可通过汉堡菜单使用导航
4. 触控目标至少为 44x44px
5. 绝不出现水平滚动
6. 图片正确缩放（不溢出）

宽屏约束

.prose { max-width: 65ch; }
.hero__content { max-width: min(640px, 45vw); }
.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.section { padding: clamp(3rem, 6vw, 6rem) 0; }

使用 assets/mobile-nav.js 实现汉堡菜单。

排版规则

1. 明显的字号对比。 标题字号是正文的 3–4 倍。主视觉标题使用 clamp(2.5rem, 6vw, 5rem)。
2. 丰富字重变化。 混合使用 300 和 800 字重。字重统一会显得乏味。
3. 每页只设一个视觉焦点。 一个超大单词、一条醒目的标题或一段引言。不要同时使用三者。
4. 正文左对齐。 仅主视觉和简短陈述使用居中。段落绝不居中。
5. 大写文本设置字距。 letter-spacing: 0.05em 至少要设为这个值。

颜色用法

80/20 法则：

• 80% 中性色调（背景、文本、卡片）
• 15% 次要/柔和的品牌色调
• 5% 主品牌色（CTA、每个视口内一处强调色）

如果所有标题、边框和图标都使用主品牌色，就没有任何元素能脱颖而出。

间距系统

不要使用统一内边距。为不同区块留出不同的呼吸空间：

/* Tight section (service list, FAQ) */
.section--compact { padding: clamp(2rem, 4vw, 4rem) 0; }

/* Standard section */
.section { padding: clamp(3rem, 6vw, 6rem) 0; }

/* Breathing room (editorial break, testimonial) */
.section--spacious { padding: clamp(4rem, 8vw, 10rem) 0; }

阴影系统

元素	阴影
静止状态的卡片	--shadow-sm
悬停状态的卡片	--shadow-md
下拉菜单	--shadow-lg
模态框	--shadow-xl

并非所有元素都需要阴影。请谨慎使用。

图标

通过内联 SVG 使用 Lucide 图标：

• 尺寸：内联图标为 24px，功能区块图标为 32–48px
• 描边宽度：1.5 或 2（全文保持一致）
• 颜色：currentColor（继承文本颜色）
• 每个图标都应传达明确含义

无障碍

不可妥协：

• 语义化 HTML：<header>、<nav>、<main>、<section>、<footer>
• 替代文本：内容图片应有有意义的替代文本，装饰性图片则留空
• 对比度：最低为 4.5:1（建议 7:1）
• 焦点样式：所有可交互元素都应清晰可见
• 跳过链接：应是第一个可聚焦元素
• 表单标签：应与输入框关联
• ARIA：切换控件使用 aria-expanded，必要时使用 aria-label

性能

• 对首屏以下的图片使用 loading="lazy"
• 对 Hero 图片使用 loading="eager"
• 在 head 中添加 <link rel="preconnect" href="https://fonts.googleapis.com">
• CSS 总大小控制在 50KB 以下
• 不使用 JavaScript 框架——仅使用原生 JavaScript

避免 AI 生成痕迹

这些模式会让人觉得“这是 AI 生成的”——请避免：

• Hero → 信任背书栏 → 3 张卡片 → 功能介绍 → 数据统计 → CTA → 页脚（这种固定框架）
• 每个区块的内边距都相同
• 所有卡片大小一致，且整齐排列成 3 列网格
• 所有内容都居中
• 每个区块都采用相同节奏：标题 + 副标题 + 内容
• 毫无用处的装饰元素
• 每个 CTA 都写“了解更多”
• 使用缺乏字体个性的 Inter、Arial 或系统字体

质量检查清单

标记为完成前：

• 设计方向明确——可以用一句话描述整体美感
• 字体排版有鲜明风格——不是 Inter 或系统字体
• 色彩运用克制——主色仅少量使用
• 相邻区块看起来各不相同
• CTA 具体明确——不使用“了解更多”
• 移动端显示正常——已在 375px 宽度下测试
• 深色模式正常（仅在启用时）——已检查每个区块
• 没有虚构图片——仅使用真实文件路径
• 设计师会愿意将其作为自己的作品吗？