HW3_01

[設計理念]

將原本三張長條圖整合為一個畫面，統一使用 X 軸代表數量單位，Y 軸排列各報社，並根據數量降冪排序，突顯中時電子報的領先優勢。透過降冪排列的方式，避免視覺疲勞，用戶可直觀掌握各報社在指標上的差異，同時清晰強調中時電子報的突出表現。

提供按鈕切換功能，用戶可自由切換「總頁面瀏覽量」、「每人平均閱讀時間」和「每位訪客平均瀏覽頁數」，即時更新圖表數據，提升數據探索體驗。設計注重按鈕的操作直覺性，按下後數據即時更新，減少用戶等待時間；按鈕文字清晰標註指標名稱，避免混淆並增強可用性。

以鮮明的紅色 (#B71C1C) 突出中時電子報，其他報社以柔和色調呈現，減少分散注意力，提升視覺焦點。色彩選擇採用高對比的配色方案，紅色不僅增強辨識度，還與柔和色調形成和諧的設計語言，讓視覺層次更為明確。

[視覺化應用技巧]

概要優先，縮放與過濾，細節按需顯示（Overview first, zoom and filter, details on demand）圖表提供全面概覽，讓用戶先掌握數據全貌，並能進一步通過互動按鈕篩選特定數據，對某報社深入探索細節。

即時互動性（Responsiveness is Required）互動按鈕設計確保用戶在切換指標時即時更新圖表，提供流暢的使用體驗，響應速度控制在 1 秒內，符合視覺設計的響應性要求。

功能優先，形式次之（Function First, Form Next）以功能為核心進行設計，確保數據易於閱讀和比較；形式上的美觀處理在此基礎上進一步優化。

[設計理念]

此設計將原本三張長條圖整合於單一畫面，使用 X 軸代表每人平均花在某報社的閱讀時間（以分鐘為單位），Y 軸則呈現每人平均閱讀的頁數。圓圈的大小進一步展現了各報社的總觀看頁數，並透過右下角的虛線比例尺標示不同數量大小，讓數據對比更為直觀。

設計中引入了不同顏色的互動式按鈕，讓用戶能自由篩選並顯示特定媒體的數據，輕鬆比較不同報社間的指標差異。此外，顏色的區分也使得報社的識別性更高，數據屬性一目了然。

滑鼠懸停互動則進一步提供了細部數據的展示功能，當用戶將鼠標移至某個圓圈時，會即時顯示該媒體的詳細數據資訊，減輕記憶負擔，同時提升了數據的易讀性與解讀效率。

[視覺化應用技巧]

概要優先，縮放與過濾，細節按需顯示（Overview first, zoom and filter, details on demand）依據 Shneiderman 的設計箴言，此設計提供整體概覽（以 X 軸、Y 軸與氣泡大小呈現各指標），用戶可透過懸停滑鼠顯示氣泡的詳細數據，滿足細節按需需求，提升數據解讀的效率。

外部認知優於記憶負擔（External cognition vs. Internal memory）使用不同顏色區分媒體報社，並提供互動式按鈕篩選功能，用戶可以快速比較不同報社間的數據，而無需依賴記憶。這符合眼睛勝於記憶（Eyes Beat Memory）原則。

即時互動性（Responsiveness is Required）按鈕篩選功能和滑鼠懸停的即時回饋設計，遵循 Nielsen 的回應時間標準（0.1 秒視覺處理，1 秒即時反應），有效提升用戶體驗。

功能優先，形式次之（Function First, Form Next）此圖表專注於功能性，提供簡單明確的指標比較工具，同時透過顏色與互動設計增加可視化吸引力，而非僅以形式取勝。

© Interactive Circle Chart

[設計理念]

將原本分散於三張長條圖的數據整合到一個畫面，透過互動式按鈕切換功能，讓用戶在單一界面內快速切換「總頁面瀏覽量」、「每人平均閱讀時間」和「每位訪客平均瀏覽頁數」。此設計減少頻繁切換圖表的麻煩，提升操作效率。按鈕以清晰標籤呈現選項，點擊後即時切換內容，確保視覺效果流暢，讓用戶更快速比較不同指標的變化。

以圓圈大小表現數值差異，大數據以較大圓圈呈現，小數據則用較小圓圈，直觀顯示高低差異，幫助快速辨識趨勢。加入懸停互動功能，用戶將鼠標移至圓圈時，會彈出詳細數據如具體值或百分比，提升對細節的解讀效率，且不干擾整體視覺設計。

以不同顏色區分各報社數據，配合柔和的漸變增強辨識度和美感。同時加入微幅動態效果，例如數據切換時圓圈或長條圖的輕微移動，增添活潑性與動態感，讓數據變化更生動自然，提升用戶體驗的流暢度與參與感。

[視覺化應用技巧]

眼睛勝於記憶（Eyes Beat Memory）將三張長條圖整合到一個視圖中，並利用平面位置與按鈕切換功能，避免用戶必須在多個圖表間切換記憶數據，提升比較效率。

概要優先，縮放與過濾，細節按需顯示（Overview first, zoom and filter, details on demand）閱聽人可以先獲得每個指標的概況，然後在互動操作中獲得進一步的細節數據，例如鼠標懸停時顯示的具體值。這降低了認知負荷，讓用戶能逐步探索數據。

即時互動性（Responsiveness is Required）鼠標懸停時立即顯示具體的數據反饋，以及按鈕切換即時更新圖表內容，都符合互動性設計的最佳實踐，確保閱聽人操作時獲得快速的回應和視覺變化。

功能優先，形式次之（Function First, Form Next）整體設計以數據傳遞為核心，按鈕切換和顏色區分首先體現功能性，隨後使用簡潔的視覺元素（如平面設計和微動畫）增強美感。這樣的設計使數據表達更易於理解，同時提升了用戶體驗。

國貿碩二 | 112351037 | 鄭緒紳

國貿碩二 | 112351051 | 楊建隆

國貿碩二 | 11235108 | 連姵涵