95 lines
2.6 KiB
Markdown
95 lines
2.6 KiB
Markdown
# EasyFlow 设计文档索引
|
|
|
|
本目录用于沉淀 EasyFlow 的长期设计资产，作为产品、设计、前端共同维护的正式知识库。
|
|
|
|
当前整体方向：
|
|
|
|
- 以 `冷静智能` 为主题核心
|
|
- 默认以 Apple HIG 作为第一视觉与交互参照，再用 Google Material Design 3 补足系统化落地
|
|
- 目标是让 EasyFlow 从传统表单式管理系统视觉中走出来，成为简约、现代、富有活力的工作台
|
|
|
|
## 文档清单
|
|
|
|
### 1. 产品主题与总规范
|
|
|
|
- [easyflow-product-design-spec.md](./easyflow-product-design-spec.md)
|
|
|
|
适用场景：
|
|
|
|
- 统一产品主题和体验方向
|
|
- 定义品牌气质、色彩哲学、UI 风格、交互哲学与三端一致性
|
|
- 定义 EasyFlow 如何摆脱传统后台式视觉，建立现代工作台语言
|
|
|
|
### 2. Design Tokens 草案
|
|
|
|
- [design-tokens-draft.md](./design-tokens-draft.md)
|
|
|
|
适用场景：
|
|
|
|
- 设计 Token 规划
|
|
- 前端变量命名、主题映射与公共层沉淀
|
|
- 浅色 / 深色主题统一策略
|
|
- 导航骨架材质、表面层级、品牌色角色与现代工作台表达
|
|
|
|
### 3. 基础组件规范
|
|
|
|
- [component-guidelines.md](./component-guidelines.md)
|
|
|
|
适用场景：
|
|
|
|
- 按钮、输入框、卡片、表格、抽屉、弹窗、标签等组件统一
|
|
- 页面工具栏、筛选区、空状态等常见组合层设计
|
|
- 列表页、导航骨架、工具栏和工作台组合层的现代化设计
|
|
|
|
### 4. 交互与动效规范
|
|
|
|
- [interaction-motion-guidelines.md](./interaction-motion-guidelines.md)
|
|
|
|
适用场景：
|
|
|
|
- 表单交互、异步反馈、危险操作、状态页
|
|
- 页面切换、面板出现、微交互、动效时长与缓动策略
|
|
- 提升系统“活力”和“流动感”，避免僵硬表单后台交互
|
|
|
|
## 使用建议
|
|
|
|
### 产品 / 设计讨论
|
|
|
|
优先阅读：
|
|
|
|
1. `easyflow-product-design-spec.md`
|
|
2. `component-guidelines.md`
|
|
3. `interaction-motion-guidelines.md`
|
|
|
|
### 前端实现
|
|
|
|
优先阅读：
|
|
|
|
1. `easyflow-product-design-spec.md`
|
|
2. `design-tokens-draft.md`
|
|
3. `component-guidelines.md`
|
|
4. `interaction-motion-guidelines.md`
|
|
|
|
### 主题或视觉重构
|
|
|
|
优先阅读：
|
|
|
|
1. `easyflow-product-design-spec.md`
|
|
2. `design-tokens-draft.md`
|
|
3. `component-guidelines.md`
|
|
|
|
## 与 easyflow-ui skill 的关系
|
|
|
|
本目录是 EasyFlow 的正式设计知识库。
|
|
|
|
`.codex/skills/easyflow-ui/` 是任务执行入口，负责：
|
|
|
|
- 告诉后续 UI / 前端任务先读哪些文档
|
|
- 约束改动应该落在哪一层
|
|
- 提供执行流程、自检清单与交付要求
|
|
|
|
两者关系如下：
|
|
|
|
- `docs/design/`：完整规范与长期资产
|
|
- `.codex/skills/easyflow-ui/`：高频规则、任务流程、引用入口
|