72 lines
1.8 KiB
Markdown
72 lines
1.8 KiB
Markdown
# UI设计图存放目录
|
||
|
||
此目录用于存放项目相关的UI设计图和原型图。
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
ui-mockups/
|
||
├── README.md # 本文件
|
||
├── wireframes/ # 线框图
|
||
│ ├── list-page.png # 列表页面线框图
|
||
│ └── detail-page.png # 详情页面线框图
|
||
├── designs/ # 设计稿
|
||
│ ├── list-page.png # 列表页面设计稿
|
||
│ └── detail-page.png # 详情页面设计稿
|
||
├── prototypes/ # 交互原型
|
||
└── specifications/ # 设计规范
|
||
└── style-guide.md # 样式指南
|
||
```
|
||
|
||
## 设计要求
|
||
|
||
### 1. 移动端适配
|
||
- 屏幕宽度：375px - 414px
|
||
- 适配iPhone和Android主流设备
|
||
- 支持横竖屏切换
|
||
|
||
### 2. 微信小程序WebView适配
|
||
- 适配微信小程序导航栏高度
|
||
- 考虑安全区域（刘海屏等）
|
||
- 遵循微信小程序设计规范
|
||
|
||
### 3. 页面设计规范
|
||
|
||
#### 列表页面
|
||
- 顶部搜索栏
|
||
- 筛选条件（状态筛选）
|
||
- 工单卡片列表
|
||
- 下拉刷新、上拉加载更多
|
||
- 空状态提示
|
||
|
||
#### 详情页面
|
||
- 工单基本信息展示
|
||
- 产品信息列表
|
||
- 附件展示区域
|
||
- 审批历史时间线
|
||
- 底部审批操作按钮
|
||
|
||
### 4. 交互设计
|
||
- 页面切换动画
|
||
- 加载状态提示
|
||
- 操作反馈（成功/失败提示）
|
||
- 确认弹窗设计
|
||
|
||
### 5. 视觉设计
|
||
- 主色调：#1890ff（蓝色）
|
||
- 辅助色：#52c41a（成功绿）、#f5222d（错误红）
|
||
- 背景色：#f5f5f5
|
||
- 文字颜色：#333333（主要）、#666666（次要）、#999999（辅助）
|
||
|
||
## 文件命名规范
|
||
|
||
- 使用英文命名，单词间用连字符分隔
|
||
- 包含页面/组件名称和版本号
|
||
- 示例：`order-list-v1.0.png`、`approval-dialog-v2.1.png`
|
||
|
||
## 版本管理
|
||
|
||
每次设计更新时请：
|
||
1. 更新版本号
|
||
2. 在文件名中体现版本
|
||
3. 保留历史版本以便回溯 |