操作介面設計模式 第二版

336

|

第七章

樹結構圖（

Treemap

）

圖

7

-

50

SmartMoney

的

Map of the Market

（

http://www.smartmoney.com/

map-of-the-market/

）

這是什麼

把多維度且（或）有階層的資料，以各種矩形尺寸表達出來。你可以將這些矩形安

排成套疊狀（nested）以表達出階層，且為矩形著上色彩或標上標籤，以顯示出額

外的變數。

何時使用

資料是樹狀結構（有階層的）。也就是說，它可能是多值的 — 每個項目都具有數

種屬性，像是尺寸和類目，這使得項目可以依據這些屬性來分群。使用者想要看到

許多資料點（或許數百個或數千個）的概觀，而且他們使用的螢幕大到足以容納大

型的顯示區。

你的使用者 應該有耐心 且有足夠的 動機學習使 用這個不常 見的介面。 樹狀地圖並

非總是很容 易閱讀，特 別是對於以 前沒見過樹 狀地圖的人 更是困難。 還有，樹狀

地 圖 在 螢 幕 上 比 印 在 紙 張 上 的 作 用 更 好 ， 因 為 資 料 提 示 （ D a ta t i p ） 、 動 態 查 詢

（Dynamic Queries）、以及其他互動機制都可以幫助使用者瞭解資料。

DI_2e_ch07.indd 336 2012/1/5 下午 04:01:05

模式

|

337

為何使用

樹狀地圖將許多 資 料屬性編 入 一個密集 的 圖表。利 用 位置、尺 寸 、容器、 色 調、

值、標籤……樹狀地圖可以將許多資訊包入一個空間中，並鼓勵人類的視覺系統從