魚眼策略應用研究

【摘要】當人們對事物進行描述或查找當前位置到另一位置時，總是先描述總體，之后才進入細節。如今我們身邊的信息量不斷增長，無論身在何處，某些事物總比其他的更重要。利用魚眼策略能在大量信息中為用戶提供他們所關注的內容，就此文章將該策略用于魚眼菜單的開發。

【關鍵詞】魚眼策略；圖形用戶界面；魚眼菜單

【中圖分類號】G434 【文獻標識碼】B 【論文編號】1009—8097 (2008) 04—0106—05

一 魚眼策略簡介

魚眼策略是美國馬里蘭大學人機交互實驗室（Human-Computer Interaction Lab，HCIL）開發出的一種圖形展示技術。這項技術被應用于需要在一個大的范圍內展示事物的具體細節的時候被用到。由于這種顯示方式如同攝影拍攝中所使用的魚眼變焦鏡頭，因此被稱為魚眼策略。這種展示策略有兩個明顯的優勢:[1]

（1） 當訪問大型的結構時，可以先通過概要性的查詢，之后再進行詳細的查詢以縮短查詢的時間；

（2） 通過遠離細節的焦點對問題能有總體的把握。

魚眼策略中最為關鍵概念是當物體接近焦點時，其中的內容明確而清晰地呈現給用戶，而當對象遠離用戶的關注點時，事物細節的詳細程度立即降低，即物體遠離焦點。魚眼策略創建了一個呈現事物的全貌同時又能夠保持對象細節的方式。用戶感興趣的領域被放大——這樣有便于細節的呈現；但同時與之相關的上下文內容被保持下來，因此，處在對象細節外圍的背景內容仍然會被連續地顯示。

二 魚眼策略的應用范圍和局限性

魚眼策略為用戶提供了一個在小范圍內來展示大的結構的方法。這些結構可以是網狀結構、樹型結構、程序源代碼、文件系統或數據庫。這樣，呈現給用戶的信息量不斷地增長，而與此相矛盾的是用戶的可視空間(如，計算機顯示器的屏幕尺寸、分辨率、移動設備的屏幕尺寸)仍然相對較小[2]。對于系統開發商來說，他們認為這種矛盾主要依靠界面設計來解決。因此，在這種理念指導下的設計思想是提供一種可搜索（searchable）的方式向用戶展示大量的信息。然而，采用這種方式向用戶提供的信息不具有與之相關的上下文信息，是一種“只見樹木，不見森林”的方式。

魚眼策略為試圖解決這個問題提供了一個本地上下文和一個總攬的上下文，它是一個焦點和上下文(focus+context)的可視化技術，往往又可以被稱為“注意扭曲展示”。在這里有兩類資源需要被認真考慮：一是用戶的關注點；二是屏幕的空間。如圖1所示，在一幅356×205像素的地圖上進行位置的查找，放大鏡的所處的位置是用戶當前所關注的，即用戶的關注點，同時也是放大鏡的焦點。放大鏡邊緣以外的便是上下文內容。從用戶的關注點到放大鏡的邊緣，這其間的內容被扭曲、放大了。

然而，魚眼策略也有一些限制。這種限制源自于它的“注意扭曲”，即焦點周圍所發生扭曲變形。這樣，如果失真的不是一個物體，而是遠處的一個點，那么這種策略在技術上的可用性將會降低，而且效果失真很難加以預測和控制。在地圖上的失真可能會使用戶迷失方向，信息在最遠的距離將丟失。這時，雖然人感官上的距離是可用的，但它不能夠清楚地說明是什么決定對象的詳細程度。

三 魚眼策略的原理

魚眼策略是一種基于用戶角度的觀察策略，信息的重要性和可用性在任何時刻是兩個變量的函數，這兩個變量分別是：API(a priori interest)和distance metrics(dist)；函數用DOI(Degree of Interest)來表示。API反映了一個對象在一個特定的結構、任務或者領域中的重要性，并且它與用戶當前的焦點無關。distance metrics決定了當前用戶焦點和任務集合中每個對象的相關興趣[3]。這樣，應用魚眼策略的時候，當用戶進行搜索操作時，用戶當前搜索目標被看作是焦點，而系統將會給予用戶反饋，這種反饋使用DOI(Degree of Interest)和emphasis這兩個個術語來表示。DOI是在信息空間中每個對象的相對重要性；而emphasis是某個對象的DOI到用來顯示該對象的可視化屬性的映射，比如顯示對象的大小屬性。

對于給定焦點 ，下面的函數用來計算對象x的一個特殊上下文的DOI：

其中，權重wi 與distance metrics(dist)相關聯，n是所有使用的distance metrics(dist)的數量。

API建立了一個全局上下文，用戶在其中可以進行搜索。在文章第四部分給出的基于Flex的魚眼菜單中（見文章圖8），API被建模為那些即使是焦點改變也仍然保持穩定的信息，即圖8中那些形狀上看起來大小較小的圖片。當用戶移動焦點的時候，系統將會連續地計算出對象的DOI。但如果當前沒有焦點時，每個對象的DOI將回到它的API值。這樣，具有高API值的對象將保持突起狀態，并且作為標志被表示出來。

四 魚眼策略的應用

1 魚眼菜單

魚眼策略的一個應用是魚眼菜單，它應用魚眼圖形可視化技術來線性化菜單，從而可以允許在長的菜單中進行有效地搜索。由于用戶的DOI不同，這樣，菜單的大小將會被動態地改變，這樣就可以在鼠標周圍提供一個興趣點。這種策略能夠向用戶展現這種能夠進行有效搜索的菜單，而無須使用層級菜單或滾動菜單，可以避免使用戶失去關注和焦點[3]。下面便介紹幾種應用不同技術開發出的魚眼菜單。

（1） 基于腳本的魚眼菜單進行圖標素材選擇

應用JavaScript腳本實現的魚眼菜單通過鼠標事件來響應用戶興趣點的移動，如圖2所示，當用戶對某個圖標感興趣的時候，只須將鼠標移到上面，該圖標便會突出顯示，即圖標的尺寸變大。響應用戶操作的鼠標事件代碼如下：

（2） 基于Java的魚眼菜單

當菜單項過多而用戶的計算機屏幕不能一次完整顯示的時候，可以采用箭頭菜單、滾動菜單或者將菜單內容分類后通過層級菜單來顯示[4]。這里我們以通過使用來菜單顯示SSCI期刊目錄為例，來說明魚眼菜單是如何提高用戶搜索性能的。如圖3所示采用的是箭頭菜單，圖4采用的是滾動菜單，圖5為層級菜單。

采用以上三種菜單顯示方式雖然可以將需要顯示的內容在有限的用戶屏幕上完全展示出來，但使用這種顯示方式對于用戶的可用性來說是非常低的，用戶仍然不得不仔細地通過點擊向下箭頭（圖3）、拖動滾動條（圖4）或是找到第一個字母（圖5）這樣的操作來尋找需要的信息。即使采用層級菜單的方式，可以通過將期刊名稱按照首字母進行分類索引之后再呈現給用戶，但在用戶屏幕分辨率比較較低的情況下，下級菜單中的內容如果較多，這時仍會產生菜單中的內容顯示不完整的問題。以上所論述均是菜單內容顯示不完全的問題，然而問題的實質并非在于此，而是如何向用戶呈現他所感興趣的內容。即無論采用上述介紹的三種菜單中的其中任何一種，對于用戶來說，當前他感興趣的或關注的內容同其他內容的差異都不是很明顯。這是因為菜單是以一種扁平化的方式顯示內容的，內容上下文之間的差異性較小，這就給用戶的搜索帶來了困難。因此，這里采用基于魚眼策略設計的菜單可以像變焦鏡頭那樣，將用戶當前感興趣的區域放大，而其它背景信息縮小，這樣當前內容同其它內容的邊界效應明顯，提高了用戶的可用性。如圖6所示為短焦距魚眼菜單，圖7為長焦距魚眼菜單。

（3） 基于Flex實現的魚眼菜單

Flex是adobe公司為了滿足開發企業級的富因特網應用程序（Rich Internet Application，RIA）而推出的一種應用程序框架。RIA 將桌面軟件的響應速度和豐富功能與 Web 應用程序的廣度結合在一起，以提供效果更好的最終用戶體驗。Flex的開發模型與JSP、ASP.NET或其他類似的腳本語言基本的模型是一樣的，即建立一個包含應用程序源代碼的文本文件，然后將此文件部署到服務器上；當服務器收到請求時，將此源碼編譯成應用程序，而后續的請求則通過緩存處理。

2 魚眼觀察

魚眼策略的另一個應用是在抽象圖形、結構化數據樹和地理視圖的可視化顯示中的應用。魚眼策略能夠使在源代碼的層次結構中進行搜索變得更加容易。在這種情況下，用線性數字來計算興趣點到每一個點的距離。

語義魚眼觀察(Semantic Fisheye Views， SFEVs)和圖形化魚眼觀察(Graphical Fisheye Views， GFEVs)是魚眼策略的又一應用。SFEVs是在匯集了大量的多媒體文件的上下文中進行搜索、瀏覽和組織工具，它關注于特定的動畫形象。GFEV同魚眼透鏡是類似的，它扭曲了圖像的外貌特征；如一個城市的地圖（見文章圖1）。圖形化魚眼觀察將焦點集中于一個對象或一個地區，并將其作為興趣點。

五 結論

將類似于網絡拓撲結構這樣的信息采用魚眼策略的方式呈現給用戶是一種非常有效的信息呈現方式。這樣，“焦點+語境”的概念便在魚眼策略的概念下萌生了，并且導致了在信息可視化中的大量研究。當接口和可視化適應人類的認知方式的時候 ，展示給用戶的數據便是被優化了的。人類是在上下文與細節中感知信息的。物體在人類視網膜的中心時，其清晰度是非常高的；而在外圍時，看起來則要少了很多細節[5]。研究表明，魚眼策略能夠在系統化的操作任務上提升用戶的性能，任務能在較少的導航誤差中能夠以較少的步驟完成。

參考文獻

[1]Cassie Thomas.Fisheye Strategy[EB/OL].

2002-10-28.

[2]Furnas， George. Generalized Fisheye Views. Human Factors in computing systems[A]. CHI '86 conference proceedings [C]. New York: ACM Press， 1986:16-23， 1986.

[3]Janecek， P.and Pu， P. A Framework for Designing Fisheye Views to Support Multiple semantic Contexts， in Proc. of Int [A]. Conf. on Advanced Visual Interface (AVI02)[C].Italy: Trento， ACM Press， 2002:51-58.

[3]Card， S， Mackinlay， J，and Shneiderman， B.Readings in Information Visualization: Using Vision to Think[M].San Francisco:Morgan Kauffman Publishers， 1999.

[4]Fisheye Menus.< http://www.cs.umd.edu/hcil/fisheyemenu>

[Z]. 2002.11.23.

[5][Z].2002.11.23.

注：本文中所涉及到的圖表、注解、公式等內容請以PDF格式閱讀原文。