編輯導(dǎo)語：當(dāng)今很多成年人不能很好地處理財務(wù)問題，更不必說理財，因此當(dāng)代社會對于孩子的金融教育也一直缺失的。除此之外，家庭矛盾也是不可避免地一個話題。作者通過一款兒童銀行 APP 的設(shè)計嘗試解決這一問題，并為我們帶來了整個設(shè)計過程的案例分析。通過上中下三篇文章，讓我們一起跟隨作者感受整個設(shè)計流程，從中學(xué)習(xí)，一定會有非常大的收獲！

一、設(shè)計

有了線框圖以后，我們覺得是時候開始深入這一兒童銀行 APP 的概念設(shè)計了。首先要明確設(shè)計的目的是讓銀行這一對孩子們來說枯燥無味的行業(yè)變得更加有趣和友好，讓孩子們想要玩耍愛上這款 APP。

兒童銀行概念設(shè)計師 Rihards 在工作中在第一版的設(shè)計中缺失了孩子們與 APP 之間的情感聯(lián)系，很難讓孩子們擁有情緒板中描繪的情感。

第一版設(shè)計稿

我們需要整合一種兒童可以理解的視覺語言，讓他們感覺理財就像游戲一樣，并在孩子們心中喚起那些娛樂，沉浸參與和愉悅的情感。

目的是給孩子帶來一種進(jìn)入玩具店或糖果店時的感覺：他們非常開心，所有的東西都想試一下，而父母則聽到：”媽媽，爸爸，快過來! 這個好好玩！”

“多彩誘人的糖果店” 攝影：吉姆-拉里森。

情緒板里的這張圖生動的展現(xiàn)了我們想在 APP 中營造的氛圍。

1. 設(shè)計調(diào)研

我們的團(tuán)隊開始發(fā)散新的設(shè)計方向，思考如何鼓勵兒童使用 APP，我們知道這是一個艱巨的任務(wù)，因為我們只擁有成年人的視角。我們必須喚醒內(nèi)心的童真，潛心研究充滿了手游、動漫和動畫片的兒童內(nèi)心世界。我們仔細(xì)研究了他們是如何設(shè)計的，突出了哪些元素，以及為什么孩子們會喜歡它們。

我們需要喚起孩子心中那種探險的好奇心，就像他們進(jìn)到游樂園里一樣對嘗試新事物非常興奮。

在最初的概念中，配色偏冷色調(diào)，會導(dǎo)致用戶聯(lián)想到孤獨、安靜的氛圍。

我們必須讓其充滿激情和樂趣，使用更明亮的色彩來設(shè)計頁面。為了讓 APP 有 “活的” 的感覺，我們必須在背景中加入動畫、一些特效和動態(tài)的元素，就像游戲一樣，這樣孩子們就不會感到無聊。

藝術(shù)作品：Jared MacPherson

例如，《農(nóng)場英雄超級傳奇》 這款游戲的場景插畫非常好看，用戶可以在其中幾乎無邊界地瀏覽地圖中的風(fēng)景，就像是在旅行一樣。

藝術(shù)作品：Jared MacPherson

每一步要點擊的地方很清楚，玩家一步一步跟隨指引沒有任何困惑，同時還可以欣賞美麗的風(fēng)景~ 讓他們甚至有 “我想去這個地方” 的想法。

《Numberblocks》 是一部關(guān)于數(shù)字的動畫片，它循循善誘地引導(dǎo)孩子們學(xué)習(xí)數(shù)學(xué)，它傳遞的情緒是動態(tài)和有趣的，并且在動畫片中使用 3D 的形式已經(jīng)成為標(biāo)準(zhǔn)。

孩子們和家長們都喜歡 3D 動畫節(jié)目，因為 3D 的效果在視覺上更能吸引用戶的注意力，看起來更有趣更真實，對動作的描繪也很到位。我們喜歡這個創(chuàng)意，因為孩子們可以感覺到他們是動畫片的參與者，并以更愿意接受引導(dǎo)和學(xué)習(xí)。

Numberblocks 是由藍(lán)色動物園工作室創(chuàng)作的系列動畫，由 CBeebies 播出。

在我們的團(tuán)隊中，每個人都分享了他們對設(shè)計的想法，對冒險的聯(lián)想和對童年的回憶。例如，我們的一位同事分享了一本童話書，”Martha B. Rabbit and Daphne the Forgetful Duck”，作者 Shirley Barber，這本書包含了她小時候看的所有童話故事。書里的每一頁都充滿了小細(xì)節(jié)，而這正是講故事的關(guān)鍵。例如：如果畫了一個房子，那它就必須要看起來像是有人住在里面。

2. 設(shè)計草圖

在收集了所有的參考資料后，我們確定團(tuán)隊的主要目標(biāo)是設(shè)計一個動態(tài)的童話故事般的場景，讓孩子們有探險的感覺，在這里能感受到風(fēng)，能觸摸到草坪和云朵。

場景構(gòu)建概念稿第一版

主要場景完成后，我們設(shè)立了第一批任務(wù)，是父母們經(jīng)常分配給孩子們的家務(wù) ── 鋪床、倒垃圾、上音樂課，當(dāng)完成所有任務(wù)的時候，他們還會得到一份禮包，這將激勵孩子們完成他們的任務(wù)，賺取他們的零花錢以及其他父母承諾的獎勵。

我們希望孩子們能積極參與到家務(wù)中，并更好地了解家務(wù)，為自己賺取零花錢。

這樣他們就能理解錢不是憑空而來的，他們必須付出努力才能賺到錢。這讓整個家庭對日常任務(wù)的價值達(dá)成共識，同時還能幫助兒童建立正確的價值觀。

然后，我們補充了一些樹，并在草地上增加了更多的細(xì)節(jié)，使設(shè)計更加逼真和豐富──讓孩子們感覺像在玩游戲或身處動漫的世界中。

帶有 UI 元素的主頁

我們還想要加一些 UI 元素，他們不僅僅是疊加在界面上，而是融入到場景中，比如散落在路上而不是很突兀地漂浮在空中的任務(wù)，孩子們也會因此有更流暢的體驗，一天的旅程也會更加有趣。

第二版設(shè)計稿

當(dāng)我們在界面上進(jìn)行了越來越多的設(shè)計時，它已經(jīng)并不像我們最初設(shè)想的那樣簡潔。主要是因為最開始的設(shè)計太沉悶，有太多的色彩，屏幕上沒有焦點，孩子們不知道要點擊哪里。我們不得不重新審視為孩子們定義的 JTBD[1] 清單，并對其進(jìn)行優(yōu)先排序，以確保該 APP 能夠引導(dǎo)孩子們實現(xiàn)他們的目標(biāo)。

（[1] JTBD 全稱是“Jobs to be done”，這個概念由哈佛大學(xué)教授 Clay Christensen 在 2003 年左右逐漸提出形成的，是指待完成的任務(wù)，而對于我們做用戶需求分析時最本質(zhì)的思考，就是迫使我們?nèi)リP(guān)注結(jié)果，也就是用戶要用這款產(chǎn)品去完成什么任務(wù)，而不是具體的功能，亦或是細(xì)枝末節(jié)的體驗。）

3. 轉(zhuǎn)變?yōu)?3D 場景

在收集了團(tuán)隊的反饋后，我們知道應(yīng)該回到設(shè)計調(diào)研階段，需要跳出傳統(tǒng)做設(shè)計的方式去思考。

我們知道這不是一件容易的事，需要付出努力去實現(xiàn)它。我們相信，3D 的效果可以給孩子們提供之前缺少的情感氛圍和動態(tài)的場景。而且，更加現(xiàn)代化的場景更易使兒童接受。

在用 Blender 制作的第一個測試場景中，我們的目標(biāo)是弄清楚如何制作植被，如何使草和樹更有細(xì)節(jié)，但又不像照片那樣真實。我們想保持一種獨特的風(fēng)格，而只有手繪能實現(xiàn)我們想要的感覺。

帶有樹木和手繪道路的第一個測試場景

我們搜索了一些例子，并在 Carlos Cavalcante 的 Twitter 頁面上發(fā)現(xiàn)了驚艷的作品。Carlos 發(fā)表過一些關(guān)于他用 Blender 制作 3D 島嶼的教程，這對我們理解如何實現(xiàn)卡通般的風(fēng)格和感覺有很大幫助。

作者：UXDA

原文：https://uxplanet.org/ui-ux-case-study-banking-as-a-game-saving-childrens-financial-future-135fada0680

譯者：吳鵬飛；審核：張聿彤；編輯：劉麗

本文由 @三分設(shè) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議