129 lines
2.6 KiB
Markdown
129 lines
2.6 KiB
Markdown
# UI原型设计
|
|
|
|
## 1. 设计目标
|
|
|
|
- 界面适合毕业设计展示和答辩演示
|
|
- 页面层次清楚，重点内容突出
|
|
- 图表、卡片和表单布局统一
|
|
- 兼顾桌面端展示效果与基本响应式适配
|
|
|
|
## 2. 整体设计风格
|
|
|
|
- 左侧为固定导航栏
|
|
- 右侧为主内容区域
|
|
- 采用卡片化布局组织统计、图表和预测内容
|
|
- 通过浅色/深色模式增强视觉表现
|
|
- 侧边栏支持折叠，提高界面灵活性
|
|
|
|
## 3. 页面原型说明
|
|
|
|
### 3.1 数据概览页
|
|
|
|
页面组成：
|
|
|
|
- 顶部页面头图
|
|
- 第一行 KPI 卡片
|
|
- 第二行趋势图与星期分布图
|
|
- 第三行原因分布与季节分布图
|
|
|
|
展示重点：
|
|
|
|
- 让评审快速看到系统具备总体统计与可视化能力
|
|
|
|
### 3.2 影响因素分析页
|
|
|
|
页面组成：
|
|
|
|
- 页面头图
|
|
- 特征重要性横向条形图
|
|
- 相关性热力图
|
|
- 群体对比柱状图
|
|
|
|
展示重点：
|
|
|
|
- 关键因素主次关系
|
|
- 多群体差异分析能力
|
|
|
|
### 3.3 `JD-R` 理论分析页
|
|
|
|
页面组成：
|
|
|
|
- 页面头图
|
|
- 维度雷达图或统计卡片
|
|
- 工作倦怠与工作投入分布图
|
|
- 双路径分析展示区
|
|
- `SHAP` 全局解释切换区
|
|
|
|
展示重点：
|
|
|
|
- 回答“为什么员工会缺勤”
|
|
- 将心理学理论与数据分析结果打通
|
|
|
|
### 3.4 缺勤预测页
|
|
|
|
页面组成：
|
|
|
|
- 页面头图
|
|
- 左侧多卡片输入区
|
|
- 右侧预测结果与风险说明卡片
|
|
- 模型对比卡片
|
|
- `SHAP` 局部解释卡片
|
|
|
|
展示重点：
|
|
|
|
- 核心输入突出
|
|
- 结果展示直观
|
|
- 单次预测具备可解释性
|
|
|
|
### 3.5 员工画像页
|
|
|
|
页面组成：
|
|
|
|
- 页面头图
|
|
- 雷达图卡片
|
|
- 聚类结果表格卡片
|
|
- 散点图卡片
|
|
|
|
展示重点：
|
|
|
|
- 呈现人群分层能力
|
|
- 用“典型群体”增强答辩展示效果
|
|
|
|
## 4. 导航设计
|
|
|
|
- 数据概览
|
|
- 影响因素
|
|
- `JD-R` 分析
|
|
- 缺勤预测
|
|
- 员工画像
|
|
|
|
导航要求：
|
|
|
|
- 显示图标与文字
|
|
- 支持侧边栏折叠
|
|
- 折叠后保留图标
|
|
|
|
## 5. 视觉元素设计
|
|
|
|
- KPI 使用大数字卡片
|
|
- 图表外层统一卡片边框和圆角
|
|
- 表单采用卡片分组，避免长表单垂直堆叠
|
|
- 预测结果使用重点色突出
|
|
- 风险等级使用颜色标签区分
|
|
- `JD-R` 维度与 `SHAP` 解释使用具备区分性的色彩编码
|
|
|
|
## 6. 交互设计
|
|
|
|
- 支持模型自动选择
|
|
- 支持查看模型对比
|
|
- 支持查看 `SHAP` 全局/局部解释
|
|
- 支持侧边栏折叠
|
|
|
|
## 7. 答辩展示建议
|
|
|
|
- 先展示数据概览页，说明系统整体能力
|
|
- 再进入影响因素页解释关键影响因素
|
|
- 随后展示 `JD-R` 页面回答“为什么缺勤”
|
|
- 然后演示预测页输入、结果与 `SHAP` 解释
|
|
- 最后展示员工画像页总结系统分析能力
|