第四章 創作與內容分析
第四節 創作內容分析
一、圖形介面設計
(一)介面風格
在統計受歡迎的 App 介面元素中 20 個 App 有 11 個是扁平化的介面風格,扁 平化其特點為平面的色彩,沒有陰影明暗等立體效果,以及簡約的線條和形狀。熊
昭(2017)指出,扁平化設計不單只是一種視覺風格,其中也包含了簡約的排版及扁 平的介面層級,這更凸顯了介面功能,降低使用者的學習成本,使得整體操作更加 流暢與直覺,進而增強使用者體驗。
兒童相較成人更不擅長處理複雜的資訊,並且缺乏系統化的能力,本研究希 望用簡約的形狀與層級降低兒童認知的成本,因此扁平化設計風格成為此次創作的 風格主軸。
本研究在網路上尋找扁平化風格的參考資料,造型風格圓潤可愛的循環播放 小動畫(GIF)大部分都是單獨的個體,擁有背景的小動畫通常是偏向較為成熟的造型,
本研究希望此次創作的造型能夠偏向卡通讓兒童感覺更親近,同時擁有背景使 App 視覺更豐富,讓兒童注意到圖畫中的細節抓取兒童的注意力。
(二)顏色
在受歡迎的 App 介面中大多 App 都採用明亮柔和的色調,冷色與暖色的顏色 各半,明亮柔和的顏色給人活潑、光明的意象,本研究希望能夠繼續將之沿用。
兒童在六歲過後漸漸地會有自己的需求與愛好,對於色彩也是如此,其愛好 也會有性別間的差異,在六歲到十二歲階段的兒童,男孩最喜歡的顏色之一是藍色,
女孩最喜歡的顏色之一是紫色(鄧衛斌、汪異純,2017)。因此本研究將柔和的藍色 和紫色訂定為 App 的主色調。然而,扁平化的設計風格線條與形狀簡單,所以色彩 的運用更加重要了,本研究在介面的重點(如操作的按鈕)中加入對比色強調, App 的介面按鈕選用黃色,而其他在動畫中出現的物品顏色都以柔和與協調為主,但是 不設定色系,期許App 塑造出活潑多彩的意象。
圖 79 本創作主色訂定
資料來源:本研究繪製
(三)圖形隱喻
多是與現實有連結的事物,雖然其中有加入些許超脫現實的部分(例如:宇宙魚的故 事、太空中的伴手禮),但整體型態仍然符合現實,不影響兒童操作。
另外,在個案分析中指出,多數 App 會使用 Material Design 中卡片的概念,
兒童在充滿 App 的時代中長大,他們的使用習慣已然建立,因此本研究運用卡片概 念編排資訊,主頁和遊戲頁面即是採用此手法,主題小動畫們就像一張張的卡片排 列,能夠往左、右翻動,查看資訊。
二、受歡迎元素
(一)外部酬賞
在《未來兒童》App 中,能達成成就的任務有「看完一則小故事」、「看完
『六角形的雪花』」、「玩完『百萬大富翁』」、「看完『對稱的身體』」、「玩完『對稱拼 圖』」,成就系統的目的在於增強兒童的學習動機,當兒童看完一部小動畫或玩完一 個小遊戲後會得到一個禮物,該禮物是由宇宙魚贈送的,宇宙魚時常在宇宙中到處 旅行,每到一個星球就會購買該星球形狀的小玩具當作給使用者的伴手禮,而這些 伴手禮之間彼此是有關聯的,能夠串成宇宙魚的小故事。
(二)遊戲功能
在本創作當中的遊戲功能附屬於主題小動畫之下,遊戲功能不僅能增強孩子 們的學習動機與專注力,還能複習主題小動畫內的知識,依據各單元不同,遊戲也 有不同的形式,以最符合單元內容的形式呈現之,翻牌、拼圖、選擇題都是孩子們 現實中熟悉的遊戲, 讓他們不需太多的認知成本就能操作。
(三)虛擬角色
本研究希望App 中的虛擬角色與目標族群相符, 這隻魚代表孩子們,因此希 望能夠加入擬人化的設定,並且神情和年齡設定為 7 歲,讓它更貼近目標群帶來親 切的印象。
三、訊息傳遞
(一)傳達訊息
使用圖像、動畫、音樂、音效、文字傳達訊息,打造活潑生動的意象。App 整體以圖像為主、文字為輔,在點進 App 時就有童趣的背景音樂不斷播放;手指在 上方滑動、點擊時都會有「啵」的音效出現,該音效隱喻魚呼出的泡泡破掉的聲音,
「主題小動畫」、「互動遊戲」、「成就系統」三大頁面都是動畫呈現,吸引孩子的注 意力。
(二)引導
本創作並沒有使用引導教學,透過生活用品、紙與卡片的圖形隱喻,讓使用 者直觀的操作。
(三)反饋
在點選按鈕或者頁面轉換時,會出現小幅度的動畫,並且搭配生動可愛的音 效,創造一連串活潑的使用者體驗。
四、觸控手勢
點擊和輕掃都是年幼的孩子就能做到的手勢,也是普遍使用 App 必須具備的 手勢,因此本研究的觸控手勢主要為這兩項。
五、情境式設計
本創作 App 整體採取情境式的設計,帶領孩子們進入知識的世界,首先是宇 宙為背景,宇宙魚為主角的世界觀,主題小動畫的單元「大自然裡的螺線」帶領兒 童進入宇宙魚的腦內世界,從一開始看電視颱風來,之後開始思考生活中哪裡有螺 線、發現周遭有很多螺線等著使用者發現;「六角形的雪花」從雪花中發現水分子小 精靈;「對稱的身體」中引導孩子思考人、動物、植物都能看到對稱法則。這些擬人 化與情境形塑出創作本身,成就系統更是宇宙魚與兒童直接互動的情境,將情境融