## 研究背景與動機現今數位圖書館與電子書平台的設計，大多以成人角度、文字導向的檢索方式為主。學齡前兒童受限於心智發展程度與識字能力，面對過多的文字描述與多層級的網站分類時，在資訊尋求上產生明顯障礙。本研究以國立公共資訊圖書館建置的「圓夢繪本資料庫」為研究對象。該資料庫自 2011 年上線後，成為國資圖點閱率最高的資料庫，而兒童與親子共讀正是其最主要的使用族群。研究引入**兒童使用者參與設計**（User Participation）的理念，結合資訊視覺化概念，建構數位虛擬空間型態的繪本搜尋介面，以降低兒童的認知門檻。研究目標有二： 1. 針對學齡前兒童繪本提出書籍分類建議 2. 架構適合兒童搜尋的資訊視覺化介面本研究後續整理發表於《公共圖書館研究》第 8 期（2018 年 11 月），共同作者為陳怡君、駱金隆、吳可久、曹筱玥。 --- ## 研究架構與方法研究以 Piaget 認知發展理論中的**前運思期兒童（5～7 歲）**為目標族群，並以雙碼理論（Dual Coding Theory）作為以圖示輔助文字認知的理論基礎。研究分為以下幾個階段： ### 1. 前導研究：兒童資料搜尋行為以紙卡模擬網頁介面圖示，對 35 位國小及幼稚園兒童施測，觀察其資料搜尋行為、圖像辨識能力與使用者需求。 ### 2. 圖示風格測試歸納出寫實、卡通、塗鴉、線條四種圖像風格，以國小一年級學童為對象進行喜好度與辨識度調查（發放 28 份，有效問卷 21 份），問卷採**李克特五點量表**評估，依統計結果決定介面的圖示風格。 ### 3. 兒童參與書籍分類：俗民分類法圓夢繪本資料庫原本採用中文圖書十進位分類法，分類命名較為抽象，不適合學齡前兒童。研究針對資料庫中 346 本繪本，邀請兒童參與書籍分類，以兒童日常生活中的常見語彙作為分類項目，採用**俗民分類法（Folksonomy）**重新編碼，再與兩位資深幼教教師討論修正。結果發現，兒童建構的知識樹與成人的知識架構不同：分類更直覺、易於理解，且多以生活周遭常接觸的人事物作為分類依據。 --- ## 資訊視覺化搜尋模式設計 ### 1. 主題地圖模式以兒童熟悉的生活情境作為分類的空間隱喻，將食物、動物園、交通、太空、學校、家等主題轉化為可平移、縮放的 SVG 情境地圖。兒童透過點選場景中的具體物件進入對應的繪本分類，以「探索」取代「檢索」。

主題地圖模式

### 2. 色塊模式以高彩度色塊搭配放射狀（扇形）的層級結構呈現分類體系，透過色彩作為主要的辨識線索，使識字能力尚在發展的兒童得以依視覺特徵判別主題類別。

色塊模式

### 3. 節點模式以樹狀節點呈現分類間的階層關係，透過節點的逐層展開揭露下一層分類，使整體資訊架構具備一覽性，有助於使用者建立對分類體系的整體認知。

樹狀書籍呈現

選定分類後，系統以繪本封面作為主要的資訊呈現單位，以漂浮式排列展示，使兒童得以依據圖像線索直接進行選書。

漂浮式書籍呈現

--- ## 技術實作 - **前端**：HTML5、CSS3、jQuery - **資料視覺化**：D3.js（v3）＋ SVG，利用 D3 的資料綁定與 transition 動畫，呈現節點展開與書籍浮現的效果 - **主題地圖**：SVG 插畫搭配平移、縮放控制，在地圖上點選物件 - **資料**：各分類的繪本資料整理成 JavaScript 資料檔，由 D3 讀取繪製；另有以 PHP ＋ MySQL 依分類查詢繪本的版本 --- ## 研究結果 ### 1. 兒童使用性測試邀請臺北市福星國小附設幼稚園 14 位大班學童參與正式實驗。每位兒童皆操作三種介面，為避免學習效應影響公平性，**介面操作順序採輪流對換**，並以觀察法與事後訪談補充量化資料。任務分為「僅觀看封面尋書」與「了解故事內容後尋書」兩類，以統計軟體分析按鍵次數、操作時間與任務成功率之平均數與標準差： | 任務 | 指標 | 主題地圖 | 色塊 | 動態節點 | | --- | --- | --- | --- | --- | | 僅觀看封面尋書 | 平均點擊次數 | **3.57** | 4.36 | 4.00 | | | 平均時間（秒） | **78.64** | 125.57 | 102.36 | | | 成功率 | **85.7%** | 64.3% | 78.6% | | 了解故事內容後尋書 | 平均點擊次數 | **3.14** | 4.29 | 3.86 | | | 平均時間（秒） | **58.79** | 106.93 | 78.86 | | | 成功率 | **92.9%** | 64.3% | 85.7% | N = 14。兒童在**主題地圖介面**的點擊次數最少、花費時間最短、成功率最高；色塊介面則因字體較小、缺少注音輔助，花費時間最長。三種介面在兒童了解故事內容後，操作時間皆有所下降。 ### 2. 專家問卷邀請國中小圖書館館員及教師進行評估，發放 108 份、回收 97 份，**有效問卷 82 份**。問卷包含基本資料、使用者介面滿意度評量與網站未來性評估三部分，採**李克特五點量表**（1 = 非常不同意，5 = 非常同意），評估面向包括介面直覺性、文字大小適當性、尋書正確性、介面易學習性與造訪意願。 - **97.56%** 的受測者認為以資訊視覺化重新設計數位圖書館，有助於兒童尋書 - **主題地圖介面**：尋書使用性（4.22）與提高造訪率（4.20）皆高於其他兩種介面；介面編排（字體大小）為 3.41，滿意度相對較低 - **色塊介面**：介面易學習性（3.80）較高，適合能以「記憶顏色」快速對應分類的較大學童；介面編排（2.93）偏低，扇形排列也容易造成書名重疊 - **動態節點介面**：介面易學習性 3.99、提高造訪率 3.94；節點開合的單一線性操作簡單，可有效提高點擊意願 - **網站未來性**：設計美感有助增加停留時間（4.24），適合導入國小圖書館使用（4.05） ### 3. 結論 1. **視覺化搜尋模式能降低兒童使用障礙**：學齡前兒童以隨意瀏覽與嘗試錯誤為主要操作方式，簡化網頁階層並採線性化的瀏覽模式，可減少操作錯誤造成的迴圈 2. **主題地圖**：結合兒童生活經驗的「樂園」式主題設計，以圖示的位置遠近、大小與分佈呈現關聯性，兼具直覺性與尋書成效 3. **色塊**：需仰賴記憶或聯想，建議未來改以矩形取代扇形排列，避免書名重疊 4. **動態節點**：節點開合的單一線性方式尋書效率最高，但以文字呈現為主、需要較多識字量，較適合年紀較大且邏輯較清楚的兒童研究最後建議，未來可延伸探討語音導覽等資訊尋求輔助、**3D 視覺化介面與 2D 介面的交叉比較**、行動與穿戴式裝置的介面設計，以及更多元的書籍呈現方式。 > 本研究呈現資訊視覺化與互動設計於兒童數位閱讀情境中的應用潛力。論文中對 3D 視覺化介面的建議，也延續成筆者後續的 3D 與資訊視覺化作品。 --- ## 相關連結 - 🌐 [圓夢繪本視覺化網站（線上 Demo）](https://storage.googleapis.com/aaixd/storybook/index/index.html) - 💻 [GitHub 原始碼](https://github.com/vince115/storybook) - 📄 [碩士論文（臺灣博碩士論文知識加值系統）](https://hdl.handle.net/11296/n695tk) ### 延伸閱讀 - [D3.js Official Documentation](https://d3js.org/) — 資料驅動文件（Data-Driven Documents）框架，支援 SVG、Canvas、動畫過渡與互動綁定。 - [Slim Framework](https://www.slimframework.com/) — PHP 的輕量級 RESTful API 框架。 - [Information Visualization in Education](https://dl.acm.org/doi/10.1145/2858036.2858282) — 關於視覺化學習系統的學術研究。 - [Designing for Children — Nielsen Norman Group](https://www.nngroup.com/articles/childrens-websites-usability-issues/) — 關於兒童使用者體驗（UX for Children）的設計準則。 - [兒童數位圖書館資訊視覺化網站設計─以圓夢繪本館為例](https://www.nlpi.edu.tw/FileDownLoad/LibraryPublication/20181130094130675065860.pdf) — 針對兒童數位圖書館、資訊尋求行為、網站介面資訊視覺化做探討。 > ✍️ 本文為論文研究原型的技術摘要，完整的研究方法與數據請參考論文全文。原始碼是從線上版本還原的，部分頁面（節點模式的獨立頁、色塊模式的主程式）已無法取回。

2025 UI/UX 設計趨勢

Tailwind CSS 夜間模式技巧

2025 UI/UX 設計趨勢

Tailwind CSS 夜間模式技巧