本文是騰訊團(tuán)隊(duì)關(guān)于QQ家校群改版的一個(gè)設(shè)計(jì)復(fù)盤的過程，一起來看看~

萬能螺絲刀也擰不開眼鏡框上的螺絲。如同萬能螺絲刀一樣，QQ也是一個(gè)通用的溝通工具，在針對(duì)游戲、粉絲、家校等垂類場景下，用戶的很多需求未能很好的被滿足。其中家校群場景中用戶數(shù)及活躍還處于穩(wěn)定增長，且用戶數(shù)還遠(yuǎn)小于市場中的家校群體數(shù)，機(jī)會(huì)可觀。所以我們希望能夠更好的服務(wù)這類人群，以吸引更多用戶。

為什么是作業(yè)場景？

在家校群體中，無論是以前的線下低頻溝通還是現(xiàn)在的線上高頻溝通，溝通的內(nèi)容主要是圍繞一些學(xué)校信息的同步以及學(xué)生的作業(yè)情況。

其中在線溝通作業(yè)幾乎每日都會(huì)發(fā)生：用戶在群內(nèi)進(jìn)行作業(yè)同步、提交以及作業(yè)結(jié)果的同步等。

但通過用戶訪談我們發(fā)現(xiàn)，作業(yè)作為一個(gè)高頻溝通場景，用戶依舊存在一些痛點(diǎn)。所以我們希望能解決用戶的這些痛點(diǎn)，同時(shí)能進(jìn)一步的對(duì)作業(yè)場景進(jìn)行深挖和探索，以吸引更多的老師來使用QQ家校群。

行業(yè)趨勢

就作業(yè)方面，市場上已經(jīng)有許多的APP，其中不乏像一起作業(yè)網(wǎng)、作業(yè)盒子這類優(yōu)秀且受老師歡迎的應(yīng)用。通過分析以及訪談這類app的用戶，我們發(fā)現(xiàn)在線作業(yè)已是未來的一個(gè)趨勢。

設(shè)計(jì)目標(biāo)

在線作業(yè)已是行業(yè)的一個(gè)趨勢，但是QQ群的用戶更多的還是在群內(nèi)同步和提交作業(yè)，所以我們希望能夠先在盡量保持現(xiàn)有用戶使用習(xí)慣的前提下，通過自動(dòng)批改減輕老師工作，提高效率，然后再逐步培養(yǎng)他們布置在線作業(yè)的習(xí)慣。在學(xué)生側(cè)，我們也希望解決現(xiàn)有痛點(diǎn)的同時(shí)讓他們感覺做作業(yè)更輕松、愉悅。

設(shè)計(jì)方案探索

基于以上的分析，家校群項(xiàng)目團(tuán)隊(duì)通力合作，對(duì)QQ家校群進(jìn)行了一系列的設(shè)計(jì)探索和嘗試。

1. 更便捷的布置和查看作業(yè)

家校群中已有【作業(yè)】應(yīng)用，可幫助老師布置作業(yè)，但布置流程過長且復(fù)雜，所以很多老師不能發(fā)現(xiàn)也不使用。針對(duì)這點(diǎn)，我們簡化了布置流程同時(shí)優(yōu)化書寫作業(yè)內(nèi)容。

在家長以及學(xué)生側(cè)，為避免消息沖走作業(yè)內(nèi)容以及更高效的查看今日所有作業(yè)。我們提高查看作業(yè)入口，同時(shí)新增新作業(yè)提醒。

2. 智能批改作業(yè)，減輕老師工作

因?yàn)榧夹g(shù)問題，我們沒有辦法批改所有的作業(yè)類型。所以我們通過分析現(xiàn)有老師布置的作業(yè)的關(guān)鍵詞，得到老師經(jīng)常布置的作業(yè)類型，同時(shí)分析明確的題型中老師投入的工作量以及得到收益。

通過分析我們決定先嘗試自動(dòng)批改背誦、口算、聽寫這3類作業(yè)。

2.1 在線背誦 —— 一種全新的即時(shí)背誦體驗(yàn)

對(duì)于老師而言，背誦作業(yè)的痛點(diǎn)在于檢查，需要一個(gè)一個(gè)錄音的聽才能獲知學(xué)生的背誦情況。對(duì)學(xué)生而言，學(xué)生需要與第三個(gè)人配合才能完成一次背誦作業(yè)，或者不斷地錄音到自己理想狀態(tài)，效率低而且過程枯燥。為提高效率我們將所有背誦流程搬到了線上，以達(dá)到簡化流程的目的。

在線上背誦過程中，學(xué)生背一句，顯示一句，這樣學(xué)生就可以看到自己讀音錯(cuò)誤的地方。當(dāng)忘記下一句時(shí)，也可以主動(dòng)獲得提示，還原了線下常見的2個(gè)場景。同時(shí)為了讓背誦更加輕松，在背誦完成后以更輕松方式告訴學(xué)生背誦結(jié)果，當(dāng)背誦完美時(shí)也有個(gè)慶祝的動(dòng)畫。

2.2 批改紙質(zhì)口算題

針對(duì)數(shù)學(xué)等作業(yè)，老師一般要求學(xué)生將做好的作業(yè)拍照進(jìn)行提交，而后自己進(jìn)行統(tǒng)計(jì)批改。而針對(duì)口算這類題型，技術(shù)上已經(jīng)支持識(shí)別口算題并進(jìn)行批改。所以我們在維持學(xué)生拍照提交作業(yè)的習(xí)慣上，增加統(tǒng)計(jì)錯(cuò)題能力，讓老師更方便的針對(duì)錯(cuò)題給學(xué)生講解。

老師查閱批改結(jié)果后，可將批改結(jié)果反饋給學(xué)生。反饋頁的設(shè)計(jì)也以更趣味的形式進(jìn)行呈現(xiàn)，以此來降低學(xué)生的壓力感。

2.3 輔助學(xué)生復(fù)習(xí)生字的聽寫體驗(yàn)

現(xiàn)有的聽寫方式同背誦一樣，需要線下與線上方式結(jié)合才能完成，老師統(tǒng)計(jì)家庭聽寫也很不方便。此外通過調(diào)研我們發(fā)現(xiàn)：

1. 老師一般會(huì)將生字組詞后進(jìn)行聽寫；
2. 老師希望通過聽寫考察學(xué)生對(duì)字讀音、書寫、筆順的掌握情況；
3. 家庭聽寫需要父母配合學(xué)生才能完成，有時(shí)因家長忙會(huì)耽誤學(xué)生作業(yè)完成情況。

針對(duì)以上問題，我們將聽寫從線下聽寫搬到線下以方便統(tǒng)計(jì)聽寫情況，并對(duì)以上場景進(jìn)行特殊處理。

3. 作業(yè)統(tǒng)計(jì)數(shù)據(jù)可視化

對(duì)于家庭作業(yè)，老師除了批改之外，還希望知道這次作業(yè)的整體完成情況。QQ家校群現(xiàn)有作業(yè)應(yīng)用已經(jīng)有作業(yè)統(tǒng)計(jì)功能，但通過訪談老師我們發(fā)現(xiàn)，老師檢查作業(yè)主要關(guān)注：

1. 獲知多少人沒有交；
2. 完成的作業(yè)整體情況；
3. 隨機(jī)抽查一些學(xué)生的作業(yè)。

但現(xiàn)有的統(tǒng)計(jì)頁面布局與老師重點(diǎn)關(guān)注的內(nèi)容有所差異，同時(shí)我們通過分析數(shù)據(jù)發(fā)現(xiàn)，98%的情況下，老師只會(huì)布置1個(gè)需要在線提交的作業(yè)。所以為了讓老師更高效的查看每次作業(yè)情況，我們對(duì)老師統(tǒng)計(jì)頁面進(jìn)行了重新設(shè)計(jì)，讓老師關(guān)注的信息更加突出，也更方便抽查和評(píng)論作業(yè)。

4. 視覺設(shè)計(jì)

視覺設(shè)計(jì)也是圍繞著高效和輕松這兩個(gè)設(shè)計(jì)目標(biāo)來展開。如何減輕老師、學(xué)生的壓力，提高教學(xué)、學(xué)習(xí)的效率，是QQ家校群團(tuán)隊(duì)不斷追求的目標(biāo)。

內(nèi)容為王：沉浸式導(dǎo)航與卡片式內(nèi)容

沉浸式導(dǎo)航。在QQ家校群在線作業(yè)等場景下，信息內(nèi)容相當(dāng)繁雜，因此我們將系統(tǒng)導(dǎo)航欄做了沉浸式處理，簡化界面，減少層級(jí)，有效減少整體頁面的層間關(guān)系，導(dǎo)航欄下沉，主體內(nèi)容上浮，主體內(nèi)容得以最干凈的邏輯呈現(xiàn)在用戶面前，提升用戶使用效率，達(dá)到高效傳遞信息的目的。

卡片式：可靠又多變的載體。QQ家校群在線作業(yè)的內(nèi)容比較龐雜，文字、圖片、視頻等多種媒體格式在混排情況下難以控制，此外，由學(xué)生和老師自定義的內(nèi)容普遍不美觀?？ㄆ降脑O(shè)計(jì)則很好地解決了上述的問題。

卡片作為一個(gè)容器，作為獨(dú)立內(nèi)容單元用于承載頁面中最重要的信息，能夠整合多種格式的內(nèi)容，同時(shí)，卡片又是可操作性、拓展性都非常強(qiáng)的載體，可以上下延展、左右滑動(dòng)、呼起彈出等。

QQ家校群在設(shè)計(jì)之初就堅(jiān)持，盡量在各個(gè)環(huán)節(jié)減少產(chǎn)品本身對(duì)于用戶在線下場景的工作慣性的影響和挑戰(zhàn)，而讓內(nèi)容本身成為引導(dǎo)用戶的方向。

配色：豐富又有跡可循

每個(gè)科目都有各自的性格和氣質(zhì)。“數(shù)學(xué)是一種精神，一種理性的精神?！?，而藍(lán)色在色彩體系中也是冷靜理性的代表。語文是中華文化的傳承，而紅色是中華文化最具代表性的色彩。根據(jù)顏色的屬性賦予各科獨(dú)有的色彩，我們從QQ色彩體系里甄別出與科目性格特征相符的色彩——藍(lán)色對(duì)應(yīng)數(shù)學(xué)，紅色代表語文。更重要的是，QQ家校群認(rèn)為教學(xué)與學(xué)習(xí)都應(yīng)該是豐富而多彩的。

舍棄量化分?jǐn)?shù)，傾注情感

教育的一大目的在于激勵(lì)被教育者不斷追求進(jìn)步，QQ家校群認(rèn)為每個(gè)學(xué)生都是優(yōu)秀的，有教而無類。因此，QQ家校群弱化在學(xué)校教育中赤裸裸的分?jǐn)?shù)制度，不直接使用分?jǐn)?shù)，而是使用色彩的梯度來表現(xiàn)評(píng)分的階段。

同時(shí)，QQ大黃臉表情作為QQ獨(dú)有的IP形象，也被運(yùn)用到設(shè)計(jì)中，這是因?yàn)楸砬槟軌虺休d比文字更豐富的信息，也可以向用戶傳達(dá)文字難以表述的復(fù)雜情感。同時(shí)，我們也改變了以往普通文案的粗暴表達(dá)，注入情感，希望學(xué)生在看到作業(yè)評(píng)改結(jié)果時(shí)，都能夠感受到傾注其中的溫暖的激勵(lì)。

用紋理講一個(gè)故事

我們還采用各科目具有代表性與故事性的紋理來表達(dá)各個(gè)科目的特殊氣質(zhì)。語文教育的基礎(chǔ)除了在于如何學(xué)習(xí)運(yùn)用漢字，同時(shí)需引導(dǎo)學(xué)生感受漢字的美感。漢字作為象形文字，以象形為基礎(chǔ)，借形表意，以意傳情，形、意、情都融于一個(gè)方塊內(nèi)。

如「旦」字，「從日見一上」，從字面看，就能感觀察到「太陽生于地平線」，這是漢字獨(dú)特的表現(xiàn)能力。因而將漢字拆解、重構(gòu)、重新表現(xiàn)，成為語文教育的一個(gè)象征符號(hào)。

數(shù)學(xué)采用「不可能的三角形」作為基礎(chǔ)圖形重復(fù)演繹，物理則是牛頓的蘋果，都展示了各個(gè)科目的特殊氣質(zhì)。

一點(diǎn)展望：給青少年更美更好的教育產(chǎn)品

雖然家校群項(xiàng)目團(tuán)隊(duì)的設(shè)計(jì)想法沒有全量發(fā)布，但在灰度期間也得到了灰度用戶的好評(píng)。而從設(shè)計(jì)的角度看，在當(dāng)前美感教育缺乏的現(xiàn)狀下，青少年對(duì)于審美的認(rèn)知大多來自于他們生活、學(xué)習(xí)所接觸到的書籍、工具、包裝等等。

作為一款互聯(lián)網(wǎng)教育產(chǎn)品，QQ家校群希望也能承擔(dān)起青少年的美學(xué)教育責(zé)任。我們的設(shè)計(jì)很可能影響下一代對(duì)于美學(xué)的認(rèn)知，我們的設(shè)計(jì)很可能會(huì)潛移默化青少年自身美學(xué)體系的建立。真正的教育，不僅僅是教授知識(shí)，還包含培育學(xué)生的美感，激發(fā)他們內(nèi)心深處的真、善、美、樂，讓這些純質(zhì)的情感能夠潤澤他們的一生。

作者：一個(gè)杰的，公眾號(hào)：騰訊ISUX（ID：tencent_isux）

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

題圖來自Unsplash，基于CC0協(xié)議