大數(shù)據(jù)可視化設(shè)計

.3/3大數(shù)據(jù)可視化設(shè)計2015-09-1615:40大數(shù)據(jù)可視化是個熱門話題,在信息安全領(lǐng)域,也由于很多企業(yè)希望將大數(shù)據(jù)轉(zhuǎn)化為信息可視化呈現(xiàn)的各種形式,以便獲得更深的洞察力、更好的決策力以及更強的自動化處理能力,數(shù)據(jù)可視化已經(jīng)成為網(wǎng)絡(luò)安全技術(shù)的一個重要趨勢。一、什么是網(wǎng)絡(luò)安全可視化攻擊從哪里開始？目的是哪里？哪些地方遭受的攻擊最頻繁……通過大數(shù)據(jù)網(wǎng)絡(luò)安全可視化圖,我們可以在幾秒鐘內(nèi)回答這些問題,這就是可視化帶給我們的效率。大數(shù)據(jù)網(wǎng)絡(luò)安全的可視化不僅能讓我們更容易地感知網(wǎng)絡(luò)數(shù)據(jù)信息,快速識別風險,還能對事件進行分類,甚至對攻擊趨勢做出預測?？墒?該怎么做呢？1.1故事+數(shù)據(jù)+設(shè)計=可視化做可視化之前,最好從一個問題開始,你為什么要做可視化,希望從中了解什么？是否在找周期性的模式？或者多個變量之間的聯(lián)系？異常值？空間關(guān)系？比如政府機構(gòu),想了解全國各個行業(yè)的分布概況,以及哪個行業(yè)、哪個地區(qū)的數(shù)量最多；又如企業(yè),想了解內(nèi)部的訪問情況,是否存在惡意行為,或者企業(yè)的資產(chǎn)情況怎么樣?？傊?要弄清楚你進行可視化設(shè)計的目的是什么,你想講什么樣的故事,以及你打算跟誰講。有了故事,還需要找到數(shù)據(jù),并且具有對數(shù)據(jù)進行處理的能力,圖1是一個可視化參考模型,它反映的是一系列的數(shù)據(jù)的轉(zhuǎn)換過程：我們有原始數(shù)據(jù),通過對原始數(shù)據(jù)進行標準化、結(jié)構(gòu)化的處理,把它們整理成數(shù)據(jù)表。將這些數(shù)值轉(zhuǎn)換成視覺結(jié)構(gòu)〔包括形狀、位置、尺寸、值、方向、色彩、紋理等,通過視覺的方式把它表現(xiàn)出來。例如將高中低的風險轉(zhuǎn)換成紅黃藍等色彩,數(shù)值轉(zhuǎn)換成大小。將視覺結(jié)構(gòu)進行組合,把它轉(zhuǎn)換成圖形傳遞給用戶,用戶通過人機交互的方式進行反向轉(zhuǎn)換,去更好地了解數(shù)據(jù)背后有什么問題和規(guī)律。最后,我們還得選擇一些好的可視化的方法。比如要了解關(guān)系,建議選擇網(wǎng)狀的圖,或者通過距離,關(guān)系近的距離近,關(guān)系遠的距離也遠。總之,有個好的故事,并且有大量的數(shù)據(jù)進行處理,加上一些設(shè)計的方法,就構(gòu)成了可視化。1.2可視化設(shè)計流程一個好的流程可以讓我們事半功倍,可視化的設(shè)計流程主要有分析數(shù)據(jù)、匹配圖形、優(yōu)化圖形、檢查測試。首先,在了解需求的基礎(chǔ)上分析我們要展示哪些數(shù)據(jù),包含元數(shù)據(jù)、數(shù)據(jù)維度、查看的視角等；其次,我們利用可視化工具,根據(jù)一些已固化的圖表類型快速做出各種圖表；然后優(yōu)化細節(jié)；最后檢查測試。具體我們通過兩個案例來進行分析。二、案例一：大規(guī)模漏洞感知可視化設(shè)計圖2是全國范圍內(nèi),各個行業(yè)的分布和趨勢,橙黃藍分別代表了數(shù)量的高中低。2.1整體項目分析我們在拿到項目策劃時,既不要被大量的信息資料所迷惑而感到茫然失措,也不要急于完成項目,不經(jīng)思考就盲目進行設(shè)計。首先,讓我們認真了解客戶需求,并對整體內(nèi)容進行關(guān)鍵詞的提煉?？梢暬暮诵脑谟趯?nèi)容的提煉,內(nèi)容提煉得越精確,設(shè)計出來的圖形結(jié)構(gòu)就越緊湊,傳達的效率就越高。反之,會導致圖形結(jié)構(gòu)臃腫散亂,關(guān)鍵信息無法高效地傳達給讀者。對于大規(guī)模感知的可視化項目,客戶的主要需求是查看全國范圍內(nèi),各個行業(yè)的分布和趨勢。我們可以概括為三個關(guān)鍵詞：量、變化、級別,這三個關(guān)鍵詞就是我們進行數(shù)據(jù)可視化設(shè)計的核心點,整體的圖形結(jié)構(gòu)將圍繞這三個核心點來展開布局。2.2分析數(shù)據(jù)想要清楚地展現(xiàn)數(shù)據(jù),就要先了解所要繪制的數(shù)據(jù),如元數(shù)據(jù)、維度、元數(shù)據(jù)間關(guān)系、數(shù)據(jù)規(guī)模等。根據(jù)需求,我們需要展現(xiàn)的元數(shù)據(jù)是事件,維度有地理位置、數(shù)量、時間、類別和級別,查看的視角主要是宏觀和關(guān)聯(lián)。涉及到的視覺元素有形狀、色彩、尺寸、位置、方向,如圖4。2.3匹配圖形分析清楚數(shù)據(jù)后,就要找個合適的箱子把這些"蘋果"裝進去。上一步,或許還可以靠自身的邏輯能力,采集到的現(xiàn)成數(shù)據(jù)分析得到,而這一步更多地需要經(jīng)驗和閱歷。幸運的是,現(xiàn)在已經(jīng)有很多成熟的圖形可以借鑒了。從和業(yè)務的溝通了解到,需要匹配的圖形有中國地圖、餅圖、top圖、數(shù)字、趨勢等。2.4確定風格匹配圖形的同時,還要考慮展示的平臺。由于客戶是投放在大屏幕上查看,我們對大屏幕的特點進行了分析,比如面積巨大、深色背景、不可操作等。依據(jù)大屏幕的特點,我們對設(shè)計風格進行了頭腦風暴：它是實時的,有緊張感；需要新穎的圖標和動效,有科技感；信息層次是豐富的；展示的數(shù)據(jù)是權(quán)威的。最后根據(jù)設(shè)計風格進一步確定了深藍為標準色,代表科技與創(chuàng)新；橙紅藍分別代表數(shù)量的高中低,為輔助色；整體的視覺風格與目前主流的扁平化一致。2.5優(yōu)化圖形有了圖形后,嘗試把數(shù)據(jù)按屬性繪制到各維度上,不斷調(diào)整直到合理。雖然這里說的很簡單,但這是最耗時耗力的階段。維度過多時,在信息架構(gòu)上廣而淺或窄而深都是需要琢磨的,而后再加上交互導航,使圖形更"可視"。在這個任務中,圖形經(jīng)過很多次修改,圖7是我們設(shè)計的過程稿,深底,高亮的地圖,多顏色的攻擊動畫特效,營造緊張感；地圖中用紅、黃、藍來呈現(xiàn)高、中、低危的數(shù)量分布情況；心理學認為上方和左方易重視,"從上到下""從左至右"的"Z"字型的視覺呈現(xiàn),簡潔清晰,重點突出。完成初稿后,我們進一步優(yōu)化了維度、動效和數(shù)量。維度：每個維度,只用一種表現(xiàn),清晰易懂；動效：考慮時間和情感的把控,從原來的1.5ms改為3.5ms；數(shù)量：考慮了太密或太疏時用戶的感受,對圓的半徑做了統(tǒng)一大小的處理。2.6檢查測試最后還需要檢查測試,從頭到尾過一遍是否滿足需求；實地投放大屏幕后,用戶是否方便閱讀；動效能否達到預期,色差是否能接受；最后我們用一句話描述大屏,用戶能否理解。三、案例二：白環(huán)境蟲圖可視化設(shè)計如果手上只有單純的電子表格〔左,要想找到其中IP、應用和端口的訪問模式就會很花時間,而用蟲圖〔右呈現(xiàn)之后,雖然增加了很多數(shù)據(jù),但讀者的理解程度反而提高了。3.1整體項目分析當前,企業(yè)內(nèi)部IT系統(tǒng)復雜多變,存在一些無法精細化控制的、非法惡意的行為,如何精準地處理安全管理問題呢？我們的主要目標是幫助用戶監(jiān)測訪問內(nèi)網(wǎng)核心服務器的異常流量,概括為2個關(guān)鍵詞：內(nèi)網(wǎng)資產(chǎn)和訪問關(guān)系,整體的圖形結(jié)構(gòu)將圍繞這兩個核心點來展開布局。3.2分析數(shù)據(jù)接下來分析數(shù)據(jù),案例中的元數(shù)據(jù)是事件,維度有時間、源IP、目的IP和應用,查看的視角主要是關(guān)聯(lián)和微觀。3.3匹配圖形根據(jù)以往的經(jīng)驗,帶有關(guān)系的數(shù)據(jù)一般使用和弦圖和力導向布局圖。最初我們采用的是和弦圖,圓點內(nèi)部是主機,用戶要通過3個維度去尋找事件的關(guān)聯(lián)。通過測試發(fā)現(xiàn),用戶很難理解,因此選擇了力導向布局圖〔蟲圖。第一層級展示全局關(guān)系,第二層級通過對IP或端口的鉆取進一步展現(xiàn)相關(guān)性。3.4優(yōu)化圖形優(yōu)化圖形時,我們對很多細節(jié)進行了調(diào)整：–考慮太密或太疏時用戶的感受,只展示了TOPN。–弧度、配色的優(yōu)化,與我們UI界面風格相一致。–IP名稱超長時省略處理。–微觀視角中,源和目的分別以藍色和紫色區(qū)分,同時在線上增加箭頭,箭頭向內(nèi)為源,向外是目的,方便用戶理解。–交互上,通過單擊鉆取到單個端口和IP的信息；鼠標滑過時相關(guān)信息高亮展示,這樣既能讓畫面更加炫酷,又能讓人方便地識別。3.5檢查測試通過調(diào)研,用戶對企業(yè)內(nèi)部的流向非常清楚,視覺導向清晰,鉆取信息方便,色彩、動效