# UI原型设计

## 1. 设计目标

- 界面适合毕业设计展示和答辩演示
- 页面层次清楚，重点内容突出
- 图表、卡片和表单布局统一
- 兼顾桌面端展示效果与基本响应式适配

## 2. 整体设计风格

- 左侧为固定导航栏
- 右侧为主内容区域
- 采用卡片化布局组织统计、图表和预测内容
- 通过浅色/深色模式增强视觉表现
- 侧边栏支持折叠，提高界面灵活性

## 3. 页面原型说明

### 3.1 数据概览页

页面组成：

- 顶部页面头图
- 第一行 KPI 卡片
- 第二行趋势图与星期分布图
- 第三行原因分布与季节分布图

展示重点：

- 让评审快速看到系统能做总体统计与可视化

### 3.2 影响因素分析页

页面组成：

- 页面头图
- 特征重要性横向条形图
- 相关性热力图
- 群体对比柱状图

展示重点：

- 模型可解释性
- 关键因素主次关系

### 3.3 缺勤预测页

页面组成：

- 页面头图
- 左侧多卡片输入区
- 右侧结果与风险说明整合卡片
- 模型对比卡片

展示重点：

- 界面紧凑、核心输入突出
- 结果展示直观
- 风险说明清晰易讲解

### 3.4 员工画像页

页面组成：

- 页面头图
- 雷达图卡片
- 聚类结果表格卡片
- 散点图卡片

展示重点：

- 呈现人群分层能力
- 用“典型群体”增强答辩展示效果

## 4. 导航设计

- 数据概览
- 影响因素
- 缺勤预测
- 员工画像

导航要求：

- 显示图标与文字
- 支持侧边栏折叠
- 折叠后保留图标

## 5. 视觉元素设计

- KPI 使用大数字卡片
- 图表外层统一卡片边框和圆角
- 表单采用卡片分组，避免长表单垂直堆叠
- 预测结果使用重点色突出
- 风险等级使用颜色标签区分

## 6. 交互设计

- 支持模型自动选择
- 支持查看模型对比
- 支持深色模式切换
- 支持侧边栏折叠

## 7. 答辩展示建议

- 先展示数据概览页，说明系统整体能力
- 再进入影响因素页解释模型逻辑
- 然后演示缺勤预测页输入与结果
- 最后展示员工画像页总结系统分析能力