一、核心矛盾：老师的时间颗粒度 vs 家长的决策成本
当“双减”撞上“数字化”，教育赛道的产品经理和UI设计师们，最焦虑的或许不是流量，而是如何在一屏之间，同时安放“教学的温度”与“流程的效率”。今天，我们以“乐教上门”这款1对1上门家教产品的原型为例，拆解一套从“约课”到“课后反馈”的完整闭环设计。这套原型并非天马行空的炫技，而是对真实业务场景中“信任感”与“便捷性”的精准回应。
一、核心矛盾：老师的时间颗粒度 vs 家长的决策成本
上门家教最痛的点，在于线下履约的高成本。老师动身一次，往往需要至少1.5小时起的课时承诺；而家长在首次下单前，最关心的是“老师到底靠不靠谱”以及“上门路上会不会放鸽子”。在“乐教上门”的原型设计中，我们首先将首页拆解为“地理围栏+师资优先”的卡片式信息流。不同于传统列表页，这里将“距离”直接做成了可拖拽的进度条（而非仅显示公里数），UI上通过一条渐变色弧线暗示“老师通勤时间成本”。
关键交互细节在于：当家长拖动滑块将可接受距离从5公里扩到10公里时���页面顶部的推荐老师卡会实时刷新，并且每张卡片头部都会高亮显示“预计到达时间（ETA）”，这个时间是基于地图API与老师实时的接单状态动态计算的。我们放弃了冷冰冰的“x公里”，转而使用“老师将在您预约时间前20分钟抵达”这种场景化文案，这能有效降低家长在支付前的焦虑感。原型中，底部悬浮栏的“立即约见”按钮，只在老师ETA小于等于30分钟时才会变成高饱和度的橙色，其余时间则呈灰色并辅以“老师还在备课中”的提示，这一微小的状态区分，就是为了避免无效预约造成的运力浪费。
二、原型中的服务动线：从“面试”到“随堂报告”
1. 双向匹配的“轻面试”环节
很多产品会忽略“孩子是否喜欢老师”这一感性因素。在乐教上门原型中，我们加入了“60秒语音名片”模块。UI上不采用传统的视频播放器，而是将语音波形图与老师的板书笔迹同步播放。家长听到的是老师讲解一个知识点的声音，看到的是老师在虚拟白板上同步浮现的粉笔字迹。设计上，这部分刻意采用了仿纸张纹理的底纹与略带摩擦感的笔触，去��拟真实课堂的颗粒感。对于UI设计师而言，这里的挑战在于如何不通过视频画面也能传递老师的教学风格——我们通过控制波形图的节奏（快慢）与笔迹的粗细变化来达成。
2. 履约中的“透明化”状态机
老师出发后，原型进入“履约中”状态。这里我们没有用简单的物流进度条，而是设计了一幅“城市微缩地图”。地图上，老师的小图标被替换为一本打开的书，而家长端则是一盏台灯。随着老师移动，书本与台灯之间会划出一道虚线的“知识轨迹”，轨迹上标注了三个关键节点：准备出发、进入小区、开始授课。每个节点触发时，手机都会有一次轻微的触感反馈（而非叮咚声），因为上课场景中，声音干扰是最大的禁忌。这种将抽象状态具象化为“书本与灯”的隐喻，比文字提示更具情感连接力。
3. 课后反馈的“三明治”结构
课后评价环节，原型抛弃了繁琐的评分表单。我们设计了一个“课堂回放时间轴”，横轴是45分钟课堂时间，纵轴是老师标记的“专注度指数”曲线。家长可以点击曲线上��任意波谷（分心时刻）或波峰（积极互动时刻），系统会弹出该时间点对应的课堂板书快照与老师的一句语音批注（如：“这里孩子对分数除法有点卡壳，我换了一种分披萨的教法”）。
这种设计逻辑在于：家长要的不是一个“五星好评”，而是“孩子到底哪里不会”的证据。UI上，我们刻意将老师的语音批注转译成可视化的“气泡便签”，便签的底色根据情绪分为淡蓝（鼓励）和浅黄（待加强）。设计师通过色彩心理学来引导家长更客观地看待孩子的波动，而非仅仅关注单次成绩。
三、可复用的设计模式与避坑指南
- 时间敏感型操作一律触底化：所有需要家长快速决策的按钮（如“确认老师已到达”）必须悬浮在拇指热区，且需要二次触控（防止误触），但绝不使用滑动解锁（增加思考成本）。
- 身份差异可视化：在原型中，老师端UI主色是墨绿（象征专业与沉稳），家长端则是暖米色（象征陪伴与包容）。当双方进入“共同课堂”页面时，两种颜色会以渐变交融的方式呈现在顶部状态栏，这是一种潜意识的心理暗示：“我们正在同频”。
- 空状态即教学：当家长没有历史约课记录时，不要只显示“暂无订单”。原型里展示了一张老师的“虚拟备课桌”——桌上放着倒扣的沙漏和一本翻开的习题册，下方配文：“您还未与任何老师建立连接，但好的老师正在赶来的路上。”用静态画面讲述动态故事，远比一句干巴巴的引导文案高级。
教育产品的原型设计，本质是在设计一种“节奏感”。老师上门的路程节奏、课堂内讲练结合的节奏、课后家长读取反馈的耐心节奏，都需要通过你的信息架构与视觉层次来温柔地控制。乐教上门的案例告诉我们，优秀的原型不是把所有功能堆砌得琳琅满目，而是懂得在何时用一道阴影、或一段留白，去保护用户对教育那份不可被算法量化的信任。
更多优质原型模板，欢迎访问灵池免费原型站 7app.cn