@microi.net/cli 5.8.4 → 5.8.6

package/skills/ui-design/references/design-pattern-library.md

@@ -1,184 +1,184 @@
-# 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 完成。只有真实内容与全部状态可操作、桌面和移动截图通过、控制台无错误、外部资源失败有降级、动效关闭后页面仍完整，才算完成。
+# 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 完成。只有真实内容与全部状态可操作、桌面和移动截图通过、控制台无错误、外部资源失败有降级、动效关闭后页面仍完整，才算完成。