B端教育產(chǎn)品的情感化設(shè)計(視覺篇)
編輯導(dǎo)語:教培類產(chǎn)品若想更有效地吸引用戶留存,則需要站在用戶的角度進(jìn)行思考,讓用戶有持續(xù)性的動力使用產(chǎn)品。而有“溫度”的設(shè)計可以讓用戶更有動力。本篇文章里,作者從視覺上總結(jié)了B端教育產(chǎn)品的情感化設(shè)計操作策略,一起來看一下。
上期和大家分享了B端教育產(chǎn)品的情感化設(shè)計(交互篇),今天便講講我們是如何讓工具化教培類產(chǎn)品更具有“溫度”,同時又滿足B端產(chǎn)品多樣、規(guī)范化設(shè)計的。
一、項目背景
此項目是由我們的合作伙伴-清華大學(xué)心理學(xué)系學(xué)習(xí)科學(xué)實驗室執(zhí)行主任宋老師和他的團(tuán)隊發(fā)起,與我們騰訊云的小伙伴一起完成設(shè)計和開發(fā)的。宋老師的師資團(tuán)隊在教育培訓(xùn)行業(yè)已有多年的沉淀,且在類工具化的教培線上產(chǎn)品授課經(jīng)驗豐富。
宋老師團(tuán)隊認(rèn)為:“現(xiàn)有的工具化產(chǎn)品并不能足夠滿足團(tuán)隊的教學(xué)需求和理念”。他們需要更富有情感化的產(chǎn)品,區(qū)別于其它的在線工具化的教培產(chǎn)品。
同時在教學(xué)過程中宋老師團(tuán)隊的核心痛點在于:如何讓學(xué)員有動力地學(xué)習(xí)下去。21天中長期課程訓(xùn)練營,學(xué)員會經(jīng)常出現(xiàn)無法堅持學(xué)習(xí)、學(xué)習(xí)動力不足、中途放棄學(xué)習(xí)等問題,而這些也自然成為我們需要去突破和解決的設(shè)計難點。
1. 核心訴求:如何讓學(xué)員有動力學(xué)習(xí)?
解析問題:老師團(tuán)隊希望做出與市場上工具化產(chǎn)品有所區(qū)別的產(chǎn)品目標(biāo),更是一款具有情感化且具有工具屬性的教培產(chǎn)品。根據(jù)這個目標(biāo)和方向,我們快速嘗試了一版方案:讓學(xué)習(xí)進(jìn)度清晰可見—“學(xué)習(xí)地圖”方案。
設(shè)計目標(biāo)
快速迭代1.0 學(xué)習(xí)地圖,定位問題聚焦設(shè)計方向。
1.0版設(shè)計地圖
我們快速打造并模擬上線了1.0版學(xué)習(xí)地圖,并和宋老師團(tuán)隊溝通發(fā)現(xiàn):如上圖的信息模式更適合即時性運營類的信息傳達(dá),而在21天這樣的學(xué)習(xí)訓(xùn)練營中,這樣的視覺信息表達(dá)會有以下的問題:
- 學(xué)習(xí)路徑漫長且曲折,讓學(xué)習(xí)目標(biāo)看起來很難完成;
- 在漫長的路徑上連續(xù)不斷的關(guān)卡造成一種讓用戶遙不可及且容易中途就放棄學(xué)習(xí);
- 節(jié)點的節(jié)奏過于單調(diào)讓學(xué)習(xí)沒有預(yù)期感、缺失成就感。
雖然秉持著創(chuàng)造輕松的學(xué)習(xí)環(huán)境和氣氛的目標(biāo),我們的設(shè)計還不能滿足實現(xiàn)情感化的工具產(chǎn)品,所以我們快速的定位問題并調(diào)整了我們學(xué)習(xí)地圖的設(shè)計思路。
1.0版設(shè)計地圖
2. 學(xué)習(xí)如何才能是輕松又有動力的?
回答最初的問題,如何讓學(xué)習(xí)輕松有效又有持續(xù)性?分為以下幾個維度:
1)縮短學(xué)習(xí)路徑— 讓學(xué)習(xí)目標(biāo)看起來輕松可執(zhí)行。
2)拉近終點目標(biāo)— 讓原先看起來遙不可及的目標(biāo)“觸手可及”。
3)只聚焦當(dāng)前任務(wù) 弱化未完成的任務(wù)—幫助學(xué)習(xí)者減負(fù),學(xué)習(xí)者不需要關(guān)注將來的任務(wù),只需要把精力聚焦在當(dāng)前的任務(wù)下,完成當(dāng)前的力所能及的“小事”就能打卡成功。
4)放大學(xué)習(xí)成就感— 在21天的訓(xùn)練營,把學(xué)習(xí)分成:初、中、后期。在學(xué)習(xí)初期需要關(guān)注學(xué)習(xí)習(xí)慣的養(yǎng)成;在學(xué)習(xí)中期需要幫助學(xué)習(xí)者在中途不要放棄學(xué)習(xí),鼓勵學(xué)習(xí)者,并將學(xué)習(xí)回報等可視化,像是累計的學(xué)習(xí)時間獲得驚喜等;在學(xué)期后期放大目標(biāo),凸顯目標(biāo)任務(wù)近在咫尺的感受,在最后學(xué)習(xí)終點放大學(xué)習(xí)的成就感。
5)放大社交屬性— 騰訊的基因就是有社交屬性的,所以將學(xué)習(xí)組團(tuán)化,學(xué)習(xí)者之間互相鼓勵,讓學(xué)習(xí)變得簡單和快樂。
3. 從籠統(tǒng)的游戲化設(shè)計聚焦關(guān)鍵設(shè)計點
1)輕松
創(chuàng)造更輕松愉快的學(xué)習(xí)氛圍。首先需要拆解分化目標(biāo)本身,聚焦于當(dāng)下要完成的事,而不是想著那個遙不可及的目標(biāo);其次,讓過程可見,看見學(xué)習(xí)的過程視覺化的量化;最后,驚喜埋點,讓學(xué)習(xí)是一件快樂的事情。
2)激勵
主要的思考方向聚焦在:增加互動,老師上課直播的送花 、標(biāo)示(學(xué)習(xí)積極分子等)創(chuàng)造學(xué)員之間的互動,攀登榜等。其次通過驚喜盲盒讓學(xué)習(xí)也是可以開心并且有成果的。
3)品牌化
以此次的項目代表,不同的教育機構(gòu)有自己的屬性和教育理念的傳達(dá),也有大量的運營的需求。如何幫助合作伙伴或是客戶更好的快速、清晰、準(zhǔn)確的塑造其品牌和品牌識別度,也是我們需要聚焦的方向。
4)B端設(shè)計
作為B端的設(shè)計,希望后續(xù)面對類似需求的客戶可以將設(shè)計元素組件化,量化復(fù)用的同時,滿足用戶定制化的需求,靈活多變,幫助產(chǎn)品快速的產(chǎn)出。
聚焦設(shè)計關(guān)鍵點
二、差異化學(xué)習(xí)地圖專項設(shè)計
1. 地圖信息屬性調(diào)整
1)節(jié)點
將課程的節(jié)點放大,且增加變量的屬性,讓每節(jié)課程的節(jié)點都“埋藏驚喜”。同時節(jié)點的設(shè)計分為基礎(chǔ)節(jié)點和其它節(jié)點。其它節(jié)點包含:彩蛋節(jié)點、運營位節(jié)點等,讓節(jié)點變成一個組件的同時具備了靈活變化的屬性。
節(jié)點組件
2)路徑
節(jié)點自身就可以組成隱形的路徑,相對就壓縮了學(xué)習(xí)路徑,減輕學(xué)習(xí)者的學(xué)習(xí)負(fù)擔(dān)。并且用空間感的“近大遠(yuǎn)小的”路徑設(shè)計從視覺上“拉近”學(xué)習(xí)目標(biāo)終點。
3)角色融入
將學(xué)習(xí)者角色帶入,用了小人“跳一跳”的動態(tài)增加學(xué)習(xí)的趣味性。
動態(tài)跳一跳
4)故事線
服務(wù)于售前,產(chǎn)品可以針對不同的客戶和需求串連不同的故事線。
在做初期提案時,我們的故事線是:學(xué)習(xí)積累水滴灌溉小樹苗,在學(xué)習(xí)過程中小樹苗慢慢成長變成大樹,通過這樣的視覺呈現(xiàn)來體現(xiàn)學(xué)習(xí)的成就感。學(xué)習(xí)者在不同的節(jié)點會解鎖帶有樹苗長大的驚喜“彩蛋”節(jié)點。
作為B端的設(shè)計服務(wù),不同的客戶有不同的目標(biāo)需求,但是基于這樣的學(xué)習(xí)地圖組件,后續(xù)可以更換不同的故事線,也可以根據(jù)客戶需求靈活定制學(xué)習(xí)地圖。
2. 地圖在界面上的的呈現(xiàn)
1)終點目標(biāo)可見/聚焦當(dāng)前任務(wù)
首屏就可以看到終點,并展示終點第21節(jié)課程,減輕學(xué)習(xí)者的負(fù)擔(dān)。在視覺上呈現(xiàn)出:完成這個目標(biāo)“看起來”也不是很困難的感受,讓學(xué)習(xí)者感覺自己是可以憑借著努力去觸達(dá)學(xué)習(xí)終點的。所以學(xué)習(xí)者只需要聚焦在當(dāng)前需要完成的課程,而不需要考慮還未完成的課程。
地圖的視覺呈現(xiàn)
2)界面結(jié)構(gòu)
- 遠(yuǎn)景:不同的階段感,放大成就感。
- 課程區(qū)域:(減少學(xué)習(xí)負(fù)擔(dān),聚焦當(dāng)前的任務(wù)。
- 前景區(qū)域:邊走風(fēng)景邊會變化體現(xiàn)成長感,減少學(xué)習(xí)的倦怠感。
3)前、中、遠(yuǎn)景的結(jié)構(gòu)設(shè)計
界面的結(jié)構(gòu)分為:前景、中景、遠(yuǎn)景。
- 前景區(qū)域:隨著學(xué)習(xí)者邊“走”風(fēng)景會變化,在前景處體現(xiàn)學(xué)習(xí)者的成長感,減少學(xué)習(xí)的倦怠。
- 中景:課程區(qū)域,減少學(xué)習(xí)負(fù)擔(dān),聚焦當(dāng)前的任務(wù)。
- 遠(yuǎn)景:弱化未來的課程,在學(xué)習(xí)后期階段,放大目標(biāo)觸手可及的感受,幫助學(xué)習(xí)者堅持學(xué)習(xí)。
4)學(xué)習(xí)地圖元素的組件靈活變化
1.0版本的學(xué)習(xí)地圖設(shè)計重心放在視覺插畫上,而忽略了服務(wù)于B端用戶所需的快速組件化?;诂F(xiàn)在的設(shè)計結(jié)構(gòu),可以有效的產(chǎn)出和預(yù)估設(shè)計的工作量,將其作為有情感沉淀的半自定義組件。
如何通過界面提升學(xué)習(xí)動力
5)最后小結(jié)
學(xué)習(xí)地圖的設(shè)計是為了幫助學(xué)習(xí)者減輕學(xué)習(xí)負(fù)擔(dān)、幫助學(xué)習(xí)者明確學(xué)習(xí)路徑、凸顯學(xué)習(xí)的成長感。靈活的節(jié)點設(shè)計以及隱藏彩蛋增強了學(xué)習(xí)的動力,減少了學(xué)習(xí)的疲勞感。而在產(chǎn)品售賣層面,可以串聯(lián)不同的故事線快速搭建學(xué)習(xí)地圖。
三、幫助合作伙伴樹立品牌
1. 客戶提案
合作伙伴提出了關(guān)鍵詞“成長”,為了更好地管理用戶的預(yù)期,我們做了以“成長”為核心的三個維度展開的設(shè)計提案。方案A為成長沐浴在陽關(guān)下的治愈型方案—向陽而生感受成長的力量。方案B為學(xué)習(xí)也可以很快樂—學(xué)習(xí)嘉年華。方案C為成長的經(jīng)典綠色方案—成長是一種詩意的棲居。
3個不同的提案
確定主題向陽而生
在與合作伙伴溝通后選擇了A方案向陽而生,產(chǎn)品也重新定義了故事主線。將故事主線定義為“登山看日出”所以根據(jù)新的故事主線我們定義了主要的品牌元素及延伸運用。
2. 品牌設(shè)計元素的提取與應(yīng)用
宋老師團(tuán)隊選擇的“向陽而生”的方案,將設(shè)計元素的落點在于“陽光”的設(shè)計點上。
視覺元素提取抽象并賦予視覺的語意“在名師的指導(dǎo)下學(xué)習(xí)成長,猶如沐浴在溫和自在的陽光中,快樂成長,快樂學(xué)習(xí)”,并加入了“學(xué)習(xí)”的元素—筆記本,希望可以通過紙張體現(xiàn)學(xué)習(xí)過程中的“親切感”。
主要設(shè)計元素首先來分解主要的視覺設(shè)計點-陽光,提取陽光“溫暖柔和”的特質(zhì)。將陽光元素抽象出:磨砂模糊的陽光光暈、一束光線的色彩形狀的組合。并將這些特質(zhì)運用在界面設(shè)計中,如下圖。
設(shè)計元素在界面上的應(yīng)用在質(zhì)感上運用更多偏磨砂的效果,加入有代表性的筆記本元素作為底紋。在界面可以上看到,通過陽光光束突出人名,重要的按鈕及按鈕狀態(tài)也增加了陽光光暈的設(shè)計,在細(xì)節(jié)上潛移默化地呈現(xiàn)教學(xué)與設(shè)計的理念。
設(shè)計元素在界面上的應(yīng)用
3. 差異化:融入新的故事線—放大學(xué)習(xí)成就感
融入新的故事線“登山看日出”。在產(chǎn)品中“學(xué)習(xí)地圖”作為差異化的設(shè)計點的全過程展示,參看下圖視頻演示。
首次學(xué)習(xí)過程模擬學(xué)習(xí)進(jìn)度的視覺化呈現(xiàn)分為三個不同階段:
- 初期-學(xué)習(xí)新鮮期;
- 中期-學(xué)習(xí)倦怠期;
- 后期-學(xué)習(xí)沖刺期。
我們將21天的學(xué)習(xí)進(jìn)程分成不同的階段,并根據(jù)不同的用戶心理改變視覺呈現(xiàn),前期和中期和后期會有明顯的“視覺改變”,在最后成功的學(xué)習(xí)完成也會有一個儀式感的“學(xué)習(xí)路徑”的層層疊加,凸顯學(xué)習(xí)的成就感,此時也是用戶對自己用心學(xué)習(xí)的最好回饋,將這一些心理狀態(tài)都視覺化地呈現(xiàn)在用戶眼前。
階段的視覺呈現(xiàn)學(xué)習(xí)地圖組件分為:
- 前景:學(xué)習(xí)過程變化的信息;
- 中/遠(yuǎn)景:學(xué)習(xí)節(jié)點,學(xué)習(xí)節(jié)點包括基礎(chǔ)節(jié)點和自定義節(jié)點,自定義節(jié)點可以根據(jù)產(chǎn)品和客戶的需要更改節(jié)點的屬性;
- 遠(yuǎn)景:學(xué)習(xí)結(jié)束的儀式感展現(xiàn)。這一學(xué)習(xí)路徑的視覺展現(xiàn)形式也可以很好地轉(zhuǎn)化為設(shè)計組件,串聯(lián)不同的故事線讓學(xué)員去完成不同天數(shù)的線上學(xué)習(xí)。
學(xué)習(xí)地圖組件
1)其它學(xué)習(xí)激勵頁面
呼應(yīng)“向陽而生”的故事線,我們的設(shè)計還包含了其它的學(xué)習(xí)激勵機制。例如:每次完成學(xué)習(xí)會獲得一個“太陽”積分、學(xué)習(xí)攀登榜的設(shè)計上,呼應(yīng)登山主題的視覺表達(dá)。
其他激勵頁面
2)設(shè)計規(guī)范與設(shè)計協(xié)同
為感更好地進(jìn)行教育的視覺協(xié)作,我們將視覺規(guī)范分為:設(shè)計總體理念的概覽、設(shè)計基礎(chǔ)組件、設(shè)計特殊組件、界面相關(guān)的具體設(shè)計內(nèi)容、典型頁面和人物封面規(guī)范等,保證內(nèi)外部的設(shè)計輸出規(guī)范,保持產(chǎn)品視覺基調(diào)完整準(zhǔn)確。
設(shè)計規(guī)范
協(xié)同設(shè)計
作者:kimiko,來自騰訊云設(shè)計中心
推薦關(guān)注公眾號 “騰訊設(shè)計”( 微信ID:TencentDesign ),第一時間獲取騰訊官方的設(shè)計方法論
本文由 @騰訊設(shè)計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
客戶主題選嘉年華就好了,更喜歡嘉年華的設(shè)計
棒棒的優(yōu)秀,