兒童學習型App介面設計創作研究—以《未來兒童》主題放大鏡單元為例

全文

(1)Department of Design, College of Arts National Taiwan Normal University Master’s Thesis. App User Interface design of Learning App for children - A Case Study of Global Kids Junior Monthly. Tseng, Ching-Hsuan. Advisor: Hsu, Ho-Chieh. 109 8 August 2020.

(2) 謝辭研究所終於到尾聲了，這兩年經歷了太多的美好，真的很感謝當時在工作的自己，有勇氣再度選擇讀書。對比兩年前，設計對我而言已不止是純粹的熱情或是一個職業，它能讓人看到更深、更廣闊的世界，而透過閱覽文獻，確切感受到設計真的能改善人們的生活，也影響了學生一直以來的思考方式，面對設計之廣闊，學生必須更努力、更謙虛地面對，儘管只有綿薄之力，但還是得好好的付出、做好該做的事，才不枉費學習的時光和老師們的指教。在學校很感謝許和捷老師的指導，以及口委鄧建國老師、傅銘傳老師的指教，都讓學生獲益良多；至翎和仟喻，謝謝你們每次總想到我，在寫論文期間常常互相督促、給彼此勇氣，有你們真好；最要感謝的是媽媽和弟弟，願意當我的靠山，支持我的選擇，我是個幸運且幸福的人。. 曾靖萱 2020 年 8 月. i.

(3) 中文摘要現代兒童在科技時代下生長，兒童學習型 App 已經成為玩具和教育用品的首選，其需求持續成長，兒童介面設計日益重要。台灣有很多內容優良的紙本教材，若無法適應時代潮流而漸漸勢微甚是可惜，如何將傳統紙本教材轉化為適合行動裝置的介面形式是很重要的課題。本研究將彙整受台灣喜愛的兒童學習型 App 介面設計原則，並且了解台灣介面設計產業的製作流程與概念，應用上述兩者打造《未來兒童》App 以供參考。本研究蒐集台灣 2018/09/01~2019/08/31 最受兒童歡迎的前 20 名 App，以個案分析法歸納出台灣 7-10 歲兒童喜愛的學習型 App 介面設計原則如下：柔和且搭配協調的色彩、扁平化的介面設計風格，喜歡 App 中出現虛擬角色、遊戲功能、外部酬賞等元素，使用音效、動畫、圖像、文字、音樂生動靈活的傳達訊息，且沒有引導教學就能直接使用，小幅度動畫和音效反饋為佳，情境式設計幫助兒童沈浸其中，觸控手勢則是點擊、輕掃、拖移都能接受，App 須專注於本身的主打功能，排除非必要的設計。訪談四位介面設計專家，歸納台灣介面設計專家建議的製作流程與核心概念，介面必須以使用者為中心進行設計，首先剖析目標族群的需求與痛點，再來發想解決方法，根據解決方法形塑 App 整體方向、訂定主要功能，之後規劃詳細的介面流程與細部功能，最後產生圖形介面設計，而設計者應視自身資源多寡決定是否要易用性測試或是將各步驟加以細分。綜合上述，以《未來兒童》主題放大鏡單元為例創作 App，透過創作找到傳統紙本教材和行動裝置 App 之間的平衡，提供業者一個參考的形式與設計方向。. 關鍵字：兒童、介面設計、行動學習、應用程式(App). ii.

(4) Abstract Nowadays, learning applications for children have become the first choice as toys or education supplies. The user interface design for kids have become more and more important. There’re lots of excellent subject matters of paper in Taiwan, it has become an imperative issue that how to transform the traditional subject matters of paper into a UI form which suitable for mobile devices. This study would summarize the principles of interface design in children’s learning apps that popular in Taiwan, and explore the concept and the product development process of industrial user interface design in Taiwan, then using both information as references for creating the “Global Kids Junior APP”. This study collects the top 20 apps in Taiwan from date 2018/09/01 to 2019/08/31 that are most popular for children, and uses the method of case analysis to generalize the design principles of user interface design in learning apps that being liked by children during 7 to 10 years old in Taiwan. Above principles are summarized by the following: Elements such like soft and coordinating colors, Flat design style, enjoy the appearance of on-screen characters, game functions, Extrinsic reward, etc. Also, using sounds, animations, images, texts, music to convey messages flexibility and apps which can be used directly without guidance. Feedbacks are better with adding a slightly animations and sounds. Design scenarios can help children to immerse. Gestures like tapping, swiping, dragging are all acceptable. Focus on the main function in apps and exclude the unnecessary designs. By interviewing four experts on interface design in Taiwan to summarize the product development process and core concepts suggested by them. User- centered design is necessary when designing interfaces of apps. First, analyzing the demand and pain point from target audience and then creating solutions. Shaping the overall direction of apps and formulating the main function according to solutions. Then planning specific processes of interface and functions in detail. Finally, creating the graphical interface design. In conclusion, using the theme of “magnifier unit” from magazine “Global Kids Junior Monthly” as samples to create application. Finding the balance between traditional subject matters of paper and apps on mobile devices through creation to provide the industry with reference forms and designing directions. Keywords: Children, M-Learning, User Interface Design, Application(App). iii.

(5) 目錄謝辭 ............................................................................................................ i 中文摘要 .................................................................................................... ii. Abstract ..................................................................................................... iii 目錄 .......................................................................................................... iv 表目錄 ..................................................................................................... vii 圖目錄 ...................................................................................................... ix 第一章緒論 ............................................................................................... 1 第一節研究背景與動機 ................................................................................................. 1 第二節研究目的 ............................................................................................................. 2 第三節名詞釋義 ............................................................................................................. 2 一、兒童(Children) ...................................................................................................... 2 二、學習型 App (Learning App) ................................................................................. 3 三、介面設計(User Interface design) .......................................................................... 3 第四節研究範圍 ............................................................................................................. 3 第五節研究流程與架構 ................................................................................................. 4. 第二章文獻探討 ....................................................................................... 5 第一節兒童認知心理學相關文獻研究 ....................................................................... 5 一、認知心理學的意義................................................................................................ 5 二、皮亞傑的認知心理學理論探討............................................................................ 5 三、維果茨基的認知發展理論探討............................................................................ 8 第二節兒童行動學習相關文獻研究 ........................................................................... 10 一、行動學習的定義................................................................................................. 10 二、行動學習的特色與優勢分析............................................................................. 10. iv.

(6) 三、行動學習之於兒童的內涵探討......................................................................... 11 第三節兒童介面設計相關理論研究 ........................................................................... 12 一、介面設計的定義................................................................................................. 12 二、介面設計基本原則分析..................................................................................... 13 三、易用性的定義與原則分析................................................................................. 16 四、兒童互動設計原則探討..................................................................................... 17. 第三章個案分析與專家訪談 ................................................................... 25 第一節個案分析 ........................................................................................................... 30 一、 Android 系統免費項目....................................................................................... 30 二、 Android 系統付費項目....................................................................................... 42 三、 iOS 系統免費項目 ............................................................................................. 51 四、 iOS 系統付費項目 ............................................................................................. 64 五、介面設計綜合分析............................................................................................. 73 六、小結..................................................................................................................... 88 第二節專家訪談 ........................................................................................................... 90 一、訪談內容............................................................................................................. 90 二、訪談內容彙整分析........................................................................................... 105 三、小結................................................................................................................... 108. 第四章創作與內容分析 ........................................................................ 109 第一節創作主題 ......................................................................................................... 109 第二節創作流程與前置作業 ..................................................................................... 109 一、創作流程........................................................................................................... 109 二、使用者需求與痛點分析................................................................................... 110 三、競品分析........................................................................................................... 111 四、設計概念........................................................................................................... 112 第三節創作內容 ......................................................................................................... 115 一、創作理念........................................................................................................... 115. v.

(7) 二、虛擬角色........................................................................................................... 115 三、 App 圖示 ........................................................................................................... 116 四、操作流程........................................................................................................... 117 五、介面設計........................................................................................................... 118 第四節創作內容分析 ................................................................................................. 143 一、圖形介面設計................................................................................................... 143 二、受歡迎元素....................................................................................................... 145 三、訊息傳遞........................................................................................................... 146 四、觸控手勢........................................................................................................... 146 五、情境式設計....................................................................................................... 146. 第五章結論與建議 ................................................................................ 147 第一節研究結果 ......................................................................................................... 147 一、近年台灣受喜愛的兒童學習型 App 介面設計原則 ...................................... 147 二、台灣介面設計專家製作 App 的流程與核心概念 .......................................... 148 三、將傳統紙本教材轉化為適合 App 之方法與形式 .......................................... 148 第二節後續研究建議 ................................................................................................. 149 一、繼續延伸或深入探討兒童介面設計原則....................................................... 149 二、透過受歡迎的兒童介面設計原則發展不同的創作研究............................... 150. 參考文獻 ................................................................................................ 151 附錄 ....................................................................................................... 155 設計師訪談綱要 .......................................................................................................... 155 專家訪談彙整 .............................................................................................................. 155 A. 介面設計專家 A................................................................................................ 155 B. 介面設計專家 B ................................................................................................ 164 C. 介面設計專家 C ................................................................................................ 174 D. 介面設計專家 D................................................................................................ 181. vi.

(8) 表目錄表 1 皮亞傑的認知發展階段 ................................................................................................ 7 表 2 各階段兒童適用之設備與手勢 .................................................................................. 20 表 3 適用於兒童的互動設計原則整理 .............................................................................. 22 表 4 台灣地區 2018/09/01~2019/08/31 市場排名前五 App 基本資料表 ........................ 27 表 5 Kahoot! 介面設計分析 ............................................................................................... 31 表 6 LingoDeer: 學習英文、韓文、日文、法文或更多語種介面設計分析 ................. 34 表 7 多鄰國(Duolingo) | 免費學習英語介面設計分析 .................................................... 36 表 8 ㄅㄆㄇ注音學習卡介面設計分析............................................................................. 38 表 9 寶寶巴士科學島介面設計分析................................................................................. 40 表 10 Stellarium 天文介面設計分析 ................................................................................ 42 表 11 Solar Walk 2 - 宇宙：太陽系模擬，太空探索和航天器 3D 模型介面設計分析 44 表 12 Star Walk 2 - 天文指南和天空圖: 隨時隨地觀看星星，星座，行星和衛星介面設計分析.......................................................................................................................... 46 表 13 恐龍學習卡 PRO 介面設計分析 .............................................................................. 48 表 14 PAW Patrol: Air & Sea 介面設計分析 ..................................................................... 50 表 15 Lingokids 兒童英語介面設計分析 ......................................................................... 52 表 16 Epic! - Kids’ Books and Videos 介面設計分析 ........................................................ 55 表 17 國小數學教學動畫(1~6 年級) 完整版介面設計分析 ............................................ 57 表 18 伴魚繪本-兒童英文繪本故事介面設計分析 ......................................................... 60 表 19 Seek by iNaturalist 介面設計分析 ............................................................................ 63 表 20 Toca Hair Salon 3 介面設計分析 ............................................................................. 65 表 21 Toca Kitchen 2 介面設計分析 .................................................................................. 66 表 22 Toca Mystery House 介面設計分析 ......................................................................... 68 表 23 淘卡寶卡：髮廊 2 (Toca Hair Salon 2) 介面設計分析 ........................................... 69 表 24 BANDIMAL 介面設計分析 ..................................................................................... 71 表 25 受歡迎學習型 App 之圖形隱喻類型統計 ............................................................... 74. vii.

(9) 表 26 受歡迎學習型 App 之圖形隱喻類型總數 ............................................................... 75 表 27 受歡迎學習型 App 之介面風格類型統計 ............................................................... 77 表 28 受歡迎學習型 App 之介面風格類型總數 ............................................................... 78 表 29 受歡迎學習型 App 之受歡迎元素類型統計 ........................................................... 79 表 30 受歡迎學習型 App 之受歡迎元素類型總數 ........................................................... 80 表 31 受歡迎學習型 App 之傳達訊息類型統計 ............................................................... 81 表 32 受歡迎學習型 App 之傳達訊息類型總數 ............................................................... 82 表 33 受歡迎學習型 App 之引導類型統計 ....................................................................... 82 表 34 受歡迎學習型 App 之引導類型總數 ....................................................................... 83 表 35 受歡迎學習型 App 之反饋統計 ............................................................................... 84 表 36 受歡迎學習型 App 之反饋類型總數 ....................................................................... 85 表 37 受歡迎學習型 App 之觸控手勢類型統計 ............................................................... 85 表 38 受歡迎學習型 App 之觸控手勢類型總數 ............................................................... 86 表 39 受歡迎學習型 App 之其他類型統計 ....................................................................... 87 表 40 受歡迎學習型 App 之其他類型總數 ....................................................................... 88 表 41 前 20 名受歡迎的兒童學習型 App 介面設計原則整理 ......................................... 88 表 42 前 20 名受歡迎的兒童學習型 App 介面設計原則整理 ....................................... 112 表 43 本創作研究 App 之主要功能與目的 ..................................................................... 113 表 44 設計師訪談綱要...................................................................................................... 155. viii.

(10) 圖目錄圖 1 研究流程 ........................................................................................................................ 4 圖 2 設計師概念模型、系統印象、產品使用者之間的關係 .......................................... 15 圖 3 Sensor Tower 每日排行榜頁面 ................................................................................... 25 圖 4 App 每日排行分數列表 .............................................................................................. 26 圖 5 App 每日排行分數統計 .............................................................................................. 26 圖 6 Google 紙和卡片的圖形隱喻 ..................................................................................... 74 圖 7 Material Design 中的按鈕規範與標誌 ....................................................................... 77 圖 8 介面設計專家 A 的介面設計流程圖 ......................................................................... 91 圖 9「紀念碑谷」介面....................................................................................................... 93 圖 10 介面設計專家 B 的介面設計流程圖 ....................................................................... 94 圖 11「來我家玩吧」遊戲介面 ......................................................................................... 96 圖 12「來我家玩吧」介面滑桿......................................................................................... 96 圖 13 介面設計專家 C 的介面設計流程圖 ....................................................................... 97 圖 14「Kindle」電子書起始介面.................................................................................... 100 圖 15「Kindle」電子書中的介面.................................................................................... 100 圖 16「Kindle」選取一串單詞後的介面........................................................................ 100 圖 17 介面設計專家 D 的介面設計流程大綱 ................................................................. 101 圖 18 介面設計專家 D 的介面設計流程圖 ..................................................................... 103 圖 19「Notion」選取一串單詞後的介面 ....................................................................... 104 圖 20 本研究設計流程大綱............................................................................................. 110 圖 21 7-10 歲兒童學習型 App 需求與痛點分析 ............................................................ 111 圖 22 解決方法導入介面設計原則................................................................................. 113 圖 23 本創作研究 App 之核心佈局(Key Layout) ........................................................... 114 圖 24 宇宙魚創作草圖...................................................................................................... 115 圖 25 宇宙魚完稿三視圖 .................................................................................................. 116 圖 26 《未來兒童》App 圖示演變過程 .......................................................................... 116. ix.

(11) 圖 27 《未來兒童》App 圖示定稿 .................................................................................. 117 圖 28 《未來兒童》App 整體操作流程 .......................................................................... 117 圖 29 《未來兒童》App 起始頁面 .................................................................................. 118 圖 30 《未來兒童》App 主頁—模擬圖 .......................................................................... 119 圖 31 《未來兒童》App 主選單 ...................................................................................... 119 圖 32 《未來兒童》App 主頁全幅 .................................................................................. 120 圖 33 《未來兒童》App 按鈕圖示 .................................................................................. 120 圖 34 《未來兒童》主要功能圖示.................................................................................. 120 圖 35 《未來兒童》主題小動畫－大自然裡的螺線－進入按鈕.................................. 121 圖 36 《未來兒童》主題小動畫－大自然裡的螺線 1................................................... 122 圖 37 《未來兒童》主題小動畫－大自然裡的螺線 2................................................... 122 圖 38 《未來兒童》主題小動畫－大自然裡的螺線 3................................................... 123 圖 39 《未來兒童》主題小動畫－大自然裡的螺線 4................................................... 123 圖 40 《未來兒童》主題小動畫－大自然裡的螺線 5................................................... 124 圖 41 《未來兒童》主題小動畫－六角形的雪花－進入按鈕...................................... 124 圖 42 《未來兒童》主題小動畫－六角形的雪花 1....................................................... 125 圖 43 《未來兒童》主題小動畫－六角形的雪花 2....................................................... 125 圖 44 《未來兒童》主題小動畫－六角形的雪花 3....................................................... 126 圖 45 《未來兒童》主題小動畫－六角形的雪花 4....................................................... 126 圖 46 《未來兒童》主題小動畫－六角形的雪花 5....................................................... 127 圖 47 《未來兒童》主題小動畫－六角形的雪花 6....................................................... 127 圖 48 《未來兒童》主題小動畫－對稱的身體－進入按鈕.......................................... 128 圖 49 《未來兒童》主題小動畫－對稱的身體 1........................................................... 128 圖 50 《未來兒童》主題小動畫－對稱的身體 2........................................................... 129 圖 51 《未來兒童》主題小動畫－對稱的身體 3........................................................... 129 圖 52 《未來兒童》主題小動畫－對稱的身體 4........................................................... 130 圖 53 《未來兒童》主題小動畫－對稱的身體 5........................................................... 130 圖 54 《未來兒童》主題小動畫－對稱的身體 6........................................................... 131. x.

(12) 圖 55 《未來兒童》App 進入遊戲頁面鈕之一—紅框處 .............................................. 132 圖 56 《未來兒童》App 進入遊戲頁面鈕之二 .............................................................. 132 圖 57 《未來兒童》App 遊戲頁面 .................................................................................. 133 圖 58 《未來兒童》App 遊戲頁面全幅 .......................................................................... 133 圖 59 《未來兒童》App 遊戲「找找一樣的螺線」—牌未翻 ...................................... 134 圖 60 《未來兒童》App 遊戲「找找一樣的螺線」—翻兩張 ...................................... 134 圖 61 《未來兒童》App 遊戲「找找一樣的螺線」—牌全翻 ...................................... 135 圖 62 《未來兒童》App 遊戲「百萬大挑戰」—初始頁 .............................................. 135 圖 63 《未來兒童》App 遊戲「百萬大挑戰」—題目 1 ............................................... 136 圖 64 《未來兒童》App 遊戲「百萬大挑戰」—題目 1 答案正確 .............................. 136 圖 65 《未來兒童》App 遊戲「百萬大挑戰」—題目 2~4 ........................................... 137 圖 66 《未來兒童》App 遊戲「百萬大挑戰」—全部答題正確 .................................. 137 圖 67 《未來兒童》App 遊戲「對稱拼圖」—初始頁 .................................................. 138 圖 68 《未來兒童》App 遊戲「對稱拼圖」—拼圖完成 .............................................. 138 圖 69 《未來兒童》App 成就達成畫面 1 ....................................................................... 139 圖 70 《未來兒童》App 成就達成畫面 2 ....................................................................... 139 圖 71 《未來兒童》App 進入成就頁面鈕 ...................................................................... 140 圖 72 《未來兒童》App 成就頁面(達成一個任務) ....................................................... 140 圖 73 《未來兒童》App 成就頁面詳述 .......................................................................... 141 圖 74 《未來兒童》App 成就頁面 (任務全數達成) ...................................................... 141 圖 75 《未來兒童》App 成就頁面詳述(達成全部任務) ............................................... 142 圖 76 《未來兒童》App 切換使用者選單(一位使用者) ............................................... 142 圖 77 《未來兒童》App 編輯使用者頁面 ...................................................................... 143 圖 78 《未來兒童》App 使用者選單(四位使用者) ....................................................... 143 圖 79 本創作主色訂定...................................................................................................... 144. xi.

(13) 第一章緒論第一節研究背景與動機現代科技日新月異，人們接收資訊的媒介已逐漸從紙張轉變為電子屏幕，行動數位產品如手機、平板電腦等已是現代人生活中不可或缺的一部分；行動載具除了影響成人外，亦有許多兒童在使用。隨著行動載具(Mobile Devices) 的蓬勃發展，數位學習(Mobile Learning) 也開始興起，經濟部工業局的調查報告指出，德國統計業者 Statista 歸納 2015 年 3 月 App Store 最受歡迎之類別「教育」類 App 位居第三，占 9.95%。而教育類孩童學習的 App 於 Google Play 和 iOS 的 App Store 中，不論免費還是付費排名，在前十名當中都佔有三個名次。顯見兒童學習型 App 在全球備受使用者親睞 (經濟部工業局，2015) 。在台灣，根據兒童福利聯盟文教基金會調查發現，九成以上(90.2%) 的孩子有在使用 3C 產品的習慣，超過 57.4%的國小五六年級兒童擁有自己的電腦(包括平板電腦、筆記型電腦及桌上型電腦) ，其中 14.2%擁有自己 3C 產品的孩子周間平均每日使用超過 3 小時，到了假日，有 3C 產品的孩子平均使用 3C 產品時間超過 5 小時的有近兩成(19.6%) 。 (兒童福利聯盟文教基金會，2015) 顯見全球兒童使用行動裝置已是常態。台灣有很多內容優良的紙本教材因應時代潮流推出 App，但是在介面的設計與規劃上相較國外 App 著力不多，然而介面設計是 App 內十分重要的一環，若無法適應時代潮流而漸漸勢微十分可惜，如何將傳統紙本教材轉化為適合行動裝置的介面形式成為重要的課題。本研究對於兒童教育和介面設計有濃厚的興趣，加上學習型 App 在台灣的需求日益增加，因此本研究希望能夠了解相關知識，但是在書店和國內販賣書籍的網站卻查不到關於兒童介面的中文書籍，顯見其需求較少。本創作研究之背景與動機如下： 1.. 學童使用行動裝置已是生活中的常態，兒童學習型 App 備受使用者親睞。. 1.

(14) 2.. 台灣的兒童教育產業因應時勢紛紛推出 App，但其介面設計有待加強，如何將傳統紙本教材轉化為適合行動裝置的介面形式成為重要的課題。. 3.. 國內找不到關於兒童介面設計的中文書籍，顯見其需求少，對此理論不重視。. 第二節研究目的鑑於上述背景與動機，本研究希望能夠找出屬於台灣的兒童學習型 App 的實踐方式，從理論面以及實作面著手，歸納出具體原則、了解如何實踐，最後以台灣教材為範例，將理論與方法貫穿其中，化為具體的創作，期許本研究能夠為台灣兒童學習型 App 帶來不同的觀點以供參考。本研究目的如下： 1.. 彙整受台灣兒童喜愛的學習型 App 介面設計原則本研究期許能彙整出台灣兒童喜愛的學習型 App 介面設計原則，首先探討兒. 童體能與認知的發展和限制，以及他們對介面的需求為何，進而分析行動學習的特色，再對近年台灣受歡迎的兒童學習型 App 進行分析與歸納。 2.. 了解台灣介面設計產業的製作流程與概念透過訪談介面設計專家，了解台灣介面設計產業的製作流程與概念。. 3.. 歸納上述兩者應用於台灣傳統紙本教材，轉化為具體 App 介面最後以台灣教材為範例，將理論與方法貫穿其中，化為具體創作，期許本研. 究能夠為台灣兒童學習型 App 帶來不同的觀點以供參考。. 第三節名詞釋義一、兒童(Children) 根據台灣《兒童及少年福利與權益保障法》第一章第二條，兒童係指未滿十二歲之人。. 2.

(15) 二、學習型 App (Learning App) 學習型 App 是指具有教育意義的應用程式，目的是在線上提供教學資源給學習者使用。耿榮榮(2018)指出，學習型 App 主要的理念是「自主學習」，利用網路技術將知識快速傳播，使許多人能夠共同使用，有別於傳統的學習模式，將知識與趣味融為一體。. 三、介面設計(User Interface design) 介面是指人類和機器溝通的媒介，在資訊工程，使用者是經由介面理解產品並與之互動。介面設計又可稱為「互動設計」(Interactive Design) ，互動設計的目標是增強人們的理解，理解產品能夠做什麼、當下在發生什麼，已經有什麼事發生了，並且融合心理學、設計、藝術與情感等基本原則，讓使用者得到愉快的使用體驗。. 第四節研究範圍本研究因人力和時間等等的因素考量，作出以下的範圍與限制： 1.. 本研究預計搜集 App store(ios 系統手機) 兒童類別與教育類別重疊的 App，以及 Google Play( Android 系統手機) 商店中的大分類 Family 下的子類別 Education，在 2018 年 9 月 1 日～2019 年 8 月 31 日綜合排名前 20 之兒童學習型 App 進行案例分析。. 2.. 因人力與時間因素，將針對 4 位介面設計專家進行訪談。. 3.. App 以《未來兒童》雜誌－主題放大鏡單元為例創作，不額外添加內容。. 4.. 本研究僅針對台灣兒童學習型 App 介面設計進行探討，不包含其教育內容，該研究結果亦不得過度推論於不同類別的 App 。. 5.. 由於《未來兒童》目標群為 7-10 歲的兒童，不宜將創作結果過度推論至其他年齡區間的兒童。. 6.. 本論文設計的兒童學習型 App 僅為研究目的，因此不會實際上市。. 3.

(16) 第五節研究流程與架構本研究流程主要分成五個階段，首先在第一階段確立研究主題、目的與範圍，並進行第二階段的相關文獻蒐集與探討。接著設定研究方法，依序包括：案例分析、專家訪談。第四階段為研究結果，歸納出受台灣兒童喜愛的兒童介面設計原則以及業界介面設計之流程與核心理念。之後將上述兩項目運用於創作當中，最後歸納出結論，研究流程如下圖。. 圖 1 研究流程. 4.

(17) 第二章文獻探討第一節兒童認知心理學相關文獻研究一、認知心理學的意義認知(cognition) 又稱為認識，泛指獲得、加工、組織、應用知識等複雜的心理活動(劉金花，1999) 。認知心理學(cognitive psychology) 是近代備受重視的心理學領域，一般而言認知心理學是研究人類如何獲得、儲存、應用知識，認知心理學的研究主題囊括感覺、知覺、注意、心像、記憶、思考、推理、判斷、語文運用、心智發展以及適應環境、解決問題等複雜的心理歷程(張春興，1988) 。認知心理學主要受到兩大理論影響，一是皮亞傑的認知發展論，一是維果茨基的認知發展理論。皮亞傑的認知發展論主要是研究兒童階段性的認知發展與兒童推理、解決問題，其理論著重於兒童認知發展的不同階段；而維果茨基的認知發展理論則是探討社會文化、語言和可能發展區，維果茨基認為兒童的學習與成長，如果家長、教師能夠給予適當的幫助與建構鷹架，則有助加速兒童思維的建構和行動，藉此得到新的學習與成長，也就是著名的「鷹架理論」。. 二、皮亞傑的認知心理學理論探討尚·皮亞傑(Jean Piaget，1896-1980) 瑞士人，是最具影響力的教育心理學家之一，在他去世前已著作五百多篇論文及五十幾本書，六〇年代以後致力於兒童的認知發展理論，如今他的理論被廣泛應用在各種兒童認知學習的文獻當中。有生物學博士文憑的他，對心理與哲學也相當有興趣，在拿到博士學位之後便到精神科醫院工作，在期間接觸到正常與遲緩兒童的實驗研究，因而啟發皮亞傑研究兒童的認知發展理論。皮亞傑是第一位將生物的適應、組織、平衡過程觀點應用在兒童認知發展上的學者(李丹，1989) 。. 5.

(18) 根據皮亞傑的觀點，知識是透過人本身的運算後才能夠獲得。運算是學習與發展的重要核心，運算是可逆轉的，例如算式 3×3=9 是一種運算，9 的平方根是逆運算，運算具有系統性與守恆性。概念是人們根據不同事件而獲得的知識，而建構概念的最小單位稱為「基模」 (scheme) ，基模是動作的結構或組織，會在相同或相似的環境中經由不斷重複而導致基模遷移與類推；例如嬰兒會吸吮母奶，形成了一個吸吮基模，不斷重複此動作，嬰兒會將吸吮基模應用在其他事件，例如吸吮手指、奶瓶(劉金花，1999) 。由無數的概念聚集而成則稱為認知結構體，當個體與外在環境互動時，結構體會為了適應環境調整和成長。建構結構體需要語言、認知能力與學習能力，要培養這些能力需要漸進式的進行，早期結構體比較粗略，隨著年齡增長或者是後天學習、經驗積累，這些能力會使和結構體中的概念不斷替換、重組、結合、應用，結構體會不斷地複雜與精緻化。兒童時期提供教育，主要的價值在於讓兒童的認知得到成長，若教育要有效，採用的教學方法必不可違背這些自然的學習行為與法則。接觸新的知識或概念時，如果在本來的結構體中可以找到相似的概念，那麼將知識吸納並同化即可。但若在結構體中找不到對應的知識時，結構體會為了接納新知做出調整，以確保認知架構的和諧，結構體調整結束就表示學習完成了；結構體的調整能夠讓人類超越天賦，發展出更高層次的認知能力。皮亞傑認為有四大因素影響兒童發展，第一是人的神經和內分泌系統成熟，隨著這些生理成長，有些行為模式才得以出現。第二是先天的智能和後天環境互動，累積這些經驗而獲得知識，例如人的視覺不斷接觸環境，就能夠發現物體有大小之分和色彩差異，經由運算，將環境中的事物分類或排序，這是屬於邏輯性的經驗(李丹，1989) 。第三是社會經驗，人們與社會或文化互動，這些社會經驗包含：有系統性的良好教育、對個體產生明顯且持久變化的學習活動，例如學習語言就是這類的活動。最後是人們內部組織平衡的機制，內部的組織包括心理、生理、神經、肌肉、感覺統合，這些組織會跟上述三種經驗交互協調且予以系統化，使個體的心理運思通往更高層次的發展(李丹，1989)。. 6.

(19) 皮亞傑將兒童的年齡區分為四個發展階段，不同階段的認知能力有個別的特質，分別是 0-2 歲的官能感知活動期，2-7 歲的運思前期，7-11 歲的具體運思期，1115 歲的形式運思期，年齡區分間有交疊的可能性。 0-2 歲屬於官能感知活動期，這時的幼童僅能憑感覺與動作發揮他們的基模功能，並藉由本能的反射動作表達目的，對物體的認知具有物體永存的想法。 2-7 屬於運思前期，這個階段的發展重點在於建構自己與他人和世界的關係，此階段對知識的吸收相當緩慢，可以學習較為粗略、具體的概念。抽象的概念則不適用。因此在這個階段的兒童適合使用具象的事物輔助學習，像是圖片或是具體的物品(石素錦、陳瑞慧，1999)。 7-11 歲屬於具體運思期，能夠以現實生活為基礎發展認知能力，這時候的兒童能了解具體事物的概念和本質，像是水在不同的容器中本質依舊相同的概念，並且可以將概念實證於自身的生活經驗中，對世界的認知已經在穩定中成長，但仍然無法做到全面性的歸納。當兒童到國小高年級時，概念形成需花費的時間會縮短，他們也能從嘗試與犯錯當中，歸納部分的語言知識與規則，此時可以使用圖文並茂的內容引導學習，幫助兒童確定語言的正確性(石素錦，1992)。 11-15 歲屬於形式運思期，這時的孩子能夠從和具體事物互動的經驗轉換為抽象的概念，他們具備抽象思考的能力和邏輯觀，也已經擁有推理的能力。因此這時期的孩子可以教導複雜的內容或概念，訓練他們剛發展出的抽象與邏輯思考能力(石素錦、陳瑞慧，1999)。表 1 皮亞傑的認知發展階段年齡階段. 期別. 0~2 歲. 官能感知活動期. 認知特徵 1. 憑感覺與動作已發揮其基模功能 2. 由本能性的反射動作到目的性的活動 3. 對物體認知具有物體永存概念. 2~7 歲. 運思前期. 1.. 發展重點在於建構自己與世界的關係. 2.. 可以學習較為粗略、具體的概念. 7.

(20) 年齡階段. 期別. 認知特徵 3.. 抽象概念不適用. 4.. 適合使用具象的事物輔助學習，像是圖片或是具體物品. 7~11 歲. 具體運思期. 1.. 能夠以現實生活為基礎發展認知能力. 2.. 了解具體事物的概念和本質. 3.. 具備部分歸納能力，但仍無法做到全面系統化. 11 歲以上. 形式運思期. 4.. 可以使用圖文並茂的內容引導學習. 1.. 他們具備抽象思考能力和邏輯觀. 2.. 擁有推理的能力. 3.. 可以教導複雜的內容或概念，訓練他們剛發展出的抽象與邏輯思考能力. 資料來源： Inhelder & Piaget, 1964; 石素錦、陳瑞慧，1999. 綜合以上，教材必須配合學習者的認知結構。廣義來說合適的教材可以幫助兒童認知能力發展，狹義來說，經過同化所獲得的知識才能持久與活用(Inhelder, B., & Piaget, J., 1964) 。因此幼教的重點在於提供感官動作的教材，小學教材需要有具體物品與操作機會，中學教育則應慎重區別抽象知識與具體知識的教材內容以配合學習者的認知能力，另外，遊戲對年齡小的兒童來說是非常有效的學習方法，因為遊戲有具體的情景、明確的目的和角色扮演，通過遊戲兒童會對學習的內容比較感興趣，且與遊戲有關的規則也容易被記住(石素錦、陳瑞慧，1999)。. 三、維果茨基的認知發展理論探討維果茨基的認知發展理論有三個重要因素：. 8.

(21) （一）社會文化是影響認知發展的要素維果茨基認為人從出生到成年，成為社會人，始終生活在人類社會中，必然受到文化、語言、風俗、宗教、習慣、制度、行為規範等影響，成為一個符合當地社會文化規範的成員；兒童的認知發展，無疑是在社會文化中進行的，因此改善兒童的環境將有助於其認知發展(張春興，2004) 。在此理論中強調，個體認知的改變是經由與他人互動所造成的，其中以「社會文化脈絡」與「社會性互動」扮演關鍵角色(蔡啟達，2012) 。. （二）認知思維與語言發展有密切關係維果茨基曾經設計一場實驗，在實驗中兒童需要完成任務，在過程中會遇到挑戰，實驗的目的在於觀察兒童面對挫折時的反應。結果發現兒童遭遇挫折時，經常會跟自己說話，維果茨基將這個過程稱為「私語」 (private speech)，私語的用意在於調和兒童的思維和行動，從而幫助他們的認知發展，也能夠藉此紓緩情緒。. （三）從實際發展水平延至可能發展區維果茨基提出「近側發展區」(zone of proximal development ) 的概念，兒童以自己的實力達成的表現水準，稱為「實際認知發展水準」，而接受協助後達成的表現水準，稱為「潛在認知發展水準」，兩項水準之間的差距，稱為該兒童的近側發展區。當兒童不清楚如何進行時，如果有知識豐富的他人提供指導或協助，有助兒童將其對話內容內化，促進認知與思考發展，藉此得到成長，這種提供協助行為後所產生的作用，便是維果茨基著名的「鷹架作用」(scaffolding) 。. 本創作研究的目標群屬於 7-10 歲的兒童，從皮亞傑的認知發展階段瞭解到 710 歲的孩子正經歷具體運思期，以現實世界為基礎發展他們的認知能力，並且對具體事物有概念，具備部分的規劃能力但無法做到全面系統化，因此介面設計時應考量上述因素，盡量將現實生活中的物品和概念融入介面設計中，使兒童更容易理解，且此階段的兒童缺乏抽象思考的概念，所以介面圖形應具象化呈現，再者，他們的歸納與系統性思考仍在發展中，因此 App 的介面階層不宜過多，需要讓使用者在缺乏系統與規劃能力的情況下也能進行下一步。. 9.

(22) 第二節兒童行動學習相關文獻研究一、行動學習的定義在科技發達的現代中，人們講求的是效率與方便。而「行動學習」(Mlearning) 的概念，便因為這樣的需求應運而生。行動學習打破了在教室中學習的界線，能夠隨時隨地的學習，超越環境的局限性進行學習與教育(Martin, McGill & Sudweeks , 2013) 。范雅婷(2013)梳理了過往學者的研究，認為行動學習的定義是：以行動裝置為平台，透過其硬體、運算、網路等技術，使行動裝置的持有者能夠進行個人化的學習，這種學習的方式即稱為行動學習。. 二、行動學習的特色與優勢分析范雅婷(2013)表示，行動學習的特色需要以兩個面向進行說明，第一是了解行動載具的條件與限制，第二是探討學習者使用行動裝置時的習慣，兩者綜合方能完整詮釋行動學習，學者將行動學習的特色整理如下：. （一）輕薄短小：便攜性、移動性、微型化輕薄短小是行動載具的基本特徵，也是行動學習有別於其他數位學習的主要特色。便攜性是指行動載具尺寸較小，能夠隨身攜帶；攜帶出門後能夠在任何地點且不限時間的進行學習，這便是行動裝置的移動性；由於行動裝置尺寸的限制，因此不適合將傳統教材直接導入學習，需要以符合行動裝置的方式呈現，像是分成許多小段落且重點式的課程編排方能適用，此類將課程聚焦並擷取的概念，即是行動學習微型化的特性。. （二）無線通訊技術:無線性、即時性、移動性行動載具的無線通訊技術能夠讓學習者隨時的和網際網路互動，因此也讓行動學習擁有即時性，所謂即時性是指學習者能夠即時地在網路上查詢資訊，並且在短時間內獲得知識、加深學習印象。透過無線網路的廣覆，學習場域不再局限於固定的地點，方能讓行動學習達成移動的特性。. 10.

(23) （三）續航力高：移動性、便攜性行動載具的電源通常都提供了高度的續航力，方便學習者在零碎的時間穩定學習，這樣的特色也讓行動載具方便攜帶並移動，此為行動載具的移動性與便攜性。. （四）可自由裝載應用程式：擴充性、個人化行動載具可以自由的下載 App，學習者能夠依據自己的喜好或需求，自由地擴充其功能，打造屬於自己的學習平台。. （五）日愈精進的硬體、技術透過行動裝置日益精進的技術，輔助學習的方式也越來越多樣化。許多 App 在感應到特定的條件(地點、溫度、聲音⋯⋯等)，便會提供相關的資訊，以這樣的方式學習，強調在學習的過程中與真實環境互動，了解到真實環境能夠運用的知識，應證了「情境感知無所不在學習 (context-aware ubiquitous learning) 」。. （六）一人一機：個人化、針對性持有行動裝置的人數之多，一人一機的願景是可達成的目標。每位持有人自行擴增行動裝置的功能、下載符合自身需求的課程，即可打造個人化、針對性強的學習方式。. （七）使用行動載具時機多為零碎時間：微型化在不侷限時間和空間的情況下，學習者通常都是利用在移動中的零碎時間學習，因為上述的習慣及環境因素較為干擾，教材已經不適用於大段落的傳統學習方式，必須改以短小且聚焦的單元設計，方能符合學習者的需求，自由安排學習時間與內容。. 三、行動學習之於兒童的內涵探討兒童成長的環境中充斥許多高科技的產品，他們的玩具和教材除了傳統的形式以外，更多了許多電子產品，有些學校甚至導入了平板電腦或者點讀機進行教學，科技改變了以往的教學模式，如果科技得到合理的運用，也能成為重要的學習工具。. 11.

(24) 現在多數的年輕父母願意從大量的兒童教育類 App 當中篩選一款適合的 App 給孩子使用，對於父母來說，兒童教育類 App 已經成為玩具和教育用品的首選，兒童教育類 App 的需求呈現持續成長的趨勢(劉璐、曹陽，2016)。. 綜合上述，了解到行動學習符合目前時代之趨勢，學習型 App 已融入於兒童的生活當中，然而在設計兒童學習型 App 的介面時，需要考慮行動裝置的特性與其限制，由於使用行動裝置學習不受特定時間與場域的限制，學習者通常都是利用在移動中的零碎時間學習，在這樣的使用習慣下學習者較容易受到干擾，因此本創作研究在設計學習型 App 介面時需要將《未來兒童》雜誌的大段落文章內容轉化爲短小、聚焦的單元設計，符合使用者的需求，自由安排學習時間與進度。. 第三節兒童介面設計相關理論研究一、介面設計的定義 Norman1(2013) 認為，好的產品應該要易於使用且符合人的心意，也就是說產品外在不僅要有一定的品質及技術，內在還必須滿足使用者的整體體驗，形式與互動感受缺一不可。介面是指人類和機器溝通的媒介，在資訊工程當中，使用者是經由介面理解產品並與之互動。介面設計又可稱為「互動設計」(Interactive Design) ，互動設計的目標是增強人們的理解，理解產品能夠做什麼、當下在發生什麼，已經有什麼事發生了。互動設計融合了心理學、設計、藝術與情感等基本原則，讓使用者得到愉快的使用體驗。. 1. Donald Arthur Norman，中譯唐納·諾曼，首位提出「使用者經驗」(User Experience)概念的學者，是. 介面設計與使用者經驗的先驅，以書籍《設計心理學》聞名於工業設計和介面設計領域，曾被《商業週刊》雜誌評選為世紀最有影響力的設計師之一。與 Jakob Nielsen 共同創立知名的尼爾森諾曼集團，為企業提供介面設計和用戶體驗的諮詢與顧問服務。. 12.

(25) 好的介面設計最基本的特徵有二，可視性(discoverability) 與易通性 (understanding) ，可視性意指產品必須能夠正確地表達訊息，讓使用者明白如何合理使用，包含操作、操作的過程和該操作的位置。易通性是令使用者明白整體設計的意圖為何，產品本身的用途為何、產品內的裝置能夠起到什麼作用都必須讓使用者清楚知曉。. 二、介面設計基本原則分析上述的可視性來自於心理學中的四個基本觀念：預設用途、指意、對應性、反饋。第五個最重要的原則是系統中的概念模型，概念模型讓使用者能夠真正的了解產品(Norman，2013) 。概念模型當中又可延伸為系統印象，以下將介紹六項基本介面設計原則：. （一）預設用途(Affordance) 預設用途是指物品與人之間的關係，物品的特性令使用者聯想並決定預設用途(perceived affordance) ，可見的預設用途有效提供人們線索去操作物品，例如突起的按鈕暗示人們能夠按下去、鑰匙孔的曲狀凹槽要拿鑰匙插入、罐子上的圓形蓋子可以旋轉，不需要任何說明書或者提示幫助，預設用途讓人們知道要如何操作物品。. （二）指意(Signifiers) 指意是一種提示，任何能感知到的符號或聲音，特意提示使用者如何操作並達成目的。當人們在使用產品或服務時，會尋找任何能協助他們理解的符號，設計師必須提供這些線索協助使用者操作，指意的效用在於溝通與交代，令使用者理解操作方式、產品結構甚至是產品目的。對於設計師來說指意非常重要，指意運用良好讓使用者更能理解產品，優秀的設計師能夠將設計中的指意串聯成一個完整的體驗。. 13.

(26) （三）對應性(Mapping) 對應性是指兩組事物之間的關係，例如燈光與燈的開關，今天教室裡面有五盞燈和五個開關，設計者設定最左邊的開關能夠關掉最左邊的燈，也就是說設計者利用空間的對應讓使用者理解燈和開關之間的對應關係。自然界和文化中存在許多空間類比而得到對應關係，例如划小船時將槳往後划船便會往前移、開車把方向盤往順時針轉會使車向右轉彎，介面設計師也將這些日常的對應性應用於介面當中；通常習慣方向向上意指增加、向下減少，所以許多介面在增加項目時的手勢是往上的、減少則往下，當一系列的操作顯而易見，且控制與顯示符合自然對應性時，產品就會變得容易使用。. （四）反饋(Feedback) 反饋是指系統讓使用者知道它正在處理事情的方式。反饋有即時的特性，一有拖延使用者可能會放棄並展開其他活動；它必須精心規劃，以不過度突兀的方式確認所有步驟；所有事件的反饋具有層級之分，次要的事件可用較不經意的手法呈現，隨著重要等級提升，越重要的事件反饋就得越來越引人注目，當發生嚴重的突發狀況時，就要優先展示重要的信號。. （五）概念模型(Conceptual Models) 概念模型是將複雜的概念簡單化說明，簡化概念並告訴使用者事物是如何操作。像是在電腦上顯示的資料夾和文件，方便我們建立觀念並且操作，這就是有效的概念模型——事實上在電腦內部沒有任何的資料夾，只是為了使產品更容易使用而做的設計，概念模型不需要精確或完整，只要人們能夠有效達到目的即可。除了產品外，人們的心中也有各式各樣的概念模型，也被稱為「心理模式」。心理模式就是在人們心中事物如何運作的概念模型，一個人在面對一項產品時心裡會產生多個概念模型，而這些概念模型是由過往的經驗所產生，模型之間也可能互相衝突，且它們經常是錯誤的，因此導致人們在操作設備時面臨困難；若產品能有效地運用預設用途、指意、對應性、反饋，便能為該產品建立一個清晰的概念模型，一個好. 14.

(27) 的概念模型讓使用者知道如何操作、理解脈絡、預測操作的結果，倘若沒有好的概念模型，使用者只能憑自身的力量盲目摸索。. （六）系統印象(System Image) 人們如何與產品建立出一個合理的概念模型呢？當操作一台新購買的咖啡機時，我們只能依賴自己以往的心理模式以及產品說明書、廣告或網頁訊息尋找線索，那些提供給使用者的紙本和廣告信息的組合就稱為「系統印象」。設計師概念模型、系統印象、產品使用者之間的關係如下圖，設計師概念模型是設計師對產品的概念，但在產品到使用者手上後設計師便不存在，無法與使用者溝通，只能藉由系統印象傳遞概念，系統印象可能是有形或無形的，例如產品說明書、電視廣告、網站等能幫助使用者獲得訊息的方式。當使用者與產品互動時參閱說明書、瀏覽網站，使用者們會將系統印象轉化為自身的概念模型，也就是使用者概念模型。設計師們會希望使用者概念模型與設計師概念模型保持一致，但由於設計師無法與使用者進行交流，於是就由系統印象溝通。. 圖 2 設計師概念模型、系統印象、產品使用者之間的關係資料來源：改繪自 Norman,Donald A. 2013. 15.

(28) 三、易用性的定義與原則分析易用性 (Usability)是指使用者能夠用某樣工具來達到特定目標的容易程度，目前被廣泛使用於介面設計產業當中。它是基於一種以人為本(User Centered Design)的設計概念，以人為本的設計是一種概念、設計流程，對使用者的需求、能力、行為事前進行分析，將分析結果用以設計產品，滿足使用者的需求、能力以及行為模式。良好的設計始於理解人的心理和技術並且著重溝通，與使用者溝通並告訴使用者如何操作、操作後會發生什麼事、會產生什麼結果，也得顧及到產生錯誤後該如何引導使用者排除或者進行下一步，由於使用者通常不曉得自身的需求以及將會面臨何種困難，設計師必須觀察然後找出問題，原則是不設任何限制，然後反覆測試不同的理念，每次測試後都需有所改進，並逐漸靠近問題核心，產品最終才能真正滿足使用者。Nielsen2(1994)提出了檢測易用性的十大原則，本研究將原則羅列於下：. (一)系統狀態可見度 (Visibility of system status) 系統應該在合理的時間內透過適當的反饋讓使用者了解系統當前的狀態。 (二)系統與現實世界相符 (Match between system and the real world) 系統的溝通方式應該與現實世界相符，應使用自然語言的邏輯與順序，並用使用者熟悉的詞語呈現，而並非是系統內的專業術語。 (三)使用者的控制權與自由度 (User control and freedom) 使用者經常選擇到錯誤的功能，此時需要設置一個「逃生出口」幫助使用者隨時離開當下的狀態，例如返回鍵或是取消鈕。 (四)一致性與標準 (Consistency and standards) 制定一套準確的原則，使用者在使用時不必懷疑不同的詞語、動作或情形代表著同一件事。. 2. Jakob Nielsen，中譯雅各布·尼爾森，訂定十大易用性原則的學者。致力於人機互動與介面設計，曾. 入選斯堪的納維亞互動媒體名人堂，並被美國計算機學會人機互動學院授予人機互動實踐的終身成就獎，與 Donald Arthur Norman 共同創立知名的尼爾森諾曼集團，為企業提供介面設計和用戶體驗的諮詢與顧問服務。. 16.

(29) (五)避免錯誤 (Error prevention) 在使用者執行操作時跳出提醒視窗，或是設置檢查功能，都能夠在第一時間預防錯誤發生。 (六)用認的比用記的好 (Recognition rather than recall) 使用者不需詳記系統如何使用，而是透過操作流程或選項對系統有清楚的認知，系統應該清晰可見並且容易檢索。 (七)使用的靈活度和效率 (Flexibility and efficiency of use) 系統能夠透過不同操作同時滿足初學者與專業用戶，初學者的操作需要顯而易見，專業用戶則需縮短操作時間，例如 Word 的複製貼上功能有多種不同的操作方式，新手用戶可點擊編輯→貼上，專業用戶鍵盤按 Ctrl+C 即可。 (八)美學與簡約設計 (Aesthetic and minimalist design) 每當增加一個元素或信息時，就會分散一些使用者的關注力，降低重要訊息的能見度；因此建議減少或剔除無關緊要的元素。 (九)幫助使用者解決錯誤 (Help users recognize, diagnose, and recover from errors) 錯誤提示應使用簡單的語言呈現，準確指示問題並建設性地提出解決方案。 (十)提供使用指南 (Help and documentation) 在必要時可以提供使用指南，然而指南需要方便搜索，並且提出具體的執行步驟，不過在沒有使用指南的情況下就能使用系統是最好的。. 四、兒童互動設計原則探討兒童從很小的時候就開始體驗電子產品，並且持續至成人甚至是一生都在使用。對兒童而言，好的介面設計與成年人的定義不同，因為兒童的使用需求、目標與各方面的發展和成人不一致，因此不能按照成人的介面原則進行設計。 Chiasson and Gutwin(2005) 指出，兒童使用電子產品通常是以娛樂或教育為目的，因此使用產品的動機、參與程度與任務效率一樣重要，能讓兒童花時間在產品上並且持續吸引他們的注意力，該產品才能獲得價值。. 17.

(30) （一）年齡區隔兒童的每個年齡階段認知、身體、社會概念與情感各不相同，並且隨著年齡的增長，使用者對技術的了解也越來越多。Sherwin, Nielsen(2019) 指出，孩子們能夠敏銳地察覺到年齡上的設計差異，訪談一名六歲的兒童在使用一個網站後說：「這個網站適合四到五歲的小孩，從動畫片裡的火車就可以看出來。」僅管成人將四到六歲的孩子都定義為「兒童」，但在孩子們心中，他們之間的差異十分巨大，因此在為兒童設計產品時需要非常狹窄的年齡區間，至少需區分幼兒(3-5 歲) ，兒童(6-8 歲) 和較大兒童(9-12 歲) ，仍需保持一致的使用者體驗。. （二）發展三領域：認知發展、身體發展、社會與情緒發展兒童的發展可以分為三個主要領域：認知發展、身體發展、社會與情緒發展。認知發展即為兒童的智力成長，身體發展涉及運動技能和協調能力的發展，社會和情緒的發展是緊密聯繫在一起的：社會發展是指與他人的關係形成，情緒發展是指孩子能夠理解、調節和表達自己感覺的能力，同時涉及同理和同情心的能力，為了滿足兒童的需求與期待，介面設計必須以這些發展領域為準則(Chiasson and Gutwin， 2005) 。 1.. 認知發展. （1）讀寫能力兒童的詞彙量不比成人，且各個年齡區間的詞彙量差異很大，因此兒童的介面設計必須考量狹窄的年齡區隔以滿足需求。 Hanna, Risden, Czerwinski, Alexander(1999) 提出，大多數兒童不習慣在螢幕上閱讀，建議有旁白能朗誦文字說明，而文字說明要方便記憶；或者是螢幕中的角色能夠直接說出指令並產生相應的動畫引起兒童注意。Steiner and Moher(1992) 發現圖形隱喻3對於兒童操作界面很有幫助，且隱喻若帶有兒童日常中的熟悉事物能夠更快速的學習與操作介面。Druin, Bederson, Hourcade, Sherman, Revelle, Platner, and. 3. 圖形隱喻是指將現實世界中的概念利用圖像過渡至介面，由於使用者對現實世界的概念有一定的了. 解，因此能夠幫助他快速地理解有該概念的介面，常見的圖形隱喻是在介面中模擬現實世界中物體的外觀，讓使用者用對該物品的認知操作介面。. 18.

(31) Weng(2001) 發現圖形隱喻是適合兒童的表現形式，且帶有最少文字的可視界面最有用。鑑於上述，對兒童而言以視覺或音效傳達訊息，比起文字更有價值。（2）指引與反饋兒童界面必須直觀或能夠提供某種形式的指引，甚至在沒有指引的情況下也要能使用(Chiasson and Gutwin，2005) 。產品的任務活動應該從簡單開始，隨著孩子掌握所需技能而增加複雜性和難度，不斷引導孩子學習新概念(Hanna et al., 1999) 。 Sedighian and Klawe (1996) 提到，在一個教育遊戲中逐漸消除引導和反饋會鼓勵兒童 (12-14 歲) 承擔越來越大的認知責任，他們設計的遊戲初始級別提供了許多視覺提示，有助於兒童預測操作結果；然而隨著遊戲進行，線索會逐漸消失，這要求他們自行思考並預測結果。孩子們希望立即看到執行動作的結果，如果在輸入之後什麼也沒有發生，孩子們可能會重複他們的動作直到發生事件，儘管不斷的聽覺和視覺反饋對於成年使用者來說可能會很煩人，但兒童通常會這麼做(Chiasson and Gutwin，2005) 。（3）心理發展 Chiasson and Gutwin(2005) 指出，兒童缺乏抽象思考的能力，也無法理解較為複雜的介面架構，他們常用的方式是：反覆的點擊與嘗試，一旦找到可行的辦法，就不會再嘗試找尋更有效的路徑。儘管兒童無法有效地瀏覽分類結構，但通過視覺化的介面，孩子們也能夠拜訪原本無法抵達的路徑(Druin et al., 2001)。（4）想像力兒童很容易沈浸在使用隱喻的虛擬環境當中，並且能夠透過隱喻幫助他們快速了解產品及運作方式(Danesh, Inkpen, Lau, Shu and Booth, 2001) 。當使用隱喻時，孩子們希望螢幕上的對象能和現實生活中有同樣的表現(Rader, Brand and Clayton, 1997) 。 Strommen(1994) 開發了一款軟體，使 6-8 歲的兒童能以第一人稱探索虛擬森林，他發現孩子們在虛擬的低垂樹枝下經過時會低下頭。一個孩子甚至停止玩耍並安靜地坐在椅子上，詢問這個孩子後她解釋：保持安靜想看看動物是否會出來；孩子們可以將螢幕上的角色視為能夠社交的人物，並會毫不猶豫地以社交方式與它們互動。. 2.. 身體發展. 19.

(32) （1）運動技能 Feifei Liu (2018) 的研究報告提到，設計師應該考慮到兒童使用設備時的運動技能(Motor Skill)，並依此設定互動時的手勢與範圍，運動技能大致能分成以下三大類：粗大動作技能(gross motor skills)：是指涉及大型肌肉群(例如手臂或腿部肌肉. 群) 的運動能力。原地跳、往前跳一步、大幅度的跳遠都屬於運動技能的範圍。精細動作技能(fine motor skills)：腕部和手指中小肌肉的精確運動的能力。用. 拇指、手指抓住物品皆屬於精細的運動技能。運動調節(motor coordination)：綜合運動技能和精細運動技能，協調身體的. 不同部位完成特定任務的能力。以上的發展會影響兒童與設備互動的能力，根據 Feifei Liu (2018) 的研究，5 歲以下的兒童運動技能有限，在觸控螢幕上只能進行非常簡單的互動；隨著運動技能不斷發展，6 到 8 歲的孩子能夠在筆記型電腦上進行簡單的動作，例如單擊滑鼠或簡易地操作鍵盤；從 9 歲左右開始可以執行更複雜的操作，11 歲時兒童的操作範圍幾乎與成人無異。. 表 2 各階段兒童適用之設備與手勢歲數. 3-5 歲. 項目. 首選設備. l. 觸控螢幕. 6-8 歲. 9 至 12 歲. l. 觸控螢幕. l. 觸控螢幕. l. 筆記型電腦(觸. l. 筆記型電腦(觸控板、. 控板) 該年齡區間. l. 點擊. l. 滑鼠點擊. 學會的手勢. l. 滑動. l. 触控板點擊. l. 拖移. l. 使用鍵盤(簡易操作). 資料來源：整理自 Feifei Liu, 2018. 20. 滑鼠可同時使用) l. 滑鼠、触控板的拖移和滾動. l. 同時使用鍵盤和滑鼠進行較複雜的操作.

(33) 9 歲以下的孩童適合滑動、點擊和拖移這些觸控手勢，因為這牽涉到手臂和手的粗大動作技能，粗大動作技能在幼兒時期要比精細動作技能發展得更好，所以這些手勢對他們來說是最簡單的；在為孩童設計界面時需要仔細考慮目標年齡段、運動技能、設備偏好。超出兒童運動技能的界面會令他們產生挫敗感，甚至使他們對設備失去信心。兒童因精細動作技能發展不完全使他們較難精準的點擊小按鈕或是控制較為精細的項目，設計尺寸大的按鈕能夠彌補他們有限的精細動作技能(Chiasson and Gutwin，2005) 。. 3.. 社會與情緒發展. （1）使用動機與參與度許多為孩童開發的產品目的是在教導或練習特定的技巧，但兒童使用產品的目標通常是教育、社交或娛樂，因此產品使用的過程中需要持續兒童的興趣和專注力，才能達到產品的目的。 Super, Westrom and Klawe (1996) 發現吸引孩子的一種方法是設置娛樂用的點擊按鈕，孩子們會花許多時間點擊這類娛樂用按鈕，藉由點擊來得到動畫或音效反饋。第二種方法是設置動畫角色，Lester, Barlow , Converse, Stone, Kahler and Bhogal (1997) 發現只需放一個動畫角色，孩子們的使用經驗就會大大加分，當角色對事件作出解釋或建議還能幫助兒童學習，使兒童更頻繁地使用產品，但不宜干擾目前進行的任務。在 Hswen, Y., Murti, V., Vormawor, A. A., Bhattacharjee R. and Naslund J. A. (2013) 的研究指出，受歡迎的兒童 App 具有以下三種元素：(1) 虛擬角色(2) 遊戲(3) 社交功能。第三個方式是使用外在酬賞(Extrinsic Reward)，在兒童的世界中，常用的外在酬賞有計分系統、獎勵制度，Pausch, Vogtle and Conway(1992) 設計了一款遊戲，起初該遊戲並未顯示使用者遊戲中所獲得的分數，在此情況下兒童們在遊戲中的表現持平，但後來遊戲新增了顯示分數的系統，兒童在此情況下變得更加專注於遊戲。（2）社交. 21.

(34) 社交活動是兒童生活中十分重要的一部分，以前的孩子只能跟周圍的小孩一塊玩耍，現在的他們可以輕鬆地與世界各地的人互動、玩樂、分享、探索和體驗新想法，另外，線上社交的方式使那些較為害羞、無法透過傳統社交模式互動的孩童勇於跨出互動的第一步 (Druin and Inkpen, 2001)。只要產品能夠遵循社交慣例並符合兒童期待，他們就會喜歡與產品進行社交互動 ( Luckin, Connolly, Plowman and Airey, 2003)。. 4.. 重點整理本研究將上述提及適合兒童的設計元素及注意事項彙整於下表：. 表 3 適用於兒童的互動設計原則整理項目. 建議方式. 需求. 娛樂、教育. 設計主旨. 維持興趣和專注力. 年齡區間. 3-5. 備註. 6-8 9-12 圖形介面圖形隱喻(來自日常生活). 隱喻內容要與現實生活有同樣表現. 設計. 視覺化介面. 文字要少或幾乎沒有. 按鈕尺寸大. 兒童的手指較難精確瞄準小按鈕. 視覺或音效. 對兒童而言比文字更具價值. 文字量少、方便記憶. 必須考量狹窄年齡區隔的字彙量. 傳達訊息. 引導. 直觀初期提供引導與提示，隨著要求兒童自行思考並預測使用時程提示逐漸消失. 反饋. 須立即看到執行動作的結果. 不斷地反饋對成年人來說可能很煩人，但兒童會期望這樣做. 虛擬角色. 能使兒童更頻繁地使用產品. 22.

(35) 受歡迎元. 角色對事件作出解釋或建議能幫助. 素. 兒童學習兒童容易將角色當做能夠社交與互動的對象娛樂用按鈕. 孩子們會花許多時間點擊來得到動畫或音效反饋. 計分系統、獎勵制度. 兒童會變得更加專注於遊戲. 社交功能. 兒童生活中十分重要的一部分. 遊戲功能. 兒童使用產品的目的之一是娛樂，遊戲能滿足娛樂的需求. 觸控手勢. 點擊. 對身體尚在成長的兒童來說使用較. 滑動. 輕鬆. 拖移設備. 觸控螢幕. 各年齡層都適合. 資料來源：本研究整理. 本節彙整介面設計的基本原則與組成元素，並且將兒童喜愛的介面設計元素彙整成一個表格，本創作研究將使用該表格剖析 2018 年 9 月 1 日到 2019 年 8 月 31 日台灣受歡迎的兒童學習型 App，以此分析台灣兒童的使用者偏好，並透過分析後的結果設計《未來兒童》學習型 App 介面。. 23.

(36) 24.

(37) 第三章個案分析與專家訪談此階段分兩部分進行研究分析：一「個案分析法」、二「深度訪談法」。. （一）個案分析法本創作研究預計採集目前市場上最受歡迎的學習型 App 作為個案分析研究對象，經由案例探討介面設計之基本要素，歸納受市場喜愛的學習型 App 走向與趨勢。本研究欲統計台灣 2018/09/01~2019/08/31 手機兩大作業系統 Android 和 iOS 的兒童教育類別每日排名做個案分析，兩大統計類別分別是 Android 的家庭—教育類別、iOS 的 Kids 類別(需與 Education 類別重疊) ，預計統整兩大作業系統的免費、付費 App 各前五名，共計 20 名。由於 Android 和 iOS 並未提供過去每日排名，因此本研究向應用數據提供商 Sensor Tower4購買一整年度每日榜單後進行歸納並設定規則，統計出年度排名。. 圖 3 Sensor Tower 每日排行榜頁面資料來源：https://sensortower.com/?locale=zh-CN. 排名規則如下：每日第一名可得到 10 分，名次越後面可得分數遞減(第二名 9 分、第三名 8 分…到第 10 名 1 分) ，將當年度獲得的分數加總，分數越高名次排越 4. Sensor Tower，行動數據供應商，主要販售 App 相關的數據，如：每日排行、下載量、評價、走勢. 等。. 25.

(38) 前面(例如：某 App 9/1 排名第一名獲得 10 分，9/2 排名第二名獲得 9 分⋯⋯把某 App 當年度得到的分數全部加總 10+9+.....，跟其他 App 加總後的成績比對，得到的分數在所有 App 裡第二高，因此排行第二名) 。. 圖 4 App 每日排行分數列表資料來源：本研究整理. 圖 5 App 每日排行分數統計資料來源：本研究整理. 26.

(39) 1.. 篩選案例之基本資料經過上述分類與排名規則計算，在 2018/09/01~2019/08/31 為止進入 Android 每. 日榜單前十名免費排名的 App (不重複) 總共 56 名，付費共計 293 名；iOS 每日榜單前十名免費排名的 App (不重複) App 總共 243 名，付費共計 425 名，取出上述項目各排名積分最多的前五名，結果如下：表 4 台灣地區 2018/09/01~2019/08/31 市場排名前五 App 基本資料表 Android 系統編號. 1. App icon. 編. 名稱. 號. Kahoot!. 1. 免. Stellarium 天文. - 宇宙：太陽. 習英文、韓. 2. 文、日文、法. 費. 系模擬，太空探索和航. 付. 文或更多語種. 天器 3D 模型. 費. Star Walk 2 天文指南和. 多鄰國 3. 名稱. Solar Walk 2. LingoDeer: 學 2. App icon. 天空圖: 隨時. (Duolingo) | 免費學習英語年. 3. 隨地觀看星星，星座，. 齡. 行星和衛星. 4. ㄅㄆㄇ注音學. 4. 習卡. 27. 恐龍學習卡 PRO.