信息可視化圖表設(shè)計

2015-6-11    用心設(shè)計


藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


每一個扁平化界面設(shè)計,都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計

來源:莫貝網(wǎng)

信息可視化包括了信息圖形、知識、科學(xué)、數(shù)據(jù)等的可視化表現(xiàn)形式,以及視覺可視化設(shè)計方面的進(jìn)步與發(fā)展。地圖、表格、圖形,甚至包括文本在內(nèi),都是 信息的表現(xiàn)形式,無論它是動態(tài)的或是靜態(tài)的,都可以讓我們從中了解到我們想知道的內(nèi)容,發(fā)現(xiàn)各式各樣的關(guān)系,達(dá)到最終解決問題的目的。信息可視化的意義就是在于運用形象化方式把不易被理解的抽象信息直觀地表現(xiàn)和傳達(dá)出來。

 

我們用一個簡單的例子來說明一下信息可視化:

1副本

上圖所示是信任圈,一款基于Google+的信息可視化應(yīng)用。Google+是一款類似于微博的社交軟件,圖中我們可以看到綠色為相互關(guān)注的人,黃 色為你關(guān)注了他而對方?jīng)]有關(guān)注你的人,紅色為單方面關(guān)注你的人。這樣一個信息圖就可以清楚的反應(yīng)出在Google+上,人與人之間的信任關(guān)系,這一抽象概 念。

2

從上圖看三位名人的信任圈就可以非常清楚明了的了解他們的交友狀態(tài)這一更為抽象的概念。1為小甜甜布萊尼,2為英國著名音樂制作人,3為 facebook 馬克。而圖表呢?根據(jù)道格·紐瑟姆2004年定義,從表現(xiàn)形式的角度“信息圖表”作為視覺工具應(yīng)包括以下六類:圖表、圖解、圖形、表格、地圖、列表。

3

 

信息可視化圖表則隸屬于視覺傳達(dá)的一種設(shè)計,是以凝練、直觀和清晰的視覺語言,通過梳理數(shù)據(jù)構(gòu)建圖形、通過圖形構(gòu)建符號、通過符號構(gòu)建信息,以視覺化的邏輯語言對信息進(jìn)行剖析視覺傳達(dá)方式。

4副本

5副本

6副本

 

(一)圖表類型

信息可視化圖表能使復(fù)雜問題簡單化,能以直觀方式傳達(dá)抽象信息,使枯燥的數(shù)據(jù)轉(zhuǎn)化為具有人性色彩的圖表,從而抓住閱讀群體的眼球。

設(shè)計的目的決定了圖表設(shè)計的形式,按照形式特點我們常把圖表分為關(guān)系流程圖、敘事插圖型、樹型結(jié)構(gòu)圖、時間分布類及空間解構(gòu)類五種類型。不管何種類 型,都是運用列表、對照、圖解、標(biāo)注、連接等表述手段,使視覺語言最大化的融入信息之中,使信息的傳達(dá)直觀化、圖像化、藝術(shù)化。

 

1、關(guān)系流程類圖表

8副本

9副本

我們用語言難以表述清楚的東西,如果借助于圖形來說明,效果就會好的多。如果想說明的事情需要費勁腦筋、費勁口舌來表述,而且也許自己講起來也會是 一團(tuán)亂麻,即使從頭至尾的給閱讀群體講一遍內(nèi)容都會有遺漏或亂頭緒的地方。如果有圖形輔助就不一樣了,我們可以迅速的找到表述亮點或表述事件的主干,這樣 能讓你的主題和思路清晰動人。
2、敘事插圖型圖表

11副本

敘事性圖表就是強(qiáng)調(diào)時間維度,并隨著時間的推移,信息也不斷有變化的圖表。插圖型圖表就是用詼諧幽默的圖畫表達(dá)信息的圖表。

 

3、樹狀結(jié)構(gòu)示意圖

12副本

13副本

樹狀結(jié)構(gòu)圖具有非常有序的系統(tǒng)特征,可以把繁復(fù)的數(shù)據(jù)通過分支梳理的方式表達(dá)清楚。運用分組,每組再次分類的主體框架表示主從結(jié)構(gòu),讓數(shù)據(jù)與示意圖有效的結(jié)合在一起。

 

4、時間表述類示意圖

14副本

15副本

時間表述類示意圖只要以時間軸為中心加入文字?jǐn)?shù)據(jù)即可。從設(shè)計的角度來看,將主題融入圖形設(shè)計中,挑選重要事件點解讀,就可以使畫面精美,加深理解力度。

 

5、空間結(jié)構(gòu)類示意圖

16副本

17副本

運用設(shè)計語言把繁雜結(jié)構(gòu)模型化、虛擬化是空間結(jié)構(gòu)示意圖存在的意義。大篇幅的文字講不清楚的事情,也許需要的僅僅是一個簡單的空間結(jié)構(gòu)示意圖。

 

(二)圖表設(shè)計流程

設(shè)計流程又是如何的呢?數(shù)據(jù)內(nèi)容從哪里來?圖表內(nèi)容怎么取舍?

18副本

從上面產(chǎn)出圖中可以看出這個流程需要協(xié)作完成,數(shù)據(jù)需要篩選和整理 ,精準(zhǔn)是首要條件,其次是梳理。找出出主線邏輯,篩選次要內(nèi)容從而進(jìn)行精心的設(shè)計。圖表作為信息傳達(dá)中的一種獨特的表現(xiàn)方式,已經(jīng)滲透到生活的各個方面。 它不僅僅是文字的補(bǔ)充說明更可以獨立表現(xiàn)內(nèi)容。完美的圖表創(chuàng)意是任何人都感到清晰明了的作品。我們現(xiàn)在就來關(guān)注它必備的幾大要素。

 

1、基礎(chǔ)圖形創(chuàng)意

在設(shè)計中基礎(chǔ)圖形創(chuàng)意是重中之中,柱狀圖和餅狀圖是最常用的兩種基礎(chǔ)圖形,但是簡單的幾何形態(tài)很難給人設(shè)計感。通過對基礎(chǔ)圖形的創(chuàng)意來突出設(shè)計主題,就可以取得一舉多得、事半功倍的效果。

19

20

上面圖片中左右的內(nèi)容是完全一致的,但右圖即使讀者不詳細(xì)關(guān)注也可心領(lǐng)神會。

 

2、高吸引度與視覺亮點

在讀者閱讀過程中,如果想要設(shè)計作品始終占據(jù)視覺的主導(dǎo)地位,就需要作品本身具有很好的表現(xiàn)力。這需要我們費盡心思去讓讀者以最直觀的方式去理解作 品所要傳達(dá)的信息內(nèi)容。互聯(lián)網(wǎng)的發(fā)展使信息的更新速度非??焖伲瑥膫鹘y(tǒng)網(wǎng)頁到社交微博,用戶對信息的瀏覽速度也越來越快,高吸引度便是最寶貴的財富點。如 下面兩張圖片,風(fēng)趣幽默的表現(xiàn)手法,時下的熱點,都是我們設(shè)計的入手點。

21副本

22副本

 

3、畫面簡潔明了

圖表設(shè)計是直觀的、形象的、準(zhǔn)確的、明了的,它的表現(xiàn)手法雖然多種多樣,但是在信息傳達(dá)方面始終要堅持可讀性和條理性共存。

23副本

24副本

上面兩個圖表的優(yōu)勢就在于簡化了表格信息的同時讓人身臨其境。信息的整理和歸納也并不是越多越好,力求以最精簡的數(shù)據(jù)產(chǎn)出最清晰的效果,使人一目了然。

 

4、視覺導(dǎo)向與秩序

圖表的版面設(shè)計要充分尊重人們的閱讀習(xí)慣,當(dāng)一張圖表中充斥了大量的信息時,需要設(shè)計者合理地利用視線移動規(guī)律,將信息順暢有效地傳達(dá)給讀者。25副本

如上圖所示,遵循視覺導(dǎo)向規(guī)律的設(shè)計往往可以提高人們對信息的理解力,給人舒適的閱讀感受。反之,則會失去圖文重點,讓人不解其意,給人以雜亂無章的感覺。

 

5、象征圖釋

在圖表設(shè)計中,我們盡可能少用文字來表達(dá)信息含義,用圖說話,用圖溝通。其實在我們生活中,部分公共標(biāo)識就已經(jīng)很好的做到了這一點,公共場所出現(xiàn)的各種導(dǎo)視圖形,就起到了很好的指示說明作用,象征性圖釋要以受眾廣為前提和目標(biāo)。

26副本

如圖上圖所示,在設(shè)計的上要注重保持風(fēng)格的統(tǒng)一,這樣才能讓人視覺連貫、賞心悅目。

 

信息圖表不僅優(yōu)化了傳統(tǒng)的圖文閱讀方式,而且已經(jīng)成為當(dāng)下視覺傳達(dá)發(fā)展的必然趨勢。信息圖表不僅把枯燥的文字、數(shù)據(jù)變成美好的閱讀體驗,而且刷新了設(shè)計師們的設(shè)計思維方式,煥發(fā)出他們更豐富的設(shè)計潛能。

分享本文至:

日歷

鏈接

個人資料

存檔