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