@劉津legene ：上篇文章講了信息可視化的標(biāo)準(zhǔn)，這篇來(lái)說(shuō)明一下我在最近項(xiàng)目中設(shè)計(jì)信息可視化作品的過(guò)程，實(shí)戰(zhàn)好文一篇，附有通用流程，非常值得收藏的干貨 >>>

信息可視化的設(shè)計(jì)過(guò)程

通過(guò)項(xiàng)目中各種痛苦的嘗試，結(jié)合信息可視化標(biāo)準(zhǔn)，最終我歸納出這樣一個(gè)比較通用的流程：

Step 1：確定表意正確

在上一篇文章中已經(jīng)提到：“正確”是信息圖最基本的要求，所以這里首先要確保信息圖的內(nèi)容是正確的。跟據(jù)問(wèn)題的復(fù)雜程度不同，一般有兩種做法：

第一種做法：

對(duì)于業(yè)務(wù)比較復(fù)雜難理解的產(chǎn)品，可以讓產(chǎn)品經(jīng)理先根據(jù)自己的理解畫(huà)一個(gè)圖，設(shè)計(jì)師和產(chǎn)品經(jīng)理進(jìn)行溝通，確認(rèn)雙方的理解是一致的；如果產(chǎn)品經(jīng)理畫(huà)的圖沒(méi)能正確的表達(dá)清楚內(nèi)容，那么設(shè)計(jì)師就在自己理解的基礎(chǔ)上重新完善，然后雙方再度確認(rèn)，保證圖形正確的傳達(dá)了想表達(dá)的含義。

比如上面這個(gè)圖（“御膳房”子產(chǎn)品數(shù)據(jù)引擎），產(chǎn)品經(jīng)理先隨意畫(huà)了一個(gè)草圖給我看，我沒(méi)太看懂，讓產(chǎn)品經(jīng)理講了一遍他的想法，發(fā)現(xiàn)與我自己理解的相差甚遠(yuǎn)；然后我跟據(jù)產(chǎn)品經(jīng)理講的內(nèi)容又重新完善了一個(gè)草圖，拿給他看，他指出了其中一些我理解不對(duì)的地方，我再修改，直至雙方達(dá)成一致。

第二種做法：

如果設(shè)計(jì)師對(duì)產(chǎn)品有大致的了解，也可以自己動(dòng)手畫(huà)草圖。然后產(chǎn)品經(jīng)理審核看是否正確的表達(dá)了產(chǎn)品邏輯，如果有問(wèn)題則提出，設(shè)計(jì)師跟據(jù)意見(jiàn)進(jìn)行修改，直至雙方達(dá)成一致。

比如上面這個(gè)圖（“御膳房”總產(chǎn)品結(jié)構(gòu)圖），就是我跟據(jù)自己的理解畫(huà)的“御膳房”產(chǎn)品結(jié)構(gòu)圖，產(chǎn)品經(jīng)理沒(méi)有提出異議，于是順利進(jìn)入到第二個(gè)環(huán)節(jié)。

Step 2：優(yōu)化展現(xiàn)形式

內(nèi)容正確還不夠，還要易懂。我們需要在這個(gè)步驟里尋找信息圖最優(yōu)表現(xiàn)形式，讓讀者一目了然，降低理解難度。

《淘寶技術(shù)這十年》里有一句話說(shuō)的好“好的架構(gòu)圖充滿美感”。淘寶工程師用十年的時(shí)間證明了這件事。而其實(shí)不僅是技術(shù)架構(gòu)圖，好的流程圖、結(jié)構(gòu)圖、信息圖等都充滿美感。跟據(jù)我的經(jīng)驗(yàn)，它們往往是對(duì)稱、飽滿、和諧的，這難道是巧合嗎？我也不知道，大自然就是如此神奇。如果你繪制的信息圖臃腫、雜亂、不美觀，那可能并不是因?yàn)槭聦?shí)雜亂無(wú)序，而是你的表達(dá)出了問(wèn)題。

那么怎樣優(yōu)化信息圖的表達(dá)形式呢？如果是一個(gè)邏輯比較復(fù)雜的結(jié)構(gòu)圖，可以這樣：

比如下面這個(gè)圖（“御膳房”子產(chǎn)品數(shù)據(jù)引擎），我開(kāi)始是這樣畫(huà)的。雖然邏輯沒(méi)有錯(cuò)誤，但是箭頭有交叉，看起來(lái)不美觀簡(jiǎn)潔，理解起來(lái)也比較費(fèi)勁。那么怎么改良呢？

首先，從這個(gè)圖中找出一個(gè)最大的完整的事件，也就是圖中橙色的部分。

有意思的是，在圖即將完成時(shí)，發(fā)現(xiàn)有個(gè)地方多了條支線，導(dǎo)致圖形無(wú)法完全對(duì)稱，非常可惜。最后詢問(wèn)PD，發(fā)現(xiàn)這條支線是由于理解錯(cuò)誤造成的，本來(lái)就應(yīng)該去掉。

PD是什么？縮寫(xiě)常識(shí)學(xué)起來(lái)：《小常識(shí)學(xué)起來(lái)！設(shè)計(jì)師最好知道一下的常用縮寫(xiě)》

當(dāng)時(shí)的草圖繪制過(guò)程：

第一個(gè)圖和第二個(gè)圖的內(nèi)容一樣，修改后是不是容易理解多了呢？第三個(gè)圖是在第二個(gè)圖的基礎(chǔ)上增加了一些細(xì)節(jié)信息。我們?cè)诳紤]最優(yōu)展現(xiàn)形式時(shí)，可以先不考慮細(xì)節(jié)，只考慮基礎(chǔ)的框架結(jié)構(gòu)，這樣更容易發(fā)現(xiàn)問(wèn)題所在。

Step 3：探索視覺(jué)風(fēng)格

在探索視覺(jué)風(fēng)格時(shí)要注意抓大放小，先定下來(lái)最主要模塊的風(fēng)格，再做延展。比如我現(xiàn)在在做的御膳房產(chǎn)品，就是要先定下來(lái)產(chǎn)品結(jié)構(gòu)圖的視覺(jué)風(fēng)格，再延展到子產(chǎn)品的信息圖上。如果先設(shè)計(jì)子產(chǎn)品的信息圖風(fēng)格，就很難延展到總體結(jié)構(gòu)圖上了，會(huì)起到事倍功半的效果。

首先先尋找一些競(jìng)品和素材，發(fā)散一下思維，同時(shí)也確定一下自己想要的感覺(jué)。

我想要的感覺(jué)是：科技感的、扁平化的、形式新穎有趣味……

接下來(lái)，就進(jìn)入了視覺(jué)設(shè)計(jì)師最最痛苦的“探索、修改”無(wú)限循環(huán)的過(guò)程了。

第一版（卡通）：

視覺(jué)設(shè)計(jì)師第一次嘗試的是卡通版本。這個(gè)版本很美觀，但是對(duì)產(chǎn)品的表述內(nèi)容太少，不夠全面?？ㄍL(fēng)格也不太適合表現(xiàn)這樣一款大型的阿里大數(shù)據(jù)官方產(chǎn)品，且風(fēng)格不好拓展。

第二版（寫(xiě)實(shí)）：

吸取了第一次的教訓(xùn)，視覺(jué)設(shè)計(jì)師第二次嘗試的是寫(xiě)實(shí)版本。這回雖然可以詳細(xì)的表達(dá)產(chǎn)品內(nèi)容了，但不夠直觀和一目了然，閱讀起來(lái)索然無(wú)味。

第三版（突破）：

吸取了前兩次的教訓(xùn)，設(shè)計(jì)師開(kāi)始尋找一些更趣味、更科技感的表現(xiàn)形式。但這個(gè)版本易讀性一般，尤其是左邊的樣式很不好拓展。但是左邊這張圖給人感覺(jué)很貼合大數(shù)據(jù)那種高科技、前衛(wèi)的感覺(jué)，這和我想要的感覺(jué)十分接近。

第四版（改良）：

雖然前面這幾版都沒(méi)有被采用，但方向卻越來(lái)越清晰了。我們決定在左上圖的基礎(chǔ)上做改進(jìn)，去掉一些瑣碎的視覺(jué)元素，突出主體，使之更易讀。但改完后我覺(jué)得整體效果并不好，顯得很單薄，而且易讀性依然不好。所以需要換個(gè)思路再繼續(xù)嘗試。

第五版（終稿）：

結(jié)合前面的經(jīng)驗(yàn)教訓(xùn)，視覺(jué)設(shè)計(jì)師認(rèn)真聽(tīng)取了大家的感受和建議，重新整理了思路，這次一氣呵成。這版雖然沒(méi)有特別驚艷的感覺(jué)，但是綜合分?jǐn)?shù)高：無(wú)論是美觀度、還是易讀性、正確性、拓展性都比較好。所以最終敲定了這版。

Step 4：完善細(xì)節(jié)

探索視覺(jué)風(fēng)格時(shí)，并不需要做的非常細(xì)，可以先不考慮細(xì)節(jié)，只考慮主要框架，這樣效率會(huì)高一些。視覺(jué)風(fēng)格確定后，可根據(jù)需要添加、完善細(xì)節(jié)。

Step 5：風(fēng)格延展

我在上一篇講過(guò)：“一致”的視覺(jué)設(shè)定有助于用戶理解，也能更好的提升品牌形象。所以主風(fēng)格確定后，我們需要把它延展到其它有需要的頁(yè)面上。那么如何延展呢？需要先做一個(gè)簡(jiǎn)單的視覺(jué)風(fēng)格設(shè)定，就像界面規(guī)范一樣。

比如在產(chǎn)品結(jié)構(gòu)圖中，四個(gè)子產(chǎn)品用的不同的顏色，那么我們?cè)谄渌?yè)面或相關(guān)的圖形內(nèi)容中，也要用這四種色系來(lái)代表這四種產(chǎn)品。定義深淺是考慮到面積、視覺(jué)層次的不同來(lái)靈活調(diào)整，使界面整體和諧統(tǒng)一。這樣既保持了整體風(fēng)格的一致性，又賦予每種產(chǎn)品獨(dú)特的個(gè)性，增強(qiáng)信息的識(shí)別度。

寫(xiě)在最后：經(jīng)驗(yàn)總結(jié)

由于這是我第一次比較系統(tǒng)的接觸信息可視化相關(guān)內(nèi)容，所以犯錯(cuò)誤在所難免，我把這些教訓(xùn)記錄下來(lái)，希望能讓其他初學(xué)者避免我犯的錯(cuò)誤：

• 當(dāng)設(shè)計(jì)一整套圖形，或相互有關(guān)聯(lián)的圖形時(shí)，要注意先從整體考慮，抓大放小。我當(dāng)時(shí)就是沒(méi)有系統(tǒng)的考慮，子產(chǎn)品的圖確定了，就讓視覺(jué)設(shè)計(jì)師趕緊做，結(jié)果發(fā)現(xiàn)和主圖難以配套統(tǒng)一，浪費(fèi)了很多時(shí)間，也增加了視覺(jué)設(shè)計(jì)師的工作量。

• 信息可視化不光是讓視覺(jué)設(shè)計(jì)師畫(huà)幾幅圖這么簡(jiǎn)單，規(guī)劃環(huán)節(jié)必不可少。我開(kāi)始以為信息可視化是視覺(jué)設(shè)計(jì)師的事情，跟交互設(shè)計(jì)師沒(méi)有關(guān)系，后來(lái)才慢慢發(fā)現(xiàn)，把希望全部寄托在視覺(jué)設(shè)計(jì)師身上是不切實(shí)際的。信息可視化要想做好既需要透徹理解產(chǎn)品，也需要很強(qiáng)大的交互技能，更需要激情與責(zé)任心。需要產(chǎn)品經(jīng)理、交互設(shè)計(jì)師和視覺(jué)設(shè)計(jì)師密切配合，而不是互相推脫，把壓力全留給視覺(jué)設(shè)計(jì)師。

• 好的信息圖充滿美感，它們往往是對(duì)稱的、和諧的；先完成最小事件的圖形，再逐漸補(bǔ)充。我開(kāi)始就忽略了這點(diǎn)，以為把信息準(zhǔn)確表達(dá)清楚了，再讓視覺(jué)設(shè)計(jì)師稍加美化就行了，沒(méi)有想要去探索最佳的圖形展現(xiàn)形式，直到有一天看到了一位運(yùn)營(yíng)在PPT中畫(huà)的產(chǎn)品圖才驚呼：原來(lái)還可以這樣！所以做信息可視化永無(wú)止境，永遠(yuǎn)有發(fā)揮的空間。

• 注意細(xì)節(jié)的匹配、一致性。這點(diǎn)作為一個(gè)交互設(shè)計(jì)師，我自然很注意，但我發(fā)現(xiàn)其他人未必在意。比如兩個(gè)子產(chǎn)品的結(jié)構(gòu)圖，可能一個(gè)圖有邊，一個(gè)圖沒(méi)邊；或者同樣放標(biāo)題的位置，顏色或樣式不一樣；同樣性質(zhì)的標(biāo)簽陰影的角度和方向不一樣……這些問(wèn)題簡(jiǎn)直無(wú)窮無(wú)盡。也許這些都是微不足道的小事情，但是品牌無(wú)小事，細(xì)節(jié)確定成敗，我堅(jiān)信這一點(diǎn)。