# Microi 设计模式库

本文件是 Microi.UI 的内部设计知识库。它把成熟数字产品中反复有效的构图、流程、动效和设计系统方法统一为 Microi 自有规则；不得在成品、类名、文案或资源中保留外部品牌痕迹。

## 目录

1. [模式选择](#模式选择)
2. [品牌叙事](#品牌叙事)
3. [真实产品流程](#真实产品流程)
4. [趋势构图](#趋势构图)
5. [沉浸互动](#沉浸互动)
6. [动态首屏](#动态首屏)
7. [数据工作台](#数据工作台)
8. [组合与验收](#组合与验收)

## 模式选择

先用一句话定义页面首要任务，再选一个主模式。页面不能同时拥有两个互相竞争的视觉中心。

| 页面目标 | 主模式 | 第一屏必须出现 | 常见误区 |
| --- | --- | --- | --- |
| 解释品牌、产品或新能力 | 品牌叙事 | 价值主张、产品对象、主 CTA、信任证明 | 只有大标题和装饰背景 |
| 完成登录、购买、预约、设置等任务 | 真实产品流程 | 当前任务、必要输入、进度、主要动作 | 为了好看打乱操作顺序 |
| 内容、作品、活动或创意展示 | 趋势构图 | 明确主题、主视觉、可扫读分类 | 把多种潮流效果叠在一起 |
| 产品体验需要空间感和互动反馈 | 沉浸互动 | 可操作对象、静态降级、退出/继续路径 | WebGL 覆盖正文或阻塞首屏 |
| 首秒需要建立记忆点 | 动态首屏 | 先可读的标题和 CTA，再出现装饰动效 | 动画先于内容、按钮不可用 |
| 管理、分析、运营和调度 | 数据工作台 | 2-4 个核心指标、待办、异常、主动作 | 彩虹图表、卡片过多、信息平权 |

选择后填写：页面目标、用户角色、主模式、辅助能力、视觉锚点、主动作、最大宽度、栅格、字体层级、主题、状态矩阵、动效预算、移动端重排和验收截图。

### 用具体隐喻定义气质

宽泛形容词不能直接指导实现。把“高级、现代、极简、科技”收敛成一个可以推导规则的具体隐喻，并同时写出它排除什么：

| 具体隐喻 | 可推导规则 | 明确排除 |
| --- | --- | --- |
| 安静的专业工作台 | 中性色表面、细边框、四列可读卡片、紧凑内部间距、宽松区块留白 | 大面积字母占位、彩虹渐变、所有按钮同权 |
| 温暖的手工纸张 | 暖底、自然低饱和色、柔和圆角、轻触感阴影 | 冷硬霓虹、尖锐切角、持续发光 |
| 夜间发光仪表舱 | 深色分层、少量青蓝紫状态光、清晰数字层级、短促状态动效 | 大面积炫光、随机彩色图表、低对比正文 |
| 雾感通透界面 | 灰白低彩、细线、轻透明表面、大留白、慢速淡入 | 厚重投影、不透明色块堆叠、过度模糊 |

先写“用户任务、主情绪、具体隐喻、三条应当、三条禁止”，再选择 token 与组件。完整双层契约见 [mci-design-contract.md](mci-design-contract.md)。

## 品牌叙事

### 首屏结构

1. 顶部导航只保留 4-6 个高价值入口，主 CTA 放在最右侧。
2. 标题先表达结果，再说明产品名；桌面通常 48-72px，移动端 34-44px，行宽控制在 8-13 个汉字或 9-14 个英文单词。
3. 副标题回答“给谁、解决什么、怎样不同”，宽度不超过标题的 80%。
4. 主 CTA 与次 CTA 语义明确：开始使用/立即体验是主动作，查看文档/观看演示是次动作。
5. 右侧或背景必须出现真实产品对象：界面、设备、场景、数据、人物或可操作模型，不能只放抽象光球。
6. 首屏下沿给出下一段提示：可信数字、客户/能力证明、滚动线索或内容预览。

### 叙事节奏

- 第一段：问题与结果；第二段：核心机制；第三段：真实场景；第四段：证据；第五段：再次行动。
- 每段只承担一个论点。滚动触发只改变一个主变量，例如视角、进度、亮度或对象状态。
- 复杂故事使用粘性舞台加分段文案；移动端降级为普通纵向卡片，不强制保留长距离 sticky。
- 产品截图、数字和客户证据优先于形容词。无真实数据时使用明确标注的示例数据。

### 视觉规则

- 采用 12 列桌面栅格和 4 列移动栅格；内容上限通常 1180-1320px。
- 一个页面只保留一个主色和一个强调色，装饰色不能抢占语义状态色。
- 大标题可使用紧字距，但正文必须保持舒适行高；中文正文建议 1.75-1.9。
- 图片与文本必须形成明暗或尺度对比，避免左右两边都很重。

## 真实产品流程

产品界面从任务链而不是单张页面出发。先画出入口、输入、校验、处理中、成功、失败、恢复和退出，再设计每一屏。

### 通用状态矩阵

| 状态 | 必须包含 |
| --- | --- |
| 初始 | 任务说明、最少输入、主动作、帮助入口 |
| 输入中 | 即时格式反馈、保留输入、键盘/焦点顺序 |
| 提交中 | 按钮 loading、禁止重复提交、可理解文案 |
| 成功 | 结果摘要、下一步、可返回位置 |
| 可恢复错误 | 原输入、具体原因、重试动作 |
| 不可恢复错误 | 安全说明、替代路径、联系/返回入口 |
| 权限不足 | 缺少的权限、申请方式、不会丢失的内容 |
| 空数据 | 为什么为空、如何创建第一条、示例价值 |

### 信息密度

- 每屏只突出一个主动作。危险动作与主动作不能使用相同视觉权重。
- 表单默认按任务分段，字段少时直接平铺；步骤超过 3 个或有强校验时显示明确进度。
- 关键说明放在动作附近，不把风险、续费、隐私或取消条件埋进页脚。
- 列表卡片必须包含对象身份、状态、关键元数据、时间和可预期的主操作。
- 弹窗用于短决策；超过三个字段、含上传/联动/表格/步骤时使用独立页面或抽屉。

完整流程见 [product-flow-recipes.md](product-flow-recipes.md)。

## 趋势构图

趋势只能服务内容，不能成为页面目标。采用“结构固定、媒介可变”的方式：先确定栅格、层级和操作，再替换色彩、字体、图像或动效。

### 可用构图语法

- **编辑式网格**：大标题、细分隔线、编号、跨列图像；适合内容、案例和活动。
- **安静产品化**：浅中性色、紧凑卡片、细边框、少阴影；适合 SaaS、工具、后台。
- **深色指挥中心**：暗背景、少量高饱和状态色、密集但清晰的数据；适合监控和 AI 工具。
- **暖色生活方式**：低饱和暖底、真实照片、柔和圆角、自然语言；适合生活与消费应用。
- **高对比创意**：大字号、单一强色、错位网格、几何形；适合创意展示，不能用于高频录入页。
- **材质化展示**：纸张、玻璃、金属或柔光纹理只作为局部媒介，必须提供纯色降级。

### 组合约束

- 同屏最多两种字号跨度、两种圆角家族和三层阴影。
- 8px 间距体系为默认；4px 用于微间距，24/32/48px 用于区域层级。
- 图像比例固定并按内容选择 `cover` 或 `contain`，列表内不混用随机比例。
- 任何装饰线、编号、英文 eyebrow 都必须帮助分组或定位，不能只为“显得高级”。

## 沉浸互动

沉浸效果只应占据 Hero、产品舞台或独立展示区域。正文、表单、表格和可访问导航必须保持普通 DOM。

### 三层模型

1. 内容层：标题、按钮、表单和导航，永远可访问、可选择、可键盘操作。
2. 互动层：产品模型、Canvas/WebGL、指针反馈，失败时可移除。
3. 氛围层：网格、渐变、光影或静态海报，不接收指针事件。

### 降级顺序

完整互动 -> 降低粒子/分辨率/帧率 -> 静态海报加轻微 CSS 动效 -> 纯色或渐变背景。`prefers-reduced-motion`、低性能设备、后台标签页和省电模式应自动进入较低等级。

### 交互规则

- 鼠标跟随位移不超过容器尺寸的 2%-4%，移动端不模拟鼠标跟随。
- 滚动驱动必须有开始、完成和回滚边界；离开视口后暂停渲染。
- 互动对象不能遮挡 CTA；Canvas 设置 `pointer-events:none` 时，真实操作放在 DOM。
- 加载失败不能留下黑屏，必须在 1-2 秒内显示静态占位或骨架。

完整性能与媒体预算见 [motion-and-media.md](motion-and-media.md)。

## 动态首屏

首屏第一目标是让用户在动画开始前也能读懂页面。

### 建议时间线

- 0-120ms：背景和布局稳定，避免白屏。
- 80-320ms：品牌标识与标题淡入上移。
- 180-460ms：副标题和 CTA 出现，按钮立即可用。
- 320-760ms：产品对象或主视觉进入。
- 600-1200ms：次要卡片、指标和装饰错落出现。
- 1200ms 后：只保留低振幅停留动效，停止大范围位移。

### 运动语法

- 每页选一个主方向：上浮、横向揭示、缩放聚焦、遮罩擦除或深度推进。
- 主元素时长 260-420ms；微交互 140-220ms；装饰循环至少 4 秒且振幅小。
- CTA hover/pressed 必须独立于背景动画；动画停止后所有操作仍可用。
- 不自动播放有声视频，不用大面积持续 blur，不在移动端保留复杂背景视频。

## 数据工作台

- 第一屏先展示 2-4 个高信号指标、待处理事项和异常，不把所有统计平铺成同权卡片。
- 指标包含当前值、比较基准、方向和时间范围；单独一个大数字不能表达趋势。
- 图表颜色固定语义：主系列、对比系列、成功、警告、危险、中性，不能每张图随机配色。
- 表格默认提供搜索、关键筛选、排序、分页、列可读性和空/错/加载状态。
- 高密度页面减少阴影和圆角，依靠间距、分隔线、对齐和字号建立层级。
- 移动端先展示摘要和待办，复杂图表进入详情；禁止把桌面大表硬缩进手机。

## 组合与验收

### 推荐组合

- 官网：品牌叙事 + 动态首屏 + 设计契约。
- C 端应用：真实产品流程 + 暖色/安静构图 + 轻动效。
- SaaS 工具：真实产品流程 + 安静产品化 + 数据工作台。
- 互动产品展示：品牌叙事 + 沉浸互动，必须有静态降级。
- 数据中心：数据工作台 + 深色指挥中心，动效只表达状态变化。

### 截图矩阵

至少生成 1440/1920 桌面、390 移动、亮色、暗色以及相关的加载、空、错误、成功、权限状态。检查首屏重心、网格对齐、文字对比度、按钮居中、横向滚动、键盘焦点、安全区和 `prefers-reduced-motion`。

### 完成定义

构建通过不等于 UI 完成。只有真实内容与全部状态可操作、桌面和移动截图通过、控制台无错误、外部资源失败有降级、动效关闭后页面仍完整，才算完成。