流利說®少兒英語(yǔ)是流利說®為 3-8 歲兒童定制的一款英語(yǔ)啟蒙類產(chǎn)品，本次邀請(qǐng)到 UI 設(shè)計(jì)師 kelly，從視覺設(shè)計(jì)與輸出的角度，詳細(xì)地介紹該產(chǎn)品游戲題型的設(shè)計(jì)過程。

流利說®少兒英語(yǔ)，目標(biāo)是幫助該年齡段的用戶建立發(fā)音自信，并且能對(duì)英語(yǔ)學(xué)習(xí)產(chǎn)生持續(xù)的興趣?；趦和澩娴奶煨?，自然而然我們會(huì)想到使用游戲化的設(shè)計(jì)，將枯燥的英語(yǔ)學(xué)習(xí)過程變得更有趣。

△ 收集糖果

△ 警察抓小偷

△ 切水果

△ 消滅細(xì)菌

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

游戲?yàn)檩o，教育為主。

對(duì)于視覺設(shè)計(jì)而言，游戲題型設(shè)計(jì)的主要有以下 2 個(gè)難點(diǎn)：

• 把握題型趣味性與教學(xué)目標(biāo)之間的平衡；
• 為教學(xué)內(nèi)容找到最適合的游戲展示形式。

接下來我將從視覺表達(dá)、視覺層級(jí)、反饋這三點(diǎn)分享我的一些思考和經(jīng)驗(yàn)。

1. 明確的視覺表達(dá)

在開始設(shè)計(jì)前，我們對(duì) 3-8 歲兒童進(jìn)行了調(diào)研，發(fā)現(xiàn)處于該年齡段的用戶，大多有以下特性：

• 不識(shí)字，且不能進(jìn)行復(fù)雜邏輯操作；
• 易被色彩鮮艷且有動(dòng)效的對(duì)象吸引，并且會(huì)主動(dòng)點(diǎn)擊；
• 僅能理解自己生活中接觸過的事物（比如玩具，食物，游樂園等等）；
• 趣味性是調(diào)動(dòng)他們持續(xù)學(xué)習(xí)的重要?jiǎng)恿Α?

基于以上幾點(diǎn)，我們便總結(jié)出以下幾點(diǎn)設(shè)計(jì)方法。

視覺形式即題型玩法

以拼圖題為例，此題的目標(biāo)是檢測(cè)孩子拼寫單詞的能力。如果僅將單詞挖空再讓用戶選擇，那么孩子會(huì)覺得這道題既不會(huì)玩，也不好玩。但如果在視覺表現(xiàn)上采用孩子比較熟悉的拼圖，就可以方便孩子更好的理解題目的意思，進(jìn)而引導(dǎo)孩子的操作。

場(chǎng)景故事要有視覺連貫性

「游戲」（此處的「游戲」代指游戲題型）結(jié)束后有一個(gè)和故事設(shè)定相關(guān)的結(jié)束畫面，承接前面的操作，讓整個(gè)「游戲」過程能呈現(xiàn)出相對(duì)比較完整的體驗(yàn)，以增強(qiáng)小朋友在「游戲」過程中的沉浸感。

△ 游戲操作：切水果

△ 游戲結(jié)尾：切水果榨果汁

2. 清晰的視覺層級(jí)

由于兒童缺乏成年人所具備的視覺篩選能力，他們往往很難分辨出界面中的重要元素和次要元素。尤其是 3-5 歲的孩子，他們會(huì)習(xí)慣性地去點(diǎn)擊界面上所有吸引他們的東西。因此我們需要為不同層級(jí)的元素設(shè)置強(qiáng)烈的視覺區(qū)分，明確告訴他們哪些元素是可以點(diǎn)擊的，需要被關(guān)注的，哪些元素是不可互動(dòng)的。

提高教學(xué)內(nèi)容易識(shí)別性

游戲題型的設(shè)計(jì)方法通常是使用游戲的形式去包裝常規(guī)的教學(xué)題型，讓小朋友感覺是在玩游戲，而不是在做題。因此我們需要設(shè)計(jì)恰到好處的游戲容器去承載教學(xué)內(nèi)容，使其兼具教學(xué)內(nèi)容的識(shí)別性又不會(huì)影響「游戲」體驗(yàn)。此處我們嘗試去拉開游戲元素和教學(xué)內(nèi)容的視覺差距──在畫面中的視覺焦點(diǎn)處擺放教學(xué)內(nèi)容，而游戲元素僅作為背景或者容器，用于襯托教學(xué)內(nèi)容，并且盡量選取不易和教學(xué)內(nèi)容發(fā)生沖突的形式。此外，為兼顧游戲畫面的豐富性和多樣性，容器的設(shè)計(jì)需要有一定的適配性。

△ 適配文字

△ 適配圖片

△ 適配文字和圖片

對(duì)于看文本讀單詞的題型，游戲容器則以烘托文字為主要目標(biāo)。在該場(chǎng)景下，游戲容器的視覺設(shè)計(jì)重點(diǎn)在于外形的刻畫，簡(jiǎn)化內(nèi)部細(xì)節(jié)，以此將孩子的視覺重點(diǎn)聚焦在文本，而非容器本身。此外，為平衡字符段不同所帶來的顯示差異，我們對(duì)文字的大小也進(jìn)行了適配。

△ 1-12 個(gè)字符──文字大小 88

△ 13-25 個(gè)字符──文字大小 76

△ 26-45 個(gè)字符──文字大小 62

背景畫面的層級(jí)感

在游戲題型中，有不少故事性強(qiáng)，空間延續(xù)性高的設(shè)定。為加強(qiáng)畫面的運(yùn)動(dòng)感和空間感，視覺輸出時(shí)，我們額外增加了前景層，利用前景圖片打造視差效果，以增強(qiáng)整個(gè)背景的層次感。

前景圖片的設(shè)置，同時(shí)也能解決適配不同屏幕尺寸時(shí)，背景區(qū)域顯示差異所帶來的視覺問題。

縱向運(yùn)動(dòng)的情況下，兩側(cè)的圖形如果設(shè)置在背景里，當(dāng)適配到短屏幕的時(shí)候就無法呈現(xiàn)出來。

而單獨(dú)設(shè)置成前景圖，則可以靈活地適配不同屏幕比例的機(jī)型。

克制地使用過于明亮的色彩

用研時(shí)，我們發(fā)現(xiàn)孩子們?nèi)菀妆活伾涯康臇|西所吸引，但如果一個(gè)頁(yè)面上過度使用明亮的色彩，則會(huì)大大分散孩子們的注意力，顏色過載所導(dǎo)致的視覺信息復(fù)雜性會(huì)增加孩子們的使用難度。

3. 合理的反饋

合理的反饋包括符合交互邏輯的及時(shí)反饋和適當(dāng)?shù)恼?fù)反饋。在游戲設(shè)計(jì)中，設(shè)計(jì)師大多會(huì)通過酷炫的動(dòng)效來做重要操作的點(diǎn)擊反饋，以增加游戲爽感。這套法則，在兒童世界也同樣適用。

及時(shí)反饋制造小驚喜

我們?cè)诋a(chǎn)品的反饋設(shè)計(jì)中適時(shí)地增加一些有趣的微動(dòng)畫，給孩子們制造一些小彩蛋。這些小驚喜，不僅能及時(shí)地拉回小朋友的注意力，給他們帶來趣味性的同時(shí)，對(duì)他們而言也是一種鼓勵(lì)。

例如：當(dāng)用戶點(diǎn)擊拼圖題選項(xiàng)時(shí)，會(huì)出現(xiàn) IP 相關(guān)的卡通元素，這些元素既能加強(qiáng)趣味性，又能加強(qiáng)用戶對(duì)品牌的認(rèn)知。

適當(dāng)?shù)恼?fù)反饋

大約從 4 歲開始，孩子們就會(huì)有輸贏的概念，會(huì)因?yàn)橼A而喜悅，因?yàn)檩敹械浇箲]。──《數(shù)字時(shí)代兒童設(shè)計(jì)》

對(duì)孩子的正向反饋宜歡呼、表?yè)P(yáng)性的動(dòng)畫為主，整個(gè)畫面氛圍可處理得熱鬧一點(diǎn)，這對(duì)孩子來說是一個(gè)很好的刺激點(diǎn)，能讓孩子有繼續(xù)玩下去的欲望。

△ 正向反饋1：IP 形象高興地跳出

△ 正向反饋2：IP 形象高興地跳出 + 打分星星

△ 正向反饋3：IP 形象鼓掌

考慮到孩子們會(huì)因?yàn)檩敹械浇箲]，因而在處理負(fù)面反饋的時(shí)候，需要考慮他們此刻的心態(tài)，動(dòng)效設(shè)計(jì)應(yīng)拉開與正向反饋的差別且不能過于消極，消極的反饋容易打擊孩子的積極性，產(chǎn)生挫敗感，鼓勵(lì)性的反饋為宜。

△ 負(fù)面反饋：IP 形象配合鼓勵(lì)性語(yǔ)音做加油的姿勢(shì)

反饋動(dòng)畫的設(shè)置也需要考慮用戶的可接受程度，慎用具有攻擊性動(dòng)效。如下圖，錯(cuò)誤反饋時(shí) IP 形象會(huì)受到攻擊而感冒，上線后發(fā)現(xiàn)孩子們對(duì)這種反饋表現(xiàn)出了害怕的心理。

以上 IP 動(dòng)畫由流利說®少兒英語(yǔ)設(shè)計(jì)團(tuán)隊(duì)傾情制作。

視覺輸出

不會(huì)寫代碼的設(shè)計(jì)也是好開發(fā)。

視覺稿如果不能被很好的實(shí)現(xiàn)落地，那再好的設(shè)計(jì)稿也只能是概念，而不是一份有效的方案。在如何更好的把控視覺實(shí)現(xiàn)程度這一問題上，我們也走過不少?gòu)澛?，和開發(fā)經(jīng)過幾輪的探索，最終形成了一份適合我們團(tuán)隊(duì)的輸出模式。

在整個(gè)開發(fā)環(huán)節(jié)，設(shè)計(jì)師主要承擔(dān)一部分的動(dòng)畫開發(fā)工作。在和開發(fā)對(duì)接的過程中，我們主要使用的軟件是：

• CocosCreator：游戲開發(fā)軟件，內(nèi)含動(dòng)畫編輯器。
• SourceTree：向開發(fā)提交動(dòng)畫代碼。

△ CocosCreator

△ SourceTree

開發(fā)搭建完框架后，設(shè)計(jì)在 CocosCreator上，完成部分元素的動(dòng)畫，再用 SourceTree 向開發(fā)提交動(dòng)畫代碼。開發(fā)最后通過代碼將每個(gè)動(dòng)畫串聯(lián)起來形成一個(gè)完整的動(dòng)畫。

△ CocosCreator 動(dòng)畫編輯器界面截圖

題型動(dòng)畫連貫且細(xì)節(jié)多，單靠視頻 demo 是無法協(xié)助開發(fā)精準(zhǔn)實(shí)現(xiàn)設(shè)計(jì)效果的。為了解決這個(gè)問題，我們建立了對(duì)設(shè)計(jì)落地具有指導(dǎo)性意義的文檔──適配標(biāo)注文檔和動(dòng)畫標(biāo)注文檔。

1. 適配標(biāo)注文檔

用戶機(jī)型調(diào)查結(jié)果顯示，使用 0.462、16:9、4:3 這三類屏幕比例的用戶占比最大。為保證不同屏幕比例上的展示效果，我們根據(jù)上述三種主流尺寸，分別輸出大小為 780×360，640×360，480×360 的設(shè)計(jì)稿，并規(guī)定以 780×360 為設(shè)計(jì)基準(zhǔn)，對(duì)另外兩個(gè)尺寸進(jìn)行適配。

標(biāo)注內(nèi)容為三個(gè)主屏幕尺寸下的縮放比例、大小位置、特定動(dòng)畫的起始點(diǎn)或終止點(diǎn)位置等細(xì)節(jié)調(diào)整標(biāo)注，方便開發(fā)在做適配的時(shí)候能準(zhǔn)確還原設(shè)計(jì)稿的布局。

2. 動(dòng)畫標(biāo)注文檔

該文檔主要是對(duì)動(dòng)畫和音效的詳細(xì)說明。每個(gè)題型的動(dòng)畫會(huì)被拆分，以最小可拆分動(dòng)畫為一個(gè)標(biāo)注對(duì)象，對(duì)其標(biāo)注時(shí)長(zhǎng)、具體的動(dòng)畫效果以及運(yùn)動(dòng)曲線數(shù)值等，方便開發(fā)地還原 demo 的設(shè)計(jì)效果。詳細(xì)的標(biāo)注文檔不僅方便了開發(fā)，更為后續(xù)測(cè)試和視覺走查降低了不少溝通成本。

總結(jié)

游戲化題型的設(shè)計(jì)，需要更多的從用戶的角度出發(fā)去思考和權(quán)衡游戲與教學(xué)的平衡性。對(duì)于兒童產(chǎn)品而言，設(shè)計(jì)服務(wù)于教育，愉悅和多變的體驗(yàn)是設(shè)計(jì)的方向，教學(xué)才是最根本的設(shè)計(jì)目標(biāo)。

文章來源：優(yōu)設(shè)