流利說®少兒英語是流利說®為 3-8 歲兒童定制的一款英語啟蒙類產品，本次邀請到 UI 設計師 kelly，從視覺設計與輸出的角度，詳細地介紹該產品游戲題型的設計過程。

流利說®少兒英語，目標是幫助該年齡段的用戶建立發(fā)音自信，并且能對英語學習產生持續(xù)的興趣。基于兒童貪玩的天性，自然而然我們會想到使用游戲化的設計，將枯燥的英語學習過程變得更有趣。

△ 收集糖果

△ 警察抓小偷

△ 切水果

△ 消滅細菌

視覺設計

游戲為輔，教育為主。

對于視覺設計而言，游戲題型設計的主要有以下 2 個難點：

• 把握題型趣味性與教學目標之間的平衡；
• 為教學內容找到最適合的游戲展示形式。

接下來我將從視覺表達、視覺層級、反饋這三點分享我的一些思考和經驗。

1. 明確的視覺表達

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

• 不識字，且不能進行復雜邏輯操作；
• 易被色彩鮮艷且有動效的對象吸引，并且會主動點擊；
• 僅能理解自己生活中接觸過的事物（比如玩具，食物，游樂園等等）；
• 趣味性是調動他們持續(xù)學習的重要動力。

基于以上幾點，我們便總結出以下幾點設計方法。

視覺形式即題型玩法

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

場景故事要有視覺連貫性

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

△ 游戲操作：切水果

△ 游戲結尾：切水果榨果汁

2. 清晰的視覺層級

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

提高教學內容易識別性

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

△ 適配文字

△ 適配圖片

△ 適配文字和圖片

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

△ 1-12 個字符──文字大小 88

△ 13-25 個字符──文字大小 76

△ 26-45 個字符──文字大小 62

背景畫面的層級感

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

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

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

而單獨設置成前景圖，則可以靈活地適配不同屏幕比例的機型。

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

用研時，我們發(fā)現(xiàn)孩子們容易被顏色醒目的東西所吸引，但如果一個頁面上過度使用明亮的色彩，則會大大分散孩子們的注意力，顏色過載所導致的視覺信息復雜性會增加孩子們的使用難度。

3. 合理的反饋

合理的反饋包括符合交互邏輯的及時反饋和適當的正負反饋。在游戲設計中，設計師大多會通過酷炫的動效來做重要操作的點擊反饋，以增加游戲爽感。這套法則，在兒童世界也同樣適用。

及時反饋制造小驚喜

我們在產品的反饋設計中適時地增加一些有趣的微動畫，給孩子們制造一些小彩蛋。這些小驚喜，不僅能及時地拉回小朋友的注意力，給他們帶來趣味性的同時，對他們而言也是一種鼓勵。

例如：當用戶點擊拼圖題選項時，會出現(xiàn) IP 相關的卡通元素，這些元素既能加強趣味性，又能加強用戶對品牌的認知。

適當的正負反饋

大約從 4 歲開始，孩子們就會有輸贏的概念，會因為贏而喜悅，因為輸而感到焦慮。──《數字時代兒童設計》

對孩子的正向反饋宜歡呼、表揚性的動畫為主，整個畫面氛圍可處理得熱鬧一點，這對孩子來說是一個很好的刺激點，能讓孩子有繼續(xù)玩下去的欲望。

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

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

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

考慮到孩子們會因為輸而感到焦慮，因而在處理負面反饋的時候，需要考慮他們此刻的心態(tài)，動效設計應拉開與正向反饋的差別且不能過于消極，消極的反饋容易打擊孩子的積極性，產生挫敗感，鼓勵性的反饋為宜。

△ 負面反饋：IP 形象配合鼓勵性語音做加油的姿勢

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

以上 IP 動畫由流利說®少兒英語設計團隊傾情制作。

視覺輸出

不會寫代碼的設計也是好開發(fā)。

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

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

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

△ CocosCreator

△ SourceTree

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

△ CocosCreator 動畫編輯器界面截圖

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

1. 適配標注文檔

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

標注內容為三個主屏幕尺寸下的縮放比例、大小位置、特定動畫的起始點或終止點位置等細節(jié)調整標注，方便開發(fā)在做適配的時候能準確還原設計稿的布局。

2. 動畫標注文檔

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

總結

游戲化題型的設計，需要更多的從用戶的角度出發(fā)去思考和權衡游戲與教學的平衡性。對于兒童產品而言，設計服務于教育，愉悅和多變的體驗是設計的方向，教學才是最根本的設計目標。

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