信息圖表設(shè)計(jì)-課件

熱門有趣的信息圖是怎樣誕生的？2020/12/21熱門有趣的信息圖是怎樣誕生的？2020/12/21信息可視化(InformationVisualization)

：將復(fù)雜的信息通過(guò)圖形樣式清晰明了的傳達(dá)給讀者。信息可視化是一個(gè)跨學(xué)科的領(lǐng)域，其詳細(xì)深入的定義這里不做研討，本文主要針對(duì)其圖形化的產(chǎn)物信息圖進(jìn)行介紹。2020/12/22信息可視化(InformationVisualizatio精品資料精品資料你怎么稱呼老師？如果老師最后沒有總結(jié)一節(jié)課的重點(diǎn)的難點(diǎn)，你是否會(huì)認(rèn)為老師的教學(xué)方法需要改進(jìn)？你所經(jīng)歷的課堂，是講座式還是討論式？教師的教鞭“不怕太陽(yáng)曬，也不怕那風(fēng)雨狂，只怕先生罵我笨，沒有學(xué)問無(wú)顏見爹娘……”“太陽(yáng)當(dāng)空照，花兒對(duì)我笑，小鳥說(shuō)早早早……”信息圖表設(shè)計(jì)-ppt課件精品資料2020/12/25精品資料2020/12/25你怎么稱呼老師？如果老師最后沒有總結(jié)一節(jié)課的重點(diǎn)的難點(diǎn)，你是否會(huì)認(rèn)為老師的教學(xué)方法需要改進(jìn)？你所經(jīng)歷的課堂，是講座式還是討論式？教師的教鞭“不怕太陽(yáng)曬，也不怕那風(fēng)雨狂，只怕先生罵我笨，沒有學(xué)問無(wú)顏見爹娘……”“太陽(yáng)當(dāng)空照，花兒對(duì)我笑，小鳥說(shuō)早早早……”2020/12/262020/12/26可視化并不是什么全新的概念，生活中很多信息可視化例子：公共指示、統(tǒng)計(jì)圖、星級(jí)評(píng)分、五線譜…

2020/12/27可視化并不是什么全新的概念，生活中很多信息可視化例子：公共指信息圖最初是指報(bào)紙、雜志、新聞通訊社等媒體刊登的一般圖解。隨著信息可視化在大數(shù)據(jù)時(shí)代越來(lái)越被人重視，以及越來(lái)越多的設(shè)計(jì)師熱衷于以圖形化的方式結(jié)合視覺上的美感將信息傳達(dá)給讀者，使得信息圖越來(lái)越流行和被大眾所喜聞樂見。將原本很難用語(yǔ)言表達(dá)的信息，通過(guò)圖畫來(lái)加以說(shuō)明，使其容易理解，這是信息圖設(shè)計(jì)的目標(biāo)和理想。

2020/12/28信息圖最初是指報(bào)紙、雜志、新聞通訊社等媒體刊登的一般圖解。隨信息圖的分類

信息圖的分類有很多種，各分類之間也并不是涇渭分明，所以大可不必糾結(jié)什么樣的分法最正確，在木村博之所著的《圖解力》一書中，他將信息圖分為六大類：圖解（Diagram）、圖表（Chart）、表格（Table）、統(tǒng)計(jì)圖（Graph）、地圖（Map）、和圖形符號(hào)（Pictogram）。2020/12/29信息圖的分類信息圖的分類有很多種，各分類之間也并不是涇渭分圖解（Diagram）：主要運(yùn)用插圖對(duì)事物進(jìn)行說(shuō)明圖表（Chart）：運(yùn)用圖形、線條及插圖等，闡明事物的相互關(guān)系表格（Table）：根據(jù)特定信息標(biāo)準(zhǔn)進(jìn)行區(qū)分，設(shè)置縱軸與橫軸統(tǒng)計(jì)圖（Graph）：通過(guò)數(shù)值來(lái)表現(xiàn)變化趨勢(shì)或進(jìn)行比較地圖（Map）：描述在特定區(qū)域和空間里的位置關(guān)系圖形符號(hào)（Pictogram）：不使用文字，運(yùn)用圖畫直接傳達(dá)信息

2020/12/210圖解（Diagram）：主要運(yùn)用插圖對(duì)事物進(jìn)行說(shuō)明2020/信息圖制作流程

信息圖的制作是一個(gè)團(tuán)隊(duì)合作的過(guò)程，在平時(shí)的設(shè)計(jì)中可能并沒有嚴(yán)格按照下面的流程來(lái)做，但是可以從中理解到信息圖的核心是傳達(dá)主題！2020/12/211信息圖制作流程信息圖的制作是一個(gè)團(tuán)隊(duì)合作的過(guò)程，在平時(shí)的設(shè)2020/12/2122020/12/212制作信息圖的五大要素

2009年2月，由國(guó)際新聞媒體視覺設(shè)計(jì)協(xié)會(huì)（SND）主辦的新聞視覺設(shè)計(jì)大賽在美國(guó)紐約州Syracuse舉行，評(píng)審結(jié)束后，圖文設(shè)計(jì)組的專家們總結(jié)了他們認(rèn)為的在制作理想的信息圖時(shí)應(yīng)該考慮的五大要素：

2020/12/213制作信息圖的五大要素

2009年2月，由國(guó)際新聞媒體視覺設(shè)1.吸引眼球，令人心動(dòng)（Attractive）：在這個(gè)信息爆炸的時(shí)代，富有吸引力非常重要，應(yīng)該設(shè)計(jì)一些能夠讓讀者產(chǎn)生共鳴的東西。

FACEBOOKRealationshipsVisualized：極具視覺沖擊力和吸引力

2020/12/2141.吸引眼球，令人心動(dòng)（Attractive）：在這個(gè)信息2.準(zhǔn)確傳達(dá)，信息明了（Clear）：設(shè)計(jì)時(shí)要選擇一個(gè)最想要傳達(dá)給讀者的主題，把這個(gè)主題巧妙地表現(xiàn)出來(lái)。TheInternetMap:將全球網(wǎng)站以星系的形式表現(xiàn)，流量越大，表示圓點(diǎn)越大，顏色代表不同國(guó)家2020/12/2152.準(zhǔn)確傳達(dá)，信息明了（Clear）：設(shè)計(jì)時(shí)要選擇一個(gè)最想3.去粗取精，簡(jiǎn)單易懂（Simple）：從龐大的信息量中將真正必要的信息篩選出來(lái)，同時(shí)設(shè)計(jì)的表現(xiàn)手法同樣需要合理簡(jiǎn)化，突出重點(diǎn)

。倫敦地鐵路線圖進(jìn)化過(guò)程：查看1935年至1946年間貝克的路線圖設(shè)計(jì)，可以發(fā)現(xiàn)其換乘的表現(xiàn)手法有變化。1935年的換乘站點(diǎn)以方塊表示，車站的名稱要容納在其中，對(duì)字體的大小長(zhǎng)度都有了限制，讓人難以閱讀；1940年和1941年的線路圖，換乘站名稱寫在圓圈旁邊，但每條線路都會(huì)標(biāo)注同樣的名稱，出現(xiàn)多余文字信息；1946年的路線圖，相接的圓用白線連接，將換乘站用更容易識(shí)別的方式表現(xiàn)出來(lái)，之前重復(fù)的站名也改為只標(biāo)記一次，更簡(jiǎn)單和容易閱讀。2020/12/2163.去粗取精，簡(jiǎn)單易懂（Simple）：從龐大的信息量中將4.視線流動(dòng)，構(gòu)建時(shí)空（Flow）：充分利用人的閱讀習(xí)慣，注意視線移動(dòng)的規(guī)律；能夠通過(guò)設(shè)計(jì)營(yíng)造時(shí)空感HowLongDoAnimalsLive：通過(guò)線的引導(dǎo)聚集視覺焦點(diǎn)，讓讀者很流暢的瀏覽，圖中的動(dòng)物都處理成沿曲線行走的方向，方向性更加強(qiáng)烈。2020/12/2174.視線流動(dòng)，構(gòu)建時(shí)空（Flow）：充分利用人的閱讀習(xí)慣，5.摒棄文字，以圖釋義（Wordless）：對(duì)事物的結(jié)構(gòu)或流程等進(jìn)行說(shuō)明時(shí)，盡量避免使用文字，僅以圖形傳達(dá)信息各國(guó)問候禮儀：奈杰爾·霍姆斯的作品，在不使用文字說(shuō)明的情況下，解說(shuō)法國(guó)、荷蘭等國(guó)家的問候的禮儀。他還有很多類似的無(wú)文字說(shuō)明的圖解作品。2020/12/2185.摒棄文字，以圖釋義（Wordless）：對(duì)事物的結(jié)構(gòu)或信息圖設(shè)計(jì)的技巧

2020/12/219信息圖設(shè)計(jì)的技巧2020/12/219通過(guò)整理一些相關(guān)資料以及結(jié)合自己的經(jīng)驗(yàn)，我總結(jié)了一般信息圖設(shè)計(jì)中經(jīng)常涉及到的8類手法和技巧：圖形化、對(duì)比、轉(zhuǎn)換、比喻、關(guān)聯(lián)、流動(dòng)、引入時(shí)空、構(gòu)建場(chǎng)景。2020/12/220通過(guò)整理一些相關(guān)資料以及結(jié)合自己的經(jīng)驗(yàn)，我總結(jié)了一般信息圖設(shè)圖形化

運(yùn)用圖形，直觀明了

CoffeeDrinksIllustrated:關(guān)于咖啡種類的說(shuō)明，通過(guò)一杯咖啡的圖形樣式，不但直觀的表現(xiàn)出不同種類咖啡的成分組成，而且各成分之間的比例關(guān)系也一眼就看出。2020/12/221圖形化

運(yùn)用圖形，直觀明了CoffeeDrinksIl插圖輔助，生動(dòng)形象

MyWorkInTaobaoUED：這是我曾經(jīng)為淘寶工作時(shí)的流程而配的插圖；通過(guò)運(yùn)用插圖來(lái)表現(xiàn)每個(gè)職位人員的特征，讓畫面更生動(dòng)有趣，但是應(yīng)該加大各個(gè)角色之間的差異，有助于減少歧義，而且圖形和文字關(guān)系疏離，并沒有很好地結(jié)合。2020/12/222插圖輔助，生動(dòng)形象MyWorkInTaobaoUE用圖形來(lái)表示數(shù)值相關(guān)調(diào)研數(shù)據(jù)圖：將原本用柱狀圖或餅圖表示的數(shù)值改為用圖形個(gè)數(shù)來(lái)代替，顯得格外醒目，一眼就能看出各數(shù)值之間的差異程度，并且使畫面更加豐富生動(dòng)。2020/12/223用圖形來(lái)表示數(shù)值相關(guān)調(diào)研數(shù)據(jù)圖：將原本用柱狀圖或餅圖表示的數(shù)對(duì)比同類對(duì)比，表現(xiàn)差異化

世界高樓建設(shè)進(jìn)度（2006）：圖中將世界各個(gè)著名的高樓放在同一畫面中來(lái)做比較，不僅能明顯看出它們之間高度的差異，作者更要表達(dá)的是這些高樓目前的建設(shè)進(jìn)度，通過(guò)將高樓建成的部分進(jìn)行上色，而未建成的部分用線條勾勒，來(lái)進(jìn)行自身差異化的表現(xiàn)。2020/12/224對(duì)比同類對(duì)比，表現(xiàn)差異化世界高樓建設(shè)進(jìn)度（2006）：圖中用熟悉的事物來(lái)形象比較HowBigIsAYottabyte?：關(guān)于計(jì)算機(jī)不同字節(jié)的大小對(duì)比，如果按字節(jié)的定義，即使通過(guò)柱形圖對(duì)比表現(xiàn)出來(lái)，依然無(wú)法讓人直觀感受；圖中將不同的字節(jié)容量描述稱可以存儲(chǔ)的具體數(shù)據(jù)（圖片、音樂…），以及存儲(chǔ)這些數(shù)據(jù)需要的實(shí)體空間，非常形象具體。

2020/12/225用熟悉的事物來(lái)形象比較HowBigIsAYottab轉(zhuǎn)換通過(guò)手法轉(zhuǎn)換，以符合常識(shí)百年紀(jì)錄對(duì)比：馬拉松這類花時(shí)間越少，成績(jī)?cè)絻?yōu)秀的項(xiàng)目，如果用常規(guī)的柱狀圖繪制，那么明明最快的成績(jī)卻看上去感覺最慢。這張圖中將最快的記錄用100%表示，然后以此為基準(zhǔn)，畫出不同參賽者的相對(duì)位置，讓人一目了然。2020/12/226轉(zhuǎn)換通過(guò)手法轉(zhuǎn)換，以符合常識(shí)百年紀(jì)錄對(duì)比：馬拉松這類花時(shí)間越將一維的數(shù)據(jù)用面積表示TheAdvertisingWorldIn2012：如何在較小的空間表現(xiàn)差值較大的數(shù)據(jù)？可以將一維的數(shù)據(jù)用面積或者體積來(lái)表現(xiàn)；圖中關(guān)于世界各國(guó)廣告的花費(fèi)，作者將費(fèi)用換成面積并結(jié)合地理位置表現(xiàn)，很好的避免了空間不夠的尷尬。2020/12/227將一維的數(shù)據(jù)用面積表示TheAdvertisingWor比喻近似類比，賦予聯(lián)想U(xiǎn)nderskin：將人體內(nèi)部的血液循環(huán)系統(tǒng)比作地鐵路線圖，線路中的站點(diǎn)就是人體的主要器官。血液的不停流動(dòng)，物質(zhì)之間的交換，這和地鐵中循環(huán)運(yùn)轉(zhuǎn)的列車，站點(diǎn)之間的轉(zhuǎn)換確實(shí)有某些類似之處。2020/12/228比喻近似類比，賦予聯(lián)想U(xiǎn)nderskin：將人體內(nèi)部的血液循引申類比，營(yíng)造情景SocialMediaDemographics：這是一份關(guān)于社交媒體網(wǎng)站的用戶分析報(bào)告，將各個(gè)網(wǎng)站比喻成星球，活躍用戶數(shù)越多，則體積越大；并用環(huán)繞的行星表示用戶性別、年齡等的比例構(gòu)成。通過(guò)設(shè)計(jì)營(yíng)造出星系的場(chǎng)景感，極具故事性而且更加吸引人。2020/12/229引申類比，營(yíng)造情景SocialMediaDemograp關(guān)聯(lián)與相關(guān)事物組合展現(xiàn)數(shù)據(jù)TheFragmentedWorldOfDigitalMusic：一組音樂相關(guān)的數(shù)據(jù)，通過(guò)將數(shù)據(jù)和音箱喇叭的圖形組合，使讀者能自然而強(qiáng)烈的感知到作者要傳達(dá)的主題是音樂相關(guān)的。平面設(shè)計(jì)中也有相關(guān)理論，這是設(shè)計(jì)中經(jīng)常用到的手法。2020/12/230關(guān)聯(lián)與相關(guān)事物組合展現(xiàn)數(shù)據(jù)TheFragmentedWo運(yùn)用圖形和色彩呈現(xiàn)主題AllCriminal：介紹犯罪大全的圖示，巧妙地與囚服相結(jié)合，讓讀者一眼就能明白主題與犯罪相關(guān)；通過(guò)囚服條紋地色相變化來(lái)區(qū)別犯罪的種類和程度，并且對(duì)比明顯，讓人印象深刻。2020/12/231運(yùn)用圖形和色彩呈現(xiàn)主題AllCriminal：介紹犯罪大全流動(dòng)用環(huán)形圖表示流程ProjectsInTongJi：這是我在10年到12年間項(xiàng)目和實(shí)習(xí)經(jīng)歷的流程圖。最開始考慮用直線的時(shí)間軸去表現(xiàn)，但是在橫向空間中會(huì)顯得很局促，而采用曲線的話，方向感沒有那么單一強(qiáng)烈，后來(lái)用了環(huán)形圖來(lái)表示；考慮一般視線流動(dòng)的特點(diǎn)，順時(shí)針方向更加符合讀者瀏覽的習(xí)慣，尤其是與時(shí)間相關(guān)的流程。

2020/12/232流動(dòng)用環(huán)形圖表示流程ProjectsInTongJi：這使用箭頭，創(chuàng)造流動(dòng)感

IncreaseInExportsFromAfrica：箭頭的使用不但能表現(xiàn)出方向性，并且能讓靜止的圖片產(chǎn)生動(dòng)感。圖中通過(guò)箭頭的方向表示非洲出口的目標(biāo)國(guó)，并且通過(guò)箭頭的大小對(duì)比來(lái)表現(xiàn)不同的出口增長(zhǎng)率。2020/12/233使用箭頭，創(chuàng)造流動(dòng)感

IncreaseInExports結(jié)合時(shí)間和地點(diǎn)創(chuàng)建時(shí)空世界的歷史：從地球的插圖上，根據(jù)不同的區(qū)域分別抽取延長(zhǎng)線，以此展開年表。令讀者對(duì)位置產(chǎn)生直觀印象，同時(shí)理解各區(qū)域之間的聯(lián)系和歷史事件的大致時(shí)間順序。2020/12/234結(jié)合時(shí)間和地點(diǎn)創(chuàng)建時(shí)空世界的歷史：從地球的插圖上，根據(jù)不同的構(gòu)建場(chǎng)景結(jié)合實(shí)物場(chǎng)景，生動(dòng)展現(xiàn)數(shù)據(jù)農(nóng)場(chǎng)信息圖表：一組土地資源儲(chǔ)備的構(gòu)成比例圖，通過(guò)結(jié)合極具寫實(shí)感的圖片，構(gòu)建了一個(gè)生動(dòng)的土地和農(nóng)場(chǎng)的真實(shí)場(chǎng)景，極具想像空間。

2020/12/235構(gòu)建場(chǎng)景結(jié)合實(shí)物場(chǎng)景，生動(dòng)展現(xiàn)數(shù)據(jù)農(nóng)場(chǎng)信息圖表：一組土地資源利用插圖建立場(chǎng)景TheHistoryOfAdvertisingOnTwitter：關(guān)于Twitter廣告歷史的信息圖，按照時(shí)間軸的順序排列數(shù)據(jù)，有意思的是通過(guò)插畫，營(yíng)造了一個(gè)藍(lán)天白云的場(chǎng)景，不論是關(guān)聯(lián)性上還是色彩的運(yùn)用都非常貼合Twitter的品牌特征。

2020/12/236利用插圖建立場(chǎng)景TheHistoryOfAdverti

信息圖的擴(kuò)展應(yīng)用

2020/12/237

信息圖的擴(kuò)展應(yīng)用

2020/12/237TheBigburn網(wǎng)頁(yè)中加入信息圖，不論是呈現(xiàn)數(shù)據(jù)還是表達(dá)觀點(diǎn)都有純文字所不能替代的功效。2020/12/238TheBigburn網(wǎng)頁(yè)中加入信息圖，不論是呈現(xiàn)數(shù)據(jù)還是表KickMyHabitsHTML5席卷而來(lái)，讓信息圖“動(dòng)”起來(lái)成了不可阻擋的趨勢(shì)，交互和動(dòng)畫會(huì)更容易帶來(lái)沉浸式的體驗(yàn)2020/12/239KickMyHabitsHTML5席卷而來(lái)，讓信息圖“動(dòng)GreypBikes這是GREYP電動(dòng)車的官網(wǎng)，為了介紹電動(dòng)車內(nèi)部構(gòu)造，加入了一個(gè)簡(jiǎn)單的交互，拖動(dòng)鼠標(biāo)就可以選擇性查看。2020/12/240GreypBikes這