如何做好在线教育产品？5000字拆解小猿AI应用设计

大家好，我是廖尔摩斯丨设计大侦探，一个全链路产品设计师，一个互联网科技的守门人！我从去年9月份就为一个教育集团负责全系列的产品设计，所以最近半年体验了不少在线教育产品。今天为大家分享一下我对小猿 AI APP 产品的练习题型设计拆解，希望对你有所帮助！

往期拆解：

一、概述

1. 小猿AI是谁？

小猿 AI 的前身是小猿口算，是猿辅导旗下一款专注 K12 教育的人工智能学习产品。它通过 AI 技术为学生提供个性化的学习体验，包括智能题目推荐、实时答疑解惑和学习进度跟踪等功能。作为猿辅导矩阵中的重要产品，小猿 AI 致力于让学习变得更加高效和有趣。

2. 为什么要拆解练习题型？

如果你有参与过在线学习的产品，「练习」这个场景是用户和产品交互最高频的内容。学生通过观看课程学习，接下来最重要的就是练习。所以拆解练习题型，有利于对此类产品有更深入的了解。

3. 小猿 AI 都有哪些练习题型？

经过完整的产品调研，小猿 AI 主要分为数学、语文和英语三个学科。虽然这个产品覆盖了学龄前到大学的用户，但练习这个场景，只包含了三个学科，共计 12 种练习题型。

二、数学

数学作为一门注重思维逻辑培养的学科，在其练习形式的设计上需要特别重视对学生逻辑思维能力的锻炼。因此，在产品的交互设计上，小猿 AI 采用了多样化的练习形式，主要包含口算练习、同步练、竖式计算、单位换算和听算练习 5 种练习题，接下来让我们逐一拆解。

1. 口算练习

口算练习旨在提升学生的心算和快速计算能力。通过反复练习，学生能培养敏捷的数学思维，实现准确的心算。这种练习方式注重速度和准确性，是培养数学基本功的重要方式。作为我们拆解的第一个题型，我将会从 0 到 1 分解它的设计步骤，以便大家可以完整地洞察到设计细节。

列表页

进入口算练习，可以发现页面是按单元拆分内容，用户可以自由选择题目进行练习。

1. 调整题数：可调整练习的题目数量，最少 10 题，最大 200 题，题目越多奖励越多；
2. 学霸榜：按地区和学校统计学生的练习速度排行榜；
3. 打印题目：可连接打印机打印题目，同时也支持发送邮箱以及微信；

设计亮点：打印题目这个功能令人印象深刻，不仅能免费下载练习试卷，还可以通过手机直接连接打印机打印，这样贴心且实用的功能给用户带来了意外惊喜。

答题页

进入练习答题页，伴随着轻快舒缓的音乐，可以快速地激发了用户练习的热情。

1）题干内容：题干内容设计醒目，不过如果将题干字体适当放大，同时将下方题目字体缩小，视觉对比会更强烈，阅读体验也会更好；

2）输入框：手写输入框，系统可以快速识别，如果答错，系统也会及时给予反馈，并且需要写对才能自动跳转到下一题（你也可以在右上角点击跳过）。

为什么用户写错需要重写？

这里我来分享一下我的理解。练习这个场景，真正的设计目标是帮助用户掌握知识，所以当用户写错，系统应该及时给与反馈，甚至给出正确的提示，帮助用户一边练一边学，从而掌握关键知识点。

系统如何校验用户的手写答案？

这里是采购了第三方的文字识别 OCR 服务，我查询了资料，OCR 服务的应用场景就包含了试题识别，用户手写答案后，系统会根据图形判别和正确答案的相似度，最终判定是否合格。

3）草稿：点击草稿，手写的内容不会提交，支持撤销、恢复和清空。

体验缺陷：这里缺少了足够的帮助提示文字，我连续展开和关掉了草稿箱，最后才慢慢理解如何去操作。

4）跳过：如果你无法回答正确，可以在右上角选择跳过题目。

5）声音交互：在用户答对和答错时候系统都会及时地播放对应提示音。

提示音重要吗？

千万不要小看「提示音」的设计。在练习这个场景，如果缺少了声音交互，用户将会陷入慌乱，不知道下一步该怎么做。

6）退出：用户可以点击退出，但会出现弹窗提示，防止用户误操作。

7）练习结束：答完所有题目，系统会出现提示弹窗，告知用户练习结束，并向用户赠送练习获取的经验。

排行榜

在用户完成练习以后，系统会先跳转到排行榜页面，告知用户在系统当前的练习排名。关于排行榜，小猿 AI 设计得非常用心，我们拆分一下它的设计细节。

1. 排名规则：按周排名，下周数据自动清空
2. 用户等级：像足球联赛一样，排行榜分为青铜、白银等多个等级，随着用户练习获取的经验值晋升和降级（每周前三十排名的同学可晋升下一个等级，45 名之后的同学下降到下一个等级），这样的设计增加了趣味性，更容易激发用户（特别是小朋友）的兴趣。
3. 分享：可生成排行榜海报以及网页链接分享到微信、钉钉、微博等平台。

统计页

关闭排行榜页面，用户将会进入练习统计页面。

1. 练习数据：统计用户此次练习答对的题目数、用时和正确率。
2. 练习详情：展示用户练习答题的详细内容。
3. 错题本：在练习中答错的题目会自动收录到错题本。
4. 分享：可生成练习详情页海报以及网页链接分享到微信、钉钉、微博等平台。

2. 同步练

「同步练」是按照学生的教材内容进行练习，该题型主要以选择题为主，交互操作比较简单。不过这里也有个细节值得分享，那就是用户选对答案后页面会直接跳转，用户选错后，系统会立即展示题目解析内容，并需要用户点击「下一题」才能跳转。这样设计的目的是让用户及时知道为什么答错，掌握知识点。

3. 竖式计算

竖式计算是一种在进行加、减、乘、除等数学运算时常用的书写计算格式，它将计算过程以竖着排列的方式呈现，能更清晰地展示每一步的计算细节，帮助学生准确地进行计算 。

为什么竖式计算在用户书写完以后还需要点击「完成」才能跳转，而不是像口算练习一样直接跳转？

虽然都是手写练习，但两个题型之所以出现交互形式的区别是因为他们的练习目标不同。口算练习侧重于培养用户的口算能力，更注重口算效率，而竖式计算侧重于做题的细节和过程，所以用户有足够的时间检查无误以后再跳转到下一题。

4. 单位换算

这个题型比较简单，主要通过手写的形式，练习各种单位的大小和换算。

5. 听算练习

听算练习是学生根据系统播放的题目音频用语音进行作答。相比手写，这里的交互逻辑有一些不同：

1. 系统自动朗读，朗读完后用户需要快速用语音作答；
2. 答对自动跳转到下一题，答错系统将会提示错误，并且支持在倒计时结束之前继续作答。

用户回答的音频如何判断对错？

这里是采用了第三方的口语测评技术，系统接收学生的音频后进行快速测评，最终返回结果给系统去判断。

6. 小结

在体验完数学学科的五个练习题后，最令我印象深刻的是产品的流畅度。练习题包含了大量细节，尤其是手写和语音这类功能，相比传统的选择题，它们需要对接第三方技术。系统的反馈速度必须达到毫秒级，才能让用户感受到自然顺畅的体验。试想，如果你写完答案后，系统一直在转圈加载或没有任何反馈，你还会继续练习吗？

产品体验评分：⭐️⭐️⭐️⭐️⭐️

三、语文

与数学的逻辑思维训练不同，语文练习题型更注重听说读写的全方位训练。通过语音识别和书写训练等交互形式，帮助学生提升语言表达和文学素养。

1. 字词听写

听写是语文学科的一个重要场景，小猿 AI 的设计给了我很大的惊喜，让我在这个题型的体验中获得了 Aha-Moment。

列表页

课文列表：用户可以选择需要听写的课文，支持多选、全选。

打印：选中课文，点击打印，就能进入到打印详情页，还可以选择字帖临摹和看拼音写汉字两种模式。

在线听写：点击后就能进入在线听写详情页。

纸笔听写：非常贴心的一个功能，用户可以纸笔代替键盘拼写，而不全是依靠电子设备。

自由听写：自由听写是用户可以跳出课文内容，输入自己想听写的单词。

排行榜：用户每周听写正确字数的统计排行榜。

Aha-Moment：打印、纸笔听写和自由听写这三个功能的设计真正做到了以用户为中心的设计理念，特别是纸笔听写，不仅发挥了数字产品的优势，还能让学生用纸笔书写，让数字产品显得更贴心。

确认页

用户在进入正式听写前，还可以选择听写范围和偏好设置。

听写范围：勾选每篇课文右侧的单选框，就可以选择是否加入听写范围。

设置：在右上角就可以进入，用户可以设置系统读词的人声、读词的间隔、次数和顺序。

体验缺陷：进入确认页后，系统默认了单词全选，但最多支持200个生词的听写，这就会让用户在多数时候点击「去听写」的时候发现无法进行下一步，需要调整听写范围才能继续。这样的设计给用户增加了学习成本，甚至会快速退出不再尝试。

答题页

声音提示：进入答题页，系统会先提醒用户调亮手机屏幕，并且集中注意力。

手写框：左上角是朗读播报，点击后可重复播放；右上角是刷新，用户在提交答案前可以刷新重写。

反馈：当用户的答案输错，系统会提示正确写法，而且严格监督用户的书写笔顺。

在用户提交后，为什么没有重写的功能？

这个设计激发了我在练习的过程中的思考，因为当我提交题目后，就没法撤回或者重写了，只能点击下一题。我猜想这样的设计是借鉴了「单词听写」这个真实的场景，毕竟听写就是测验，不会告诉你修改对答案再继续。

结果页

听写完成后，系统会赠送虚拟金币和积分奖励，并更新用户在当周的字数统计排行榜。

统计页

在统计页，可以完整地看用户在此次听写中答对的题目数量、拼写内容和听写时长。在菜单栏底部，系统不仅提供了错题重练的功能，而且自动把错题加入了错题本。

设计亮点：在用户出现拼写错误后，系统自动把错题加入错题本，这样的设计太贴心了，甚至还支持错题打印。

2. 趣味识字

趣味识字按课本的单元划分，逐字学习通过后解锁下一个单词。这是一个综合题型，分为学、读和练三个部分。

学一学

通过趣味视频进行讲解学习，更能吸引用户的兴趣。

读一读

系统朗读，用户跟读，然后系统进行语音测评反馈给用户（回答正确是你真棒，回答错误是继续加油）。

练一练

用户根据音频和动画选择正确的答案。

结果页

用户完成学习后，会收获该单词的字卡，并解锁下一个单词的学习。

3. 背古诗

进入「诗词园地」，点击开始背诵，就能进入到背古诗的题型练习。

答题页

在用户朗读后，系统就开始接收语音进行评测，如果朗读正确，就逐字显示内容，如果朗读错误，系统就会忽略。在菜单栏底部还可以点击重背或提示。

设计亮点：这真是一个有创意的交互形式，页面竟然可以根据声音的测评逐字显示，而且丝毫不卡顿、自然，你一定要亲自来体验一次，才能感受出这种愉悦的产品体验。

统计页

统计了用户的得分、错字、提示次数和背诵用时。

得分的评判标准是什么？

我花了 5 分钟，竟然拿到了 97 分，击败了 32%的小朋友，如果满分是 100 分的话，我是因为什么被扣除了 3 分？是因为我点击了两次提示吗？所以这里应该加入一个评分规则，告诉用户系统的评分是怎么设计的。

4. 语文练习

语文练习的题型相对简单，主要以选择题，用户进入后，根据音频和题干选择正确的答案，其他我们就不做更多的分析了。

5. 练字挑战

在「字词学习」栏目，小猿 AI 还设计了一个练字挑战的题型，用户可以根据单词的笔画顺序进行练字。该题型比较简单，我们就不过多分析了。

6. 小结

我在「字词听写」这个功能的体验中，获得了极其愉悦、开心的体验，特别是「纸笔听写」这个功能，不仅消除了数字产品的冰冷感，更体现了以用户为中心的理念，让产品真正服务于用户需求。语文学科的五个题型，无论是内容还是交互，都贯彻了这样的设计理念，我不得不佩服小猿 AI 的产品设计团队。

产品体验评分：⭐️⭐️⭐️⭐️⭐️

四、英语

英语和语文都属于语言类学习的场景，所以两个学科有很多相似性，接下来我们一起看看。

1. 背单词

背单词的内容结构借鉴了艾宾浩斯记忆理论（德国心理学家 赫尔曼·艾宾浩斯在 19 世纪末提出的一种研究记忆与遗忘规律的方法论），通过多种学习形式帮助用户练习。

答题页

单词讲解：图文+音频搭配讲解，点击「继续」进行下一步。

选图片：根据音频选择正确的图片，选错会立即提示，并给出正确的答案，但无法重新选择，选对也会跳出提示，点击「继续」才能下一步；

设计缺陷：用户选择正确，系统应该可以直接跳转到下一题，否则用户还得点击「继续」，增加了操作步骤。

选正确释义：根据英文单词选中文释义。

单词填入：填入正确的单词字母；

错题重练：和其他练习不同，系统会自动进入错题重练，直到用户全部答对，才会进入统计页。

为什么错题重练设计在练习环节中，而且需要用户全部答对才能结束？

我猜想这和整个背单词的内容逻辑借鉴了艾宾浩斯记忆理论有关系。艾宾浩斯主张人类在学习新信息后，如果不进行复习，记忆会以指数级速度迅速衰减，特别是在学习后的最初 24 小时内。所以系统希望用户可以通过答案提示强制性地记住正确答案，而不是像其他学科那样可以加入错题本。

统计页

统计用户的答题速度、准确率等。

2. 单词听写

单词听写的交互逻辑和语文的字词听写一样，支持纸笔听写和在线听写两种模式。唯一的区别是由于英文的字符数过长，进入听写后，手机会自动横屏显示。

3. 口语练习

口语练习分为三个部分，分别是单词跟读、句子跟读和情景对话。

答题页

1. 系统自动朗读，朗读完后用户跟读；
2. 点击左边按钮可重复播放，点击右边录制按钮系统判定提前录制结束；
3. 答对自动跳转到下一题，第一次答错将会重来，第二次答错跳转到下一题。

统计页

统计用户详细的答题情况，包括评分和朗读音频。

4. 小结

英语学科的练习题型虽然数量不多，但背单词功能的设计给我留下了深刻印象。从这个功能模块可以看出，如果不了解艾宾浩斯记忆法，可能会对这个题型的设计感到困惑。这再次证明，数字产品的设计必须服务于真实的业务场景，而非单纯的功能和页面拼切。

产品体验评分：⭐️⭐️⭐️⭐️⭐️

五、体验总结

接下来，让我们总结一下小猿 AI 练习题型的拆解。

1. 题型设计丰富

三个学科共设计了 12 种题型，涵盖了各类常见练习方式。其中，数学的口算练习、竖式计算、听算练习，语文的字词听写，以及英语的背单词题型都高度还原了学生的真实学习场景，值得深入研究和借鉴。

2. 交互形式新颖

口算练习和竖式计算采用手写形式与产品交互，而听算练习和背古诗则通过语音形式交互。这些创新的设计方式不仅新颖，还让学习过程更加有趣。

3. 产品体验流畅

我特别注重产品的流畅度，因为曾经体验过让人难以忍受的交互卡顿。在体验这些练习题时，我格外关注这一细节。令人惊喜的是，无论是背古诗还是听算练习，都能实现毫秒级的输入反馈，这样的技术实现实在令人赞叹！

写到这里，我依然感到意犹未尽。小猿 AI 的产品设计深深打动了我——无论是富有创意的内容策划，还是流畅的交互体验，都给我留下了难忘的印象。作为一名产品设计师，我认为小猿AI蕴含着丰富的学习价值，建议你也亲自体验一次这款产品，相信一定会有特别的收获！

感谢阅读，我们下次见！