如何給兒童做設計?騰訊這個實戰案例太贊了!

如何讓活潑好動,注意力跳脫的孩子也能專心學習?騰訊這個實戰案例,告訴你這些設計技巧!

把生動有趣的學習內容,用一條穿越時空的路徑慢慢展現出來,騰訊的 ABCmouse 讓孩子在遊玩的過程中學到英語知識,得到有效的學習成長,讓他們喜歡成為學習路徑上的主角。

一、分析

1. 靜止的場景

學習路徑是把課程的內容在模擬的場景中按照循序漸進的方式呈現出來。在梳理原本的場景過程中,發現主要是由場景、人物、課程點(路徑)、導航四個要素組成,在每個的路徑點上都會承載這個 Level 的課程內容,發現原本學習路徑存在3個困境:

  • 場景:畫面少,沒有先後順序。在300多節課程內容上,場景重複使用。
  • 交互UI:課程點小,操作增加了困難,課程點過多,學習的過程中產生壓力。
  • 人物:單一,在場景中的扮演沒有結合場景。
如何給兒童做設計?騰訊這個實戰案例太讚了!

對在整個的場景的分析,找出利弊的突出點。在往後的再設計過程中,對延續有利的優點和改善突出弊端提供更好的幫助。

利:

  • 場景的寫實,接近真實
  • 內容多,展示全
  • 顏色豐富多彩

弊:

  • 入口多,干擾了主路徑的學習操作
  • 課程點的已學和未學的區分不清晰
  • 人物上的學習活動氣泡對課程點的疊加造成操作干擾

2. 路上的期望

家長在選擇學習產品的時候,首先是考慮對小孩是有效的。

我們在設計產品時,更多需要考慮,小孩在實際的使用中也是有效的,不僅對課程本身的考驗,也是對界面引導操作上的考驗,讓小孩更容易得到學習的內容知識。

對原場景的使用和分析,在學習路徑場景重新設計前,對自身提出了問題:什麼對孩子是最重要的?場景設計的目標是什麼?

孩子在使用產品的過程中能得到有效的學習,語言能力得到一定的進步和成長,無疑是家長們最期望的效果。

如何給兒童做設計?騰訊這個實戰案例太讚了!

3. 設計目標

對於3-8歲的孩子來說,太多的吸引點會分散他們的注意力,為了孩子把注意力多停留在課程的活動內容上,設計上需要做減法。把場景內容的主次排序了優先級,提高路徑的清晰度,減少其他界面的入口,不被其他干擾。

最終的目的是以學習路徑的課程為主,路徑上能延續承載海量的學習內容,讓孩子在使用的過程都關注在路徑課程上,讓孩子能夠得到有效的學習成果。

二、理念

1. 重新設定

構思

創新需要打破原有的框架,重新定義和規範。創意來源於中國的長卷軸畫,在一條整體的畫卷會有不同的場景,打破了原有場景之間的獨立性,讓學習之路更具有連貫性,體驗更自然。

如何給兒童做設計?騰訊這個實戰案例太讚了!

元素

人物:在路徑的升級中,角色設計也符合場景變化

時間:模擬生命進化和歷史發展

空間:根據不同的時間階段來展現不同的時代環境

如何給兒童做設計?騰訊這個實戰案例太讚了!

腳本

根據構思設計了場景的腳本,不管是生命起源、地形地貌還是樂園星球的概念,都圍繞時間維度和空間的維度進行設計,保證在場景設計上符合需求也能適應未來場景的靈活擴展。

如何給兒童做設計?騰訊這個實戰案例太讚了!

風格

作為一款兒童教育產品,主要的使用者是兒童,因而設計風格上會更著重在趣味性和品質上,滿足吸引兒童玩樂的同時也提高兒童的審美。在畫面風格上減少場景元素的過度複雜,元素設計更為扁平化,讓畫面更為清新和明亮,整體的元素都是圓潤可愛的。

如何給兒童做設計?騰訊這個實戰案例太讚了!

時間+空間,故事線擴展從「生命的起源」、「文明古國」、「特色地貌」、「現代城市首都」、「科學博物館」到「太空宇宙」。並且對場景規範了設計原則,這也將會幫助我們在後期延展時保證設計的統一,提高了設計和開發的效率,避免再次磨合,而增加不必的無形成本。

如何給兒童做設計?騰訊這個實戰案例太讚了!

三、成果

1. 全新的世界

有了故事腳本、場景規範,落地的插畫才是我們在視覺設計上的重點。我們設計了 Level 1-Level 6 的場景,把兒童的學習之路渲染出一個全新的世界。150個課程點包裝在30個不同場景中,從概念、路線、人物、畫風、動畫上給人耳目一新的感覺,人物也是跟隨場景的變化而換裝,保持不同場景人物的新鮮感,也加強了場景的帶入感。

一路學習一路成長,從生命的起源開始,領著寶寶去探索和感受生命進化、時代變遷的過程。深入充滿生機的海底和魚兒珊瑚一起遊玩,穿著恐龍外衣和恐龍一起奔跑在侏羅紀世界,裝扮成原始人生活在猿人時代。整個場景的遞進和課程級別的提高也是相符合的,世界的發展、學習能力的提升讓孩子在學習中得到真正的成長。

如何給兒童做設計?騰訊這個實戰案例太讚了!

從細節可以看到兒童的穿著和場景的變化是相呼應的。(埃及 / 中國 / 太空月球)

如何給兒童做設計?騰訊這個實戰案例太讚了!

2. 讓場景活起來

景深:

每個場景的固定規範是優先路徑的乾淨和清晰,乾淨是減少干擾,清晰是提高識別。在這個前提下,把場景劃分出前景、中景、後景,而主要的路徑是保持在中景的中心位置,在內容的呈現和使用上也是最集中的範圍,剩下前景和後景則是作為畫面移動或轉場時加入視覺差的效果,讓畫面更為生動,更接近真實場景。

動畫:

不同的場景讓路徑風景更精彩,而動畫則是讓場景「活」起來的重要環節。在場景中將前、中、後景的元素做了主次的區分,來定義動畫的軌跡。

中景是路徑的主要內容,人物的動作需要配合路徑上的課程點來做交互上的動畫,人物在除了常規位移的動作外,還設計了在人物停留時結合角色的閒暇動作,如沙漠中的喝水,湖面上的釣魚等,而在前景和後景中的動植物則是次要場景,在動畫的設定是微動畫的規範,能在場景中「活」起來,又不搶主路徑上的風頭。

如何給兒童做設計?騰訊這個實戰案例太讚了!

如何給兒童做設計?騰訊這個實戰案例太讚了!

人物:

不同場景讓孩子看到不同的人物角色,這個在我們設計的過程中考慮到的融入感,同時也根據場景的設定給孩子帶上和場景主題相符的配件,如:在空曠草原上揮動著趕羊鞭的牧童;開啟頭燈進入洞穴探險的冒險家;站在平衡車上穿梭在現代科技實驗室;揹著噴氣式揹包飛行在天空中等等。這些設計都融入在主題和人物身上,寶寶學習的同時也是開闊了視野。

如何給兒童做設計?騰訊這個實戰案例太讚了!

把不斷進步的世界場景用生動有趣的方法鋪出一條引人入勝的路徑,真正的邊玩邊學,讓寶寶能在自我學習同時也能在手上就認識了這個多姿多彩的世界。

如何給兒童做設計?騰訊這個實戰案例太讚了!

△ABCmouse 學習路徑,查看視頻。

四、體會

不一樣的路

每個人都有不同的思維邏輯,在設計的過程中需要在不同的環節中梳理不同的工作步驟,讓不同能力背景的人共同參與完成一條新的學習路徑,這本身就是一條艱鉅的路程。

ABCmouse 是兒童類產品,兒童是我們的用戶,也是一種「不可控制」的用戶,產品使用上需要考慮更多無邏輯的行為,更多不可預見的情況。在學習路徑的需求上註定是一個不尋常的思路,它即要時刻新鮮地吸引孩子的注意,又像一個誠懇導師一樣引導孩子去自助學習。

新的場景從需求開始到實現的過程中,每個環節都需要圍繞孩子的角度去思考,這也是設計師需要重新去學習兒童的行為知識,把自己變回小時候,到圖書館去看兒童書,觀察其他孩子的學習方法和愛好興趣。

如何給兒童做設計?騰訊這個實戰案例太讚了!

在 ABCmouse 的項目中,學習路徑讓我們學會了在不同層面上的溝通,學會了把自己變回兒童時期,學會了一個又一個的軟件工具,學會了塑造從 Level 到 Level6 的遊學世界。

再此之後,學習路徑會繼續擴展和迭代,我們也將會創作更多的場景空間,讓寶寶在這學習世界中無限暢遊。


分享到:


相關文章: