信息的呈現(xiàn)總是一門學(xué)問，我們常常在科幻電影里面看到一些炫麗的操作接口與信息圖表，不管是在鋼鐵人、Tron或是黑客任務(wù)中，這些圖表似乎都能夠幫助操作員快速的得到信息。而在現(xiàn)實生活中，輻射圖表(Radial Table)就是其中一種同時包含美麗外觀、信息能見度以及數(shù)據(jù)關(guān)連性的圖表。

為襄陽等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及襄陽網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為做網(wǎng)站、成都網(wǎng)站制作、襄陽網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

關(guān)系輻射圖表

前一陣子有一個很流行的 Facebook App「Friend Wheel」，只要按下登入、授權(quán)這個 App 取得 Facebook 上好友的數(shù)據(jù)，就可以把所有的好友排成一個環(huán)，再用不同顏色的線條把朋友之間的關(guān)系相連，就可以清楚的看出自己的交友關(guān)系。

這種環(huán)狀的圖表我們稱之為輻射圖表，能夠快速的呈現(xiàn)出數(shù)據(jù)表很長時，每筆數(shù)據(jù)之間的關(guān)系，采用這種圖表呈現(xiàn)的時候，讀者最容易注意到的就是環(huán)狀中間的曲線，他們是否密集、密集在哪里，有時候還會用不同粗細(xì)與顏色的線條來代表關(guān)系的強弱(或是數(shù)值關(guān)系)。在輻射數(shù)據(jù)表上面呈現(xiàn)關(guān)系是兩點之間的弧線，遠(yuǎn)比直線要更容易被判讀。

由于輻射圖表本身是環(huán)狀的關(guān)系，圓環(huán)越中間能利用的空間就越小，越外的空間能利用的就越大。因此通常我們會將比較大范圍、而且能代表關(guān)系或是需要表達(dá)出群聚性的數(shù)據(jù)放置在圓環(huán)的中心，而比較細(xì)節(jié)、或是和其他數(shù)據(jù)相關(guān)性比較低放在外側(cè)。

除了線條顏色以及位置之外，關(guān)系線條的張力(Tension)也可以呈現(xiàn)出數(shù)據(jù)之間關(guān)系的不同面相。

當(dāng)線條張力較小時，則比較容易看出不同數(shù)據(jù)之間的密集程度(左上角的數(shù)據(jù)交集較多，右下角則比較少)，而當(dāng)關(guān)系線條張力較大時，線條比較密集，可以很清楚的看出每個數(shù)據(jù)項的關(guān)系分類(哪一群數(shù)據(jù)項和另外一群數(shù)據(jù)項的關(guān)系較大)。

另一方面，如果設(shè)計的是可以互動的圖表，那么如果讓用戶實時調(diào)整張力會更容易呈現(xiàn)出數(shù)據(jù)的細(xì)節(jié)。此外，當(dāng)鼠標(biāo)移到某個數(shù)據(jù)項上時，突顯出該項目的線條，也會非常容易幫助用戶閱讀數(shù)據(jù)的細(xì)節(jié)。

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

另一個很有趣的例子是波蘭的設(shè)計師 Marcin Kuczynski 在 Behance 上面發(fā)表的信息圖表便透過這種輻射圖表的方式，繪制出歐洲 26 個國家中最多人用的名字，圖表的最外圍畫出各個國家前十名的名字(輻射圖外圍呈現(xiàn)細(xì)節(jié))，在采用弧線表現(xiàn)出相同的名字位于不同的國家之間的關(guān)系(內(nèi)圈表示連結(jié)關(guān)系)。右圖呈現(xiàn)的是 Anna 這個名字在不同國家之間的連結(jié)。

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

樹狀輻射圖表

除了表現(xiàn)出平行的關(guān)系以外，輻射圖表也可以用來表達(dá)垂直的分類或繼承關(guān)系。早在 1924 年就有人采用這種圖表的繪制方式，這張組織結(jié)構(gòu)圖以獨裁領(lǐng)袖為中心，像外圍畫出不同下屬的分群以及層級。采用輻射圖表的繪圖方式可以清楚的看出領(lǐng)袖和下屬之間的從屬關(guān)系，每個同心圓都屬于一個不同的階級，而坐落在同一個圓上的人則有著相同的階級責(zé)任。

演化學(xué)家也很喜歡采用樹狀輻射圖表來表達(dá)出不同物種之間的關(guān)系，環(huán)狀這種中央空間密集，外圍空間比較寬廣的圖形，非常適合樹形圖這種頂端數(shù)據(jù)比較少，而越外圍數(shù)據(jù)越多越細(xì)，需要更多空間的呈現(xiàn)方式。下圖是 POPSCI 網(wǎng)站呈現(xiàn)出 9993 種鳥類在同一張圖的演化關(guān)系，有興趣的讀者可以到 POPSCI (http://www.popsci.com/science/article/2012-11/daily-infographic-evolution-birds) 進一步和這個圖表進行互動。

在軟件的應(yīng)用上，用樹狀的輻射圖表來呈現(xiàn)出文件夾結(jié)構(gòu)也是一種非常有創(chuàng)意的表達(dá)方式。例如一個接口設(shè)計的非常漂亮的 Mac 軟件 DaisyDisk 就采用了輻射圖表來呈現(xiàn)出硬盤的使用分布，讓使用者可以一眼就看出到底是哪一種數(shù)據(jù)、或是哪一個文件夾占用了最多的硬盤空間。同樣的，圓環(huán)的越外圍數(shù)據(jù)就越詳細(xì)，鼠標(biāo)只要移上去馬上就能知道該文件夾名稱、大小、以及里面的檔案。當(dāng)你的硬盤里面塞滿檔案而空間不夠時，打開這個軟件就可以很輕松的找到最占空間的檔案呢!

輻射圖表是一種很神奇的圖表，除了可以表達(dá)出數(shù)據(jù)之間的關(guān)系、層級，還可以呈現(xiàn)出數(shù)量大小。而且依據(jù)輻射圖表本身的特性，同時可以呈現(xiàn)出資料的概觀以及細(xì)節(jié)，同時這也是一種非常美麗的視覺呈現(xiàn)方式，一眼就吸引了讀者的目光，讓人難以忘懷。

本文題目：信息圖制作教程之：美麗的輻射圖表如何呈現(xiàn)？
文章地址：http://weahome.cn/article/chgsic.html