信息圖制作教程之：美麗的輻射圖表如何呈現(xiàn)？

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

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

關(guān)系輻射圖表

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

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

由于輻射圖表本身是環(huán)狀的關(guān)系，圓環(huán)越中間能利用的空間就越小，越外的空間能利用的就越大。因此通常我們會(huì)將比較大范圍、而且能代表關(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í)，則比較容易看出不同數(shù)據(jù)之間的密集程度(左上角的數(shù)據(jù)交集較多，右下角則比較少)，而當(dāng)關(guān)系線條張力較大時(shí)，線條比較密集，可以很清楚的看出每個(gè)數(shù)據(jù)項(xiàng)的關(guān)系分類(哪一群數(shù)據(jù)項(xiàng)和另外一群數(shù)據(jù)項(xiàng)的關(guān)系較大)。

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

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

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

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

樹狀輻射圖表

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

演化學(xué)家也很喜歡采用樹狀輻射圖表來(lái)表達(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) 進(jìn)一步和這個(gè)圖表進(jìn)行互動(dòng)。

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

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

網(wǎng)站標(biāo)題：信息圖制作教程之：美麗的輻射圖表如何呈現(xiàn)？
鏈接分享：http://www.muchs.cn/article2/chgsic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、服務(wù)器托管、手機(jī)網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)