OMS_H5/docs/ui-mockups/README.md

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