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