一篇好的文章不只是内容好，更要让读者”读得下去”。本规范从字体、字号、行高、配色、版式、配图、组件、移动端适配等 13 个维度，定义 wishomes.cn 所有发布文章的统一标准。本文本身即是规范的最佳示范——你看到的每一个排版细节，都是规范要求的样子。

一、设计原则

1. 可读性优先 — 阅读宽度 720px、行高 1.75、字号 16px，符合人眼舒适阅读区间
2. 品牌一致性 — 全站统一使用品牌色 #1A1A1A（黑）+ #F5820A（橙），不混用
3. 移动端友好 — 移动端字号不缩小至 14px 以下，行高略增至 1.8
4. 结构清晰 — 标题层级最多 3 级（H1/H2/H3），H4-H6 谨慎使用
5. 可访问性 — 颜色对比度 ≥ 4.5:1（WCAG 2.2 AA），图片必须有 alt

二、字体规范

英文字体在前，中文字体在后，让 Montserrat 优先处理英文与数字，自动回退到 Noto Sans SC 处理中文。

三、字号体系

所有字号基于 16px 正文，标题层级倍率约 1.2-1.3 倍。

为什么中文行高 1.75 而非 1.6？中文方块字视觉密度高，1.6 在长文中略紧。知乎 1.6 适合信息密度高的社区，极客时间 1.7 适合技术长文，微信公众号 1.75-1.8 适合移动端。室内设计公司文章偏生活方式类，1.75 更舒适。

四、配色规范

禁用纯黑 #000000：眩光严重。所有正文用 #1A1A1A。

五、版式规范

六、标题层级与装饰

H2 章节标题：品牌色左色条（推荐）

你现在看到的每个 H2 标题左侧都有 4px 的橙色色条，这就是规范的标志。这种装饰源自掘金 H2 下边框、微信公众号左色条的进化，更克制、更现代。

.bf-article h2 {
  border-left: 4px solid #F5820A;
  padding-left: 16px;
  margin-top: 2em;
  margin-bottom: 0.8em;
}

H3-H6：纯排版层级

不加装饰，仅靠字号和字重建立层级。参考 Medium、Linear、Apple HIG 的极简风格。

可选方案：编号 + 品牌色（教程类）

.bf-article { counter-reset: h2-counter; }
.bf-article h2 { counter-increment: h2-counter; }
.bf-article h2::before {
  content: counter(h2-counter, decimal-leading-zero) ". ";
  color: #F5820A;
  font-weight: 700;
}

七、配图规范

配图要求：

• 所有图片必须有 alt 属性（可访问性）
• 非首屏图片加 loading="lazy" 懒加载（性能）
• 圆角统一 8px（与品牌设计语言一致）
• 配图来源：ImageGen 生成或自有版权图，注明来源
• 主图必须设置 WordPress 特色图片（featured image）

八、组件库

1. AI 声明框

用于 AI 辅助生成的文章，置于文章开头。

2. 引用块

用于名人名言、客户评价、设计师自述。

“好的设计不是堆砌材料，而是让空间自己说话。”

—— 首席设计师 张三

3. 代码块

用于技术文章、规范文档。

.bf-article pre {
  background: #1A1A1A;
  color: #E8E8E8;
  border-radius: 8px;
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.6;
}

4. 表格

用于参数对比、数据汇总。表头黑底白字，斑马纹 #FAFAFA。

5. CTA 行动号召

6. 署名块

wishomes.cn 编辑团队

筑福空间设计 · 内容中心

2026年7月10日

7. 免责声明

九、室内设计行业组件

1. 案例展示卡

用于文章末尾推荐相关案例。

2. 材料样板卡

用于材料展示，正方形色块 + 名称 + 描述。

3. Before/After 对比

双列网格，移动端自动改为单列。左上角黑色 “Before” / 橙色 “After” 标签。

4. 色彩方案展示

见本规范第四章 “配色规范” 中的实际示例。

5. 设计风格标签

十、文章结构模板

每篇文章遵循以下骨架：

1. Hero 头部 — eyebrow 标签 + H1 标题 + 摘要 + 元信息（作者/日期/阅读时长）
2. AI 声明 — AI 辅助生成时必加
3. 导语 Lead — 加大字号 18px，引导读者进入主题
4. 正文 — H2 章节标题 + 段落 + 配图 + 引用 + 列表
5. 总结 — H2 “总结” + 收束段落
6. CTA — 行动号召块（咨询/预约/订阅）
7. 署名块 — 作者头像 + 姓名 + 职称 + 发布日期
8. 免责声明 — 版权与责任声明

十一、移动端适配

移动端规则：

• 字号保持 16px 不缩小（避免 iOS Safari 自动放大表单字体）
• 行高略增至 1.8（手机阅读需要更多垂直呼吸空间）
• Before/After 改为单列
• 署名块改为换行布局
• H2 左色条改为 3px，padding-left 12px

十二、可访问性

• 颜色对比度 ≥ 4.5:1（WCAG 2.2 AA）
• 大文本（≥18.5px bold）对比度 ≥ 3:1
• 所有图片必须有 alt
• 不依赖纯颜色传达信息（加图标或文字辅助）
• 链接可点击区域 ≥ 44×44px
• 焦点状态可见（键盘导航）

十三、规范速查表

wishomes.cn 编辑团队

筑福空间设计 · 内容中心

2026年7月10日