Prototype · 班主任端 · V1.1

深学在线 · 班主任端交互原型

9 屏:花名册看板 → 待审列表 → 学生详情 → 批量通过 / 右滑通过 / 驳回 → 催报 → 消息 → 代传。
视觉隐喻为「电子花名册」——把全班排成网格,一眼扫完;与学生端共用「档案室 / 电子卷宗」的设计语言。

学生端:极简
几乎不用打字。校对着点两下 + 传文件,一屏搞定。目标:一次填对、不返工。
班主任端:高密度
一屏看完全班 40 人、3 次点击处理一个学生、批量操作。手机单手可操作——通常在通勤路上处理。
9:41
24中技数控1班
2026年9月机电认定 · 截止 10-15 剩 3 天
82%
已提交率 23/28
已通过 15 待我审 4 待核对 3 有问题 1 未提交 5
花名册 · 28 人 点格子看详情
陈子文待处理
杨晨低清
曹文锋待核对
黎思明待核对
李绍康待审
何天宇待审
曾云天待审
熊宇豪已通过
魏航已通过
余饶平已通过
曾伊豪待审
卢宇俊已通过
于豪已通过
杜明韬已通过
朱彬宇已通过
刘俊宇已通过
何森辉已通过
江训坚已通过
涂子峰已通过
郑志滔已通过
廖俊杰已通过
刘羿江已通过
唐昊宇已通过
谭宇峰未交
邱文俊未交
张仕勋未交
宋应兴未交
徐程宇未交
有问题须处理 待核对 待我审 已通过 未提交
STEP 01 · 核心屏 班级看板:电子花名册,一屏扫完 28 人 用网格而不是列表——列表必须滚动才能看全,网格可以一屏扫完。每个格子就是一个人,颜色即状态。
「陈子文」那格是唯一红色的,带呼吸动画——它需要我做决定,其余都是看一眼就过的。
9:41
全部 8 有问题 1 待核对 3 可批量 4
陈
陈子文 需处理
一寸照片的证件号和其他材料对不上,疑似传错人
杨
杨晨 待核对
姓名已纠正(扬晨 → 杨晨);身份证图偏小 558×745
曹
曹文锋 待核对
一寸照片证件号仅 17 位,已按名单补齐,请确认
黎
黎思明 待核对
身份证证件号仅 17 位,已按名单补齐,请确认
曾
曾伊豪 可批量
刚提交 · 4 项材料齐全,无问题
李
李绍康 可批量
4 项材料齐全,无问题
何
何天宇 可批量
4 项材料齐全,无问题
曾
曾云天 可批量
4 项材料齐全,无问题
STEP 02 待审列表:异常优先 + 材料缩略条 默认按异常优先排序——红色排最前,绿色的沉到底部。
每条右侧那条「缩略条」是 4 项材料的状态速览:虚线=没交、琥珀=有疑点、朱红=有问题。不用点进去就知道哪里不对。
绿色项还支持右滑直接通过(见 STEP 09);有疑点的项滑不动,必须点进去逐个判断。
9:41
一寸照片 1/4
原图 / 处理后
295 × 413 · 96KB
证件照
系统发现 1 个问题 需你判断
这张「一寸照片」的证件号,和陈子文其他材料对不上
照片文件名:360122200902044232
其他材料:36010520090817121X
两个号码校验位都通过 → 是两个不同的人,不是打字错误。
其他 3 项材料
身份证 已规范 · 810KB
学籍表 已规范 · 41KB
工作证明 已规范 · 806KB
STEP 03 学生详情:给结论,也给我依据 不只说"有问题",而是把两个号码并列摆出来,并指出校验位都通过 = 是两个人而不是打字错误。
班主任不需要懂身份证算法,只需要看懂这个结论——判断依据由系统给出,判断权交给人。
9:41
将通过的 4 人
只包含全部材料无问题的填报单。有疑点的已自动排除,不会被批量带过。
曾伊豪
4/4 项 · 无问题
可批量
李绍康
4/4 项 · 无问题
可批量
何天宇
4/4 项 · 无问题
可批量
曾云天
4/4 项 · 无问题
可批量
已自动排除 4 人(陈子文 / 杨晨 / 曹文锋 / 黎思明)——他们有疑点需要你逐个判断,系统不会替你放行。
陈子文
1 项有问题
已排除
杨晨
2 项待核对
已排除
曹文锋
1 项待核对
已排除
黎思明
1 项待核对
已排除
通过后进入管理员终审,你仍可在终审前撤回
STEP 04 · 安全闸门 批量通过:只带无问题的,红黄一律排除 展开后把两种人并列展示:上面是可批量的(默认勾选),下面是已排除的(置灰 + 写明原因)。
这是防"手快全选"的关键设计——如果只显示可批量的 4 人,班主任不会意识到自己放过了 4 个有疑点的。让他看见被排除了谁,他才会去想"为什么"。
9:41
驳回哪一项
一寸照片 身份证 学籍表 工作证明
驳回原因 必选
材料不是本人 照片模糊,请重新提供 身份证号与名单不符 文件超过 1M 工作证明未盖公章 缺少材料 其他(手填)
补充说明 选填
长按说话,自动转文字
学生收到通知后修改重传,会回到你的待办。这是第 1 次驳回。
STEP 05 驳回:原因必选,但不必打字 常用原因做成快捷标签——80% 的驳回一句话就够。文字框是补充,不是必填。
支持语音转文字:班主任常在通勤路上,单手打字很痛苦。
9:41
微信订阅消息每人只剩 2 次额度。系统会在额度用尽时自动改用短信,但短信按条计费——建议合并催报,不要一天催三次。
未提交 5 人 剩 3 天截止
谭宇峰178****3238单独催
邱文俊136****1102单独催
张仕勋158****1859单独催
宋应兴139****0016单独催
徐程宇187****2334单独催
催报记录
今天 09:12 群发 5 人
微信订阅消息 · 4 人送达 · 1 人额度不足
昨天 10:30 群发 8 人
微信订阅消息 · 8 人送达 · 3 人已提交
STEP 06 催报:先说清代价,再让人决定 微信订阅消息是有额度的——一次授权只能发一条,用尽就得走短信(要花钱)。
所以这里不藏这个事实,把剩余额度和每条历史记录的实际送达情况摆出来,让班主任自己权衡。
9:41
陈子文 的材料有疑点09:41
一寸照片证件号与他其他材料不一致,需要你判断
你有 3 份待审超过 24 小时08:00
李绍康、何天宇、曾云天 的填报单等待初审
曾伊豪 已提交材料昨天
4 项材料齐全,系统未发现问题,可直接通过
催报已送达 4 人昨天
谭宇峰 的订阅额度不足,已改用短信
管理员导出完成昨天
24中技数控1班 汇总包已生成,共 22.4MB
距离截止还有 3 天前天
还有 5 人未提交,建议今天催一次
STEP 07 消息:只推需要我做决定的事 优先级严格排序:要判断的 → 快超时的 → 完成通知 → 系统提醒。
每条消息都带下一步动作的暗示("可直接通过"、"建议今天催一次"),而不是只报事实。
9:41
你是代替学生上传。系统会记录代传人是你,审核界面会标注出来。
选择学生
学生谭宇峰 · 未提交
联系电话178****3238
要代传哪一项
一寸照片选择
身份证选择
学籍表选择
工作证明选择
代传的材料同样会自动改名、压缩、校验——和学生自己传走完全一样的流程。
STEP 08 代传:兜底通道,但必须留痕 总有学生就是不会操作(老旧手机、不在身边、沟通不畅)。代传是必须有的兜底。
但代传会让"谁交的"变模糊,所以记录代传人并在审核界面标注——责任可追溯,也避免老师被误解。
9:41
右滑可通过(松手后需二次确认)。驳回请点进详情——驳回要选原因,不能滑。
通过
曾
曾伊豪
4/4 项材料齐全 · 无问题
通过
李
李绍康
4/4 项材料齐全 · 无问题
需逐个判断
陈
陈子文
1 项有问题 · 不可滑动通过
需逐个判断
杨
杨晨
2 项待核对 · 不可滑动通过

确认通过 曾伊豪?

通过后进入管理员终审。
在终审完成前,你仍可撤回。

STEP 09 · 已确认的设计决策 只做「右滑通过」,不做「左滑驳回」 通过是正向动作、可撤回,适合低阻力的滑动;驳回是负向动作、要选原因、代价高(学生重传 + 班主任重审)。
两者误触的后果不对称,所以驳回必须点按钮完成。
注意有疑点的卡片滑动层是灰的、写着"需逐个判断"——它根本滑不动,从交互层面堵死"手快滑过"。

设计依据 · 每一条都对着 PRD 里的约束

01为什么用网格而不是列表

PRD §9.4 要求"一屏能看完整班状态,40 人无需滚动超过 2 屏"。列表逐行 60px,40 人要 2400px;网格每格 52px、5 列,40 人只要 8 行 ≈ 420px——真正的一屏看完。

02为什么批量通过要显示"被排除了谁"

PRD 明确"批量通过只带绿色项"。但如果只显示可批量的 4 人,班主任不会意识到还有 4 个疑点被跳过——把排除名单并列展示,是在提醒他"为什么"。

03为什么审批动作要 ≤3 次点击

PRD §9.4 的硬性约束。路径是:列表点人 → 看问题 → 通过/驳回,正好 3 次。详情页不做多层展开、不做标签页切换。

04为什么要把"校验位都通过"写出来

陈子文那单,两个号码各自都合法——这说明是两个人而不是打字错误。班主任不需要懂算法,但需要这个结论才能正确判断该驳回还是该通过。

05为什么催报要先说额度

微信订阅消息发一条消耗一次授权。如果不告知额度,班主任会频繁催报,第 3 次就发不出去了,还会以为系统坏了。把约束前置,比事后解释便宜。

06为什么学生端极简、班主任端高密度

学生是一年用一两次的偶发用户,必须零学习成本;班主任是一学期用几十次的高频用户,愿意为效率接受更密的界面。同一个人群用同一套设计是错的。

07为什么只做右滑通过、不做左滑驳回

通过是正向动作且可撤回,适合低阻力滑动;驳回是负向动作、要选原因、代价高(学生重传 +班主任重审)。误触后果不对称:滑错一个通过最多撤回,滑错一个驳回会打断学生。
有疑点的卡片滑动层是灰的、根本滑不动——从交互层面堵死"手快滑过"。