摘要
本文探討 Dongengin Cerita Untuk Anak 的成功案例，揭示如何透過多元文化和創新技術吸引孩子們的注意力。 歸納要點:
- 多元文化故事書應用趨勢,Dongengin Cerita Untuk Anak 透過印尼文化故事滿足孩子的學習與娛樂需求。
- 創新的插畫策略根據不同裝置調整,提升視覺效果並增強沉浸感,使孩子更投入於故事中。
- 利用 React Native 跨平台開發,搭配數據分析工具優化使用者體驗,持續改進內容與互動設計。
由於市場上缺乏高品質設計和內容的兒童印尼故事書應用程式，這使得家長和孩子們難以接觸到優質的本地童話。我們的主要目標是建立一款專為兒童設計的印尼故事書應用程式，提供高品質內容、當地語言以及道德訊息，以便孩子們能夠學習。我們進行了一次小型競爭者分析，以幫助我們確定應該在應用中增加哪些功能。考慮到印尼故事書應用程式數量有限，我們還添加了來自其他地區的故事書應用程式。
我們在研究許多文章後,彙整重點如下
網路文章觀點與我們總結
- 本文提供React Native在iOS和Android開發的範例效果對比,讓讀者體驗更真實。
- 全文包含實例原始程式碼,方便讀者自行操作練習。
- 詳盡介紹React Native框架,包括基礎知識、環境搭建、調試及開發基礎等內容。
- 涵蓋常用組件和API,以及組件封裝、網絡通信和混合開發等進階主題。
- 書籍附帶DVD,從概念入門到技術應用皆有範例練習。
- 針對前端與動態技術的課程設計,幫助學員快速掌握跨平台App開發。
隨著科技進步，跨平台應用開發變得越來越普及。本文《React Native全攻略》不僅深入淺出地介紹了相關知識，更提供了豐富的實作範例，讓即使是新手也能輕鬆上手。透過詳細的解說與練習，每位讀者都能感受到創建移動應用的樂趣與成就感。不論你是想提升技能還是尋求新的挑戰，都能從中獲益良多！
觀點延伸比較:| 特性 | React Native | Flutter | Xamarin | Cordova | Ionic |
|---|---|---|---|---|---|
| 開發語言 | JavaScript, TypeScript | Dart | .NET (C#) | HTML, CSS, JavaScript | HTML, CSS, JavaScript |
| 平台支持 | iOS、Android、Web | iOS、Android、Web、桌面應用程式 | iOS、Android、Windows Phone | iOS、Android、Web | iOS、Android |
| 性能表現 | 接近原生性能,較好的UI流暢度 | 優異的渲染性能,動畫表現佳 | 良好,但在大型應用中可能影響效能 | 較低,因為基於WebView | 較低,因為基於WebView |
| 社群支持與資源豐富度 | 擁有龐大社群與套件庫 | 快速成長的社群,有許多插件可用 | 穩定但相對小型社群 | 持久且廣泛使用,但更新速度慢 | 活躍的社群及大量教程 |
打造多元文化、互動式故事書應用程式：滿足孩童學習與娛樂需求
根據我們早期的想法和競爭對手分析的結果，我們為故事書應用程式開發了幾個構思，包括：高品質插圖以及多樣化的插圖風格。我們的插畫家在為每個故事創造獨特風格方面扮演了關鍵角色，旨在為年輕讀者帶來生動而多樣化的體驗。這也有助於展示我們工作室在創作高品質插圖方面的能力。如果專案繼續進行，我們希望邀請外部插畫家與我們合作。
英文及民族語言選項。這是我們希望強調的一個重要特色。我們並未找到支援民族語言的印尼故事書應用程式，因此我們希望提供當地翻譯，使孩子們能夠學習自己的民族語言。
具有教育意義的道德故事。我們不僅希望年輕讀者了解當地故事，更希望他們能從每個故事中汲取教訓。
互動功能。運動和動畫對吸引孩子閱讀故事至關重要。在繼續設計應用程式之前，我們首先建立了使用者流程，以便更好地掌握應用程式理想的運作流。
考慮到文化多樣性，我們不僅提供印尼語和各種民族語言選項，還可以進一步整合華人、印度裔、阿拉伯裔等不同文化背景的童話故事，使孩子接觸更多元化的敘事內容。同時，針對不同年齡層次的兒童，可以設計相應互動模式與內容，例如幼兒可參與簡單互動遊戲，而較大的孩子則可以接受更複雜的閱讀理解測驗，以提升學習效果。
未來，若能將AR／VR技術融入此應用程式，可讓故事更加生動有趣。例如，孩子可以透過AR／VR技術看到場景中的情節發展，甚至與角色互動。利用AI技術分析兒童閱讀習慣和理解能力，也可提供個性化學習建議及推薦適合他們興趣和水平的內容。
理想的流程通常需要花費大量時間來建立，但對我們來說，快速測試應用程式是很重要的。因此，我們建立了最低可行產品（Minimum Viable Product， MVP）流程，其中包含我們認為足以進行測試的基本功能。
在我們開始創作吉祥物之前，我們收集了一些關鍵詞，以幫助我們為故事書應用程式和吉祥物想出標題。
我們內部討論了幾個命名提案，最終決定將這款故事書應用程式命名為「Dongengin Cerita Untuk Anak」（英文翻譯為「Dongengin Story for Children」），其主要吉祥物是一隻名叫 Owo 的貓和一隻名叫 Owi 的貓頭鷹。Owi 是我們的主要吉祥物，是一隻聰明的貓頭鷹。在進行高階探索之前，我們先製作了 Owi 的低保真草圖。雖然我們使用 Owi 作為品牌吉祥物，但 Owo 將用於應用程式內部的插圖。
我們對 Owi 作為吉祥物進行了高保真度的探索，以確定哪些顏色和形狀最適合這個吉祥物。
以上是選定的吉祥物，將作為 Android 和 iOS 故事書應用程式的圖示。我們建立了一個低保真（lo－fi）使用者介面設計，適用於智慧型手機和平板電腦。以下我們探索了幾個低保真使用者介面設計的範例：
經過幾次迭代，我們選定了將在高保真設計中使用的最終低保真版本。
我們終於建立了能夠代表我們最低可行產品（MVP）概念的使用者介面設計。
我們的文案撰寫者協助我們將故事調整為適合我們應用程式的格式。有幾個關鍵詞能幫助我們撰寫這些故事：
寫作過程始於閱讀選定的故事，然後將其分成場景／頁面的格式，以便插畫家能夠輕鬆創作插圖。
為不同裝置尺寸選擇插畫策略
在處理各種裝置時，我們考慮了兩個方面：為每個裝置尺寸建立不同的插畫;或者建立一個插畫來適應所有裝置。這兩種選擇各自面臨著不同的挑戰：選擇第一種方案意味著插畫師需要承擔更多工作量，因為他們必須為每個裝置建立和調整多個插畫。對於同一場景，插畫師需要針對每種裝置尺寸和方向製作不同的變體。至少，他們需要建立約三幅插畫：小型、中型和大型（平板）。而如果採用第二種方案，則可能會出現某些裝置無法顯示完整插畫的情況，使用者將看不到一些部分。基於提高效率的考量，我們選擇了第二種方案。為了使這一選項有效執行，我們必須確保主要場景能夠在大多數型別的裝置上顯示。因此，制定指導方針將是非常有幫助的。採用單一插畫不僅可以減少工作負擔，還能適應當前響應式設計的最新趨勢，使得內容在不同螢幕上保持一致性與可讀性。
以下是指南插圖使用的範例。無論是何種裝置和方向，無論是智慧型手機或平板電腦，中間區域或安全區域始終而周圍區域則作為圖形支援。裝置越大，插圖的美觀程度也會越高。
這是故事書封面的指導方針。目前只有一種尺寸，系統將自動調整封面以適應平板或手機。
透過插畫風格展現印尼文化故事
我們創作了不同語調和風格的插畫，以下三個故事（Roro Jonggrang、Danau Toba 和 Malin Kundang）是其範例。在角色和場景設計上，有幾個主要因素影響著我們的創作：參考資料：我們的插畫師會先進行 moodboard 建立，收集一般插畫風格的參考資料，例如角色形狀、藝術風格等。
文化背景：印尼擁有眾多不同的文化。因此，在每個故事中，我們都會進行背景調查，以便深入了解故事所蘊含的文化背景。這些文化參考將直接影響每個故事的呈現方式。
在分析這些插畫時，我們可以探討如何將不同藝術風格與傳統故事元素結合。例如，Roro Jonggrang 的插畫可能採用傳統爪哇風格，而 Danau Toba 的插畫則可能借鑒巴塔克人的圖騰風格。同時，這些作品也能展現出豐富的文化細節，如服裝、建築及飾品等;例如，在 Roro Jonggrang 故事中，可以呈現爪哇傳統服飾及佛教寺廟，而在 Danau Toba 中則可見巴塔克人的房屋及獨特紋身。
不同風格的插畫如何表達故事氛圍也十分重要。例如，Roro Jonggrang 的插畫或許使用較為陰暗的色調來強調悲劇性，而 Danau Toba 則可能透過明亮色彩來展現神話般的情境。這樣一來，每幅插畫不僅是視覺上的享受，更能有效地呼應故事敘事，使觀者感受到更深層次的情感與意義。
React Native：跨平台開發的利器，打造高效行動應用
我們使用 React Native 因為它能夠實現跨平台開發。這意味著我們可以用同一套程式碼基礎來開發 Android 和 iOS 的應用程式，從而降低開發時間和精力。我們選擇 React Native 的幾個考量點包括：跨平台開發
React Native 使我們能夠同時為 Android 和 iOS 開發應用程式，因此我們可以建立一款在兩者上均可執行的移動應用。
即時熱過載
它使得我們能夠立即看到開發過程中的變更結果，而不必手動重新整理應用程式。
快速開發
使用 React Native 將會更加迅速與高效，因為它充分利用了 React 的概念。可重用的元件及有組織的程式碼結構大大促進了開發過程。
在開發這款應用時，我們的開發團隊需要準備以下幾個步驟：
環境準備
開發者透過安裝必要的伺服器、套件管理器、整合開發環境（IDE）以及專案來準備環境。
程式碼編寫與測試
我們根據專案需求編寫程式碼，並進行測試以確保程式碼按預期執行，並檢查是否存在需要修復的錯誤。
構建應用
在測試階段之後，我們的開發人員將程式碼構建成可在智慧手機和平板電腦上使用或測試的應用。我們團隊會檢查該應用，以確定是否仍然存在需修正的錯誤。
以下是我們的開發團隊完成該應用後所取得的最終成果。內部包含首頁、故事頁面以及道德資訊頁面。
我們的動態設計師建立了這個動畫，以進一步提升兒童的閱讀體驗。我們在首頁的標頭和載入畫面中製作了動畫效果。
我們還為每個故事製作了動畫。在撰寫這段文字的同時，這項功能仍在測試階段。
我們目前的版本在兩個平台上都獲得了正面的評價。我們希望能推出更好的應用程式，以下是未來幾個月內將推出的功能：更多地方語言支援、音效和背景音樂、語音旁白、定價計劃。如果您有興趣下載 Dongeng by Paperpillar 應用程式，現在已經可以在 App Store（iOS）和 Google Play（Android）上獲取。
參考來源
React Native：頂尖跨平台行動裝置應用開發框架
．本書特別對React Native在開發iOS和Android跨平台應用時，提供範例效果對比，臨場感十足。 ．為方便讀者實際操作練習，本書提供了全書實例原始程式碼，讀者可在本公司 ...
來源： 金石堂React Native 移動開發實戰
本書全面詳盡地介紹了React Native框架的方方面面，內容涵蓋React Native基礎知識、環境搭建與調試、開發基礎、常用組件、常用API、組件封裝、網絡與通信、混合開發、 ...
來源： 天瓏網路書店
原來跨平台開發可以這麼簡單 React Native全攻略 ...
原來跨平台開發可以這麼簡單─ React Native全攻略書局賣$193, 現售$177~ · HK$177 · 交易方式 · 睇下賣家 · 類似嘅產品. 來源： carousell.com.hkApp Developer ｜React Native - 小耳朵文化傳媒股份有限公司Jobs
媽爹講故事擁有超過100 個原創和改編故事，使用童話、寓言、經典、歷史和科學等元素，啟發孩子探索周遭世界的樂趣。 該品牌已成為台灣最具影響力的育兒故事品牌之一，擁有 ...
來源： cakeresume.com原來跨平台開發可以這麼簡單: React Native全攻略(附DVD)
原來跨平台開發可以這麼簡單: React Native全攻略(附DVD)：本書帶領讀者從了解ReactNative概念、入門到進階技術應用，一路由淺入深學習，並在各章節中都搭配練習範例， ...
來源： 誠品線上小鎮TownTown / 小鎮股份有限公司
... 故事分享、心情交流的平台。 「相 ... React Native、Typescript、React.js、GSAP 等前端與動態技術開發，致力為小鎮提供高水準跨平台APP 技術開發與高沉浸動畫體驗。
來源： 社會創新平台跨平台APP - React Native 快速學習攻略- 線上教學課程
React Native 入門實作課程，從零開始帶你快速上手React Native 程式語言。課程將使用Expo CLI 的方式教你建立專案，手把手搭配實作專案，讓你上完課擁有跨平台開發App ...
來源： Hahow 好學校谈谈React Native · 唐巧的博客
而由于跨平台的框架（例如PhoneGap，RubyMotion）都还是不太靠谱 ... 相信React Native 会推动MVVM 应用在移动端的开发。 动态更新. 终于说到最 ...
來源： 唐巧的博客
全部
資訊科技
相關討論