信息可視化設計InformationVisualizationDesign張毅、王立峰、孫蕾/編著—重慶大學出版社—信息可視化設計的流程InformationVisualizationDesign信息可視化設計ProcessOfInformationVisualizationDesign信息模型建構信息設計表達理性思維處理信息和建立信息組織結構關系感性思維對信息進行圖形化視覺設計A信息模型建構信息模型建構是信息可視化設計的第一個階段，此階段的主要工作就是處理信息，為信息建立一個組織結構關系，主要的工作包括搜集與整理信息，理解信息并運用信息結構模型進行信息的關系表達。信息模型，簡單來說就是用于表達信息關系的一種工具，作用在于更好的理解與組織信息，為接下來的信息設計表達做好準備。信息模型根據其作用不同可分為結構模型和圖表模型兩大類。1、信息結構模型信息結構模型，是指用于梳理和表達信息層次關系與組織結構的模型樣式，是信息整合的原型框架和信息設計表達的形式基礎。根據信息類型的不同以及信息之間關系的差異，信息圖設計的結構模型主要分為以下5種：0102030405層級式結構導向式結構拓展式結構分組式結構交叉式結構層級式結構模型是一種主要用于統籌層級類信息和表達多層級信息關系的信息結構模型，類似于網頁的層級式導航條。01

層級式結構模型階梯型結構——處理單一層級關系樹型結構——處理多重分組層級關系階梯型結構模型通常由多層元素由下至上堆砌而成，信息的層級地位隨之逐層遞增，視覺目的簡單而明確。樹型結構模型類似于樹枝的層級構成，從一個信息主點出發，衍生出多個分支，每一個分支對應一個信息支點，這些信息支點被固定在相應的樹形框架之中，顯得有序而直觀。展示2007年俄羅斯運動員收入前三名的信息圖表（俄羅斯）（階梯型結構）網球運動員瑪麗亞·莎拉波娃（MariaSharapova）以1900萬美元高居榜首，籃球運動員安德烈·基里連科（AndreiKirilenko）以1200萬美元位居第二，冰球運動員（守門員）尼古拉·哈比布林（Nikopay

Khabibulin）以600萬美元排名第三。THEHALLOFMASCOTS（體育賽事的吉祥物一覽圖）——樹型結構TheAppleTree（MashableInfographics）——樹形結構導向式結構模型簡單來說是一種用于表現信息根據時間變化、邏輯順序而產生的遞進、推移、轉換等過程的信息結構模型。導向式結構模型顧名思義就是運用各種具有導向和指示作用的圖形、圖標與符號將所要表達的信息串聯起來，構建出一個完整的信息流程展示結構模型圖。02

導向式結構模型單向結構循環結構：順時針循環、逆時針循環多向結構GANGNAMSTYLE!!!The5basicsteps（江南STYLE的5個基本步驟）——導向式結構模型HOWDOIWINROCK，PAPER，SCISSORSEVERYTIME？（剪刀石頭布之必殺計）——導向式結構模型（左）UntangleYourDataAssetsForSustainedCompetitiveAdvantage（理清你的數據資產的持續競爭優勢）——導向式結構模型（右）拓展式結構模型，是指圍繞一個信息中心，通過信息拓展來表達信息分解后的分支信息與中心信息關系的一種信息結構模型。03

拓展式結構模型發散結構——強調分支信息

中心結構——突出中心信息重心結構——表達分解類信息發散結構和中心結構是一種基于發散式思維所得到的結構模型框架，主要用于表達中心信息與分支信息之間關系在重心結構中，信息重心點可為解說對象的全局或局部，或二者并存，意思就是允許有兩個及以上的重心點出現，但是要注意處理好重心點之間的關系。ChooseTheBestAirplaneSeat（選擇最好的飛機座位）——發散結構TheVeryManyVarietiesOfBeer（各種各樣的啤酒）——中心結構SEEKINGREFUGE，AGLANCEATREFUGEESWORLDWIDE（尋求庇護，全球難民一覽）——重心結構分組式結構模型，是指將信息根據類型差異或角度不同進行分組表現的一種信息模型結構。分組式結構模型的表現形式較為多樣，但其作用都是為了更好的歸納和整合信息，同時突顯不同組別信息之間的差異。此外，分組式結構模型主要表達的是信息組之間并列與平行的結構關系。在實際表達中，信息組之間以并列的方式同時展現，以并存突顯共性，以對比彰顯差異，但卻又不產生任何交叉關系，因此在設計表達階段需要注意信息組之間風格形式的統一與變化。04

分組式結構模型分組式結構——處理有共性和差異且數量較大的組別類信息ALookatHowMuchOurPetsCostInaLifetime——分組式結構模型通過分析比較不同寵物一生的花費，得出豢養美冠鸚鵡的花費是最昂貴的馬來西亞首都吉隆坡的可視化地圖——分組式結構模型在地圖中的應用交叉式結構模型是一種用于表現兩個或多個信息元素之間交叉關系的信息結構模型。所謂交叉關系，其實也是一種重疊關系，表達的是不同對象之間所存在的共性，這些共性主要來自不同對象在功能、作用、屬性等方面的相同和相似，需要結合實際使用適合的交叉式結構模型進行表現。因此，在用交叉式結構模型進行信息表達之前，理清對象間的共性及其交疊關系是首當其沖的核心任務。05

交叉式結構模型交叉式結構——強調和突出不同對象之間的共性以及其交疊關系TheEarth’sOldestTrees（地球上最古老的樹種）——交叉式結構模型ANANALYSISoftheBEATLES?（披頭士樂隊分析圖）——交叉式結構模型2、信息圖表模型信息圖表模型，是指用于整理與表現各種數據變化的模型樣式，主要用于分析各類數據的比例構成、趨勢變化等情況。信息圖表模型來源于各類統計圖表，是在統計圖表的基礎上以圖形來構建的用以表達各類數據的工具，目的是使受眾能夠更加輕松直觀的獲取和了解枯燥乏味的各種數據。根據所要表達的不同數據類型，圖表模型主要分為以下3種類型：010203餅圖類柱形圖類折線圖類餅圖類模型，是指用于表現數據比例構成的圖表模型，主要分為餅狀圖和環形圖兩類。01

餅圖類模型餅狀圖——實心圓形、扇形區塊環形圖——空心圓環、弧形條塊餅狀圖在組合使用時可分為主圖和次圖，次圖用于表達主圖的一個扇形區塊的數值比例關系。環形圖則可以用大環套小環的嵌套形式使用，以環的大小區別不同組別數值信息的多少構成，同時表達這些組別數值的比例構成。TARGETPESTSINYOURAREA（你所在地區的目標害蟲，美國）——餅狀圖There’sAlwaysRoomForPie（總是有餡餅的空間，美國）——餅狀圖國人日常生活主要活動占用的時間合計（以分鐘為單位）——嵌套式環形圖WHATAREWEEATING？（我們在吃什么？）該信息圖使用環形圖表現了美國成年人平均每年所消耗的各種食物的量柱形圖類模型，是指用于比較多組別數據的圖表模型。從其統計模塊的式樣來看，柱形圖類圖表模型是以坐標軸上的縱向或橫向排列的長條形元素作為變量來展示并比較不同組別數據情況的圖表模型。這兩種圖表模型用于表達的數值主要分為數字和百分比兩種類型。02

柱形圖類模型柱形圖——縱向排列條形圖——橫向排列柱形圖是以橫向坐標軸表示組別項目名稱，縱向坐標軸表示項目數值的圖表模型。條形圖是以縱向坐標軸表示組別項目名稱，橫向坐標軸表示項目數值的圖表模型。INKcostsMORETHANHUMANBLOOD（墨水比人血貴）作品使用柱形圖對墨水、人血、青霉素、紅牛等液體的成本進行比較，得出墨水的成本超過人血的成本而居于首位THEMOSTEXPENSIVECITIES（最昂貴的城市）瑞士銀行依據物價、收入、相對購買力等因素，從房租、餐費等多個方面進行調查，得出全球最貴或者最便宜的一些城市。可以看出，瑞士確實是一個昂貴的國家，蘇黎世和日內瓦在多個單項上都名列前茅。該圖表利用了柱形圖的原理，用生動的黏土形態來表達嚴肅的經濟指標，以黏土的大小表現不同組別間的數據對比，非常新穎有趣。ELUSAINBOLTDELFUTBOL（西班牙）作品用條形圖將短跑運動員尤塞恩·博爾特與世界上奔跑速度排名前十足球運動員（埃托奧·菲爾斯、加雷斯·貝爾、亞倫·列儂、克里斯蒂亞諾·羅納爾多、西奧·沃爾科特、里奧·梅西、韋恩·魯尼、弗蘭克·里貝里、阿爾杰·羅本、阿萊克西斯·桑切斯）進行比較，結果尤塞恩·博爾特以37.6Km/h的奔跑速度名列首位。HowWellDoWeTakeCareofAmerica’STeeth?作品用柱形圖和條形圖清楚的表明了關于美國人的牙齒的相關健康問題折線圖類模型，是指用于表現事態變化趨勢的圖表模型，根據表現形式不同，可以分為線形折線圖和圖形折線圖兩種類型。03

折線圖類模型線形折線圖、圖形折線圖——折線線形、折線圖形拋物線圖、節點圖折線圖可分為僅分析單一項目事態變化趨勢的單一折線圖和表達多項目事態變化的多折線圖，均是用數值（數字或百分比）來表達不同類別事態變化的趨勢。拋物線圖、節點圖用于在表達事態變化的基礎上進一步分析變量之間的關系。DOMINATEDBYSHEEP信息圖使用線形折線圖模型表達了在新西蘭這個國家，綿羊的數量超過了人口的數量達到了驚人的9比1，同時這個比例超過了全世界其他綿羊數量較多的國家而占據首位。NOMOREFISHINTHESEA信息圖使用圖形折線圖模型介紹了幾類主要食用的海洋魚類所面臨的過度捕撈的問題。汽車銷量統計圖表該圖表使用了拋物線圖、節點圖等圖表模型來表現了2010-2014年的全球各系品牌汽車銷量的數據。B信息設計表達信息可視化設計的第二個階段是信息的設計與表達，此階段的主要工作就是在前一階段工作的基礎上，對已經整合完成的信息使用視覺語言進行設計表達。簡單來說，信息設計表達是指在視覺傳達設計的理論知識的指導下，結合需求進行設計定位之后，利用版式、圖形、色彩、文字等要素的力量，為信息圖營造一個完整、獨特和美觀的風格形式，最終促進信息的表現與傳播。信息視覺表達是整個信息可視化設計流程中最困難的階段，在這個階段中，所有的信息都必須要運用視覺設計的手段與方法轉換成為能夠被人眼所識別的視覺元素類型和能夠被大腦所理解的直觀信息類型。綜上所述，信息的設計表達主要涉及到以下5個方面：0102030405風格版式圖形色彩文字風格，簡單來說是指信息圖的整體形式面貌，優秀的信息可視化設計作品的風格通常具有完整性、獨特性與審美性三個特點。信息設計表達的第一重任務就是確定作品的風格類型，風格類型的確定為版式、圖片、色彩與文字等設計元素界定了一個明確的設計方向，使得接下來的設計工作得以在一個有序的框架之中進行。01

風格制造統一與變化扁平化設計是趨勢以藥之名，釋藥之理——一套扁平化設計與中式風格結合的優秀信息可視化設計作品Howdoesamurmurcometolife？（生活中的雜音是怎樣來的？）——優秀的復古手繪風格的信息可視化設計作品電影《電鋸驚魂》的角色人物生存與死亡的信息圖表——血腥、恐怖風格的信息可視化設計作品這張婀娜多姿的信息圖展示的是設計師18個月里欣賞不同藝術家的音樂的情況。每種顏色的“水流”代表一位藝術家及音樂，“水流”的寬度則代表一定時間內欣賞該音樂的頻率（leebyron）——抽象極簡風格的信息可視化設計作品BabyBoomers（在美國，每天平均有10,000名嬰兒潮一代達到退休年齡。截至2010年，共有7200萬嬰兒潮一代居住在美國境內。該信息圖統計了嬰兒潮一代退休前景和趨勢）——美式二維卡通風格的信息可視化設計作品（左）丼（丼：指日本蓋澆類食物，該信息圖解釋了日本各類丼飯的食材及制作方法）——日式扁平化風格的信息可視化設計作品（右）信息圖的版式設計，主要是指在已確定的設計風格的指導下，為信息圖選擇一個適合的版面式樣，這也是信息設計表達的重要工作之一。簡單來說，信息圖版面式樣的選擇主要取決于以下兩個要素：02

版式模型布局的支配作用合理的讀取流程是基礎SUAMAESTAINPILLOLE（意大利語）關于英國女王的信息圖，將英女王的胸像剪影放在版面中央，能夠迅速吸引讀者的目光，同時周圍的圖文信息被巧妙地劃分為多個區塊，且在編排上符合從左至右、從上到下兩種讀取流程，信息雖多但閱讀起來非常有序。DATANEVERSLEEP（數據從不睡覺）——符合從左至右、從上到下、順時針旋轉三種讀取流程的優秀信息圖作品THEWORLD'SWEIRDESTFESTIVALS（世界上最奇特的節日）該信息圖運用了地圖和流程圖兩種信息圖類型，導向元素的加入更是強化了從上至下，由左至右兩種讀取流程，并按時間順序清晰的向受眾展示了從1月到12月全球各種奇怪的節日。基于信息圖要讓全世界都能理解的終極目標，在信息可視化設計中，圖形元素因為擁有無障礙視覺傳達的先天優勢與多元化的表現形態成為當仁不讓的設計元素主角。03

圖形信息圖形元素的分類——主體圖形、圖標、圖表、符號信息圖形元素的設計圖解圣地亞哥——該信息圖的主體圖形為軸測圖，讓城市街道更加一目了然，左邊則配有完善的各類功能圖標，使信息圖顯得完整而條理清晰。AnimalsintheHouse該信息圖為我們展示了美國十家著名動物園的基本情況，包括游客數量、園區面積、動物數量以及各類動物的比例。比較有趣的是信息圖中的主體圖形設計是源于對各類動物最具代表性的特征的提取與抽象化設計，設計師截取了鳥類最具標志性的部分——喙，來表示鳥類；選用了大家印象深刻的變色龍的頭部（紅眼睛）來代表兩棲類；使用哺乳動物所特有的覆蓋“毛發”的軀干來表示哺乳類；最后，用人們最為熟悉的爬行動物——蛇，來代表爬行類，最終形成了一只肖似蚊子的怪物圖形。

GETTINGAROUNDTRANSPORTATIONTODAY——關于全球交通工具的信息圖，真實圖像與單色平面圖形的巧妙結合50WaystoHelpthePlanet（50種保護地球的方法）——非常精致的可視化圖標設計TheAmericanDream-ARoadtoRiches/TheAmericannightmare-ADecadeofDebt（美國人的夢-致富之路

/美國人的噩夢-十年債務）——三維立體效果的柱形圖11milmetrosdevida（11萬平方米的生活，葡萄牙語）——該信息圖用剖面圖的形式表現了在不同海洋深度的生物存在與分布的狀況色彩對于信息圖設計的重要性不言而喻，這是因為色彩具有傳達個性、烘托氛圍、美化頁面的重要作用。04

色彩色彩基礎的重要性結合實際的色彩表現創新電影《殺死比爾》的人物關系介紹圖表該信息圖的色彩設計源自女主角那一襲著名的黃色戰衣，能夠給受眾留下深刻的印象，同時能夠喚起受眾與電影的情節共鳴。INTERNATIONALCOASTALCLEANUP25YEARSOFDEBRISCOLLECTED這張信息圖展示了在過去25年內各種海洋垃圾的類別。在該作品中，由淺至深的藍色搭配能夠顯而易見的烘托信息圖的主題與內容，增加觀者的危機感，同時大面積的藍色能夠兼容并突出畫面中的其他色彩，形成更加完整的色彩基調，塑造信息圖獨特的外觀與氣質。KNOWYOURSUMAN！信息圖介紹了一種用椰汁做成的包裹在香蕉葉或椰子葉內的具有菲律賓特色的糯米點心SUMAN。作品使用了頗具自然氣息的黃綠為主色調來彰顯SUMAN的美味與天然，再搭配少量多樣的其他色彩，體現了菲律賓不同地區的SUMAN在原材料、制作工藝與食用搭配等方面的一些差異。雖說文字在信息圖設計中基本處于從屬地位，但并不意味著可以忽視文字在信息圖中的存在和作用。簡單來說，信息圖中的文字設計需要遵循以下兩個原則：05

文字少即是多正確處理圖文關系OurFavoriteDrugs該信息圖主要列舉了含毒藥品、大麻、冰毒、海洛因、可卡因等5種毒品在美國自西向東各大區域的影響。設計師用毒品名稱英文字母進行字體設計來表示毒品份額比重，更加能夠體現出毒品的罪惡性。THEEFFECTSOFBULLYINGONLGBTYOUTH該信息圖主要表現了欺凌對于青年同性戀群體的