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. 保留历史版本以便回溯
|