用《資訊圖表》簡化長篇大論:製作工具與圖表蒐集網站

小治

資訊圖表 Infographics 有什麼用?人是視覺化動物,長篇大論不如一張圖表讓人容易理解,但要把複雜的數據和資訊圖像化,卻是門大學問。本篇介紹資訊圖表的設計概念,以及圖表製作工具(SmartDraw、MindGenius)、圖表蒐集網站,來看看如何利用一張好圖表說故事。

快速目錄:

資訊缺乏恐慌症,用資訊圖表來治療

資訊圖表(Infographics),是目前所流行的一種資訊表述模式,它將圖表與文的比重徹底顛覆過來,不再像以前,僅是用圖表來作為文字論述的補充,而是改用視覺設計的方式,將抽象的概念與繁複的數據轉化為圖像,有如地圖般引導著閱讀者,以較為直覺的方式傳達複雜的訊息。

▲ 圖表在我們的生活中無所不在,僅僅是簡單的長條圖,就能清楚的顯示出大多數讀者對新聞的觀感為何。圖為Yahoo!奇摩新聞投票系統。

T客邦也有一些文章引用了資訊圖表,可以到這裡看看。

其實要設計出一份好的資訊圖表,需要花上不少時間精力,絕對比寫篇論文還要累上許多,但若想在論文口試或公司簡報上,讓人眼睛為之一亮,資訊圖表也許能夠助你一臂之力,但由於其本身牽涉到相當程度的視覺設計理論與符號學,設計資訊圖表對於一般人來說,具有較高的門檻,但我們可以先從一些基礎的圖表設計著手,並從網路上優秀的資訊圖表作品中,瞭解認識其特性,並觀察其設計的原理法則,學習試著改變我們一直以來所習慣的直線性思考模式。

當然,我們也不需太過嚴肅,回歸到資訊圖表其中一個最簡單的特點來看的話,那就是,它看起來真的非常賞心悅目,也饒富趣味性。

資訊圖表符合人類大腦需求、古早就有了

現代社會資訊的爆炸性成長,固然是促成資訊圖表這一波盛行的契機,繪圖軟體的進步、網路的發達,及設計美學意識的抬頭也都與此相關,但本質上,資訊圖表終究仍舊脫離不了理論與數據的整合,及其所背負解讀資訊的最終任務。

資訊圖表一詞雖聽起來很新潮,但其實它並非是近幾年新創的產物,除了比手畫腳以外,其實圖像才是人類最早使用的溝通工具,人對於圖像的感受能力遠遠超過於文字,文字與數據本身,都僅是人類所創造出來的一種符號而已,它雖然能夠用來解釋極其複雜的概念,卻也可能反過來讓人更加摸不著頭緒。

所以在很早以前,人們便懂得用圖表來歸結手中所掌握的資訊,舉最普通的例子來說,就是每個人都曾用過的地圖,我們很容易就可以從地圖中直接辨識兩地的方位、大略距離等資訊,而在17世紀時,有位John Snow醫生更利用在地圖上標示霍亂患者的位置,進而找出了霍亂疫情發生的源頭所在,所以藉由資訊圖表,我們還能發現更多數據背後所隱藏的事實。

▲ 1854年由John Snow所繪製的倫敦霍亂疫情圖。

▲ 現今的捷運路線圖設計,其實是來自於一名失業的英國工程製圖師Henry Beck,利用電路圖的概念所設計出來的。

資訊圖表的組成元素與設計法則

圖與文的交互配合使用,早已是我們陳述在某種理論概念時的一種標準表達形式,藉由附圖的說明,使得文字敘述更容易理解,資訊圖表則超越了這種既定的規則,以圖文比例懸殊的9:1或甚至是10:0,來重新建構整串訊息,進而達到言簡意賅、微言大義的層次,雖然資訊圖表的表現手法甚異,但大多數經典的資訊圖表,均包含下列三個重要元素。

  1. 數據資料:詳盡的資料是資訊圖表的骨架所在。
  2. 核心概念:所要傳達給觀看者什麼樣的訊息。
  3. 表現形式:運用視覺設計手法,將上兩項抽象的元素化為有形的圖像符號。

所以資訊圖表之產出,不但考驗著設計者本身對於手中資料的掌握程度,也極端重視基礎邏輯概念的運用,畢竟,能夠讓人理解的訊息,才是有用的訊息。

而加州大學統計學博士Nathan Yau,則認為資訊圖表在設計上,有一些重要的法則需要留意,首先,在構思設計之前,一定要對自己的數據非常瞭解,若是自己都一知半解了,那要如何解釋給別人聽呢?一個好的概念或論述,不一定非得用花俏的圖像展示,那往往會使觀看者失去了焦點,不如用單純而容易理解的圖表來突顯出主題;千萬別以為你的圖表能解釋一切,資料取捨的功夫是相當重要的,如同攝影一樣,視覺設計也是種減法的藝術。

最後,其實還有一個重點,同時也是最容易被忽略的部份,資訊圖表是用來幫助我們去理解複雜的資訊內容,而不是使簡單的內容複雜化,如果我們只是專注於要設計出一幅令人目眩神迷的資訊圖表,那就違反了它的本意了。

▲ 資訊圖表或許還擁有超脫於人類本身限制的能力,比如說:與外星人溝通。

<後面教你利用SmartDraw快速做出圖表>

延伸閱讀:

圖表:得到 Google 工作有多難、10大高薪職位多少錢

iPhone、Android 社交 App 使用比例大調查(資訊圖表)

圖表告訴你,Google、Facebook、Twitter 員工福利有多爽

資訊圖表入門實作:圖表設計

在網路上,你可以找到許多圖表的設計軟體,他們均內建有許多現成的模組,可以幫助你快速的將手邊的數據資訊圖表化,我們可以從中思索的是,不同的資訊,所適合的呈現方式亦不相同,假設你想要講的是汽車的發展史,那時間軸的的圖表設計自然比組織結構圖來得更容易使人瞭解。

另外像是心智圖,它雖然是一種快速筆記的工具,但其中亦包含資訊圖表中所應用到的思考與表現方式,故兩者皆十分適合作為資訊圖表設計的入門,我們在此介紹SmartDraw及MindGenius兩套軟體。

利用SmartDraw製作圖表

Step 1

首先到官網下載並安裝SmartDraw試用版。

Step 2

安裝完成後,開啟主畫面,便可選擇所需的圖表樣式,如圖表、流程圖、分支樹等等,也可繪製平面圖及製作證書。

Step 3

點選左欄的分類,可看到其下還細分成更多種的範本樣式,以地圖為例,除美國以外也可選擇各大洲的區域地圖。

Step 4

軟體內建許多視覺化模組,像是拼圖,可用來呈現合作或緊密關係的具象化,新增拼圖只要從左側工具箱拉進來即可。

Step 5

游標在圖形上按右鍵,便可做進一步的細部設定,如填色或更改線條粗細。

Step 6

在圖形上點兩下便可輸入文字,若輸入中文出現亂碼,記得按右鍵開啟選單,把字型設為中文字型即可。

<後面教你利用MindGenius簡單做出心智圖>

延伸閱讀:

臉書帝國:8億會員等同世界第3大國、2004年網際網路人口

Skype 大揭密:我每天貢獻700,000,000分鐘免費網路電話

網路的演變:Google 出品,看透網路和瀏覽器發展史

資訊圖表入門實作:心智圖

心智圖是在1970年,由一位英國學者Tony Buzan,運用了心理學、神經生理學、語言學、資訊管理、記憶技巧、理解力與創意思考等的多種知識的結合,所設計出的一套輔助思考的方法,它也是傳統思考方式的一種革新,其內涵與資訊圖表的設計元素相當類似,同樣是藉由圖像化資訊來取代繁複的文字敘述。

通常在心智圖的正中央,便是我們的主要課題,藉由往四周擴散的線段,連接次要的子題,所以可以很快的將所有關連的概念串接起來,即使途中不斷加入新的想法,透過心智圖,也能夠一目瞭然的看出整體概念的輪廓,以及它是怎麼成形的,而資訊圖表中,其實也有類似的表現形式,圖表所援引的龐雜資料,就如同心智圖的分支,最後所要呈現的主題,同樣也是整體資料的輪廓,而非某一條分支。

利用MindGenius建立心智圖

Step 1

首先到官網下載並安裝MindGenius試用版。

Step 2

安裝完成後,主歡迎畫面就是MindGenius所設計的心智圖,按左上角建立新文件。

Step 3

開啟新文件便會有一個基本的節點,以這個節點來當做我們的主題,不過我們可以先到format分頁裡的Map Layouts設定心智圖呈現的樣式。

Step 4

假設我們要建立一個「下班後計畫」的心智圖,可以在主節點上按右鍵選child建立子節點,同樣也可在子節點上建立更細分的節點。

Step 5

建立好基本的心智圖後,左下角有分類圖庫可供裝飾,甚至是以圖代文。左上角則是心智圖導覽,當節點與分支過多時,可以利用它做快速搜尋。

Step 6

製作完成後的心智圖,MindGenius並可以選擇匯出成多種格式,如圖片檔、pdf檔、郵件附檔或轉成office格式。

<後面還有圖表蒐集網站介紹>

延伸閱讀:

電子郵件 29歲生日,一張圖看完發展史與使用人數變化

Linux 20歲了,一張圖看盡今昔對比與驚人成長

蘋果樹,一張圖看完35年的 Apple 產品

圖表蒐集網站

比起國內來說,國外的資訊圖表資源及創作者都相當豐富,如果你已經開始試著要創作自己的資訊圖表,那麼多多瀏覽一些圖表的蒐集網站,的確可以激發不少的創意靈感,當然囉,如果只是單純想多方接觸其他領域的知識,那麼一幅擁有優秀設計,且能傳達資料核心概念的資訊圖表,不僅容易理解,其價值可說不下於一篇結構完整的學術論文,而多數的網站都有RSS訂閱及連結社群網站如Facebook、twitter等的功能,可以隨時隨地與朋友分享。

GOOD

GOOD雜誌創刊於2006年,逐步擴增成為現在的媒體平台,其創始理念在於關注社會議題,涵蓋層面包括環境、教育、城市規劃 、設計、食品、政治、文化、衛生等,並曾3次入圍美國國家雜誌獎(National Magazine Award),其中一個因素便在於其豐富的資訊圖表,網站還提供RSS訂閱功能,雖更新速度一般,但在資訊圖表的質與量方面,都可算是重量級的網站。

▲ 除了靜態的單張資訊圖表,網站上也可見到互動式的資訊圖表設計,如圖點擊「NEXT」,便可使資訊圖表的領域擴增到動態的展示。

Cool Infographics

Cool Infographics其實是一個私人的部落格,站長Randy Krum,是一家視覺設計公司 InfoNewt的創辦人,從2006年開始,他便不斷在報紙及網路上蒐集各類型傑出的資訊圖表範例,並轉載到部落格內分享,因此在數量上及更新的速度都很不錯,至今每天有超過3000名的訪客人數及每月20萬人次的瀏覽量,是豐富的資訊圖表蒐集站。

▲ 設計精美的資訊圖表常被製作成海報出售,網站亦蒐集許多此類資訊,點選連結,便可連到購買網頁,但需注意並非全都有運送至台灣的服務。

Visual Complexity

如網站名稱Visual Complexity所提示,這裡所蒐集的資訊圖表,幾乎都是以繁複華麗而著稱,光看圖就已經是一種視覺享受,這個網站的主要目標,是蒐集並利用不同的視覺化設計方法,像是形狀、顏色、大小、距離等視覺元素,對於各種學科如生物學、社會脈絡進行一種批判性的理解,並期望激勵和啟迪任何人從事於這方面的研究。

▲ 點選喜歡的資訊圖表,進入後會有作者、年份、作品簡介等相關資訊。

▲ 主題分類相當明確,除了依藝術、生物、經濟等主題分類外,也可按照作者或年代來劃分,使用者可輕易找到自己需要的資訊圖表。

圖研所

在中文的領域裡,資訊圖表的網站資源並不算多,而「圖研所」不僅是一個資訊圖表蒐集 站,同時它也是一個交流及分享的平臺。除了網集各種資訊設計的相關案例,也有資訊設計理論等相關翻譯文章,還能將各種設計案例、理論文章、設計資訊上傳到網站,與他人共同分享,並可以透過圖片下方的添加評論,發表自己的看法與網友互相交流。

▲ 網站內可找到許多中文的資訊圖表,減少語言的隔閡。

▲ 除了資訊圖表,也有圖表設計的相關理論及教學文章。

延伸閱讀:

用漂亮圖表看中國河蟹了哪些關鍵字

色情網站多受歡迎?有多好賺?14個統計圖表告訴你

強!以組織圖嘲諷 Apple、Microsoft、Oracle

本文同步刊載於PC home雜誌
 

歡迎加入PC home雜誌粉絲團

原文網址:https://t17.techbang.com/topics/9500-with-information-chart-to-simplify-long-winded-web-site-creation-tools-and-charts-to-collect?page=1