赞助商
立即赞助

腾讯实战案例!QQ 家校群的改版设计过程复盘

UI设计3年前 (2021)更新 流光
2.3K 0 0

能螺丝刀也拧不开眼镜框上螺丝。如能螺丝刀样,QQ 也是个用沟工具,在针游戏、粉丝、家校等垂类场景下,用户很多需求未能很好被满足。其家校群场景用户数及活跃处于稳定增长,用户数远小于市场家校群体数,会可观。所以我们希望能够更好服务这类群,以吸引更多用户。

腾讯实战案例!QQ 家校群的改版设计过程复盘

一、为什么是作业场景?

在家校群中,无论是以前的下低频沟通还是现在的上高频沟通,沟通的内容主要是围绕一学校信息的同步以及学生的业情况。

腾讯实战案例!QQ 家校群的改版设计过程复盘

其中在沟通业几乎每生:用户在群内进行业同步、提以及业结果的同步等。

腾讯实战案例!QQ 家校群的改版设计过程复盘

但通用户访谈我们现,业为一个高频沟通场,用户依旧存在一痛点。所以我们希望能决用户的痛点,同时能进一步的对业场进行深挖和探索,以吸引更的老师来使用 QQ 家校群。

腾讯实战案例!QQ 家校群的改版设计过程复盘

二、行业趋势

就作业方面,市场已许多的 APP,其中不乏一起作业网、作业盒子这类优秀且受老师欢迎的应用。通过分析以及访谈这类 app 的用户,我们发线作业已未的一趋势。

腾讯实战案例!QQ 家校群的改版设计过程复盘

三、设计目标

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

腾讯实战案例!QQ 家校群的改版设计过程复盘

四、设计方案探索

基于上的分析,群项目团队通合作,对 QQ家校群进了系列设计探索和尝试。

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

家校群已有「作业」应用,可帮助师布作业,布流程过长复杂,所以很多师不能发现也不使用。针这,我们简化了布流程时优化书写作业内容。

腾讯实战案例!QQ 家校群的改版设计过程复盘

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

腾讯实战案例!QQ 家校群的改版设计过程复盘

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

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

腾讯实战案例!QQ 家校群的改版设计过程复盘

通分析我们决定先尝试自动批改背诵、口、听写3类业。

在背诵,一种新的即时背诵验

对老师而言,背诵业的痛点在检查,需要一个一个录音的听才能获学生的背诵情况。对学生而言,学生需要与三个人合才能完成一次背诵业,或者不断的录音达到自己理想状态,效率低而且程枯燥。为提高效率我们将所有背诵流程搬到上,以达到简化流程的目的。

腾讯实战案例!QQ 家校群的改版设计过程复盘

在上背诵程中,学生背一句,显示一句,样学生就以看到自己读音错误的地方。当忘下一句时,也以主动获得提示,还原下常见的2个场。同时为让背诵更加轻松,在背诵完成以更轻松的方式告诉学生背诵结果,当背诵完美时也有个祝的动画。

腾讯实战案例!QQ 家校群的改版设计过程复盘

批改纸质口算题

针对数学作业,老师一般求学将好的作业拍照行提交,后自己行统批改。针对口算这类题型,技已支持识别口算题并行批改。所以我们维持学拍照提交作业的习惯,增加统错题能力,让老师方便的针对错题给学讲解。

腾讯实战案例!QQ 家校群的改版设计过程复盘

老师查阅批改结果后,可将批改结果反馈给学。反馈页的设也以趣的形式行呈,以此降低学的压力感。

腾讯实战案例!QQ 家校群的改版设计过程复盘

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

现有的听写方式同背诵一,需要线下线上方式结才能完成,老统计家庭听写也不方便。此外通过调研发现:

  • 老师一般会将生字组词后进行听写;
  • 老希望通过听写考察学生对字读音、书写、笔顺的掌握情况;
  • 家庭听写需父母配合学能完,时因家忙会耽误学作业完况。

针对以上问题,将听写从线下听写搬线上以方便统计听写情况,并对以上景进行殊理。

腾讯实战案例!QQ 家校群的改版设计过程复盘

3. 作业统计数据可视化

对于庭作,老师除了改之外,还希望知道这次作的整体成情况。QQ群现有作应已经有作统计功,但通过访谈老师我们发现,老师检查作要注:

  • 获知多少没有交;
  • 成的作整体情况;
  • 随机抽查一些学生的作业。

但现有的统计页面布与老师重点注的容有差异,同时我们通过分析数据发现,98%的情况,老师只会布置1个需要在线交的作。为了老师更效的查看每次作情况,我们对老师统计页面进行了重设计,老师注的信息更突,更方抽查和评论作。

腾讯实战案例!QQ 家校群的改版设计过程复盘

4. 视觉设计

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

内容为王:沉浸导航与卡片内容

沉浸导航。在 QQ家校群在线作业等场景下,信息内容相繁杂,此我们将系统导航栏做了沉浸处理,简化界,减少层级,有效减少体页层关系,导航栏下沉,主体内容上浮,主体内容以最干净逻辑呈现在用户前,提升用户使用效率,到高效传递信息目。

腾讯实战案例!QQ 家校群的改版设计过程复盘

卡片:可靠又多变载体。QQ家校群在线作业内容比较庞杂,文、图片、视频等多媒体格在混排情况下难以控制,此,由学生和师自定义内容普遍不美观。卡片设计则很好地解决了上述问题。卡片作为个容,作为独立内容单元用于承载页最要信息,能够合多格内容,时,卡片又是可操作性、拓展性都常强载体,可以上下延展、左右滑动、呼起弹出等。

QQ群在设计之初就坚持,尽量在各个环节减产本身对于户在线场景的工作惯性的影响和挑战,而容本身成为引导户的方向。

腾讯实战案例!QQ 家校群的改版设计过程复盘

配色:丰富又有迹可循

个目都有各自性格和质。「数学是精神,理性精神。」,而蓝色在色体系也是冷静理性代表。语文是华文化传承,而红色是华文化最具代表性色。根据颜色属性赋予各独有色,我们从 QQ 色体系里甄出与目性格特征相符色——蓝色应数学,红色代表语文。更要是,QQ家校群认为教学与学习都应该是丰富而多。

腾讯实战案例!QQ 家校群的改版设计过程复盘

舍弃量化分数,倾注情感

教育的一大目的在激励被教育者不断追求进步,QQ家校群认为每个学生是优的,有教而无类,因此,QQ家校群弱化在学校教育中赤裸裸的分数度,不直接使用分数,而是使用彩的梯度来表现评分的阶段。同时,QQ大黄脸表情为 QQ 独有的 IP形象,也被运用到设计中,是因为表情能够承载比文字更富的信息,也以向用户传达文字难以表述的复情感。同时,我们也改变以往普通文案的粗暴表达,注情感,希望学生在看到业评改结果时,能够感受到倾注其中的温暖的激励。

腾讯实战案例!QQ 家校群的改版设计过程复盘

用纹理讲一故事

我们还采用各科目具表性与故事性的纹理表达各科目的特殊气质。语文教育的基础除了于如何学习运用汉字,同时需引导学感受汉字的感。汉字作象形文字,以象形基础,借形表意,以意传,形、意、都融于一方块内。如「旦」字,「从日见一」,从字面看,就能观察到「太于平线」,这汉字独特的表能力。因将汉字拆解、重构、重新表,语文教育的一象征符。数学采用「不可能的三角形」作基础图形重复演绎,理则牛顿的苹果,都展示了各科目的特殊气质。

腾讯实战案例!QQ 家校群的改版设计过程复盘

腾讯实战案例!QQ 家校群的改版设计过程复盘

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

虽然群项目团队的设计想法没有全量发布,但在灰期间得到了灰户的好评。而从设计的角看,在当前美感缺乏的现状,青年对于审美的认知大多来自于他们生、习接触到的书籍、工具、包等等。作为一款互联产,QQ群希望承担起青年的美责任。我们的设计很可影响一代对于美的认知,我们的设计很可会潜移默青年自身美体系的建立。真正的,仅仅是授知识,还包含培生的美感,激发他们心深处的真、善、美、乐,这些纯质的情感够润泽他们的一生。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

小桔车服成立于2018年4月,是滴滴旗下的车主服务平台,提供驾考、购车/租车、金融服务、能源消耗、维修保养、二手车置出等线...
中台设计
编者按:本文由一个成功通过腾讯实习考核的设计师分享,从角色转变、方法论到知识架构3个方面让你快速从职场小白成长为专业设...
实习生
设计冲刺最早由谷歌提出针对带领团队快速做创新设计并验证设计的基本流程。下面通过这篇文章,带着大家来感受我们这次设计冲...
世界杯
我们需要做有依据、有逻辑、有理念的设计,需要发散思维、整合创意、严谨输出,让设计经得起推敲。 2018年春节已远去,一直...
品牌
58UXD:对于绝大多数二手车消费者来说,头顶始终有绕不开的三座大山:车况不透明、信息不真实、价格不确定。 山路艰险,好...
58UXD
@做设计的面条 :做设计的时候经常毫无头绪或者看不出自己的问题在哪里?相信你们看完这篇5个改稿对比案例后,会对自己平时所...
实战案例
每一次学习改版案例,不仅仅只是去看在视觉层面的变化,更多的应该是要学习到作者改版背后的思考。为什么要这么改,原因是什...
改版设计
QQ 像用户的一个小小星球,可以随意的装点展示自己的个性,同时也能看到其他好友的小星球。然而人是动态成长和变化的,纷繁的...
QQ