morning-start 技术设计与UI细化
开发前的"最后准备"，确保地基稳固。
核心模块
UI/UX设计 → 技术架构设计 → 接口文档编写
1. UI/UX 设计细化
设计输出物清单
| 输出物 | 说明 | 接收方 |
|---|---|---|
| 高保真设计稿 | 标注颜色、字体、间距 | 前端开发 |
| 切图资源 | 按分辨率/设备分类 | 前端开发 |
| 交互说明 | 动画、转场、状态变化 | 前端开发 |
| 原型图 | 流程和页面跳转 | 全团队 |
设计评审checklist
- 关键页面是否覆盖所有状态（默认、hover、disabled、loading、空数据）
- 移动端适配是否考虑
- 交互反馈是否明确
2. 技术架构设计
数据库设计（ER图）
实体命名规范：
- 表名：t_模块名（英文下划线分隔）
- 字段：f_字段名
- 主键：id
- 外键：fk_关联表名
示例：
t_order (订单表)
├── id (主键)
├── f_order_no (订单号)
├── f_user_id (用户ID，外键)
├── f_total_amount (总价)
├── f_status (状态)
└── f_created_at (创建时间)
技术选型决策表
| 层级 | 选项 | 选型 | 理由 |
|---|---|---|---|
| 前端框架 | React/Vue/Angular | Vue | 学习成本低生态好 |
| 后端框架 | SpringBoot/Express | SpringBoot | 团队熟悉 |
| 数据库 | MySQL/PostgreSQL | MySQL | 轻量易维护 |
| 缓存 | Redis/Memcached | Redis | 支持持久化 |
3. API 接口文档
RESTful API规范
命名规范：
- GET /users 获取用户列表
- GET /users/:id 获取单个用户
- POST /users 创建用户
- PUT /users/:id 更新用户
- DELETE /users/:id 删除用户
接口文档模板
{
"apiName": "创建订单",
"url": "/api/orders",
"method": "POST",
"request": {
"userId": "string (必填) 用户ID",
"items": "array (必填) 订单商品列表",
"remark": "string (可选) 备注"
},
"response": {
"code": "200 表示成功",
"data": {
"orderId": "string 订单ID",
"totalAmount": "number 总价"
}
}
}
使用场景
- 开发启动前的技术评审
- 前后端并行开发前的接口约定
- 技术方案选型讨论
关键产出
- 数据库ER图/表结构文档
- 技术选型决策表
- API接口文档
- UI设计稿评审记录