招聘试题定制平台 · 手机 APP 页面与 Figma Prompt 设计

面向「业务场景 1：基于手机的招聘代理平台」，这里设计两端：

应聘者 App（Candidate App）

招聘企业 HR App（HR App） 平台管理员一般用 Web 后台，这里不再设计移动端。

1. 手机 App 页面信息架构

1.1 应聘者 App（Candidate App）

典型用户路径：登录 → 浏览岗位 → 参加考试 → 查看结果 → 反馈试题。

C0 欢迎 / 登录 / 注册页
- Tab：登录 / 注册
- 支持第三方登录（可选）
C1 岗位列表页（职位发现）
- 顶部搜索栏
- 筛选条件：技术方向、城市、经验要求等
- 卡片：岗位名称、公司名、标签、一个「查看详情 / 去测试」按钮
C2 岗位详情 & 考试入口页
- 展示岗位描述、能力要求、薪资范围（可选）
- 显示「本岗位在线测试信息」（题量、时长、截止时间）
- 主按钮：「开始在线测试」或「继续测试」
C3 我的考试列表页
- Tab：全部 / 未开始 / 进行中 / 已完成
- 每条：岗位名、考试批次、状态、截止时间、入口按钮
C4 在线考试页（核心）
- 顶部固定栏：返回按钮 + 考试标题 + 倒计时
- 中部：当前题目
  - 题号、题型、分值
  - 题干 + 附件区域
  - 答题控件（单选/多选/文本/代码文本框等）
- 底部：
  - 题目导航滑动条（题号圆点，不同状态颜色）
  - 上一题 / 下一题按钮
  - 悬浮主按钮：提交试卷（弹出确认对话框）
C5 考试结果页
- 大号分数 + 通过/未通过状态
- 子卡片：总分、平均分、排名/百分位（可选）
- 能力维度雷达图 / 条形图（可选）
- 按钮：「查看详细解析」/「查看题目列表」
C6 题目解析与反馈页
- 顶部：题目 + 正确答案 + 你的答案 + 解析
- 底部：反馈卡片
  - 点评：题目是否清晰 / 难度是否合适（星级/表情）
  - 文本输入框：补充意见
  - 提交按钮
C7 个人中心 / 设置页
- 基本信息、技能标签展示
- 考试历史入口
- 通知设置、隐私、退出登录

1.2 招聘企业 HR App（HR App）

偏「移动监控 & 轻量管理」，重分析 / 复盘 / 小改动，而不是在手机上做复杂配置。

H0 HR 登录 / 切换企业页
- 登录、忘记密码
- （多租户时）选择企业/组织
H1 HR 首页仪表盘
- 顶部：公司名称 + 通知图标
- 核心指标卡片（纵向列表）：
  - 今日参加考试人数
  - 本周通过率
  - 活跃岗位数
- 下方：
  - 最近考试列表（横向卡片轮播）
  - 「有问题的题目」提醒入口
H2 岗位列表页
- 搜索 + 筛选（状态：招聘中 / 暂停 / 已关闭）
- 岗位卡片：岗位名、级别、最近考试人数、通过率
- 右下角悬浮按钮：「新建岗位」（进入简化版编辑流程）
H3 岗位详情页
- 基本信息：岗位名称、级别、城市、要求技能标签
- 近期考试概览：最近 N 次考试的平均分/通过率
- 按钮：
  - 查看全部考试
  - 编辑岗位（跳 H4）
  - 预览试卷配置（跳 H5）
H4 岗位快速编辑页（移动简化版）
- 可编辑字段：岗位名称、级别、标签、是否开放招聘等
- 考试策略部分仅支持选择已有策略，不在手机上做复杂编辑
- 底部：取消 / 保存按钮
H5 试卷预览页
- 展示系统为该岗位生成的一套样卷
- 按题型分组（单选、多选、编程等）
- 可「锁定/解锁」某些题目（锁定后 PC 端配置时保留）
H6 考试结果分析页（移动版）
- 顶部筛选条：岗位下拉 + 考试批次 + 时间区间
- 上半部分：KPI 卡片（平均分、通过率、参加人数）
- 下半部分：
  - 简化图表（柱状图/折线图）
  - 题目正确率列表（Top 问题 / Bottom 问题）
H7 题目质量列表页
- 列表项：题干摘要、技能标签、质量分、使用次数、状态
- 支持按照质量分排序/筛选
- 点击进入 H8
H8 题目质量详情页
- 展示具体题目内容、标准答案、解析
- 统计：使用次数、正确率、区分度、反馈分
- 操作按钮：标记“待修改”、标记“建议淘汰”
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 前）

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（推荐）

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 模板（可按需复用）

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 + 数据库 + 算法）

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

14 KiB Raw Blame History Unescape Escape