師訓(xùn)平臺(tái)是一款關(guān)注教育者教學(xué)感受，專注提高教學(xué)幸福感的一款差異化教育培訓(xùn)類產(chǎn)品，是我們的合作伙伴—清華大學(xué)心理學(xué)系學(xué)習(xí)科學(xué)實(shí)驗(yàn)室執(zhí)行主任宋老師，與他的教研團(tuán)隊(duì)一起設(shè)計(jì)研發(fā)的一款線上產(chǎn)品。今天與大家一起分享我們是如何讓工具化教培類產(chǎn)品更具有“溫度”，同時(shí)又滿足B端產(chǎn)品多樣、規(guī)范化設(shè)計(jì)的。

項(xiàng)目背景

此項(xiàng)目是由我們的合作伙伴-清華大學(xué)心理學(xué)系學(xué)習(xí)科學(xué)實(shí)驗(yàn)室執(zhí)行主任宋老師和他的團(tuán)隊(duì)發(fā)起，與我們騰訊云的小伙伴一起完成設(shè)計(jì)和開(kāi)發(fā)的。宋老師的師資團(tuán)隊(duì)在教育培訓(xùn)行業(yè)已有多年的沉淀，且在類工具化的教培線上產(chǎn)品授課經(jīng)驗(yàn)豐富。宋老師團(tuán)隊(duì)認(rèn)為：“現(xiàn)有的工具化產(chǎn)品并不能足夠滿足團(tuán)隊(duì)的教學(xué)需求和理念”。他們需要更富有情感化的產(chǎn)品，區(qū)別于其它的在線工具化的教培產(chǎn)品。同時(shí)在教學(xué)過(guò)程中宋老師團(tuán)隊(duì)的核心痛點(diǎn)在于：如何讓學(xué)員有動(dòng)力的學(xué)習(xí)下去。 21天中長(zhǎng)期課程訓(xùn)練營(yíng)，學(xué)員會(huì)經(jīng)常出現(xiàn)無(wú)法堅(jiān)持學(xué)習(xí)、學(xué)習(xí)動(dòng)力不足、中途放棄學(xué)習(xí)等問(wèn)題，而這些也自然成為我們需要去突破和解決的設(shè)計(jì)難點(diǎn)。

核心訴求：如何讓學(xué)員有動(dòng)力學(xué)習(xí)？

解析問(wèn)題：老師團(tuán)隊(duì)希望做出與市場(chǎng)上工具化產(chǎn)品有所區(qū)別的產(chǎn)品目標(biāo)，更是一款具有情感化且具有工具屬性的教培產(chǎn)品。根據(jù)這個(gè)目標(biāo)和方向，我們快速嘗試了一版方案：讓學(xué)習(xí)進(jìn)度清晰可見(jiàn)—“學(xué)習(xí)地圖”方案。

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

快速迭代1.0 學(xué)習(xí)地圖，定位問(wèn)題聚焦設(shè)計(jì)方向。

1.0版設(shè)計(jì)地圖

我們快速打造并模擬上線了1.0版學(xué)習(xí)地圖，并和宋老師團(tuán)隊(duì)溝通發(fā)現(xiàn)：如上圖的信息模式更適合即時(shí)性運(yùn)營(yíng)類的信息傳達(dá)，而在21天這樣的學(xué)習(xí)訓(xùn)練營(yíng)中，這樣的視覺(jué)信息表達(dá)會(huì)有以下的問(wèn)題：

1、學(xué)習(xí)路徑漫長(zhǎng)且曲折，讓學(xué)習(xí)目標(biāo)看起來(lái)很難完成；

2、在漫長(zhǎng)的路徑上連續(xù)不斷的關(guān)卡造成一種讓用戶遙不可及且容易中途就放棄學(xué)習(xí) ；

3、節(jié)點(diǎn)的節(jié)奏過(guò)于單調(diào)讓學(xué)習(xí)沒(méi)有預(yù)期感、缺失成就感。

雖然秉持著創(chuàng)造輕松的學(xué)習(xí)環(huán)境和氣氛的目標(biāo)，我們的設(shè)計(jì)還不能滿足實(shí)現(xiàn)情感化的工具產(chǎn)品，所以我們快速的定位問(wèn)題并調(diào)整了我們學(xué)習(xí)地圖的設(shè)計(jì)思路。

1.0版設(shè)計(jì)地圖

學(xué)習(xí)如何才能是輕松又有動(dòng)力的？

回答最初的問(wèn)題，如何讓學(xué)習(xí)輕松有效又有持續(xù)性？分為以下幾個(gè)維度：

A. 縮短學(xué)習(xí)路徑— 讓學(xué)習(xí)目標(biāo)看起來(lái)輕松可執(zhí)行。

B. 拉近終點(diǎn)目標(biāo)— 讓原先看起來(lái)遙不可及的目標(biāo)“觸手可及”。

C. 只聚焦當(dāng)前任務(wù) 弱化未完成的任務(wù)—幫助學(xué)習(xí)者減負(fù)，學(xué)習(xí)者不需要關(guān)注將來(lái)的任務(wù)，只需要把精力聚焦在當(dāng)前的任務(wù)下，完成當(dāng)前的力所能及的“小事”就能打卡成功。

D. 放大學(xué)習(xí)成就感— 在21天的訓(xùn)練營(yíng)，把學(xué)習(xí)分成：初、中、后期。在學(xué)習(xí)初期需要關(guān)注學(xué)習(xí)習(xí)慣的養(yǎng)成；在學(xué)習(xí)中期需要幫助學(xué)習(xí)者在中途不要放棄學(xué)習(xí)，鼓勵(lì)學(xué)習(xí)者，并將學(xué)習(xí)回報(bào)等可視化，像是累計(jì)的學(xué)習(xí)時(shí)間獲得驚喜等；在學(xué)期后期放大目標(biāo)，凸顯目標(biāo)任務(wù)近在咫尺的感受，在最后學(xué)習(xí)終點(diǎn)放大學(xué)習(xí)的成就感。

E. 放大社交屬性— 騰訊的基因就是有社交屬性的，所以將學(xué)習(xí)組團(tuán)化，學(xué)習(xí)者之間互相鼓勵(lì)，讓學(xué)習(xí)變得簡(jiǎn)單和快樂(lè)。

從籠統(tǒng)的游戲化設(shè)計(jì)聚焦關(guān)鍵設(shè)計(jì)點(diǎn)

輕松： 創(chuàng)造更輕松愉快的學(xué)習(xí)氛圍。

首先需要拆解分化目標(biāo)本身，聚焦于當(dāng)下要完成的事，而不是想著那個(gè)遙不可及的目標(biāo)；其次，讓過(guò)程可見(jiàn)，看見(jiàn)學(xué)習(xí)的過(guò)程視覺(jué)化的量化；最后，驚喜埋點(diǎn)，讓學(xué)習(xí)是一件快樂(lè)的事情。

激勵(lì)： 主要的思考方向聚焦在：增加互動(dòng)，老師上課直播的送花 、標(biāo)示（學(xué)習(xí)積極分子等）創(chuàng)造學(xué)員之間的互動(dòng)，攀登榜等。其次通過(guò)驚喜盲盒讓學(xué)習(xí)也是可以開(kāi)心并且有成果的。

品牌化： 以此次的項(xiàng)目代表，不同的教育機(jī)構(gòu)有自己的屬性和教育理念的傳達(dá)，也有大量的運(yùn)營(yíng)的需求。如何幫助合作伙伴或是客戶更好的快速、清晰、準(zhǔn)確的塑造其品牌和品牌識(shí)別度，也是我們需要聚焦的方向。

B端設(shè)計(jì)： 作為B端的設(shè)計(jì)，希望后續(xù)面對(duì)類似需求的客戶可以將設(shè)計(jì)元素組件化，量化復(fù)用的同時(shí)，滿足用戶定制化的需求，靈活多變，幫助產(chǎn)品快速的產(chǎn)出。

聚焦設(shè)計(jì)關(guān)鍵點(diǎn) 

打造差異化學(xué)習(xí)地圖專項(xiàng)設(shè)計(jì)

地圖信息屬性調(diào)整

節(jié)點(diǎn)： 將課程的節(jié)點(diǎn)放大，且增加變量的屬性，讓每節(jié)課程的節(jié)點(diǎn)都“埋藏驚喜”。同時(shí)節(jié)點(diǎn)的設(shè)計(jì)分為基礎(chǔ)節(jié)點(diǎn)和其它節(jié)點(diǎn)。其它節(jié)點(diǎn)包含：彩蛋節(jié)點(diǎn)、運(yùn)營(yíng)位節(jié)點(diǎn)等，讓節(jié)點(diǎn)變成一個(gè)組件的同時(shí)具備了靈活變化的屬性。

節(jié)點(diǎn)組件 

路徑： 節(jié)點(diǎn)自身就可以組成隱形的路徑，相對(duì)就壓縮了學(xué)習(xí)路徑，減輕學(xué)習(xí)者的學(xué)習(xí)負(fù)擔(dān)。并且用空間感的“近大遠(yuǎn)小的”路徑設(shè)計(jì)從視覺(jué)上“拉近”學(xué)習(xí)目標(biāo)終點(diǎn)。

角色融入： 將學(xué)習(xí)者角色帶入，用了小人“跳一跳”的動(dòng)態(tài)增加學(xué)習(xí)的趣味性。

動(dòng)態(tài)跳一跳 

故事線： 服務(wù)于售前，產(chǎn)品可以針對(duì)不同的客戶和需求串連不同的故事線。在做初期提案時(shí)，我們的故事線是：學(xué)習(xí)積累水滴灌溉小樹(shù)苗，在學(xué)習(xí)過(guò)程中小樹(shù)苗慢慢成長(zhǎng)變成大樹(shù)，通過(guò)這樣的視覺(jué)呈現(xiàn)來(lái)體現(xiàn)學(xué)習(xí)的成就感。學(xué)習(xí)者在不同的節(jié)點(diǎn)會(huì)解鎖帶有樹(shù)苗長(zhǎng)大的驚喜“彩蛋”節(jié)點(diǎn)。作為B端的設(shè)計(jì)服務(wù)，不同的客戶有不同的目標(biāo)需求，但是基于這樣的學(xué)習(xí)地圖組件，后續(xù)可以更換不同的故事線，也可以根據(jù)客戶需求靈活定制學(xué)習(xí)地圖。

地圖在界面上的的呈現(xiàn)

終點(diǎn)目標(biāo)可見(jiàn)/聚焦當(dāng)前任務(wù)：首屏就可以看到終點(diǎn)，并展示終點(diǎn)第21節(jié)課程，減輕學(xué)習(xí)者的負(fù)擔(dān)。在視覺(jué)上呈現(xiàn)出：完成這個(gè)目標(biāo)“看起來(lái)”也不是很困難的感受，讓學(xué)習(xí)者感覺(jué)自己是可以憑借著努力去觸達(dá)學(xué)習(xí)終點(diǎn)的。所以學(xué)習(xí)者只需要聚焦在當(dāng)前需要完成的課程，而不需要考慮還未完成的課程。

地圖的視覺(jué)呈現(xiàn) 

界面結(jié)構(gòu)：1.遠(yuǎn)景：不同的階段感，放大成就感。；2.課程區(qū)域：（減少學(xué)習(xí)負(fù)擔(dān)，聚焦當(dāng)前的任務(wù)；3.前景區(qū)域：邊走風(fēng)景邊會(huì)變化體現(xiàn)成長(zhǎng)感，減少學(xué)習(xí)的倦怠感。

前、中、遠(yuǎn)景的結(jié)構(gòu)設(shè)計(jì)：界面的結(jié)構(gòu)分為：前景、中景、遠(yuǎn)景。前景區(qū)域：隨著學(xué)習(xí)者邊“走”風(fēng)景會(huì)變化，在前景處體現(xiàn)學(xué)習(xí)者的成長(zhǎng)感，減少學(xué)習(xí)的倦怠。中景：課程區(qū)域，減少學(xué)習(xí)負(fù)擔(dān)，聚焦當(dāng)前的任務(wù)。遠(yuǎn)景：弱化未來(lái)的課程，在學(xué)習(xí)后期階段，放大目標(biāo)觸手可及的感受，幫助學(xué)習(xí)者堅(jiān)持學(xué)習(xí)。

學(xué)習(xí)地圖元素的組件靈活變化：1.0版本的學(xué)習(xí)地圖設(shè)計(jì)重心放在視覺(jué)插畫(huà)上，而忽略了服務(wù)于B端用戶所需的快速組件化。基于現(xiàn)在的設(shè)計(jì)結(jié)構(gòu)，可以有效的產(chǎn)出和預(yù)估設(shè)計(jì)的工作量，將其作為有情感沉淀的半自定義組件。 

如何通過(guò)界面提升學(xué)習(xí)動(dòng)力 

最后小結(jié)：學(xué)習(xí)地圖的設(shè)計(jì)是為了幫助學(xué)習(xí)者減輕學(xué)習(xí)負(fù)擔(dān)、幫助學(xué)習(xí)者明確學(xué)習(xí)路徑、凸顯學(xué)習(xí)的成長(zhǎng)感。靈活的節(jié)點(diǎn)設(shè)計(jì)以及隱藏彩蛋增強(qiáng)了學(xué)習(xí)的動(dòng)力，減少了學(xué)習(xí)的疲勞感。而在產(chǎn)品售賣(mài)層面，可以串聯(lián)不同的故事線快速搭建學(xué)習(xí)地圖。

幫助合作伙伴樹(shù)立品牌

客戶提案

合作伙伴提出了關(guān)鍵詞“成長(zhǎng)”，為了更好地管理用戶的預(yù)期，我們做了以“成長(zhǎng)”為核心的三個(gè)維度展開(kāi)的設(shè)計(jì)提案。方案A為成長(zhǎng)沐浴在陽(yáng)關(guān)下的治愈型方案—向陽(yáng)而生感受成長(zhǎng)的力量。方案B為學(xué)習(xí)也可以很快樂(lè)—學(xué)習(xí)嘉年華。方案C為成長(zhǎng)的經(jīng)典綠色方案—成長(zhǎng)是一種詩(shī)意的棲居。

3個(gè)不同的提案 

確定主題向陽(yáng)而生

在與合作伙伴溝通后選擇了A方案向陽(yáng)而生，產(chǎn)品也重新定義了故事主線。將故事主線定義為“登山看日出”所以根據(jù)新的故事主線我們定義了主要的品牌元素及延伸運(yùn)用。

品牌設(shè)計(jì)元素的提取與應(yīng)用

宋老師團(tuán)隊(duì)選擇的“向陽(yáng)而生”的方案，將設(shè)計(jì)元素的落點(diǎn)在于“陽(yáng)光”的設(shè)計(jì)點(diǎn)上。

視覺(jué)元素提取 

抽象并賦予視覺(jué)的語(yǔ)意 “在名師的指導(dǎo)下學(xué)習(xí)成長(zhǎng)，猶如沐浴在溫和自在的陽(yáng)光中，快樂(lè)成長(zhǎng)，快樂(lè)學(xué)習(xí)”，并加入了“學(xué)習(xí)”的元素—筆記本，希望可以通過(guò)紙張?bào)w現(xiàn)學(xué)習(xí)過(guò)程中的“親切感”。

主要設(shè)計(jì)元素 

首先來(lái)分解主要的視覺(jué)設(shè)計(jì)點(diǎn)-陽(yáng)光，提取陽(yáng)光“溫暖柔和”的特質(zhì)。將陽(yáng)光元素抽象出：磨砂模糊的陽(yáng)光光暈、一束光線的色彩形狀的組合。并將這些特質(zhì)運(yùn)用在界面設(shè)計(jì)中，如下圖。 

設(shè)計(jì)元素在界面上的應(yīng)用 

在質(zhì)感上運(yùn)用更多偏磨砂的效果，加入有代表性的筆記本元素作為底紋。在界面可以上看到，通過(guò)陽(yáng)光光束突出人名，重要的按鈕及按鈕狀態(tài)也增加了陽(yáng)光光暈的設(shè)計(jì)，在細(xì)節(jié)上潛移默化地呈現(xiàn)教學(xué)與設(shè)計(jì)的理念。 

設(shè)計(jì)元素在界面上的應(yīng)用 

差異化：融入新的故事線—放大學(xué)習(xí)成就感

融入新的故事線“登山看日出”。在產(chǎn)品中“學(xué)習(xí)地圖”作為差異化的設(shè)計(jì)點(diǎn)的全過(guò)程展示。

學(xué)習(xí)進(jìn)度的視覺(jué)化呈現(xiàn)分為三個(gè)不同階段：

1、初期-學(xué)習(xí)新鮮期

 2、中期-學(xué)習(xí)倦怠期 

3、后期-學(xué)習(xí)沖刺期

我們將21天的學(xué)習(xí)進(jìn)程分成不同的階段，并根據(jù)不同的用戶心理改變視覺(jué)呈現(xiàn)，前期和中期和后期會(huì)有明顯的“視覺(jué)改變”，在最后成功的學(xué)習(xí)完成也會(huì)有一個(gè)儀式感的“學(xué)習(xí)路徑”的層層疊加，凸顯學(xué)習(xí)的成就感，此時(shí)也是用戶對(duì)自己用心學(xué)習(xí)的最好回饋，將這一些心理狀態(tài)都視覺(jué)化地呈現(xiàn)在用戶眼前。 

階段的視覺(jué)呈現(xiàn) 

學(xué)習(xí)地圖組件分為：前景，學(xué)習(xí)過(guò)程變化的信息；中/遠(yuǎn)景，學(xué)習(xí)節(jié)點(diǎn)，學(xué)習(xí)節(jié)點(diǎn)包括基礎(chǔ)節(jié)點(diǎn)和自定義節(jié)點(diǎn)，自定義節(jié)點(diǎn)可以根據(jù)產(chǎn)品和客戶的需要更改節(jié)點(diǎn)的屬性；遠(yuǎn)景：學(xué)習(xí)結(jié)束的儀式感展現(xiàn)。這一學(xué)習(xí)路徑的視覺(jué)展現(xiàn)形式也可以很好的轉(zhuǎn)化為設(shè)計(jì)組件，串聯(lián)不同的故事線讓學(xué)員去完成不同天數(shù)的線上學(xué)習(xí)。 

學(xué)習(xí)地圖組件

其它學(xué)習(xí)激勵(lì)頁(yè)面呼應(yīng) “向陽(yáng)而生”的故事線，我們的設(shè)計(jì)還包含了其它的學(xué)習(xí)激勵(lì)機(jī)制。例如：每次完成學(xué)習(xí)會(huì)獲得一個(gè)“太陽(yáng)”積分、學(xué)習(xí)攀登榜的設(shè)計(jì)上，呼應(yīng)登山主題的視覺(jué)表達(dá)。

其他激勵(lì)頁(yè)面 

設(shè)計(jì)規(guī)范與設(shè)計(jì)協(xié)同 為感更好地進(jìn)行教育的視覺(jué)協(xié)作，我們將視覺(jué)規(guī)范分為：設(shè)計(jì)總體理念的概覽、設(shè)計(jì)基礎(chǔ)組件、設(shè)計(jì)特殊組件、界面相關(guān)的具體設(shè)計(jì)內(nèi)容、典型頁(yè)面和人物封面規(guī)范等，保證內(nèi)外部的設(shè)計(jì)輸出規(guī)范，保持產(chǎn)品視覺(jué)基調(diào)完整準(zhǔn)確。 

設(shè)計(jì)規(guī)范 

協(xié)同設(shè)計(jì) 

想要更好的進(jìn)行設(shè)計(jì)協(xié)同，現(xiàn)在就來(lái)我們的官網(wǎng)，體驗(yàn)一站式的設(shè)計(jì)協(xié)作吧?。c(diǎn)擊即可跳轉(zhuǎn)） 

Powered by Froala Editor