2019-11-21 資深UI設計者
流利說®少兒英語是流利說®為 3-8 歲兒童定制的一款英語啟蒙類產品，本次邀請到 UI 設計師 kelly，從視覺設計與輸出的角度，詳細地介紹該產品游戲題型的設計過程。
流利說®少兒英語，目標是幫助該年齡段的用戶建立發音自信，并且能對英語學習產生持續的興趣。基于兒童貪玩的天性，自然而然我們會想到使用游戲化的設計，將枯燥的英語學習過程變得更有趣。
△ 收集糖果
△ 警察抓小偷
△ 切水果
△ 消滅細菌
游戲為輔，教育為主。
對于視覺設計而言，游戲題型設計的主要有以下 2 個難點：
接下來我將從視覺表達、視覺層級、反饋這三點分享我的一些思考和經驗。
在開始設計前，我們對 3-8 歲兒童進行了調研，發現處于該年齡段的用戶，大多有以下特性：
基于以上幾點，我們便總結出以下幾點設計方法。
視覺形式即題型玩法
以拼圖題為例，此題的目標是檢測孩子拼寫單詞的能力。如果僅將單詞挖空再讓用戶選擇，那么孩子會覺得這道題既不會玩，也不好玩。但如果在視覺表現上采用孩子比較熟悉的拼圖，就可以方便孩子更好的理解題目的意思，進而引導孩子的操作。
場景故事要有視覺連貫性
「游戲」（此處的「游戲」代指游戲題型）結束后有一個和故事設定相關的結束畫面，承接前面的操作，讓整個「游戲」過程能呈現出相對比較完整的體驗，以增強小朋友在「游戲」過程中的沉浸感。
△ 游戲操作：切水果
△ 游戲結尾：切水果榨果汁
由于兒童缺乏成年人所具備的視覺篩選能力，他們往往很難分辨出界面中的重要元素和次要元素。尤其是 3-5 歲的孩子，他們會習慣性地去點擊界面上所有吸引他們的東西。因此我們需要為不同層級的元素設置強烈的視覺區分，明確告訴他們哪些元素是可以點擊的，需要被關注的，哪些元素是不可互動的。
提高教學內容易識別性
游戲題型的設計方法通常是使用游戲的形式去包裝常規的教學題型，讓小朋友感覺是在玩游戲，而不是在做題。因此我們需要設計恰到好處的游戲容器去承載教學內容，使其兼具教學內容的識別性又不會影響「游戲」體驗。此處我們嘗試去拉開游戲元素和教學內容的視覺差距──在畫面中的視覺焦點處擺放教學內容，而游戲元素僅作為背景或者容器，用于襯托教學內容，并且盡量選取不易和教學內容發生沖突的形式。此外，為兼顧游戲畫面的豐富性和多樣性，容器的設計需要有一定的適配性。
△ 適配文字
△ 適配圖片
△ 適配文字和圖片
對于看文本讀單詞的題型，游戲容器則以烘托文字為主要目標。在該場景下，游戲容器的視覺設計重點在于外形的刻畫，簡化內部細節，以此將孩子的視覺重點聚焦在文本，而非容器本身。此外，為平衡字符段不同所帶來的顯示差異，我們對文字的大小也進行了適配。
△ 1-12 個字符──文字大小 88
△ 13-25 個字符──文字大小 76
△ 26-45 個字符──文字大小 62
背景畫面的層級感
在游戲題型中，有不少故事性強，空間延續性高的設定。為加強畫面的運動感和空間感，視覺輸出時，我們額外增加了前景層，利用前景圖片打造視差效果，以增強整個背景的層次感。
前景圖片的設置，同時也能解決適配不同屏幕尺寸時，背景區域顯示差異所帶來的視覺問題。
縱向運動的情況下，兩側的圖形如果設置在背景里，當適配到短屏幕的時候就無法呈現出來。
而單獨設置成前景圖，則可以靈活地適配不同屏幕比例的機型。
克制地使用過于明亮的色彩
用研時，我們發現孩子們容易被顏色醒目的東西所吸引，但如果一個頁面上過度使用明亮的色彩，則會大大分散孩子們的注意力，顏色過載所導致的視覺信息復雜性會增加孩子們的使用難度。
合理的反饋包括符合交互邏輯的及時反饋和適當的正負反饋。在游戲設計中，設計師大多會通過酷炫的動效來做重要操作的點擊反饋，以增加游戲爽感。這套法則，在兒童世界也同樣適用。
及時反饋制造小驚喜
我們在產品的反饋設計中適時地增加一些有趣的微動畫，給孩子們制造一些小彩蛋。這些小驚喜，不僅能及時地拉回小朋友的注意力，給他們帶來趣味性的同時，對他們而言也是一種鼓勵。
例如：當用戶點擊拼圖題選項時，會出現 IP 相關的卡通元素，這些元素既能加強趣味性，又能加強用戶對品牌的認知。
適當的正負反饋
大約從 4 歲開始，孩子們就會有輸贏的概念，會因為贏而喜悅，因為輸而感到焦慮。──《數字時代兒童設計》
對孩子的正向反饋宜歡呼、表揚性的動畫為主，整個畫面氛圍可處理得熱鬧一點，這對孩子來說是一個很好的刺激點，能讓孩子有繼續玩下去的欲望。
△ 正向反饋1：IP 形象高興地跳出
△ 正向反饋2：IP 形象高興地跳出 + 打分星星
△ 正向反饋3：IP 形象鼓掌
考慮到孩子們會因為輸而感到焦慮，因而在處理負面反饋的時候，需要考慮他們此刻的心態，動效設計應拉開與正向反饋的差別且不能過于消極，消極的反饋容易打擊孩子的積極性，產生挫敗感，鼓勵性的反饋為宜。
△ 負面反饋：IP 形象配合鼓勵性語音做加油的姿勢
反饋動畫的設置也需要考慮用戶的可接受程度，慎用具有攻擊性動效。如下圖，錯誤反饋時 IP 形象會受到攻擊而感冒，上線后發現孩子們對這種反饋表現出了害怕的心理。
以上 IP 動畫由流利說®少兒英語設計團隊傾情制作。
不會寫代碼的設計也是好開發。
視覺稿如果不能被很好的實現落地，那再好的設計稿也只能是概念，而不是一份有效的方案。在如何更好的把控視覺實現程度這一問題上，我們也走過不少彎路，和開發經過幾輪的探索，最終形成了一份適合我們團隊的輸出模式。
在整個開發環節，設計師主要承擔一部分的動畫開發工作。在和開發對接的過程中，我們主要使用的軟件是：
△ CocosCreator
△ SourceTree
開發搭建完框架后，設計在 CocosCreator上，完成部分元素的動畫，再用 SourceTree 向開發提交動畫代碼。開發最后通過代碼將每個動畫串聯起來形成一個完整的動畫。
△ CocosCreator 動畫編輯器界面截圖
題型動畫連貫且細節多，單靠視頻 demo 是無法協助開發精準實現設計效果的。為了解決這個問題，我們建立了對設計落地具有指導性意義的文檔──適配標注文檔和動畫標注文檔。
1. 適配標注文檔
用戶機型調查結果顯示，使用 0.462、16:9、4:3 這三類屏幕比例的用戶占比最大。為保證不同屏幕比例上的展示效果，我們根據上述三種主流尺寸，分別輸出大小為 780×360，640×360，480×360 的設計稿，并規定以 780×360 為設計基準，對另外兩個尺寸進行適配。
標注內容為三個主屏幕尺寸下的縮放比例、大小位置、特定動畫的起始點或終止點位置等細節調整標注，方便開發在做適配的時候能準確還原設計稿的布局。
2. 動畫標注文檔
該文檔主要是對動畫和音效的詳細說明。每個題型的動畫會被拆分，以最小可拆分動畫為一個標注對象，對其標注時長、具體的動畫效果以及運動曲線數值等，方便開發地還原 demo 的設計效果。詳細的標注文檔不僅方便了開發，更為后續測試和視覺走查降低了不少溝通成本。
游戲化題型的設計，需要更多的從用戶的角度出發去思考和權衡游戲與教學的平衡性。對于兒童產品而言，設計服務于教育，愉悅和多變的體驗是設計的方向，教學才是最根本的設計目標。
文章來源：優設