淺談動畫可視化的教學設計應用

摘 要：現今社會，傳統的數據可視化已不能滿足展示的需求。在追求新穎且有美感的數據可視化工具過程中，發現了動畫可視化。它突破了靜態單一地展示特點，有連貫性、易理解，又有新意。在“we feel fine”網站中，動畫可視化的應用相當成功。筆者結合平時工作，探索在教學時使用動畫可視化的方法，以促進學生的理解。然而這種可視化方法也存在不足之處，筆者結合參考國外文獻的心得與自身的探索，總結了幾點動畫可視化應用的注意點。

關鍵詞：數據可視化；“we feel fine”網站；動畫呈現；教學中的設計應用

現今社會，很多場合需要應用到數據可視化，一般人們往往想到的就是傳統的數據表現形式，如表格、餅圖、柱狀圖等。但為了更有效地向觀眾傳達信息，有時需要的絕不是僅僅一張餅圖。其實，數據的表現形式可以是美麗、優雅和描述性的。一個可視效果要想做到真正的“美”，必然不僅僅是作為信息渠道，還必須具備某些新穎性，如同用一種嶄新的視角觀察數據。美麗的可視化可以反映出所描述數據的品質，顯式地揭示源數據中內在與隱式的屬性和關系。

當然一些人也會覺得這樣做反而顯得華而不實。其實不然，通常情況下這些設計并非為了新穎性，而是為了更加有效而設計。因此，我們在追求新穎性的同時也要保證其有效性。

1 現代數據可視化案例——“We Feel Fine”網站

現代數據可視化的方法相較以往是比較有趣的，讓人感覺耳目一新。

剛開始接觸“We Feel Fine”網站，完全被其呈現的外觀效果所吸引。剛點進去，無數五顏六色的隨機運動的小泡泡充斥著整個屏幕。如果懸停鼠標，有類似的情感會聚集在周圍，形成相互關聯的網絡的感覺，同時上面會顯示出從網絡上所摘錄的內容，一個一個看起來就像在情感的海洋中觀賞一條條色彩繽紛的魚，流暢的視覺效果令人驚嘆。

其實，We Feel Fine是一個新近的交互藝術以及挖掘社會性網絡的作品，成立于2005年8月，差不多以每天近2萬條的速度迅速增長。“we feel fine”，就是“我們感覺良好”的意思。大多數人認為網絡空間是理性與冷漠的，但這個網站想證明，網絡生活同樣充滿感情色彩。簡單來說，“we feel fine”的核心是一種數據搜集引擎。它先搜集博客中描述心情的詞句，再把這些數據可視化。這些泡泡不是“魚”，而是代表著人們的各種情感。

網站創辦人之一的約翰森·哈里斯解釋了這種獨特的表述方式。他說，信息通過一個粒子系統表現出來，用一組不同顏色的小泡泡表現一個人的情感，不同的顏色代表不同的情緒。高興用鮮艷的顏色，悲傷則用灰暗的顏色。通過這種特殊的方式，揭秘博客中的情感，將它變得更加“可視化”，并以此來追蹤世界各地人們情感的變化。

We Feel Fine 每隔幾分鐘就從互聯網巨大數量的blog中提取“I feel” 和 “I am feeling”類似的數據和關鍵字，然后組成了一個巨大的數據庫，作者將這些數據進行藝術加工，把數據變成交互的圖形，劃分成了六個樂章，分別是 Madness， Murmurs， Montage， Mobs， Metrics， and Mounds。

最后通過基于動畫的信息可視化呈現，人們可以得出一些特別而又真實的結論。這與近期暢銷書《大數據》中的觀點相似，書中表明分析數據不再糾結于找出數據間的因果關系，而要找出相互影響的關系。分析“We Feel Fine”網站可以得出的結論很有趣，如“倫敦20歲的女性在雨天時的心情特點”，得出的數據就能用在天氣對人類情緒影響的相關研究中。

2教學實踐中的動畫可視化設計

在《圖形圖像處理》課程中，理論與操作部分并存。以知識分類的角度來劃分，可分為陳述性知識、程序性知識、策略性知識[1]。

本文以課程《圖形圖像處理》為例，探索該課程中各類知識的動畫呈現方法。動畫可視化的具體設計：

2.1使用動畫進行可視化呈現時，畫面簡潔，突出重點

該部分屬于第二章版面設計的導入部分，教師展示圖片，讓學生欣賞。筆者沒有使用常用的PPT軟件制作，而是使用flash制作這一交互效果，這樣可以多次點擊交互。但在呈現這些圖片時，筆者使用了兩種方案。一是利用圖片大小一致的規則特點排版，九張小圖上下對齊，效果如圖3將畫面分割。該方案的操作是，點擊右側小圖，左側顯示其大圖。

二是圖片幅數減少為六幅，整個版面顯得清爽大方。當點擊小圖時，屏幕將小圖隱藏，只呈現其對應的大圖，如圖4所示。

根據筆者的課堂觀察，方案一中學生均反映右側小圖看不清且顯得凌亂，當左側發生變化時，常常反不過來。方案二中，學生觀察的主體只有一個，條理清晰。

由此可見，使用動畫進行知識呈現，需要突出某重點時，最好采用點的突出效果或者面的切換效果。

2.2使用動畫呈現前，要理解顏色的含義，學會使用顏色、形狀來表達

這一想法從We Feel Fine網站中得到啟示。一打開網站，可以看到大量的泡泡從屏幕中心噴發而出，無比絢爛，讓人眼前一亮。這里的每個泡泡的顏色對應不同基調的情感?？鞓贩e極的情感是明亮的黃色，悲傷的情感是深藍色，憤怒的情感是鮮艷的紅色，平靜的情感則是淡綠色。其中每個泡泡的大小代表所包含句子的長度，圓形泡泡包含的是句子，矩形的則包含圖片，效果如圖5所示。

筆者截取學生作業的主頁，效果如圖6所示。每種顏色代表一個元素，生活就是由各種元素組成。這樣，才有可能吸引使用者去點擊關鍵詞。

3 動畫可視化教學應用的初步探究

筆者認為，成功的有美感的數據可視化應用，并且這三個應用都有一個共同點——互動。尤其是“we feel fine”網站，成功地應用了動畫可視化技術。在可視化中，動畫能夠顯示中間的步驟和轉換過程，也能顯示數據是如何隨著時間的變化而收集起來的，這可能有助于學生深入理解某個觀點背后的邏輯。但是筆者在使用時也注意到一些問題。

3.1動畫應用的弊端

動畫技術的應用不是在任何場合都成功的，如果應用不恰當，反而會成為觀眾理解的負擔。曾經看到一個關于利用PPT展示數據的視頻，演講者為了使效果炫目，就將一些數據在屏幕上漫無目的地亂飛，在觀眾看來就是沒有意義的橫掃、展開、旋轉、縮放，而真正想表達的東西卻沒有人注意到。因此，在應用動畫技術展現數據時，要確保其有效性。而筆者通過參考一些國外學者的應用心得及自己的親身體驗，得出了一些動畫可視化的應用注意點。

3.2.動畫可視化應用時的注意點

（1）動畫顯示效果不要有大量的變化

到幀與幀之間的變化，當變化少量時，可以很容易理解發生了什么變化，也容易記??；而有大量變化時，往往就理解不過來，追蹤不了那么多信息。

（2）要沿著坐標運動

（3）要注意兼容性

（4）要確保有意義的運動

（5）要注意色彩的應用

4 結語

筆者通過在《圖形圖像處理》課程中的實踐，初步探索了數據可視化方法中的一類——動畫可視化。雖然看似動畫可視化比一般的靜態可視化外觀上新穎，吸引人注意力，但往往效率上沒有靜態的展示法（如柱狀圖、餅圖等）高。只要在動畫應用上多注意些原則，確保每一幀都有效，即使動畫有些復雜，也能達到其既新穎又高效率的目的。

參考文獻：

[1]Julie Steele&Noah lliinsky ，《數據可視化之美》，2011.6.

[2]“we feel fine“網站.

[3] 王云.信息技術課程中動畫呈現的設計研究——基于案例設計的實踐分析[D].江蘇：揚州大學，2012（4）.