SPARKFUL
죄송합니다. 이 페이지는 해당 언어로 번역이 되어 있지 않습니다. 열심히 노력 중이니 조금만 기다려주시면 감사하겠습니다!

Blog

Insights from the SPARKFUL teams

美麗的輻射圖表呈現方式

Wei-Fan Chenuser-interface-design
name

資訊的呈現總是一門學問,我們常常在科幻電影裡面看到一些炫麗的操作介面與資訊圖表,不管是在鋼鐵人、Tron 或是駭客任務中,這些圖表似乎都能夠幫助操作員快速的得到資訊。而在現實生活中,輻射圖表(Radial Table)就是其中一種同時包含美麗外觀、資訊能見度以及資料關連性的圖表。

關係輻射圖表

前一陣子有一個很流行的 Facebook App「Friend Wheel」,只要按下登入、授權這個 App 取得 Facebook 上好友的資料,就可以把所有的好友排成一個環,再用不同顏色的線條把朋友之間的關係相連,就可以清楚的看出自己的交友關係。

這種環狀的圖表我們稱之為輻射圖表,能夠快速的呈現出資料表很長時,每筆資料之間的關係,採用這種圖表呈現的時候,讀者最容易注意到的就是環狀中間的曲線,他們是否密集、密集在哪裡,有時候還會用不同粗細與顏色的線條來代表關係的強弱(或是數值關係)。在輻射資料表上面呈現關係是兩點之間的弧線,遠比直線要更容易被判讀。

由於輻射圖表本身是環狀的關係,圓環越中間能利用的空間就越小,越外的空間能利用的就越大。因此通常我們會將比較大範圍、而且能代表關係或是需要表達出群聚性的資料放置在圓環的中心,而比較細節、或是和其他資料相關性比較低放在外側。

除了線條顏色以及位置之外,關係線條的張力(Tension)也可以呈現出資料之間關係的不同面相。

當線條張力較小時,則比較容易看出不同資料之間的密集程度(左上角的資料交集較多,右下角則比較少),而當關係線條張力較大時,線條比較密集,可以很清楚的看出每個資料項目的關係分類(哪一群資料項目和另外一群資料項目的關係較大)。

另一方面,如果設計的是可以互動的圖表,那麼如果讓使用者即時調整張力會更容易呈現出資料的細節。此外,當滑鼠移到某個資料項目上時,突顯出該項目的線條,也會非常容易幫助使用者閱讀資料的細節。

Open Source 的 Data-Driven SVG Library D3js 提供完整的範例以及原始碼,有興趣實作的朋友可以直接在這裡找到範例:Hierarchical Edge Bundling 以及 github 上的原始碼:https://github.com/mbostock/d3

另一個很有趣的例子是波蘭的設計師 Marcin Kuczynski 在 Behance 上面發表的資訊圖表便透過這種輻射圖表的方式,繪製出歐洲 26 個國家中最多人用的名字,圖表的最外圍畫出各個國家前十名的名字(輻射圖外圍呈現細節),在採用弧線表現出相同的名字位於不同的國家之間的關係(內圈表示連結關係)。右圖呈現的是 Anna 這個名字在不同國家之間的連結。

Circos 是一個專門拿來繪製輻射圖表的軟體,有豐富的有興趣的朋友也可以參考看看。

樹狀輻射圖表

除了表現出平行的關係以外,輻射圖表也可以用來表達垂直的分類或繼承關係。早在 1924 年就有人採用這種圖表的繪製方式,這張組織結構圖以獨裁領袖為中心,像外圍畫出不同下屬的分群以及層級。採用輻射圖表的繪圖方式可以清楚的看出領袖和下屬之間的從屬關係,每個同心圓都屬於一個不同的階級,而坐落在同一個圓上的人則有著相同的階級責任。

演化學家也很喜歡採用樹狀輻射圖表來表達出不同物種之間的關係,環狀這種中央空間密集,外圍空間比較寬廣的圖形,非常適合樹狀圖這種頂端資料比較少,而越外圍資料越多越細,需要更多空間的呈現方式。下圖是 POPSCI 網站呈現出 9993 種鳥類在同一張圖的演化關係,有興趣的讀者可以到 POPSCI (http://www.popsci.com/science/article/2012-11/daily-infographic-evolution-birds) 進一步和這個圖表進行互動。

在軟體的應用上,用樹狀的輻射圖表來呈現出資料夾結構也是一種非常有創意的表達方式。例如一個介面設計的非常漂亮的 Mac 軟體 DaisyDisk 就採用了輻射圖表來呈現出硬碟的使用分布,讓使用者可以一眼就看出到底是哪一種資料、或是哪一個資料夾佔用了最多的硬碟空間。同樣的,圓環的越外圍資料就越詳細,滑鼠只要移上去馬上就能知道該資料夾名稱、大小、以及裡面的檔案。當你的硬碟裡面塞滿檔案而空間不夠時,打開這個軟體就可以很輕鬆的找到最佔空間的檔案呢!

輻射圖表是一種很神奇的圖表,除了可以表達出資料之間的關係、層級,還可以呈現出數量大小。而且依據輻射圖表本身的特性,同時可以呈現出資料的概觀以及細節,同時這也是一種非常美麗的視覺呈現方式,一眼就吸引了讀者的目光,讓人難以忘懷。

Wei-Fan Chen
Wei-Fan Chen
CEO / SPARKFUL and Fourdesire
喜歡開發與創作各種有意義且有目的的遊戲以改變社會。 《玩心設計》作者、偶爾寫部落客與擔任講師。樂於參與大學和行業活動,興趣涵蓋遊戲設計、遊戲理論、行為設計、人機介面和交互設計。熱衷於雲端運算,同時也是一個活躍的獨立遊戲開發者 🎉
divider
관련 게시물
name

電影色彩學:這些經典電影如何運用「色彩」引導觀眾情緒

電影裡的弦外之音無論是電影、圖畫或任何形式的創作中,「色彩」都是非常基本且重要的元素。好的色彩運用可以讓人一眼看出創作者想表達的情緒。因此,如何恰當的運用色彩是一項相當重要的課題。平常在看電影的時候,除了關心劇情,也可以...더 많은 기사 읽기
name

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。網路是連結的,但社群不是許多人...더 많은 기사 읽기
name

為使用者撒下「麵包屑」

大家小時候應該都有看過或聽過《糖果屋》(收錄於格林童話)的故事吧?故事裡的小兄妹在森林裡面邊走邊撒下麵包屑,希望可以在迷路的時候沿著麵包屑回到家,結果麵包屑被森林裡的小動物吃掉,這對小兄妹也就在森林裡面...더 많은 기사 읽기