本文是腾讯团队关于QQ家校群改版的一个设计复盘的过程，一起来看看~

万能螺丝刀也拧不开眼镜框上的螺丝。如同万能螺丝刀一样，QQ也是一个通用的沟通工具，在针对游戏、粉丝、家校等垂类场景下，用户的很多需求未能很好的被满足。其中家校群场景中用户数及活跃还处于稳定增长，且用户数还远小于市场中的家校群体数，机会可观。所以我们希望能够更好的服务这类人群，以吸引更多用户。

为什么是作业场景？

在家校群体中，无论是以前的线下低频沟通还是现在的线上高频沟通，沟通的内容主要是围绕一些学校信息的同步以及学生的作业情况。

其中在线沟通作业几乎每日都会发生：用户在群内进行作业同步、提交以及作业结果的同步等。

但通过用户访谈我们发现，作业作为一个高频沟通场景，用户依旧存在一些痛点。所以我们希望能解决用户的这些痛点，同时能进一步的对作业场景进行深挖和探索，以吸引更多的老师来使用QQ家校群。

行业趋势

就作业方面，市场上已经有许多的APP，其中不乏像一起作业网、作业盒子这类优秀且受老师欢迎的应用。通过分析以及访谈这类app的用户，我们发现在线作业已是未来的一个趋势。

设计目标

在线作业已是行业的一个趋势，但是QQ群的用户更多的还是在群内同步和提交作业，所以我们希望能够先在尽量保持现有用户使用习惯的前提下，通过自动批改减轻老师工作，提高效率，然后再逐步培养他们布置在线作业的习惯。在学生侧，我们也希望解决现有痛点的同时让他们感觉做作业更轻松、愉悦。

设计方案探索

基于以上的分析，家校群项目团队通力合作，对QQ家校群进行了一系列的设计探索和尝试。

1. 更便捷的布置和查看作业

家校群中已有【作业】应用，可帮助老师布置作业，但布置流程过长且复杂，所以很多老师不能发现也不使用。针对这点，我们简化了布置流程同时优化书写作业内容。

在家长以及学生侧，为避免消息冲走作业内容以及更高效的查看今日所有作业。我们提高查看作业入口，同时新增新作业提醒。

2. 智能批改作业，减轻老师工作

因为技术问题，我们没有办法批改所有的作业类型。所以我们通过分析现有老师布置的作业的关键词，得到老师经常布置的作业类型，同时分析明确的题型中老师投入的工作量以及得到收益。

通过分析我们决定先尝试自动批改背诵、口算、听写这3类作业。

2.1 在线背诵 —— 一种全新的即时背诵体验

对于老师而言，背诵作业的痛点在于检查，需要一个一个录音的听才能获知学生的背诵情况。对学生而言，学生需要与第三个人配合才能完成一次背诵作业，或者不断地录音到自己理想状态，效率低而且过程枯燥。为提高效率我们将所有背诵流程搬到了线上，以达到简化流程的目的。

在线上背诵过程中，学生背一句，显示一句，这样学生就可以看到自己读音错误的地方。当忘记下一句时，也可以主动获得提示，还原了线下常见的2个场景。同时为了让背诵更加轻松，在背诵完成后以更轻松方式告诉学生背诵结果，当背诵完美时也有个庆祝的动画。

2.2 批改纸质口算题

针对数学等作业，老师一般要求学生将做好的作业拍照进行提交，而后自己进行统计批改。而针对口算这类题型，技术上已经支持识别口算题并进行批改。所以我们在维持学生拍照提交作业的习惯上，增加统计错题能力，让老师更方便的针对错题给学生讲解。

老师查阅批改结果后，可将批改结果反馈给学生。反馈页的设计也以更趣味的形式进行呈现，以此来降低学生的压力感。

2.3 辅助学生复习生字的听写体验

现有的听写方式同背诵一样，需要线下与线上方式结合才能完成，老师统计家庭听写也很不方便。此外通过调研我们发现：

1. 老师一般会将生字组词后进行听写；
2. 老师希望通过听写考察学生对字读音、书写、笔顺的掌握情况；
3. 家庭听写需要父母配合学生才能完成，有时因家长忙会耽误学生作业完成情况。

针对以上问题，我们将听写从线下听写搬到线下以方便统计听写情况，并对以上场景进行特殊处理。

3. 作业统计数据可视化

对于家庭作业，老师除了批改之外，还希望知道这次作业的整体完成情况。QQ家校群现有作业应用已经有作业统计功能，但通过访谈老师我们发现，老师检查作业主要关注：

1. 获知多少人没有交；
2. 完成的作业整体情况；
3. 随机抽查一些学生的作业。

但现有的统计页面布局与老师重点关注的内容有所差异，同时我们通过分析数据发现，98%的情况下，老师只会布置1个需要在线提交的作业。所以为了让老师更高效的查看每次作业情况，我们对老师统计页面进行了重新设计，让老师关注的信息更加突出，也更方便抽查和评论作业。

4. 视觉设计

视觉设计也是围绕着高效和轻松这两个设计目标来展开。如何减轻老师、学生的压力，提高教学、学习的效率，是QQ家校群团队不断追求的目标。

内容为王：沉浸式导航与卡片式内容

沉浸式导航。在QQ家校群在线作业等场景下，信息内容相当繁杂，因此我们将系统导航栏做了沉浸式处理，简化界面，减少层级，有效减少整体页面的层间关系，导航栏下沉，主体内容上浮，主体内容得以最干净的逻辑呈现在用户面前，提升用户使用效率，达到高效传递信息的目的。

卡片式：可靠又多变的载体。QQ家校群在线作业的内容比较庞杂，文字、图片、视频等多种媒体格式在混排情况下难以控制，此外，由学生和老师自定义的内容普遍不美观。卡片式的设计则很好地解决了上述的问题。

卡片作为一个容器，作为独立内容单元用于承载页面中最重要的信息，能够整合多种格式的内容，同时，卡片又是可操作性、拓展性都非常强的载体，可以上下延展、左右滑动、呼起弹出等。

QQ家校群在设计之初就坚持，尽量在各个环节减少产品本身对于用户在线下场景的工作惯性的影响和挑战，而让内容本身成为引导用户的方向。

配色：丰富又有迹可循

每个科目都有各自的性格和气质。“数学是一种精神，一种理性的精神。”，而蓝色在色彩体系中也是冷静理性的代表。语文是中华文化的传承，而红色是中华文化最具代表性的色彩。根据颜色的属性赋予各科独有的色彩，我们从QQ色彩体系里甄别出与科目性格特征相符的色彩——蓝色对应数学，红色代表语文。更重要的是，QQ家校群认为教学与学习都应该是丰富而多彩的。

舍弃量化分数，倾注情感

教育的一大目的在于激励被教育者不断追求进步，QQ家校群认为每个学生都是优秀的，有教而无类。因此，QQ家校群弱化在学校教育中赤裸裸的分数制度，不直接使用分数，而是使用色彩的梯度来表现评分的阶段。

同时，QQ大黄脸表情作为QQ独有的IP形象，也被运用到设计中，这是因为表情能够承载比文字更丰富的信息，也可以向用户传达文字难以表述的复杂情感。同时，我们也改变了以往普通文案的粗暴表达，注入情感，希望学生在看到作业评改结果时，都能够感受到倾注其中的温暖的激励。

用纹理讲一个故事

我们还采用各科目具有代表性与故事性的纹理来表达各个科目的特殊气质。语文教育的基础除了在于如何学习运用汉字，同时需引导学生感受汉字的美感。汉字作为象形文字，以象形为基础，借形表意，以意传情，形、意、情都融于一个方块内。

如「旦」字，「从日見一上」，从字面看，就能感观察到「太阳生于地平线」，这是汉字独特的表现能力。因而将汉字拆解、重构、重新表现，成为语文教育的一个象征符号。

数学采用「不可能的三角形」作为基础图形重复演绎，物理则是牛顿的苹果，都展示了各个科目的特殊气质。

一点展望：给青少年更美更好的教育产品

虽然家校群项目团队的设计想法没有全量发布，但在灰度期间也得到了灰度用户的好评。而从设计的角度看，在当前美感教育缺乏的现状下，青少年对于审美的认知大多来自于他们生活、学习所接触到的书籍、工具、包装等等。

作为一款互联网教育产品，QQ家校群希望也能承担起青少年的美学教育责任。我们的设计很可能影响下一代对于美学的认知，我们的设计很可能会潜移默化青少年自身美学体系的建立。真正的教育，不仅仅是教授知识，还包含培育学生的美感，激发他们内心深处的真、善、美、乐，让这些纯质的情感能够润泽他们的一生。

作者：一个杰的，公众号：腾讯ISUX（ID：tencent_isux）

来源：https://mp.weixin.qq.com/s/4qltEnFZNPvkn5M8OVso3g

题图来自Unsplash，基于CC0协议