您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 設(shè)計(jì)欣賞 >> 瀏覽設(shè)計(jì)教程

那些信息可視化圖表設(shè)計(jì)欣賞

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

圖趣之前分享的教程:盤點(diǎn)信息可視化趨勢(shì)。

我們用一個(gè)簡(jiǎn)單的例子來說明一下信息可視化:


1副本


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


2


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


3


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


4副本



5副本



6副本


(一)圖表類型

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

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

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


8副本



9副本


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

2、敘事插圖型圖表


11副本


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

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


12副本



13副本


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

4、時(shí)間表述類示意圖


14副本



15副本


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

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


16副本



17副本


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

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

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


18副本


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

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

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


19



20


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

2、高吸引度與視覺亮點(diǎn)

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


21副本



22副本


3、畫面簡(jiǎn)潔明了

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


23副本



24副本


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

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

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

25副本


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

5、象征圖釋

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


26副本


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

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

[教程作者:百度UED]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://likemindfilms.com/tutorial/de2957.html
25個(gè)創(chuàng)意靈動(dòng)的優(yōu)秀深色網(wǎng)站欣賞
一組版式過人的「大字體」風(fēng)格優(yōu)秀網(wǎng)站欣賞
圖趣網(wǎng)微信
建議反饋
×