什么是信息圖形，設(shè)計過程中需要注意哪些？

Infographic是一個可讀可視化的復合體系，由圖像、文字和數(shù)字結(jié)合而成，使信息更高效地得以交流。它幫助人們更好地通過特定文本內(nèi)容的視覺元素系統(tǒng)，顯著、鮮明、簡單、直接、連貫和全面地轉(zhuǎn)化字里行間的可視化元素，并建立關(guān)聯(lián),使信息得到再一次呈現(xiàn)。

很多設(shè)計師都對信息可視化、設(shè)計信息圖非常感興趣，在平時的作品中合理地加入一些可視化的元素，能瞬間提升設(shè)計質(zhì)感和強化主題，這里給大家看看周宏宇(Calan Zhou)對于信息圖的見解。

一、信息圖概要

1)什么是信息圖?

提及信息圖，不可避免要先講下時下熱門的議題：信息可視化(Information Visualization)。大家從字面上以及平時工作學習中應(yīng)該或多或少有了解，可以將它大致理解為：將復雜的信息通過圖形樣式清晰明了的傳達給讀者。信息可視化是一個跨學科的領(lǐng)域，其詳細深入的定義這里不做研討，本文主要針對其圖形化的產(chǎn)物信息圖進行介紹。

可視化并不是什么全新的概念，生活中很多信息可視化例子：公共指示、統(tǒng)計圖、星級評分、五線譜…

信息圖形(Infographic)，又稱為信息圖，是指數(shù)據(jù)、信息或知識的可視化表現(xiàn)形式。——摘自百度百科

信息圖最初是指報紙、雜志、新聞通訊社等媒體刊登的一般圖解。隨著信息可視化在大數(shù)據(jù)時代越來越被人重視，以及越來越多的設(shè)計師熱衷于以圖形化的方式結(jié)合視覺上的美感將信息傳達給讀者，使得信息圖越來越流行和被大眾所喜聞樂見。

將原本很難用語言表達的信息，通過圖畫來加以說明，使其容易理解，這是信息圖設(shè)計的目標和理想。

2)信息圖的分類

信息圖的分類有很多種，各分類之間也并不是涇渭分明，所以大可不必糾結(jié)什么樣的分法最正確，在木村博之所著的《圖解力》一書中，他將信息圖分為六大類：圖解(Diagram)、圖表(Chart)、表格(Table)、統(tǒng)計圖(Graph)、地圖(Map)、和圖形符號(Pictogram)：

圖解(Diagram)：主要運用插圖對事物進行說明

圖表(Chart)：運用圖形、線條及插圖等，闡明事物的相互關(guān)系

表格(Table)：根據(jù)特定信息標準進行區(qū)分，設(shè)置縱軸與橫軸

統(tǒng)計圖(Graph)：通過數(shù)值來表現(xiàn)變化趨勢或進行比較

地圖(Map)：描述在特定區(qū)域和空間里的位置關(guān)系

圖形符號(Pictogram)：不使用文字，運用圖畫直接傳達信息

實際制作信息圖的過程中會用到多種形式配合完成

3)信息圖的制作流程

信息圖的制作是一個團隊合作的過程，在平時的設(shè)計中可能并沒有嚴格按照下面的流程來做，但是可以從中理解到信息圖的核心是傳達主題!

二、制作信息圖的五大要素

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

1) 吸引眼球，令人心動(Attractive)

在這個信息爆炸的時代，富有吸引力非常重要，應(yīng)該設(shè)計一些能夠讓讀者產(chǎn)生共鳴的東西

FACEBOOK Realationships Visualized：極具視覺沖擊力和吸引力

2)準確傳達，信息明了(Clear)

設(shè)計時要選擇一個最想要傳達給讀者的主題，把這個主題巧妙地表現(xiàn)出來

The Internet Map : 將全球網(wǎng)站以星系的形式表現(xiàn)，流量越大，表示圓點越大，顏色代表不同國家

3) 去粗取精，簡單易懂(Simple)

從龐大的信息量中將真正必要的信息篩選出來，同時設(shè)計的表現(xiàn)手法同樣需要合理簡化，突出重點

倫敦地鐵路線圖進化過程：查看1935年至1946年間貝克的路線圖設(shè)計，可以發(fā)現(xiàn)其換乘的表現(xiàn)手法有變化。

1935年的換乘站點以方塊表示，車站的名稱要容納在其中，對字體的大小長度都有了限制，讓人難以閱讀;1940年和1941年的線路圖，換乘站名稱寫在圓圈旁邊，但每條線路都會標注同樣的名稱，出現(xiàn)多余文字信息;1946年的路線圖，相接的圓用白線連接，將換乘站用更容易識別的方式表現(xiàn)出來，之前重復的站名也改為只標記一次，更簡單和容易閱讀。

4)視線流動，構(gòu)建時空(Flow)

充分利用人的閱讀習慣，注意視線移動的規(guī)律;能夠通過設(shè)計營造時空感

How Long Do Animals Live：通過線的引導聚集視覺焦點，讓讀者很流暢的瀏覽，圖中的動物都處理成沿曲線行走的方向，方向性更加強烈。

5)摒棄文字，以圖釋義(Wordless)

對事物的結(jié)構(gòu)或流程等進行說明時，盡量避免使用文字，僅以圖形傳達信息

各國問候禮儀：奈杰爾·霍姆斯的作品，在不使用文字說明的情況下，解說法國、荷蘭等國家的問候的禮儀。他還有很多類似的無文字說明的圖解作品。

三、信息圖形的設(shè)計技巧

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

1)圖形化

運用圖形，直觀明了

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

插圖輔助，生動形象

My Work In Taobao UED：這是我曾經(jīng)為淘寶工作時的流程而配的插圖;通過運用插圖來表現(xiàn)每個職位人員的特征，讓畫面更生動有趣，但是應(yīng)該加大各個角色之間的差異，有助于減少歧義，而且圖形和文字關(guān)系疏離，并沒有很好地結(jié)合。

用圖形來表示數(shù)值

相關(guān)調(diào)研數(shù)據(jù)圖：將原本用柱狀圖或餅圖表示的數(shù)值改為用圖形個數(shù)來代替，顯得格外醒目，一眼就能看出各數(shù)值之間的差異程度，并且使畫面更加豐富生動。

2)對比

同類對比，表現(xiàn)差異化

世界高樓建設(shè)進度(2006)：圖中將世界各個著名的高樓放在同一畫面中來做比較，不僅能明顯看出它們之間高度的差異，作者更要表達的是這些高樓目前的建設(shè)進度，通過將高樓建成的部分進行上色，而未建成的部分用線條勾勒，來進行自身差異化的表現(xiàn)。

用熟悉的事物來形象比較

How Big Is A Yottabyte?：關(guān)于計算機不同字節(jié)的大小對比，如果按字節(jié)的定義，即使通過柱形圖對比表現(xiàn)出來，依然無法讓人直觀感受;圖中將不同的字節(jié)容量描述稱可以存儲的具體數(shù)據(jù)(圖片、音樂…)，以及存儲這些數(shù)據(jù)需要的實體空間，非常形象具體。

3)轉(zhuǎn)換

通過手法轉(zhuǎn)換，以符合常識

百年紀錄對比：馬拉松這類花時間越少，成績越優(yōu)秀的項目，如果用常規(guī)的柱狀圖繪制，那么明明最快的成績卻看上去感覺最慢。這張圖中將最快的記錄用100%表示，然后以此為基準，畫出不同參賽者的相對位置，讓人一目了然。

將一維的數(shù)據(jù)用面積表示

The Advertising World In 2012：如何在較小的空間表現(xiàn)差值較大的數(shù)據(jù)?可以將一維的數(shù)據(jù)用面積或者體積來表現(xiàn);圖中關(guān)于世界各國廣告的花費，作者將費用換成面積并結(jié)合地理位置表現(xiàn)，很好的避免了空間不夠的尷尬。

4)比喻

近似類比，賦予聯(lián)想

Underskin：將人體內(nèi)部的血液循環(huán)系統(tǒng)比作地鐵路線圖，線路中的站點就是人體的主要器官。血液的不停流動，物質(zhì)之間的交換，這和地鐵中循環(huán)運轉(zhuǎn)的列車，站點之間的轉(zhuǎn)換確實有某些類似之處。

引申類比，營造情景

Social Media Demographics：這是一份關(guān)于社交媒體網(wǎng)站的用戶分析報告，將各個網(wǎng)站比喻成星球，活躍用戶數(shù)越多，則體積越大;并用環(huán)繞的行星表示用戶性別、年齡等的比例構(gòu)成。通過設(shè)計營造出星系的場景感，極具故事性而且更加吸引人。

5)關(guān)聯(lián)

與相關(guān)事物組合展現(xiàn)數(shù)據(jù)

The Fragmented World Of Digital Music：一組音樂相關(guān)的數(shù)據(jù)，通過將數(shù)據(jù)和音箱喇叭的圖形組合，使讀者能自然而強烈的感知到作者要傳達的主題是音樂相關(guān)的。平面設(shè)計中也有相關(guān)理論，這是設(shè)計中經(jīng)常用到的手法。

運用圖形和色彩呈現(xiàn)主題

All Criminal：介紹犯罪大全的圖示，巧妙地與囚服相結(jié)合，讓讀者一眼就能明白主題與犯罪相關(guān);通過囚服條紋地色相變化來區(qū)別犯罪的種類和程度，并且對比明顯，讓人印象深刻。

6)流動

用環(huán)形圖表示流程

Projects In TongJi：這是我在10年到12年間項目和實習經(jīng)歷的流程圖。最開始考慮用直線的時間軸去表現(xiàn)，但是在橫向空間中會顯得很局促，而采用曲線的話，方向感沒有那么單一強烈，后來用了環(huán)形圖來表示;考慮一般視線流動的特點，順時針方向更加符合讀者瀏覽的習慣，尤其是與時間相關(guān)的流程。

使用箭頭，創(chuàng)造流動感

Increase In Exports From Africa：箭頭的使用不但能表現(xiàn)出方向性，并且能讓靜止的圖片產(chǎn)生動感。圖中通過箭頭的方向表示非洲出口的目標國，并且通過箭頭的大小對比來表現(xiàn)不同的出口增長率。

7)創(chuàng)建時空

結(jié)合時間和地點

世界的歷史：從地球的插圖上，根據(jù)不同的區(qū)域分別抽取延長線，以此展開年表。令讀者對位置產(chǎn)生直觀印象，同時理解各區(qū)域之間的聯(lián)系和歷史事件的大致時間順序。

構(gòu)建場景

結(jié)合實物場景，生動展現(xiàn)數(shù)據(jù)

農(nóng)場信息圖表：一組土地資源儲備的構(gòu)成比例圖，通過結(jié)合極具寫實感的圖片，構(gòu)建了一個生動的土地和農(nóng)場的真實場景，極具想像空間。

利用插圖建立場景

The History Of Advertising On Twitter：關(guān)于Twitter廣告歷史的信息圖，按照時間軸的順序排列數(shù)據(jù)，有意思的是通過插畫，營造了一個藍天白云的場景，不論是關(guān)聯(lián)性上還是色彩的運用都非常貼合Twitter的品牌特征。

四、信息圖的擴展應(yīng)用

1) The Bigburn

網(wǎng)頁中加入信息圖，不論是呈現(xiàn)數(shù)據(jù)還是表達觀點都有純文字所不能替代的功效。

2) Kick My HabitsHTML5

席卷而來，讓信息圖“動”起來成了不可阻擋的趨勢，交互和動畫會更容易帶來沉浸式的體驗

3) Greyp Bikes

這是GREYP電動車的官網(wǎng)，為了介紹電動車內(nèi)部構(gòu)造，加入了一個簡單的交互，拖動鼠標就可以選擇性查看。

4) GarageBand

蘋果官方出的音樂制作 APP，里面大量的可視化處理令創(chuàng)作音樂成了幾乎每個人都可以輕松上手的事情。圖例是進入Smart Drum后的操作界面。加入聲音的反饋，信息不僅可視，更是“可聽”。

5)PlanetaryPlanetary

會分析 iTunes 的音樂庫，并且以 3D 星系的方式將其視覺化。在這幅 3D 星系圖里，藝術(shù)家做為恒星構(gòu)成宇宙中的星座，專輯是圍繞恒星的行星，專輯歌曲是圍繞行星的衛(wèi)星。當開始播放歌曲時，以歌曲命名的衛(wèi)星就開始發(fā)射一條藍色的光線，順著衛(wèi)星軌道開始運行，當環(huán)繞軌道一周后，歌曲也便結(jié)束，下一顆衛(wèi)星開始接力。

6) 騰訊星云

當信息圖和動畫或視頻相結(jié)合，可以展現(xiàn)更加復雜和多維的數(shù)據(jù)信息。

總結(jié)：本文重點介紹了很多信息圖設(shè)計的技巧，但是信息圖制作中，設(shè)計只是其中一環(huán)，清晰明了地傳達主題才是核心，掌握這些設(shè)計要點和手法技巧都是為了實現(xiàn)這個目的。