編者按：信息可視化發(fā)展不久，現(xiàn)在大多數(shù)經(jīng)驗(yàn)是國(guó)外的“拿來(lái)主義”，內(nèi)容相近且不接地氣。今天@劉津legene 同學(xué)從實(shí)戰(zhàn)項(xiàng)目中總結(jié)了信息可視化的方法，通俗易懂，步步進(jìn)階，非常值得學(xué)習(xí)。當(dāng)下很多同行都在搶攻這一先鋒陣地，大家別落后咯 >>> 由于目前在做大數(shù)據(jù)類的產(chǎn)品，界面上總需要使用設(shè)計(jì)語(yǔ)言來(lái)解釋一些很虛擬、抽象的概念，因此不可避免的要研究信息可視化。之前看了很多同行在這方面的總結(jié)和分享，卻發(fā)現(xiàn)內(nèi)容都差不多，幾乎都是來(lái)自國(guó)外的一些相關(guān)書籍和資料。所以這里我想談一下在經(jīng)歷了這個(gè)項(xiàng)目后，自己對(duì)信息可視化的一些粗淺的理解，希望可以拋磚引玉，影響更多同行分享有價(jià)值的內(nèi)容。
我對(duì)信息可視化的理解 由于剛開始接觸，理解自然非常淺顯。也許日后會(huì)有更高深的見解。目前我認(rèn)為：信息可視化就是用圖形正確的表現(xiàn)復(fù)雜的信息和邏輯關(guān)系，這樣可以：

• 通過(guò)圖片特有的美觀和趣味性，吸引讀者
• 通過(guò)最優(yōu)表現(xiàn)形式，使內(nèi)容更易懂
• 拉近讀者與產(chǎn)品的距離，提升品牌認(rèn)知度

這個(gè)圖忘記是在哪里看到的了，它給我留下了非常深刻的印象。這個(gè)例子通過(guò)簡(jiǎn)單的圖形變化讓降雨量信息一目了然。信息可視化是一門了不起的學(xué)問(wèn)，需要設(shè)計(jì)者既有很好的交互意識(shí)，又要有一定的圖形設(shè)計(jì)能力。

和視覺(jué)小伙伴們一起協(xié)作得出的成果 作品一：安全產(chǎn)品首頁(yè)展示

創(chuàng)作靈感：從需求文檔中看到這些子產(chǎn)品名字有御前衛(wèi)、八卦陣、御城河……當(dāng)時(shí)就覺(jué)得非常有意思，腦海中立刻浮現(xiàn)出一個(gè)古城的畫面，古城周圍有士兵、有八卦陣、有御城河等。跟視覺(jué)設(shè)計(jì)師表達(dá)這個(gè)想法后大家一拍即合，最終產(chǎn)出了這個(gè)方案。中間的城樓最開始是紅色的，有點(diǎn)太搶眼，為了避免喧賓奪主又體現(xiàn)出數(shù)據(jù)被保護(hù)的感覺(jué)，就把它改成了這種半透明的、很數(shù)據(jù)化的虛擬感覺(jué)。

作品二：產(chǎn)品結(jié)構(gòu)圖 創(chuàng)作靈感：通過(guò)競(jìng)品分析發(fā)現(xiàn)國(guó)內(nèi)外同行在這方面都非常下功夫，所以我們也要力求用一張圖來(lái)把產(chǎn)品結(jié)構(gòu)和關(guān)系描述清楚。下篇文章會(huì)講具體的設(shè)計(jì)過(guò)程。

作品三：使用流程示意圖 創(chuàng)作靈感：產(chǎn)品經(jīng)理給出的這個(gè)圖很嚴(yán)謹(jǐn)，但是對(duì)于用戶來(lái)說(shuō)理解起來(lái)比較困難，因此先用線框圖把它簡(jiǎn)化為單向的流程圖，但這樣又不夠美觀和直觀。心靈手巧的視覺(jué)設(shè)計(jì)師經(jīng)過(guò)圖形的美化，巧妙解決了這個(gè)問(wèn)題。 原始圖： 修改中（局部）： 改良后：
作品四：方案描述示意圖 和上個(gè)作品類似，也是先梳理信息邏輯，用更易懂的方式去表現(xiàn)，再通過(guò)視覺(jué)設(shè)計(jì)師美化。 原始圖： 改良圖： 還有其它很多作品，在這里就不一一展現(xiàn)了。完成這些作品后，我積累了哪些經(jīng)驗(yàn)和心得呢？ 信息可視化的設(shè)計(jì)標(biāo)準(zhǔn) 要想把一件事情做好，首先要知道做好的標(biāo)準(zhǔn)是什么。在我和小伙伴們一起完善信息可視化作品的過(guò)程中，我們經(jīng)歷了無(wú)數(shù)的修改，把這些失敗的作品放到一起，就可以大概得出失敗的原因是什么，而好的標(biāo)準(zhǔn)又是什么了。 這些就是我歸納總結(jié)出的四條標(biāo)準(zhǔn)，下面我就來(lái)一一解釋： 這個(gè)我就不多說(shuō)了，地球人都能理解。 信息圖要美，但美不是最重要的，最重要的是更直觀、清晰地傳達(dá)信息。舉個(gè)例子：下面這個(gè)圖是我前后兩版設(shè)計(jì)的信息圖，內(nèi)容是一樣的，但形式上，哪個(gè)更好懂？ 很明顯，右圖看上去更直觀、更清晰。因?yàn)橥瑯拥膬?nèi)容，右圖用了對(duì)稱的形式，理解起來(lái)省了一半力氣。所以我們?cè)谠O(shè)計(jì)信息圖時(shí)，一定不要淺嘗輒止，要努力尋找最佳方式，讓信息更簡(jiǎn)明易懂。 “正確”是信息圖最基本的要求。信息圖再好看、再易懂，但如果讀者對(duì)它的理解都不正確，那這個(gè)圖就沒(méi)有任何的價(jià)值。 舉個(gè)例子，下面這個(gè)圖描述了某產(chǎn)品中子模塊的關(guān)系?？吹竭@個(gè)圖，我以為這些子模塊遵循從1到5的先后依賴關(guān)系，但實(shí)際上不是這樣的。這就說(shuō)明圖形傳達(dá)信息的方式不正確。

下面要說(shuō)的“一致”是比較容易被人忽略的，但它也是非常重要的一點(diǎn)。當(dāng)你的產(chǎn)品有多個(gè)頁(yè)面涉及信息可視化時(shí)，不考慮“一致”會(huì)讓閱讀者難以理解，產(chǎn)生混亂。
既然我們保證圖片表達(dá)的內(nèi)容是真實(shí)的、正確的，那么就一定要考慮到事實(shí)的邏輯性。影視劇中大家總對(duì)“穿幫”鏡頭津津樂(lè)道，就是因?yàn)樗环先藗兊恼鎸?shí)認(rèn)知，從而顯得很“假”。 為什么“穿幫”現(xiàn)象難以避免呢？

• 因?yàn)闀r(shí)間、天氣等原因沒(méi)有一次拍完整
• 導(dǎo)演突然有了新想法，在原有基礎(chǔ)上補(bǔ)拍一些內(nèi)容
• 重新剪裁或重組內(nèi)容

看，是不是和設(shè)計(jì)過(guò)程非常的相似？

• 工作量太大，設(shè)計(jì)師一天完不成
• 中間突然穿插了其它工作
• 后面又有了新想法
• 修改的內(nèi)容過(guò)多，部分遺漏或忘記更新

因此設(shè)計(jì)“穿幫”現(xiàn)象也是難以避免的。比如下圖，在其中一張圖中，“安全產(chǎn)品”是用的小鎖的圖標(biāo)，而到了另一張圖中，“安全產(chǎn)品”變成了“安全中心”，圖形也變成了盾牌形。這樣就會(huì)讓用戶感到疑惑：這兩個(gè)是一回事嗎？

我們?cè)谠O(shè)計(jì)過(guò)程中，有很大一部分精力放在了檢查和修改“穿幫”中，不要認(rèn)為這是一件小事，細(xì)節(jié)決定成敗！高度一致性的圖形，既易懂，又提升品牌形象，更提升設(shè)計(jì)效率。符合邏輯的視覺(jué)語(yǔ)言設(shè)定，是信息可視化中必不可少卻又容易忽略的，應(yīng)該引起設(shè)計(jì)師的關(guān)注。 在下篇文章中，我會(huì)舉一個(gè)完整的案例來(lái)講解做信息可視化的方法和過(guò)程。