大資料視覺化是個熱門話題，在資訊保安領域，也由於很多企業希望將大資料轉化為資訊視覺化呈現的各種形式，以便獲得更深的洞察力、更好的決策力以及更強的自動化處理能力，資料視覺化已經成為網路安全技術的一個重要趨勢。

文章目錄

        一、什麼是網路安全視覺化

• • 1.1 故事+資料+設計 =視覺化

  • 1.2 視覺化設計流程

• 二、案例一：大規模漏洞感知視覺化設計

  • 2.1整體專案分析

  • 2.2分析資料

  • 2.3匹配圖形

  • 2.4確定風格

  • 2.5優化圖形

  • 2.6檢查測試

• 三、案例二：白環境蟲圖視覺化設計

• •  

     

    在這裡我還是要推薦下我自己建的大資料學習交流qqq裙： 957205962， 裙 裡都是學大資料開發的，如果你正在學習大資料 ，小編歡迎你加入，大家都是軟體開發黨，不定期分享乾貨（只有大資料開發相關的），包括我自己整理的一份2018最新的大資料進階資料和高階開發教程，歡迎進階中和進想深入大資料的小夥伴
     

    3.1整體專案分析

  • 3.2分析資料

  • 3.3 匹配圖形

  • 3.4優化圖形

  • 3.5檢查測試

一、什麼是網路安全視覺化

攻擊從哪裡開始？目的是哪裡？哪些地方遭受的攻擊最頻繁……通過大資料網路安全視覺化圖，我們可以在幾秒鐘內回答這些問題，這就是視覺化帶給我們的效率 。 大資料網路安全的視覺化不僅能讓我們更容易地感知網路資料資訊，快速識別風險，還能對事件進行分類，甚至對攻擊趨勢做出預測。可是，該怎麼做呢？

1.1 故事+資料+設計 =視覺化

做視覺化之前，最好從一個問題開始，你為什麼要做視覺化，希望從中瞭解什麼？是否在找週期性的模式？或者多個變數之間的聯絡？異常值？空間關係？比如政府機構，想了解全國各個行業漏洞的分佈概況，以及哪個行業、哪個地區的漏洞數量最多；又如企業，想了解內部的訪問情況，是否存在惡意行為，或者企業的資產情況怎麼樣。總之，要弄清楚你進行視覺化設計的目的是什麼，你想講什麼樣的故事，以及你打算跟誰講。

有了故事，還需要找到資料，並且具有對資料進行處理的能力，圖1是一個視覺化參考模型，它反映的是一系列的資料的轉換過程：

• 我們有原始資料，通過對原始資料進行標準化、結構化的處理，把它們整理成資料表。

• 將這些數值轉換成視覺結構（包括形狀、位置、尺寸、值、方向、色彩、紋理等），通過視覺的方式把它表現出來。例如將高中低的風險轉換成紅黃藍等色彩，數值轉換成大小。

• 將視覺結構進行組合，把它轉換成圖形傳遞給使用者，使用者通過人機互動的方式進行反向轉換，去更好地瞭解資料背後有什麼問題和規律。

最後，我們還得選擇一些好的視覺化的方法。比如要了解關係，建議選擇網狀的圖，或者通過距離，關係近的距離近，關係遠的距離也遠。

總之，有個好的故事，並且有大量的資料進行處理，加上一些設計的方法，就構成了視覺化。

1.2 視覺化設計流程

一個好的流程可以讓我們事半功倍，視覺化的設計流程主要有分析資料、匹配圖形、優化圖形、檢查測試。首先，在瞭解需求的基礎上分析我們要展示哪些資料，包含元資料、資料維度、檢視的視角等；其次，我們利用視覺化工具，根據一些已固化的圖表型別快速做出各種圖表；然後優化細節；最後檢查測試。

具體我們通過兩個案例來進行分析。

二、案例一：大規模漏洞感知視覺化設計

圖2是全國範圍內，各個行業漏洞的分佈和趨勢，橙黃藍分別代表了漏洞數量的高中低。

2.1整體專案分析

我們在拿到專案策劃時，既不要被大量的資訊資料所迷惑而感到茫然失措，也不要急於完成專案，不經思考就盲目進行設計。首先，讓我們認真瞭解客戶需求，並對整體內容進行關鍵詞的提煉。視覺化的核心在於對內容的提煉，內容提煉得越精確，設計出來的圖形結構就越緊湊，傳達的效率就越高。反之，會導致圖形結構臃腫散亂，關鍵資訊無法高效地傳達給讀者。

對於大規模漏洞感知的視覺化專案，客戶的主要需求是檢視全國範圍內，各個行業的漏洞分佈和趨勢。我們可以概括為三個關鍵詞：漏洞量、漏洞變化、漏洞級別，這三個關鍵詞就是我們進行資料視覺化設計的核心點，整體的圖形結構將圍繞這三個核心點來展開佈局。

在這裡我還是要推薦下我自己建的大資料學習交流qqq裙： 957205962， 裙 裡都是學大資料開發的，如果你正在學習大資料 ，小編歡迎你加入，大家都是軟體開發黨，不定期分享乾貨（只有大資料開發相關的），包括我自己整理的一份2018最新的大資料進階資料和高階開發教程，歡迎進階中和進想深入大資料的小夥伴
 

2.2分析資料

想要清楚地展現資料，就要先了解所要繪製的資料，如元資料、維度、元資料間關係、資料規模等。根據需求，我們需要展現的元資料是漏洞事件，維度有地理位置、漏洞數量、時間、漏洞類別和級別，檢視的視角主要是巨集觀和關聯。涉及到的視覺元素有形狀、色彩、尺寸、位置、方向，如圖4。

2.3匹配圖形

2.4確定風格

匹配圖形的同時，還要考慮展示的平臺。由於客戶是投放在大螢幕上檢視，我們對大螢幕的特點進行了分析，比如面積巨大、深色背景、不可操作等。依據大螢幕的特點，我們對設計風格進行了頭腦風暴：它是實時的，有緊張感；需要新穎的圖示和動效，有科技感；資訊層次是豐富的；展示的資料是權威的。

最後根據設計風格進一步確定了深藍為標準色，代表科技與創新；橙紅藍分別代表漏洞數量的高中低，為輔助色；整體的視覺風格與目前主流的扁平化一致。

2.5優化圖形

有了圖形後，嘗試把資料按屬性繪製到各維度上，不斷調整直到合理。雖然這裡說的很簡單，但這是最耗時耗力的階段。維度過多時，在資訊架構上廣而淺或窄而深都是需要琢磨的，而後再加上互動導航，使圖形更“可視”。

在這個任務中，圖形經過很多次修改，圖7是我們設計的過程稿，深底，高亮的地圖，多顏色的攻擊動畫特效，營造緊張感；地圖中用紅、黃、藍來呈現高、中、低危的漏洞數量分佈情況；心理學認為上方和左方易重視，“從上到下”“從左至右”的“Z”字型的視覺呈現，簡潔清晰，重點突出。

完成初稿後，我們進一步優化了維度、動效和數量。維度：每個維度，只用一種表現，清晰易懂；動效：考慮時間和情感的把控，從原來的1.5ms改為3.5ms；數量：考慮了太密或太疏時使用者的感受，對圓的半徑做了統一大小的處理。

2.6檢查測試

最後還需要檢查測試，從頭到尾過一遍是否滿足需求；實地投放大屏幕後，使用者是否方便閱讀；動效能否達到預期，色差是否能接受；最後我們用一句話描述大屏，使用者能否理解。

三、案例二：白環境蟲圖視覺化設計

如果手上只有單純的電子表格（左），要想找到其中IP、應用和埠的訪問模式就會很花時間，而用蟲圖（右）呈現之後，雖然增加了很多資料，但讀者的理解程度反而提高了。

3.1整體專案分析

當前，企業內部IT系統複雜多變，存在一些無法精細化控制的、非法惡意的行為，如何精準地處理安全管理問題呢？我們的主要目標是幫助使用者監測訪問內網核心伺服器的異常流量，概括為2個關鍵詞：內網資產和訪問關係，整體的圖形結構將圍繞這兩個核心點來展開佈局。

3.2分析資料

接下來分析資料，案例中的元資料是事件，維度有時間、源IP、目的IP和應用，檢視的視角主要是關聯和微觀。

3.3 匹配圖形

根據以往的經驗，帶有關係的資料一般使用和絃圖和力導向佈局圖。最初我們採用的是和絃圖，圓點內部是主機，使用者要通過3個維度去尋找事件的關聯。通過測試發現，使用者很難理解，因此選擇了力導向佈局圖（蟲圖）。第一層級展示全域性關係，第二層級通過對IP或埠的鑽取進一步展現相關性。

在這裡我還是要推薦下我自己建的大資料學習交流qqq裙： 957205962， 裙 裡都是學大資料開發的，如果你正在學習大資料 ，小編歡迎你加入，大家都是軟體開發黨，不定期分享乾貨（只有大資料開發相關的），包括我自己整理的一份2018最新的大資料進階資料和高階開發教程，歡迎進階中和進想深入大資料的小夥伴
 

3.4優化圖形

優化圖形時，我們對很多細節進行了調整： – 考慮太密或太疏時使用者的感受，只展示了TOP N。 – 弧度、配色的優化，與我們UI介面風格相一致。 – IP名稱超長時省略處理。 – 微觀視角中，源和目的分別以藍色和紫色區分，同時在線上增加箭頭，箭頭向內為源，向外是目的，方便使用者理解。 – 互動上，通過單擊鑽取到單個埠和IP的資訊；滑鼠滑過時相關資訊高亮展示，這樣既能讓畫面更加炫酷，又能讓人方便地識別。

3.5檢查測試

通過調研，使用者對企業內部的流向非常清楚，視覺導向清晰，鑽取資訊方便，色彩、動效等細節的優化幫助使用者快速定位問題，提升了安全運維效率。

四、總結

總之，藉助大資料網路安全的視覺化設計，人們能夠更加智慧地洞悉資訊與網路安全的態勢，更加主動、彈性地去應對新型複雜的威脅和未知多變的風險。

視覺化設計的過程中，我們還需要注意：1、整體考慮、顧全大局；2、細節的匹配、一致性；3、充滿美感，對稱和諧。

關注微信公眾號：程式設計師交流互動平臺！獲取資料學習！