# 招聘试题定制平台 · 手机 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 + 数据库 + 算法）

统一成一份完整的课程项目系统设计报告。