第10 章 -可視化中的交互-SDU

1、山東大學計算機科學與技術學院 & 軟件學院 蔣志方目錄一般交互系統(tǒng)可視化交互的主要類型/分類典型交互范式概覽+細節(jié)焦點+上下文對偶界面動畫過渡可視化技術和方法的用戶評估一般人機交互系統(tǒng)一般人機交互系統(tǒng)Command-line interfaceWIMPPen UIMulti-touch interactionGesture interactionWearable computingTangible user interface60年代的交互Sketchpad Ivan Sutherland 1963Direct-touchMulti-touchMulti-touchMicrosoft

2、KinectKinect GameLeap MotionGoogle Glass其它交互工具MYO 腕帶Oculus Rift 頭戴式虛擬現實設備G-Speak手套可視化交互類型可視化交互類型表示與交互信息可視化的兩個主要成分表征交互表示(representation)是用戶的關注對象交互(interaction)提供用戶可操作的手段交互的類型Dix and Ellis (AVI 1998) 提出高亮和焦點搜索更多信息- drill down和超鏈接概況與上下文，縮放與魚眼同一個表示，不同參數選擇鏈接不同的表示/征：提供時間上的過渡（如淡入淡出）交互類型Daniel Keim (TVCG 20

3、02) 投影/映射過濾縮放失真變形Brushing & linking最新的分類(user intent)選擇(Select): mark something as interesting探索(Explore): show me something else再布局(Reconfigure): show me a different arrangement視覺編碼(Encode): show me a different representation抽象化/具體化(Abstract/Elaborate): show me more or less detail 過濾(Filter): s

4、how me something conditionally鏈接(Connect): show me related itemsYi J S, ah Kang Y, Stasko J T, et al. Toward a deeper understanding of the role of interaction in information visualization. TVCG 2007.1. 選擇標記感興趣的區(qū)域或特征追蹤這些區(qū)域或特征的變化實例： 在谷歌地圖中添加地標并且快速返回在TableLens聚焦功能方法一：信息提示懸停鼠標光標顯示項目的詳情Word tree方法二：鼠標選擇單

5、擊選擇一個項目，并顯示數據點的屬性選擇時的視覺混亂(visual clutter)解決辦法：放大標簽選擇的挑戰(zhàn)與目標如何可視化標簽？當很多實體存在時，逐一做標記很困難歸結為字符串在有限空間排列的問題理想中的標簽可解讀具有指引性：明確地指向它的標簽對象互相不遮擋對所有對象給出標簽是理想狀況，但并不總是可行的偏心標簽(Excentric Labeling) 偏心標簽要素在用戶鼠標接觸到數據點之前不可見采用名稱描述每個數據點可視地連接數據點和標簽為標簽排序，以顯示數據點的布局Demo: /hcil/excentric/dist/bin/test7.html2.

6、 探索顯示不同的數據部分或屬性允許用戶檢查不同的數據子集克服顯示尺寸的限制實例在數字醫(yī)療系統(tǒng)中改變視點詞典的互相鏈接直接跳轉憑借兩個對象之間的聯系從一個跳轉到另外一個跳轉方式：網頁上的超鏈接http:/ navigation3. 再布局顯示一個不同的排列通過改變空間排列提供不同的角度實例在TableLens中排序和重組更改在散點圖的屬性方法一：重組視圖保持基本表述和數據顯示不變，重組元素的位置順序TableLens中，可以左右移動表示屬性的列方法二：重新排序TableLens中可以選擇某種屬性進行排序TableLensDust&Magnet4. 視覺編碼顯示一個不同的表示方式（visu

7、al representation）是可視化的核心要素改變視覺外觀實例改變顏色編碼更改大小改變方向更改字體改變形狀Many eyes舉例在軟件底部選擇不同的顯示模式NodeTrix5. 抽象化/具體化顯示更多或更少的數據細節(jié)調整抽象級別（概觀和細節(jié)）實例展開子類別，提供互動的可視化方法展開TreeMapSunburst中的Details-on-demand縮放（縮放幾何）Details-on-Demand可視化術語，指提供給觀察者關于某些數據的更多信息或細節(jié)可能是關于一個事件的更多信息可能從一個聚類視圖轉到單獨的視圖應用場合由于尺寸問題而不能顯示整個數據顯示一組對象的抽象表達展開數據組以顯示更

8、多細節(jié)，或顯示單個數據6. 過濾顯示符合條件的某些數據子集基于某些特定的條件改變顯示的數據集實例動態(tài)查詢屬性瀏覽器NameVoyager中的按鍵過濾QuerySketch方法一：過濾/限制改變數據集的顯示方式聚焦縮小/擴大Baby name方法二：動態(tài)查詢(dynamic query)可視化中最有用、最有名的技術DB查詢通常得到的結果FilmFinder Music Filtering動態(tài)查詢優(yōu)勢 加快工作效率 促進反向、撤銷、探索 非常自然的交互方式 顯示數據動態(tài)查詢劣勢操作過于耦合難以制定任意的布爾表達式嗎？!(A1 V A2) A3 V (A4 V A5 A6) V 設置會產生全局影響設

9、置條件必須提前確定當數據尺寸變大時，動態(tài)查詢無法達到實時存儲問題線性數組均勻網格Kd-樹向量量化直方圖刷?。˙rushing Histogram）Brushing技術在直方圖上的特殊情況在直方圖中表示的數據值可以點擊并選擇（控制對應的數據區(qū)域）當選擇某個柱塊（bin），其對應的數據在主視圖窗口中被高亮顯示應用三維體數據場的傳輸函數設計BH舉例7. 鏈接顯示相關的項目高亮（highlight）關聯和關系顯示與特定數據項目有關的被隱藏的項目實例Vizster，直接高亮連接的節(jié)點InfoScope，brushing高亮連接性觀察者可以同時觀察數據的不同屬性相反地，觀察者也可以在不同的角度和不同的顯示

10、方式下觀察數據必須清楚數據的位置Brushing（刷?。┛梢暬Ｓ眉夹g在一個視圖選擇數據，另一個視圖高亮適用范圍：同一個數據的多個視圖集合各類技術的系統(tǒng)典型交互范式典型交互范式概覽+細節(jié)焦點+上下文對偶界面動畫過渡概覽概覽+ +細節(jié)細節(jié)概覽+細節(jié)(overview+details)尺度問題數據太大，不能在屏幕上顯示可能包含太多的事例可能包含太多的變量屏幕上只能顯示部分數據，但觀者焦點隨時而變潛在的解決方案數據的表達用戶交互兩者兼用通常的解決方案滾動提供一個大的虛擬屏幕，允許用戶在不同的區(qū)域移動比較笨拙只能看到一片區(qū)域放大和縮小DOT上下文 + 焦點為什么成為魚眼？魚眼相機鏡頭Fisheye V

11、iew, 1992 Fisheye View, 1992 GraphLensThe magic volume lens多焦點顯示 透視墻計算機實現的3D雙焦點顯示將表映射到圖上x軸表示時間y軸表示數據項DataLens, 2003 Focus & Context Screen Focus+Context ScreenMaps“Overview first, zoom and filter, and details on demand.” -Ben Schneiderman 對偶界面模型對偶界面模型對偶界面模型對同一數據同時采用兩種不同方式的可視化允許用戶在兩個視窗內進行可視化交互操作和

12、交互結果的關聯Chen W, Ding Z, Zhang S, et al. A novel interface for interactive exploration of DTI fibers. TVCG, 2009.Animation動畫效果FocusChange敘事動畫HansRosling 可視化方法可視化方法/ /技術的用戶評估技術的用戶評估目的目的可視化方法或技術解決實際問題可能有明確的目標用戶和使用場景可能有針對的具體任務需要考慮其他領域的應用可視化方法或技術的用戶評估包含幾個目的：對比新方法和已有方法確定方法的有效性（目標用戶、任務和情景）明確新的應用領域，關鍵應用定量評估研究假設 + 驗證（證實或證偽）步驟基于已有理論和前人研究列出評估假設設計評估實驗執(zhí)行實驗方案分析結果