418 lines
14 KiB
Markdown
418 lines
14 KiB
Markdown
# 招聘试题定制平台 · 手机 APP 页面与 Figma Prompt 设计
|
||
|
||
> 面向「业务场景 1：基于手机的招聘代理平台」，这里设计两端：
|
||
>
|
||
> * **应聘者 App（Candidate App）**
|
||
> * **招聘企业 HR App（HR App）**
|
||
> 平台管理员一般用 Web 后台，这里不再设计移动端。
|
||
|
||
---
|
||
|
||
## 1. 手机 App 页面信息架构
|
||
|
||
### 1.1 应聘者 App（Candidate App）
|
||
|
||
> 典型用户路径：登录 → 浏览岗位 → 参加考试 → 查看结果 → 反馈试题。
|
||
|
||
1. **C0 欢迎 / 登录 / 注册页**
|
||
|
||
* Tab：登录 / 注册
|
||
* 支持第三方登录（可选）
|
||
|
||
2. **C1 岗位列表页（职位发现）**
|
||
|
||
* 顶部搜索栏
|
||
* 筛选条件：技术方向、城市、经验要求等
|
||
* 卡片：岗位名称、公司名、标签、一个「查看详情 / 去测试」按钮
|
||
|
||
3. **C2 岗位详情 & 考试入口页**
|
||
|
||
* 展示岗位描述、能力要求、薪资范围（可选）
|
||
* 显示「本岗位在线测试信息」（题量、时长、截止时间）
|
||
* 主按钮：「开始在线测试」或「继续测试」
|
||
|
||
4. **C3 我的考试列表页**
|
||
|
||
* Tab：全部 / 未开始 / 进行中 / 已完成
|
||
* 每条：岗位名、考试批次、状态、截止时间、入口按钮
|
||
|
||
5. **C4 在线考试页（核心）**
|
||
|
||
* 顶部固定栏：返回按钮 + 考试标题 + 倒计时
|
||
* 中部：当前题目
|
||
|
||
* 题号、题型、分值
|
||
* 题干 + 附件区域
|
||
* 答题控件（单选/多选/文本/代码文本框等）
|
||
* 底部：
|
||
|
||
* 题目导航滑动条（题号圆点，不同状态颜色）
|
||
* 上一题 / 下一题按钮
|
||
* 悬浮主按钮：提交试卷（弹出确认对话框）
|
||
|
||
6. **C5 考试结果页**
|
||
|
||
* 大号分数 + 通过/未通过状态
|
||
* 子卡片：总分、平均分、排名/百分位（可选）
|
||
* 能力维度雷达图 / 条形图（可选）
|
||
* 按钮：「查看详细解析」/「查看题目列表」
|
||
|
||
7. **C6 题目解析与反馈页**
|
||
|
||
* 顶部：题目 + 正确答案 + 你的答案 + 解析
|
||
* 底部：反馈卡片
|
||
|
||
* 点评：题目是否清晰 / 难度是否合适（星级/表情）
|
||
* 文本输入框：补充意见
|
||
* 提交按钮
|
||
|
||
8. **C7 个人中心 / 设置页**
|
||
|
||
* 基本信息、技能标签展示
|
||
* 考试历史入口
|
||
* 通知设置、隐私、退出登录
|
||
|
||
---
|
||
|
||
### 1.2 招聘企业 HR App（HR App）
|
||
|
||
> 偏「移动监控 & 轻量管理」，重分析 / 复盘 / 小改动，而不是在手机上做复杂配置。
|
||
|
||
1. **H0 HR 登录 / 切换企业页**
|
||
|
||
* 登录、忘记密码
|
||
* （多租户时）选择企业/组织
|
||
|
||
2. **H1 HR 首页仪表盘**
|
||
|
||
* 顶部：公司名称 + 通知图标
|
||
* 核心指标卡片（纵向列表）：
|
||
|
||
* 今日参加考试人数
|
||
* 本周通过率
|
||
* 活跃岗位数
|
||
* 下方：
|
||
|
||
* 最近考试列表（横向卡片轮播）
|
||
* 「有问题的题目」提醒入口
|
||
|
||
3. **H2 岗位列表页**
|
||
|
||
* 搜索 + 筛选（状态：招聘中 / 暂停 / 已关闭）
|
||
* 岗位卡片：岗位名、级别、最近考试人数、通过率
|
||
* 右下角悬浮按钮：「新建岗位」（进入简化版编辑流程）
|
||
|
||
4. **H3 岗位详情页**
|
||
|
||
* 基本信息：岗位名称、级别、城市、要求技能标签
|
||
* 近期考试概览：最近 N 次考试的平均分/通过率
|
||
* 按钮：
|
||
|
||
* 查看全部考试
|
||
* 编辑岗位（跳 H4）
|
||
* 预览试卷配置（跳 H5）
|
||
|
||
5. **H4 岗位快速编辑页（移动简化版）**
|
||
|
||
* 可编辑字段：岗位名称、级别、标签、是否开放招聘等
|
||
* 考试策略部分仅支持选择已有策略，不在手机上做复杂编辑
|
||
* 底部：取消 / 保存 按钮
|
||
|
||
6. **H5 试卷预览页**
|
||
|
||
* 展示系统为该岗位生成的一套样卷
|
||
* 按题型分组（单选、多选、编程等）
|
||
* 可「锁定/解锁」某些题目（锁定后 PC 端配置时保留）
|
||
|
||
7. **H6 考试结果分析页（移动版）**
|
||
|
||
* 顶部筛选条：岗位下拉 + 考试批次 + 时间区间
|
||
* 上半部分：KPI 卡片（平均分、通过率、参加人数）
|
||
* 下半部分：
|
||
|
||
* 简化图表（柱状图/折线图）
|
||
* 题目正确率列表（Top 问题 / Bottom 问题）
|
||
|
||
8. **H7 题目质量列表页**
|
||
|
||
* 列表项：题干摘要、技能标签、质量分、使用次数、状态
|
||
* 支持按照质量分排序/筛选
|
||
* 点击进入 H8
|
||
|
||
9. **H8 题目质量详情页**
|
||
|
||
* 展示具体题目内容、标准答案、解析
|
||
* 统计：使用次数、正确率、区分度、反馈分
|
||
* 操作按钮：标记“待修改”、标记“建议淘汰”
|
||
|
||
10. **H9 HR 个人设置页**
|
||
|
||
* 个人信息、企业信息简略查看
|
||
* 通知开关
|
||
* 退出登录
|
||
|
||
---
|
||
|
||
## 2. 手机端关键页面草图（文字线框）
|
||
|
||
### 2.1 C4 在线考试页（Candidate Exam）
|
||
|
||
屏幕：手机竖屏（iPhone 15 / 390×844）
|
||
|
||
* **顶部固定栏**
|
||
|
||
* 左：返回图标（←）
|
||
* 中：考试标题（单行，超出省略号）
|
||
* 右：倒计时（红色/醒目字体，例如「53:21」）
|
||
|
||
* **中部内容区（Scroll）**
|
||
|
||
* 题目信息行：
|
||
|
||
* 「第 3 题」+ 标签「单选」「3 分」
|
||
* 主卡片：
|
||
|
||
* 题干文本（可多行）
|
||
* 若有图片/代码块，在题干下方单独容器显示
|
||
* 答题控件：
|
||
|
||
* 单选：Radio 列表，每个选项为卡片式按钮
|
||
* 多选：Checkbox 列表
|
||
* 填空/主观题：多行文本输入框
|
||
|
||
* **底部固定区域**
|
||
|
||
* 上半：题号导航（水平滑动）
|
||
|
||
* 一排圆形按钮：1 2 3 4 5 …
|
||
* 已答：填充主色；未答：边框灰色；标记：角落有小点
|
||
* 下半：底部按钮栏
|
||
|
||
* 左按钮：「上一题」（次要）
|
||
* 中按钮：标记/取消标记
|
||
* 右按钮：「下一题」（主要）
|
||
* 右上角悬浮按钮或顶部菜单中放「交卷」按钮。
|
||
|
||
---
|
||
|
||
### 2.2 C5 结果页（Candidate Result）
|
||
|
||
* 顶部：大号分数（如「83 分」）+ 状态标签（绿色「通过」/ 红色「未通过」）
|
||
* 下方两列/纵向卡片：
|
||
|
||
* 卡片 1：考试信息（岗位名、日期、用时）
|
||
* 卡片 2：得分拆分（选择题分数、编程题分数等）
|
||
* 中部：简化图表/可视化（可在 Figma 中用假图表示）
|
||
* 底部按钮：
|
||
|
||
* 主按钮：「查看题目解析」
|
||
* 次按钮：「返回岗位列表」
|
||
|
||
---
|
||
|
||
### 2.3 H1 HR 首页仪表盘（Mobile）
|
||
|
||
* 顶部 AppBar：
|
||
|
||
* 左：企业 Logo/图标 + 公司名
|
||
* 右：通知铃铛 + 头像
|
||
|
||
* 主内容（纵向 Scroll）：
|
||
|
||
1. 指标卡片区域（左右滑动或纵向堆叠）：
|
||
|
||
* 今日参加考试人数
|
||
* 本周通过率
|
||
* 活跃岗位数
|
||
2. 模块「最近考试」：
|
||
|
||
* 卡片列表：岗位名 + 时间 + 参加人数 + 通过率
|
||
3. 模块「有问题的题目」：
|
||
|
||
* 小卡片：题干摘要 + “低正确率”“低反馈分”标签
|
||
* 点击跳转到 H7/H8
|
||
|
||
---
|
||
|
||
### 2.4 H6 HR 考试结果分析页（Mobile）
|
||
|
||
* 顶部筛选条（横向滚动）：
|
||
|
||
* 下拉：岗位
|
||
* 下拉：考试批次
|
||
* 日期选择按钮
|
||
* 「应用」按钮
|
||
|
||
* 主内容：
|
||
|
||
* KPI 卡片区域：平均分 / 通过率 / 参加人数（3 个小卡）
|
||
* 小图表区：
|
||
|
||
* 迷你折线图（七天平均分）
|
||
* 柱状图（分数段人数）
|
||
* 底部：考生列表（简化表格样式卡片）：
|
||
|
||
* 姓名、得分、提交时间、详情图标
|
||
|
||
---
|
||
|
||
## 3. Figma AI / Figma Make Prompt（手机 App 版本）
|
||
|
||
> 建议用英文 Prompt，让 Figma 的 AI 更稳定。下面提供：
|
||
> 1）一个「多屏手机 App Flow」总 prompt；
|
||
> 2）一个「单屏模板」，方便你逐屏生成。
|
||
|
||
---
|
||
|
||
### 3.1 全局样式片段（可直接粘在每个 prompt 前）
|
||
|
||
```text
|
||
Design a modern mobile app UI for a recruitment test platform called “SmartHire Test”.
|
||
|
||
Platform:
|
||
- iOS and Android, focus on iPhone 15 size (390 x 844) in portrait.
|
||
Visual style:
|
||
- Clean, professional, light theme.
|
||
- Primary color #2563EB (blue), neutral grays, lots of white space.
|
||
- Rounded corners (10–16px), soft shadows for cards.
|
||
- Use a standard mobile tab bar or bottom navigation where it makes sense.
|
||
Typography similar to SF Pro / Inter / Roboto.
|
||
```
|
||
|
||
---
|
||
|
||
### 3.2 多屏 Candidate & HR App Flow Prompt（推荐）
|
||
|
||
```text
|
||
You are designing a mobile app for a customizable recruitment test platform called “SmartHire Test”.
|
||
|
||
Use iPhone 15 portrait frames (390 x 844).
|
||
Apply a modern, clean, light theme with primary color #2563EB and rounded cards.
|
||
|
||
Create the following screens. Name each frame with the given screen name.
|
||
|
||
1. Screen: "C0 Candidate Welcome & Login"
|
||
- A welcome illustration or simple brand panel at the top.
|
||
- Tabs or segmented control for "Sign in" and "Sign up".
|
||
- Email and password fields, "Sign in" primary button, and "Forgot password" link.
|
||
- Optional third-party login buttons at the bottom.
|
||
|
||
2. Screen: "C1 Candidate Job List"
|
||
- Top app bar with logo "SmartHire Test" and a small profile avatar.
|
||
- Search bar at the top of the content.
|
||
- Horizontal chips for filters (e.g. Skills, City, Level).
|
||
- Vertical list of job cards: each card shows job title, company, tags, and a primary button "View details" or "Take test".
|
||
|
||
3. Screen: "C2 Candidate Job Detail"
|
||
- Job title, company, level, location at the top.
|
||
- Section for job description and required skills (tags).
|
||
- Section "Online test for this job" with chips indicating number of questions, duration, and difficulty.
|
||
- A primary CTA button at the bottom: "Start test" or "Continue test".
|
||
|
||
4. Screen: "C3 Candidate Exam List"
|
||
- Simple tab bar at the top for "All", "Active", "Completed".
|
||
- List items showing: job title, exam name, status badge, deadline, and a chevron or button to open the exam.
|
||
|
||
5. Screen: "C4 Candidate Online Exam"
|
||
- Fixed top bar with back arrow, exam title in the center, and a countdown timer on the right.
|
||
- Main scroll area:
|
||
- Row with "Question 3" label, pill badges for type (Single choice) and score (3 pts).
|
||
- Card with question text and optional image placeholder.
|
||
- Answer area: radio buttons or selection cards for options.
|
||
- Bottom fixed area:
|
||
- First row: horizontally scrollable question number chips (1, 2, 3, ...), with different states for answered / not answered / flagged.
|
||
- Second row: three buttons "Previous", "Flag", "Next" (primary on "Next").
|
||
- A secondary icon or button to "Submit exam" that opens a confirmation dialog.
|
||
|
||
6. Screen: "C5 Candidate Result"
|
||
- Large score display at the top (e.g., "83/100") and a badge indicating Pass or Fail.
|
||
- Summary cards for "Total score", "Average score", "Percentile" or "Rank".
|
||
- A simple chart area (score distribution or skill radar) using placeholder graphics.
|
||
- A section "Question review" with a list of questions and icons for correct / incorrect.
|
||
- Bottom primary button: "View detailed explanations".
|
||
|
||
7. Screen: "C6 Candidate Question Review & Feedback"
|
||
- Top shows the current question text, correct answer, and the candidate's answer.
|
||
- Below, a small explanation text block.
|
||
- At the bottom, a feedback card:
|
||
- Star rating or 1–5 scale for "Clarity" and "Difficulty".
|
||
- A multiline text field for additional comments.
|
||
- Primary button "Submit feedback".
|
||
|
||
8. Screen: "H0 HR Login"
|
||
- Simple login screen for HR users, consistent style with candidate login but with "HR" emphasis in the title.
|
||
|
||
9. Screen: "H1 HR Home Dashboard"
|
||
- Top app bar with company name and notification icon.
|
||
- A vertical stack of KPI cards: "Today’s test takers", "This week pass rate", "Active positions".
|
||
- Section "Recent exams": small cards with job title, date, participants, pass rate.
|
||
- Section "Problematic questions": list items with a short question snippet and a warning badge.
|
||
|
||
10. Screen: "H2 HR Job List"
|
||
- List of job cards with job title, level, status badge, and small stats (last exam participants / pass rate).
|
||
- Floating action button at the bottom-right: "+" to create a new job.
|
||
|
||
11. Screen: "H3 HR Job Detail"
|
||
- Job header with title, level, and status tag.
|
||
- Sections:
|
||
- Basic info (location, department).
|
||
- Required skills (tags).
|
||
- Latest exam summary (average score, pass rate).
|
||
- Buttons at the bottom: "View exams", "Quick edit".
|
||
|
||
12. Screen: "H6 HR Exam Analytics"
|
||
- Filter bar at the top with dropdowns for job and exam batch and a date-range pill.
|
||
- KPI cards for average score, pass rate, number of candidates.
|
||
- Simple mini chart (histogram or line chart) to show score distribution.
|
||
- List of candidate results as cards (name, score, submitted time, chevron for details).
|
||
|
||
13. Screen: "H7 HR Question Quality List"
|
||
- Search bar and filter chips (by skill, difficulty, quality score).
|
||
- Vertical list of question items: each with a short question text, skill tag, usage count, quality score, and status.
|
||
- Tapping an item leads to H8.
|
||
|
||
14. Screen: "H8 HR Question Quality Detail"
|
||
- Top: full question text and answer options.
|
||
- Below: a stats card with usage count, average score, correct rate, discrimination, feedback score.
|
||
- Actions at the bottom: outlined button "Mark for review", primary button "Suggest deprecation".
|
||
|
||
Across all screens:
|
||
- Use consistent mobile navigation and components.
|
||
- Use clear hierarchy, spacing, and tappable elements sized for touch.
|
||
- Create a simple prototype flow: candidate screens connected by a logical path, and HR screens connected separately.
|
||
```
|
||
|
||
---
|
||
|
||
### 3.3 单屏 Mobile Prompt 模板（可按需复用）
|
||
|
||
```text
|
||
Design a single mobile screen for the “SmartHire Test” app.
|
||
|
||
Target device:
|
||
- iPhone 15 in portrait (390 x 844).
|
||
|
||
Visual style:
|
||
- Modern, clean, light theme.
|
||
- Primary color #2563EB, neutral gray background, rounded cards.
|
||
- Typography similar to SF Pro / Inter.
|
||
|
||
Screen name: {{SCREEN_NAME}}
|
||
|
||
Screen description:
|
||
{{DETAILED_DESCRIPTION_HERE}}
|
||
|
||
Use clear sections and card components. Make all interactive elements touch friendly (at least 44x44 points).
|
||
```
|
||
|
||
示例：如果你只想生成「C4 Candidate Online Exam」这一屏，就把 `{{SCREEN_NAME}}` 换掉，然后写一段 description（你可以直接用我上面 C4 的说明）。
|
||
|
||
---
|
||
|
||
如果你确认这套 **手机端页面列表 + 草图 + Figma Prompt** 没问题，我可以下一步帮你把：
|
||
|
||
-「Web + App 前端设计章节」
|
||
|
||
* 和前面系统设计（UML + 数据库 + 算法）
|
||
|
||
统一成一份完整的课程项目系统设计报告。 |