熱門有趣的信息圖是怎樣誕生的? | 網際網路數據資訊網-199IT | 中文...

2021-01-15 網際網路數據資訊網
什麼是信息圖?

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

可視化並不是什麼全新的概念,生活中很多信息可視化例子:公共指示、統計圖、星級評分、五線譜…

信息圖形(Infographic),又稱為信息圖,是指數據、信息或知識的可視化表現形式。——摘自百度百科;

信息圖最初是指報紙、雜誌、新聞通訊社等媒體刊登的一般圖解。隨著信息可視化在大數據時代越來越被人重視,以及越來越多的設計師熱衷於以圖形化的方式結合視覺上的美感將信息傳達給讀者,使得信息圖越來越流行和被大眾所喜聞樂見。將原本很難用語言表達的信息,通過圖畫來加以說明,使其容易理解,這是信息圖設計的目標和理想。

信息圖的分類

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

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

圖表(Chart):運用圖形、線條及插圖等,闡明事物的相互關係

表格(Table):根據特定信息標準進行區分,設置縱軸與橫軸

統計圖(Graph):通過數值來表現變化趨勢或進行比較

地圖(Map):描述在特定區域和空間裡的位置關係

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

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

信息圖製作流程

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

 

—————————————————————- 製作信息圖的五大要素 —————————————————————-

2009年2月,由國際新聞媒體視覺設計協會(SND)主辦的新聞視覺設計大賽在美國紐約州Syracuse舉行,評審結束後,圖文設計組的專家們總結了他們認為的在製作理想的信息圖時應該考慮的五大要素:

1. 吸引眼球,令人心動(Attractive):在這個信息爆炸的時代,富有吸引力非常重要,應該設計一些能夠讓讀者產生共鳴的東西

FACEBOOK Realationships Visualized:極具視覺衝擊力和吸引力

2. 準確傳達,信息明了(Clear):設計時要選擇一個最想要傳達給讀者的主題,把這個主題巧妙地表現出來

The Internet Map : 將全球網站以星系的形式表現,流量越大,表示圓點越大,顏色代表不同國家

3. 去粗取精,簡單易懂(Simple):從龐大的信息量中將真正必要的信息篩選出來,同時設計的表現手法同樣需要合理簡化,突出重點

倫敦地鐵路線圖進化過程:查看1935年至1946年間貝克的路線圖設計,可以發現其換乘的表現手法有變化。1935年的換乘站點以方塊表示,車站的名稱要容納在其中,對字體的大小長度都有了限制,讓人難以閱讀;1940年和1941年的線路圖,換乘站名稱寫在圓圈旁邊,但每條線路都會標註同樣的名稱,出現多餘文字信息;1946年的路線圖,相接的圓用白線連接,將換乘站用更容易識別的方式表現出來,之前重複的站名也改為只標記一次,更簡單和容易閱讀。

4. 視線流動,構建時空(Flow):充分利用人的閱讀習慣,注意視線移動的規律;能夠通過設計營造時空感

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

5. 摒棄文字,以圖釋義(Wordless):對事物的結構或流程等進行說明時,儘量避免使用文字,僅以圖形傳達信息

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

—————————————————————- 信息圖設計的技巧 —————————————————————-

通過整理一些相關資料以及結合自己的經驗,我總結了一般信息圖設計中經常涉及到的8類手法和技巧:圖形化、對比、轉換、比喻、關聯、流動、引入時空、構建場景;

圖形化

運用圖形,直觀明了

Coffee Drinks Illustrated:關於咖啡種類的說明,通過一杯咖啡的圖形樣式,不但直觀的表現出不同種類咖啡的成分組成,而且各成分之間的比例關係也一眼就看出。

插圖輔助,生動形象

My Work In Taobao UED:這是我曾經為淘寶工作時的流程而配的插圖;通過運用插圖來表現每個職位人員的特徵,讓畫面更生動有趣,但是應該加大各個角色之間的差異,有助於減少歧義,而且圖形和文字關係疏離,並沒有很好地結合。

用圖形來表示數值

相關調研數據圖:將原本用柱狀圖或餅圖表示的數值改為用圖形個數來代替,顯得格外醒目,一眼就能看出各數值之間的差異程度,並且使畫面更加豐富生動。

對比

同類對比,表現差異化

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

用熟悉的事物來形象比較

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

轉換

通過手法轉換,以符合常識

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

將一維的數據用面積表示

The Advertising World In 2012:如何在較小的空間表現差值較大的數據?可以將一維的數據用面積或者體積來表現;圖中關於世界各國廣告的花費,作者將費用換成面積並結合地理位置表現,很好的避免了空間不夠的尷尬。

比喻

近似類比,賦予聯想

Underskin:將人體內部的血液循環系統比作地鐵路線圖,線路中的站點就是人體的主要器官。血液的不停流動,物質之間的交換,這和地鐵中循環運轉的列車,站點之間的轉換確實有某些類似之處。

引申類比,營造情景

Social Media Demographics:這是一份關於社交媒體網站的用戶分析報告,將各個網站比喻成星球,活躍用戶數越多,則體積越大;並用環繞的行星表示用戶性別、年齡等的比例構成。通過設計營造出星系的場景感,極具故事性而且更加吸引人。

關聯

與相關事物組合展現數據

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

運用圖形和色彩呈現主題

All Criminal:介紹犯罪大全的圖示,巧妙地與囚服相結合,讓讀者一眼就能明白主題與犯罪相關;通過囚服條紋地色相變化來區別犯罪的種類和程度,並且對比明顯,讓人印象深刻。

流動

用環形圖表示流程

Projects In TongJi:這是我在10年到12年間項目和實習經歷的流程圖。最開始考慮用直線的時間軸去表現,但是在橫向空間中會顯得很侷促,而採用曲線的話,方向感沒有那麼單一強烈,後來用了環形圖來表示;考慮一般視線流動的特點,順時針方向更加符合讀者瀏覽的習慣,尤其是與時間相關的流程。

使用箭頭,創造流動感

Increase In Exports From Africa:箭頭的使用不但能表現出方向性,並且能讓靜止的圖片產生動感。圖中通過箭頭的方向表示非洲出口的目標國,並且通過箭頭的大小對比來表現不同的出口增長率。

創建時空

結合時間和地點

世界的歷史:從地球的插圖上,根據不同的區域分別抽取延長線,以此展開年表。令讀者對位置產生直觀印象,同時理解各區域之間的聯繫和歷史事件的大致時間順序。

構建場景

結合實物場景,生動展現數據

農場信息圖表:一組土地資源儲備的構成比例圖,通過結合極具寫實感的圖片,構建了一個生動的土地和農場的真實場景,極具想像空間。

利用插圖建立場景

The History Of Advertising On Twitter:關於Twitter廣告歷史的信息圖,按照時間軸的順序排列數據,有意思的是通過插畫,營造了一個藍天白雲的場景,不論是關聯性上還是色彩的運用都非常貼合Twitter的品牌特徵。

—————————————————————- 信息圖的擴展應用 —————————————————————-

網頁中加入信息圖,不論是呈現數據還是表達觀點都有純文字所不能替代的功效。

HTML5席捲而來,讓信息圖「動」起來成了不可阻擋的趨勢,交互和動畫會更容易帶來沉浸式的體驗

這是GREYP電動車的官網,為了介紹電動車內部構造,加入了一個簡單的交互,拖動滑鼠就可以選擇性查看。

GarageBand

蘋果官方出的音樂製作 APP,裡面大量的可視化處理令創作音樂成了幾乎每個人都可以輕鬆上手的事情。圖例是進入Smart Drum後的操作界面。加入聲音的反饋,信息不僅可視,更是「可聽」。

Planetary

Planetary 會分析 iTunes 的音樂庫,並且以 3D 星系的方式將其視覺化。在這幅 3D 星系圖裡,藝術家做為恆星構成宇宙中的星座,專輯是圍繞恆星的行星,專輯歌曲是圍繞行星的衛星。當開始播放歌曲時,以歌曲命名的衛星就開始發射一條藍色的光線,順著衛星軌道開始運行,當環繞軌道一周後,歌曲也便結束,下一顆衛星開始接力。

當信息圖和動畫或視頻相結合,可以展現更加複雜和多維的數據信息。

總結:本文重點介紹了很多信息圖設計的技巧,但是信息圖製作中,設計只是其中一環,清晰明了地傳達主題才是核心,掌握這些設計要點和手法技巧都是為了實現這個目的。

via:uisdc.

相關焦點

  • 信息可視化在新媒體時代的實踐思考 | 網際網路數據資訊網-199IT |...
    從人類感官的維度去看,信息圖或動態圖形只是通過平面的視覺語言來傳達信息(動態圖像短片或有加上音樂,但主要獲取信息的途徑也是通過視覺)。隨著科技和社會的發展、人類認知能力與審美的提高,人們已經不滿足單單通過平面來獲取信息。如何通過一些新穎有趣的方式去展示信息,是當下我們作為設計者需要思考的問題。
  • GitHub十大熱門Python項目 | 網際網路數據資訊網-199IT | 中文互聯...
    Python作為一種神奇而又通用的程式語言,已經被成千上萬的開發者用來構建各種有趣而有用的項目。在下面的部分,我們將嘗試涵蓋GitHub上一些使用Python構建的最佳項目。這個項目背後的理念是讓人們更容易在數學教材中整合有趣直觀的動畫與圖形和圖表,擺脫學習數學必須枯燥的刻板印象。格蘭特在YouTube上經營著一個名為3Brown1Blue的頻道,他根據需要使用manim庫來創建和控制這些動畫,向受眾傳授高等數學知識。使用manim,你還可以創建動畫視頻,精確控制用於圖表和插圖的動畫。如果你覺得這是個有趣的想法,你應該去他的頻道看看這個庫的操作。
  • 銀行業深度報告:網際網路改變金融 | 網際網路數據資訊網-199IT | 中文...
    * 若是後者,未來的網際網路金融商業模式的發展方向是什麼?* 網際網路金融將怎樣衝擊金融行業現有格局?什麼樣的企業將主導網際網路金融?企業在網際網路金融競爭中勝出的核心要素是什麼?此 外,熟悉我們以前研究風格的讀者會發現,我通常喜歡將研究建立在大量數據和圖表的基礎之上。但本報告有所不同,大量涉及的是概念、定律和邏輯推導。
  • .| 網際網路數據資訊網-199IT | 中文網際網路數據研究資訊中心-199IT
    PDF版本將分享到199IT
  • 如何將數據科學與商業結合起來 | 網際網路數據資訊網-199IT | 中文...
    我們將產生2500萬的各種跟數據有關係的東西。還有將有250億套設備,連接到通過數據構建的網絡裡面。大家注意到這不是網際網路連接的數據,而是通過數據來連接的世界,剛才幾位專家也分享了,工業4.0,很多機器真正連到網際網路上去,但是它們內部建造了各種複雜優美的網絡,最後就是數據量的問題。
  • 信息圖系列文章(二):現代的數據可視化方法 | 網際網路數據資訊網...
    數據的表現形式可以是美麗、優雅和描述性的。有多種傳統的數據表現形式 在每個項目及可能的場合被頻繁地使用:如表格、餅圖、柱狀圖等。但為了更有效地向你的讀者傳達信息,有時你需要絕不僅僅是一張餅圖。有更好的、深刻的、富於創造性以及富有趣味的方法來可視化數據。
  • CheetahLab:2018中國人工智慧報告 | 網際網路數據資訊網-199IT |...
    在獵豹大數據統計的智能攝像頭App榜單上,排名第一、第四、第五的螢石雲視頻、樂橙和愛耳目家庭攝像機,分別來自傳統安防企業海康威視、大華股份及愛耳目科技(東方網力投資),而360智能攝像機、小蟻攝像機及米家小白智能攝像機則出自網際網路公司的手筆。
  • BOSS直聘:2020人才資本趨勢報告 | 網際網路數據資訊網-199IT | 中文...
    我們重點觀察了與人工智慧、大數據、雲計算、5G、電競、網絡直播等當前熱門領域高度相關的25個新職位的相關情況。BOSS直聘研究院數據顯示,2019年的積極求職人群平均年齡為26.1歲,我們挑選的25個新職業崗位積極求職人群,平均年齡是24.9歲,人才存量同比增長105%。新職業人才整體上呈現出年輕化、高增長態勢。
  • SEO關鍵詞研究 | 網際網路數據資訊網-199IT | 中文網際網路數據研究...
    關鍵字難度數據是通過 SEOmoz’s keyword difficulty tool 獲取,根據經驗,一般包括有品牌的長尾關鍵詞會比較難競爭,9/10的長尾關鍵詞一般都要比主體和頭部關鍵詞容易2 觀點思考
  • FT中文:中國網際網路的「權力遊戲」 | 網際網路數據資訊網-199IT |...
    如今,更具顛覆性且不容忽視的力量主要以三家大型網際網路集團為代表,即百度(Baidu)、阿里巴巴(Alibaba)與騰訊(Tencent),合稱BAT(編者註:中國這三家大型網際網路集團名稱的英文首字母縮寫是BAT,在英文中是「蝙蝠」的意思)。這三家公司在短短幾年內已經使中國的許多方面發生了翻天覆地的變化。以阿里巴巴旗下的螞蟻金服(Ant Financial)為例。
  • 百度:2019年奢侈品行業報告 | 網際網路數據資訊網-199IT | 中文互聯...
    在百度信息流中,和包袋相關的有超7千位作者,每日的信息推薦指數高達5600萬,而在所有的內容形式中,視頻和圖文最受歡迎。包袋品類信息流內容分析包袋是個潮流驅動的品類,人人都想時刻in trend,時髦秒在線。我們分析了包袋的信息流閱讀,34%是明星相關,看看明星同款、穿搭,汲取時尚靈感。此外22%為新聞,20%為種草文。
  • ...Facebook | 網際網路數據資訊網-199IT | 中文網際網路數據研究資訊...
    下面有一張來自 Technobombs.com的信息圖也許能讓你了解更多。我大致翻譯下:google circles vs facebook friends list(google圈子 vs facebook朋友列表)Google圈子因為操作簡便,採用html5,可以直接拖拽朋友到一個圈子中,而facebook好友列表則相對操作比較複雜,更重要的是,google圈子使得你在分享信息的時候可以有所針對
  • 如何讓用戶研究變得重要 | 網際網路數據資訊網-199IT | 中文網際網路...
    基本上我靠的是兩個辦法:1)讓用戶研究的結果真正能幫到業務方,做用戶調研時不要做信息收集者,做信息處理者,把用戶反饋與產品改進方向結合;2)把用戶體驗指標作用於業務方的績效,讓他得到重視用戶體驗的好處,從公司制度入手,不能永遠依靠同事的自驅力。歡迎大家發表看法一起討論!
  • ...Online beta版本上線 | 網際網路數據資訊網-199IT | 中文網際網路...
    這也是首個完全部署在阿里雲上的大規模生物信息分析平臺。隨著生命科學領域數據爆炸式的增長,如何及時獲取、快速分析、安全儲存這些龐大的數據是研究者們急需解決的問題。BGI Online就是為此而生,它集成了高性能計算,大規模存儲及安全網絡互聯等基礎設施,支持數據的雲端存儲、分析、展示和交付。
  • 如何全面解析數據並創造數據故事 | 網際網路數據資訊網-199IT |...
    無論我們陳述一個有趣的事件還是新發現,故事總是吸引聽眾和讀者興趣的首選。例如,當我們談論一個朋友是如何被老師責罵時,我們傾向於從頭開始講述事件,這樣故事才能流暢。正如這張圖所示,女性和頭等艙乘客的生存機率高於機組成員或較低艙位的男性。這不正是鐵達尼號上真正發生的事嗎?另一種可視化此類數據的方式是嘗試使用「多變量圖」。下面是關於汽車性能和規格的數據集。
  • 中國姓氏勢力地圖 | 網際網路數據資訊網-199IT | 中文網際網路數據...
    文 | 鄭子寧 鄧陽中國人的姓往往蘊藏著豐富的信息。有時,能從中猜出他的籍貫。比如「林」,見到一個姓「林」的中國人,很多人都會猜測他是福建人;「黃」,很可能是廣東/廣西人。這樣的猜測有著統計數據支撐——中國林姓人口中57%分布於福建、廣東、臺灣三省。這三省中又以福建的林姓佔比最高。
  • POCT:掘金IVD潛力賽道 | 網際網路數據資訊網-199IT | 中文網際網路...
    77億市場規模,41家投資機構入場,2020年4家企業闖關科創板,POCT風頭正勁,無疑是IVD領域最熱門的賽道之一。國內外玩家群雄逐鹿,細分領域需求湧現,為POCT帶來了哪些新契機?2020年POCT創業公司又有哪些機會點呢?
  • 數據可視化最有價值的50個圖表 | 網際網路數據資訊網-199IT | 中文...
    有效圖表的重要特徵:在不歪曲事實的情況下傳達正確和必要的信息。設計簡單,您不必太費力就能理解它。從審美角度支持信息而不是掩蓋信息。信息沒有超負荷。有序條形圖 (Ordered Bar Chart)有序條形圖有效地傳達了項目的排名順序。 但是,在圖表上方添加度量標準的值,用戶可以從圖表本身獲取精確信息。
  • 網紅電商如涵IPO路演PPT解析 | 網際網路數據資訊網-199IT | 中文...
    | 消費習慣的變化、自媒體的發展、增長的數字市場、技術發展將帶動網際網路KOL經濟的飛速發展。解析:展示優質的運營數據後,對整個KOL經濟市場進行分析,向投資人說明如涵還有很大的發展空間。2017年KOL經濟市場已達到近千億人民幣,除了較高的年複合增長率,整個消費市場和科技市場都對網紅電商市場的發展起促進作用。
  • CheetahLab:2017年度中國app報告 | 網際網路數據資訊網-199IT |...
    又或者是,小鎮青年已經成為了移動網際網路世界的主流?2017年過去了,你是否懷念它?在這一年,改變不聲不響地發生著。獵豹全球智庫從數據出發,帶你俯瞰移動網際網路行業大震蕩。熱門劇集網絡獨播權的單集價格動輒千萬。高額投入的背後是視頻app用戶規模基本穩定,增長乏力的現狀,獵豹大數據顯示,2017年度視頻類app周活躍滲透率下降了18%。以優質內容培養和留住付費用戶,是國內視頻平臺當前階段競爭的關鍵所在。目前各大視頻平臺的盈利問題依然不容樂觀,據公開資料顯示,獵豹大數據排行前三的視頻平臺,其付費會員總計達到9300萬,付費率只有15.8%。