|
之前進行過一個數(shù)據(jù)可視化的設(shè)計，初步有些成果，借此總結(jié)下自己設(shè)計時的步驟與方法。文中每步穿插當時設(shè)計的例子，希望可以更易理解，例子的原型圖如下。
設(shè)計中經(jīng)過多次反復，但總體可以歸為以下3步。
1.分析數(shù)據(jù)想要清楚地展現(xiàn)數(shù)據(jù)，就要先了解所要繪制的數(shù)據(jù)，包括元數(shù)據(jù)維度、元數(shù)據(jù)間關(guān)系、數(shù)據(jù)規(guī)模。元數(shù)據(jù)在這里指圖形要表達的不可再細分的實體。
元數(shù)據(jù)的維度即數(shù)據(jù)的各屬性度量，比如二維平面上的點的屬性是<x,y>,它的維度就是x坐標軸與y坐標軸。一般需要可視化的數(shù)據(jù)會有很多維度，分析清楚各維度及其關(guān)注度是最終把數(shù)據(jù)清晰表達的前提。過多的維度會加大可視化的難度，因為“想聊的故事太長了，反而就都沉默的笑著”。當然一直沉默就可能丟工作了，所以可以嘗試從二維到三維、加入顏色、形狀等表現(xiàn)維度，如果真的覺得極限了，就應該考慮信息過載問題了，回頭試著刪減非必要的信息維度。
本例中的元數(shù)據(jù)是案件，維度有時間、類別、所在部門、前后案件。
元數(shù)據(jù)間關(guān)系，多數(shù)關(guān)系都與元數(shù)據(jù)本身的屬性有關(guān)，也就是說，可以在一個維度上判斷出數(shù)據(jù)間的關(guān)系。
案件的開始結(jié)束時間，可以知道各案件的前后關(guān)系。根據(jù)案件的前后案件，可以把案件連接在一條流轉(zhuǎn)線上。
數(shù)據(jù)規(guī)模，往往需要采集真實數(shù)據(jù)，以便確定圖形的容量、坐標刻度等。
幸好例子中的數(shù)據(jù)量不大，上圖是最復雜的流程了。本例的可視化任務主要難點在關(guān)系上的表達。
2.匹配圖形分析清楚數(shù)據(jù)后，就要找個合適的箱子把這些“蘋果”裝進去。上一步，或許還可以靠自身的邏輯能力，采集到的現(xiàn)成數(shù)據(jù)分析得到，而這一步更多地需要自己的經(jīng)驗、閱歷，數(shù)據(jù)可視化本來就是個很綜合的學問??！
西喬如是說：它涉足制圖學、圖形繪制設(shè)計、計算機視覺、數(shù)據(jù)采集、統(tǒng)計學、圖解技術(shù)、數(shù)型結(jié)合以及動畫、立體渲染、用戶交互等。相關(guān)領(lǐng)域有影像學、視知覺。空間分析、科學建模等。
不過，幸運的是，現(xiàn)在已經(jīng)有很多成熟的圖形可以借鑒了。比如以下兩個（本文的例子是它們兩個的綜合）。
InteractiveHistoryTimeline
FlowingData
如何確定采用哪種圖形模式呢？這要從數(shù)據(jù)出發(fā)。確定哪個維度最重要，是應該首要表現(xiàn)的，這個維度往往決定最后采用的圖形模式。當你在腦中對圖形有個預期后，如果覺得從空白開始太難，可以上網(wǎng)看看，或回想自己使用過的軟件有無類似這種概念的表達。
在時間、類別、所在部門、前后案件4個維度中，根據(jù)業(yè)務分析得，前后案件是最重要的，但在這個業(yè)務中湊巧的是，時間與前后案件有很大關(guān)聯(lián)——前后案件是無縫相接的，前一案件的結(jié)束時間是后一案件的開始時間。最后決定將時間與前后案件聯(lián)合作為第一維度考慮。確定這個基調(diào)后，我參考了一些圖形，如下圖。
ChromeDeveloperToolsResources
AfterEffectRender
最終我做了個艱難的決定，選用timelines圖形，同時兼容了flowing圖形！細心點還會發(fā)現(xiàn)，我山寨了chrome的樣式。
3.優(yōu)化圖形有了圖形后，嘗試把數(shù)據(jù)按屬性，繪制到各維度上，不斷調(diào)整直到合理。雖然這里說的很簡單，但這是最耗時耗力的階段。維度過多時，在信息架構(gòu)上廣而淺或窄而深都是需要琢磨的，而后再加上交互導航，使圖形更“可視”。
在這個任務中，圖形經(jīng)過我的很多次修改。下圖是一次修改前后的對比。
所做的修改主要有：
縱軸去掉一行一個部門（公訴、偵監(jiān)、反貪等稱為部門）的標識，改用同一顏色隱式表達。如此的考慮是，了解檢察院業(yè)務的用戶看到案件類別就能知道它屬于哪個部門，而且少了部門后，單位區(qū)域更清楚——上下級單位的案件流轉(zhuǎn)是很受關(guān)注的。之前的時間軸是非等比顯示的，它的標識由下方的圖形決定，始終覺得這樣不夠嚴謹，后來看到一個開源組件：SimileTimeline。它對一個時間軸上不同時間段上信息量相差懸殊的情況，定義了一個Hotzone的概念，覺得與我的圖形很契合，于是采用了。這個Hotzone概念，簡單說就是放大一個指定的時間段，這個時間段里的刻度可以更細，表現(xiàn)更多信息。對數(shù)據(jù)可視化，只能說接觸了點皮毛，希望以此拋磚引玉。
|