設(shè)計(jì)趨勢(shì)，探討信息可視化的流程和方法（下）(3)

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

第三版（突破）：

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

第四版（改良）：

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

第五版（終稿）：

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

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

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

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

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

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

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

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

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