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