---
title: 设计原则 Principles
url: https://ui.zhaozimin.cn/foundations/principles/
markdown: https://ui.zhaozimin.cn/foundations/principles.md
group: 基础
origin: 规范文档
source:
  - src/system/PRODUCT.md  # https://ui.zhaozimin.cn/src/system/PRODUCT.md
  - src/system/styles/v4/SPACING.md  # https://ui.zhaozimin.cn/src/system/styles/v4/SPACING.md
version: v0.2.0  # 设计系统版本，发布于 2026-09-23
scope: .zzm-v4   # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.cn/v/0.2.0/zzm.css   # 锁版本地址，本仓库再改也不影响你
---

# 设计原则 Principles

> 高级、克制、好上手。三个字：墨 · 纸 · 朱。进来就安静下来，觉得「这很简单，我马上能开始」。

## 纲领：一体感，不是数字苛政

目标只有一个：**整个网站看起来是一块材料切出来的**。每个板块共用同一套视觉词汇，而不是东一块西一块各说各话。

数字（4 和 8 的倍数）只是手段。当所有间距、高度、圆角都取自同一把梯子，画面自然产生统一的呼吸节奏，拼凑感就消失了。所以规则很简单：**需要一个尺寸时，不要发明数字，从梯子上取一档。** 拿不准取哪档，就看同类组件用了哪档，跟它一致——一致性比精确性重要。

## 五条原则

| 原则 | 意思 | 落到界面上 |
|---|---|---|
| 一屏一枚朱印 | 红只出现一次，永远标「你在这里 / 下一步」 | 朱色是导航信号，不是装饰；同屏第二处红就是错 |
| 留白即上手 | 首页至少八成是留白 | 能收进次级入口的，绝不摆在主动线上 |
| 设计语言自解释 | 不需要教程 | 看到红就知道点哪，看到卡片就知道能进；圆＝徽章不可点，方角＝控件可点 |
| 剧场只在首次 | 开屏动画只播一次、可跳过 | 产品内动效 150–250ms，只传递状态；尊重减少动效设置 |
| 地图即导航 | 阶段顺序＝解锁顺序＝侧栏顺序 | 三者同构，用户不用在脑子里做换算 |

## 两条铁律

- ✓ 要：**光影铁律**：阴影只从质感类（`.zzm-btn` `.zzm-card` `.zzm-input`）取，组件里禁止散写 `box-shadow`。一体感来自全站共用同一个光照模型
- ✓ 要：**按钮禁胶囊**：文字按钮一律圆角矩形（sm/md 8 · lg 12），999 胶囊只留给不可点的徽章

## 不要做的事

- ✗ 不要：鲜艳纯红。红必须是哑光的朱砂 / 印泥色，而且用量极少
- ✗ 不要：营销优先的首屏：大 Hero、多个 CTA、社交证明横幅。第一眼必须是学习内容本身
- ✗ 不要：奶油色、米色暖纸底。白就是中性白，不偏暖
- ✗ 不要：打卡中断、红点焦虑这类胁迫式活跃机制。地图只照亮位置，不制造焦虑
- ✗ 不要：模糊背景（backdrop-filter）。性能代价大，全域禁用
- ✗ 不要：网络字体。系统字体就是这套系统的一部分

## 无障碍

- 正文对比度达到 WCAG AA（≥ 4.5:1）。
- 全站尊重 `prefers-reduced-motion`：开屏降级为静帧，动画与过渡时长压到 0.01ms。
- 键盘可达：焦点可见，统一为朱色光晕 `0 0 0 3px rgba(166,64,47,.2)`。
- 红色只做冗余信号：同时有图标或文字，不单靠颜色传达意思。

## 跨项目复用：移植骨，不移植皮

这套系统诞生在「纸·墨·朱」网页课程站里。带到别的产品时：

- **可以直接搬**：间距梯、控件高度梯、圆角梯、细线三档、五层光照模型的结构。
- **要重新标定**：品牌朱 `#A6402F` 和纸面 `#F6F6F4` 属于课程站的身份；微拟物凸键的强度在网页上成立，搬进 macOS 原生窗口会显旧，保留五层结构、把幅度降一个数量级。
- **深色界面**：顶部反光要从 `rgba(255,255,255,.88)` 左右降到 `.055` 左右——深底上任何高于 .1 的白线都会变成刺眼亮边；投影要加深。

---

上一页：[给 Agent 用](https://ui.zhaozimin.cn/start/for-agents.md) · 下一页：[色彩](https://ui.zhaozimin.cn/foundations/color.md) · 全站目录：https://ui.zhaozimin.cn/llms.txt