信息可視化的設計過程

通過項目中各種痛苦的嘗試，結合信息可視化標準，最終我歸納出這樣一個比較通用的流程：

Step 1：確定表意正確

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

第一種做法：

對于業務比較復雜難理解的產品，可以讓產品經理先根據自己的理解畫一個圖，設計師和產品經理進行溝通，確認雙方的理解是一致的；如果產品經理畫的圖沒能正確的表達清楚內容，那么設計師就在自己理解的基礎上重新完善，然后雙方再度確認，保證圖形正確的傳達了想表達的含義。

比如上面這個圖（“御膳房”子產品數據引擎），產品經理先隨意畫了一個草圖給我看，我沒太看懂，讓產品經理講了一遍他的想法，發現與我自己理解的相差甚遠；然后我跟據產品經理講的內容又重新完善了一個草圖，拿給他看，他指出了其中一些我理解不對的地方，我再修改，直至雙方達成一致。

第二種做法：

如果設計師對產品有大致的了解，也可以自己動手畫草圖。然后產品經理審核看是否正確的表達了產品邏輯，如果有問題則提出，設計師跟據意見進行修改，直至雙方達成一致。

比如上面這個圖（“御膳房”總產品結構圖），就是我跟據自己的理解畫的“御膳房”產品結構圖，產品經理沒有提出異議，于是順利進入到第二個環節。

Step 2：優化展現形式

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

《淘寶技術這十年》里有一句話說的好“好的架構圖充滿美感”。淘寶工程師用十年的時間證明了這件事。而其實不僅是技術架構圖，好的流程圖、結構圖、信息圖等都充滿美感。跟據我的經驗，它們往往是對稱、飽滿、和諧的，這難道是巧合嗎？我也不知道，大自然就是如此神奇。如果你繪制的信息圖臃腫、雜亂、不美觀，那可能并不是因為事實雜亂無序，而是你的表達出了問題。

那么怎樣優化信息圖的表達形式呢？如果是一個邏輯比較復雜的結構圖，可以這樣：

比如下面這個圖（“御膳房”子產品數據引擎），我開始是這樣畫的。雖然邏輯沒有錯誤，但是箭頭有交叉，看起來不美觀簡潔，理解起來也比較費勁。那么怎么改良呢？

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

有意思的是，在圖即將完成時，發現有個地方多了條支線，導致圖形無法完全對稱，非常可惜。最后詢問PD，發現這條支線是由于理解錯誤造成的，本來就應該去掉。

PD是什么？縮寫常識學起來：《小常識學起來！設計師最好知道一下的常用縮寫》

當時的草圖繪制過程：

第一個圖和第二個圖的內容一樣，修改后是不是容易理解多了呢？第三個圖是在第二個圖的基礎上增加了一些細節信息。我們在考慮最優展現形式時，可以先不考慮細節，只考慮基礎的框架結構，這樣更容易發現問題所在。

Step 3：探索視覺風格

在探索視覺風格時要注意抓大放小，先定下來最主要模塊的風格，再做延展。比如我現在在做的御膳房產品，就是要先定下來產品結構圖的視覺風格，再延展到子產品的信息圖上。如果先設計子產品的信息圖風格，就很難延展到總體結構圖上了，會起到事倍功半的效果。

首先先尋找一些競品和素材，發散一下思維，同時也確定一下自己想要的感覺。

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

接下來，就進入了視覺設計師最最痛苦的“探索、修改”無限循環的過程了。

第一版（卡通）：

視覺設計師第一次嘗試的是卡通版本。這個版本很美觀，但是對產品的表述內容太少，不夠全面。卡通風格也不太適合表現這樣一款大型的阿里大數據官方產品，且風格不好拓展。

第二版（寫實）：

吸取了第一次的教訓，視覺設計師第二次嘗試的是寫實版本。這回雖然可以詳細的表達產品內容了，但不夠直觀和一目了然，閱讀起來索然無味。

第三版（突破）：

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

第四版（改良）：

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

第五版（終稿）：

結合前面的經驗教訓，視覺設計師認真聽取了大家的感受和建議，重新整理了思路，這次一氣呵成。這版雖然沒有特別驚艷的感覺，但是綜合分數高：無論是美觀度、還是易讀性、正確性、拓展性都比較好。所以最終敲定了這版。

Step 4：完善細節

探索視覺風格時，并不需要做的非常細，可以先不考慮細節，只考慮主要框架，這樣效率會高一些。視覺風格確定后，可根據需要添加、完善細節。

Step 5：風格延展

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

比如在產品結構圖中，四個子產品用的不同的顏色，那么我們在其它頁面或相關的圖形內容中，也要用這四種色系來代表這四種產品。定義深淺是考慮到面積、視覺層次的不同來靈活調整，使界面整體和諧統一。這樣既保持了整體風格的一致性，又賦予每種產品獨特的個性，增強信息的識別度。

寫在最后：經驗總結

由于這是我第一次比較系統的接觸信息可視化相關內容，所以犯錯誤在所難免，我把這些教訓記錄下來，希望能讓其他初學者避免我犯的錯誤：

當設計一整套圖形，或相互有關聯的圖形時，要注意先從整體考慮，抓大放小。我當時就是沒有系統的考慮，子產品的圖確定了，就讓視覺設計師趕緊做，結果發現和主圖難以配套統一，浪費了很多時間，也增加了視覺設計師的工作量。信息可視化不光是讓視覺設計師畫幾幅圖這么簡單，規劃環節必不可少。我開始以為信息可視化是視覺設計師的事情，跟交互設計師沒有關系，后來才慢慢發現，把希望全部寄托在視覺設計師身上是不切實際的。信息可視化要想做好既需要透徹理解產品，也需要很強大的交互技能，更需要激情與責任心。需要產品經理、交互設計師和視覺設計師密切配合，而不是互相推脫，把壓力全留給視覺設計師。好的信息圖充滿美感，它們往往是對稱的、和諧的；先完成最小事件的圖形，再逐漸補充。我開始就忽略了這點，以為把信息準確表達清楚了，再讓視覺設計師稍加美化就行了，沒有想要去探索最佳的圖形展現形式，直到有一天看到了一位運營在PPT中畫的產品圖才驚呼：原來還可以這樣！所以做信息可視化永無止境，永遠有發揮的空間。注意細節的匹配、一致性。這點作為一個交互設計師，我自然很注意，但我發現其他人未必在意。比如兩個子產品的結構圖，可能一個圖有邊，一個圖沒邊；或者同樣放標題的位置，顏色或樣式不一樣；同樣性質的標簽陰影的角度和方向不一樣……這些問題簡直無窮無盡。也許這些都是微不足道的小事情，但是品牌無小事，細節確定成敗，我堅信這一點。