2015-4-21 周周
@劉津legene ：上篇文章講了信息可視化的標準，這篇來說明一下我在最近項目中設(shè)計信息可視化作品的過程，實戰(zhàn)好文一篇，附有通用流程，非常值得收藏的干貨 >>>
通過項目中各種痛苦的嘗試，結(jié)合信息可視化標準，最終我歸納出這樣一個比較通用的流程：
Step 1：確定表意正確
在上一篇文章中已經(jīng)提到：“正確”是信息圖最基本的要求，所以這里首先要確保信息圖的內(nèi)容是正確的。跟據(jù)問題的復(fù)雜程度不同，一般有兩種做法：
第一種做法：
對于業(yè)務(wù)比較復(fù)雜難理解的產(chǎn)品，可以讓產(chǎn)品經(jīng)理先根據(jù)自己的理解畫一個圖，設(shè)計師和產(chǎn)品經(jīng)理進行溝通，確認雙方的理解是一致的；如果產(chǎn)品經(jīng)理畫的圖沒能正確的表達清楚內(nèi)容，那么設(shè)計師就在自己理解的基礎(chǔ)上重新完善，然后雙方再度確認，保證圖形正確的傳達了想表達的含義。
比如上面這個圖（“御膳房”子產(chǎn)品數(shù)據(jù)引擎），產(chǎn)品經(jīng)理先隨意畫了一個草圖給我看，我沒太看懂，讓產(chǎn)品經(jīng)理講了一遍他的想法，發(fā)現(xiàn)與我自己理解的相差甚遠；然后我跟據(jù)產(chǎn)品經(jīng)理講的內(nèi)容又重新完善了一個草圖，拿給他看，他指出了其中一些我理解不對的地方，我再修改，直至雙方達成一致。
第二種做法：
如果設(shè)計師對產(chǎn)品有大致的了解，也可以自己動手畫草圖。然后產(chǎn)品經(jīng)理審核看是否正確的表達了產(chǎn)品邏輯，如果有問題則提出，設(shè)計師跟據(jù)意見進行修改，直至雙方達成一致。
比如上面這個圖（“御膳房”總產(chǎn)品結(jié)構(gòu)圖），就是我跟據(jù)自己的理解畫的“御膳房”產(chǎn)品結(jié)構(gòu)圖，產(chǎn)品經(jīng)理沒有提出異議，于是順利進入到第二個環(huán)節(jié)。
Step 2：優(yōu)化展現(xiàn)形式
內(nèi)容正確還不夠，還要易懂。我們需要在這個步驟里尋找信息圖最優(yōu)表現(xiàn)形式，讓讀者一目了然，降低理解難度。
《淘寶技術(shù)這十年》里有一句話說的好“好的架構(gòu)圖充滿美感”。淘寶工程師用十年的時間證明了這件事。而其實不僅是技術(shù)架構(gòu)圖，好的流程圖、結(jié)構(gòu)圖、信息圖等都充滿美感。跟據(jù)我的經(jīng)驗，它們往往是對稱、飽滿、和諧的，這難道是巧合嗎？我也不知道，大自然就是如此神奇。如果你繪制的信息圖臃腫、雜亂、不美觀，那可能并不是因為事實雜亂無序，而是你的表達出了問題。
那么怎樣優(yōu)化信息圖的表達形式呢？如果是一個邏輯比較復(fù)雜的結(jié)構(gòu)圖，可以這樣：
比如下面這個圖（“御膳房”子產(chǎn)品數(shù)據(jù)引擎），我開始是這樣畫的。雖然邏輯沒有錯誤，但是箭頭有交叉，看起來不美觀簡潔，理解起來也比較費勁。那么怎么改良呢？
首先，從這個圖中找出一個最大的完整的事件，也就是圖中橙色的部分。
有意思的是，在圖即將完成時，發(fā)現(xiàn)有個地方多了條支線，導(dǎo)致圖形無法完全對稱，非常可惜。最后詢問PD，發(fā)現(xiàn)這條支線是由于理解錯誤造成的，本來就應(yīng)該去掉。
PD是什么？縮寫常識學(xué)起來：《小常識學(xué)起來！設(shè)計師最好知道一下的常用縮寫》
當時的草圖繪制過程：
第一個圖和第二個圖的內(nèi)容一樣，修改后是不是容易理解多了呢？第三個圖是在第二個圖的基礎(chǔ)上增加了一些細節(jié)信息。我們在考慮最優(yōu)展現(xiàn)形式時，可以先不考慮細節(jié)，只考慮基礎(chǔ)的框架結(jié)構(gòu)，這樣更容易發(fā)現(xiàn)問題所在。
Step 3：探索視覺風(fēng)格
在探索視覺風(fēng)格時要注意抓大放小，先定下來最主要模塊的風(fēng)格，再做延展。比如我現(xiàn)在在做的御膳房產(chǎn)品，就是要先定下來產(chǎn)品結(jié)構(gòu)圖的視覺風(fēng)格，再延展到子產(chǎn)品的信息圖上。如果先設(shè)計子產(chǎn)品的信息圖風(fēng)格，就很難延展到總體結(jié)構(gòu)圖上了，會起到事倍功半的效果。
首先先尋找一些競品和素材，發(fā)散一下思維，同時也確定一下自己想要的感覺。
我想要的感覺是：科技感的、扁平化的、形式新穎有趣味……
接下來，就進入了視覺設(shè)計師最最痛苦的“探索、修改”無限循環(huán)的過程了。
第一版（卡通）：
視覺設(shè)計師第一次嘗試的是卡通版本。這個版本很美觀，但是對產(chǎn)品的表述內(nèi)容太少，不夠全面。卡通風(fēng)格也不太適合表現(xiàn)這樣一款大型的阿里大數(shù)據(jù)官方產(chǎn)品，且風(fēng)格不好拓展。
第二版（寫實）：
吸取了第一次的教訓(xùn)，視覺設(shè)計師第二次嘗試的是寫實版本。這回雖然可以詳細的表達產(chǎn)品內(nèi)容了，但不夠直觀和一目了然，閱讀起來索然無味。
第三版（突破）：
吸取了前兩次的教訓(xùn)，設(shè)計師開始尋找一些更趣味、更科技感的表現(xiàn)形式。但這個版本易讀性一般，尤其是左邊的樣式很不好拓展。但是左邊這張圖給人感覺很貼合大數(shù)據(jù)那種高科技、前衛(wèi)的感覺，這和我想要的感覺十分接近。
第四版（改良）：
雖然前面這幾版都沒有被采用，但方向卻越來越清晰了。我們決定在左上圖的基礎(chǔ)上做改進，去掉一些瑣碎的視覺元素，突出主體，使之更易讀。但改完后我覺得整體效果并不好，顯得很單薄，而且易讀性依然不好。所以需要換個思路再繼續(xù)嘗試。
第五版（終稿）：
結(jié)合前面的經(jīng)驗教訓(xùn)，視覺設(shè)計師認真聽取了大家的感受和建議，重新整理了思路，這次一氣呵成。這版雖然沒有特別驚艷的感覺，但是綜合分數(shù)高：無論是美觀度、還是易讀性、正確性、拓展性都比較好。所以最終敲定了這版。
Step 4：完善細節(jié)
探索視覺風(fēng)格時，并不需要做的非常細，可以先不考慮細節(jié)，只考慮主要框架，這樣效率會高一些。視覺風(fēng)格確定后，可根據(jù)需要添加、完善細節(jié)。
Step 5：風(fēng)格延展
我在上一篇講過：“一致”的視覺設(shè)定有助于用戶理解，也能更好的提升品牌形象。所以主風(fēng)格確定后，我們需要把它延展到其它有需要的頁面上。那么如何延展呢？需要先做一個簡單的視覺風(fēng)格設(shè)定，就像界面規(guī)范一樣。
比如在產(chǎn)品結(jié)構(gòu)圖中，四個子產(chǎn)品用的不同的顏色，那么我們在其它頁面或相關(guān)的圖形內(nèi)容中，也要用這四種色系來代表這四種產(chǎn)品。定義深淺是考慮到面積、視覺層次的不同來靈活調(diào)整，使界面整體和諧統(tǒng)一。這樣既保持了整體風(fēng)格的一致性，又賦予每種產(chǎn)品獨特的個性，增強信息的識別度。
由于這是我第一次比較系統(tǒng)的接觸信息可視化相關(guān)內(nèi)容，所以犯錯誤在所難免，我把這些教訓(xùn)記錄下來，希望能讓其他初學(xué)者避免我犯的錯誤：
藍藍設(shè)計的小編 http://www.gyxygd.cn