本文是騰訊團隊關于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家校群在線作業的內容比較龐雜，文字、圖片、視頻等多種媒體格式在混排情況下難以控制，此外，由學生和老師自定義的內容普遍不美觀?？ㄆ降脑O計則很好地解決了上述的問題。

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

QQ家校群在設計之初就堅持，盡量在各個環節減少產品本身對于用戶在線下場景的工作慣性的影響和挑戰，而讓內容本身成為引導用戶的方向。

配色：豐富又有跡可循

每個科目都有各自的性格和氣質?！皵祵W是一種精神，一種理性的精神?！?，而藍色在色彩體系中也是冷靜理性的代表。語文是中華文化的傳承，而紅色是中華文化最具代表性的色彩。根據顏色的屬性賦予各科獨有的色彩，我們從QQ色彩體系里甄別出與科目性格特征相符的色彩——藍色對應數學，紅色代表語文。更重要的是，QQ家校群認為教學與學習都應該是豐富而多彩的。

舍棄量化分數，傾注情感

教育的一大目的在于激勵被教育者不斷追求進步，QQ家校群認為每個學生都是優秀的，有教而無類。因此，QQ家校群弱化在學校教育中赤裸裸的分數制度，不直接使用分數，而是使用色彩的梯度來表現評分的階段。

同時，QQ大黃臉表情作為QQ獨有的IP形象，也被運用到設計中，這是因為表情能夠承載比文字更豐富的信息，也可以向用戶傳達文字難以表述的復雜情感。同時，我們也改變了以往普通文案的粗暴表達，注入情感，希望學生在看到作業評改結果時，都能夠感受到傾注其中的溫暖的激勵。

用紋理講一個故事

我們還采用各科目具有代表性與故事性的紋理來表達各個科目的特殊氣質。語文教育的基礎除了在于如何學習運用漢字，同時需引導學生感受漢字的美感。漢字作為象形文字，以象形為基礎，借形表意，以意傳情，形、意、情都融于一個方塊內。

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

數學采用「不可能的三角形」作為基礎圖形重復演繹，物理則是牛頓的蘋果，都展示了各個科目的特殊氣質。

一點展望：給青少年更美更好的教育產品

雖然家校群項目團隊的設計想法沒有全量發布，但在灰度期間也得到了灰度用戶的好評。而從設計的角度看，在當前美感教育缺乏的現狀下，青少年對于審美的認知大多來自于他們生活、學習所接觸到的書籍、工具、包裝等等。

作為一款互聯網教育產品，QQ家校群希望也能承擔起青少年的美學教育責任。我們的設計很可能影響下一代對于美學的認知，我們的設計很可能會潛移默化青少年自身美學體系的建立。真正的教育，不僅僅是教授知識，還包含培育學生的美感，激發他們內心深處的真、善、美、樂，讓這些純質的情感能夠潤澤他們的一生。

作者：一個杰的，公眾號：騰訊ISUX（ID：tencent_isux）

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

題圖來自Unsplash，基于CC0協議