不止於美:淺析信息圖形設計

人在喝完可樂一小時內會有什麼反應？高速發展的中國網際網路在一分鐘內會發生些什麼事情？美國大選，川普和希拉蕊的支持率到底有多大差距？信息圖帶你一分鐘搞懂這些事！隨著經濟技術的發展，信息化科技化速度越來越快，信息量的不斷增加，使我們對於信息的整理與識別要求也越來越高。繁忙的工作生活下，如何使信息更為直觀的提供給用戶，信息圖形設計在這種環境下應運而生。

一. 什麼是信息圖形

信息圖形設計就是針對內容複雜、難以描述的信息進行充分的理解、提煉、整理、分類，並通過設計將其視覺化，通過圖形簡單清晰地向用戶以更為直觀的形式展示，這種圖就叫做信息圖形。

信息圖形由信息和圖形兩個詞語組成，它被稱之為「信息圖形」（Infographics或Information Graphics）。信息圖形最初是用在報紙、雜誌、新聞等媒體刊登的一般圖解。圖解這個詞在國內外使用了多年，它只是為了充分利用信息，而將這些信息進行功能性的整理。有時候，信息圖形也會運用符合各種文化習慣的比喻等手法，以不同的形式來表達。這種信息圖形能使用戶有驚喜感，也更容易理解、印象深刻。信息圖形設計不僅從功能上滿足人們對於信息的直觀了解，同時從感官上帶給人們更多的視覺享受。

二. 為什麼要進行信息圖形設計

1. 簡化複雜的概念

面對複雜的事物，如何快速了解它到底是什麼，有什麼用？利用圖形能使你快速理解信息，專注於信息結論，獲得更輕鬆、更聚焦的閱讀體驗。

2. 讓用戶記得更多更牢

相比於文字，人們能夠在同等時間內記住更多信息圖的內容。如下圖中，禁止遊泳的圖形和兩行文字，很明顯，圖形獲取信息的速度快於文字。而且，圖形的顏色很直觀的傳達了危險的信號。

3. 易傳播

一張信息圖相當於一張創意海報，收藏、轉發都是分分鐘的事情，在手機、電腦、易拉寶什麼地方都能清晰展示。

4. 對比更清晰

這個事物和那個事物有多大區別？一條條的文字說明看起來太麻煩，來張圖吧，簡單明了的多。

三. 信息圖形的分類

根據木村博之的定義，從視覺表現形式的角度，將「信息圖形」的呈現方式分為六大類：圖解（Diagram）、圖表（Chart）、表格（Table）、統計圖（Graph)、地圖（Map)、圖形符號（Pictogram）。

1. 圖解（Diagrams）：主要運用插圖會事物進行說明

有些東西僅靠語言是無法有效傳遞的，但是通過圖解就能很好的傳達你所想要表達得信息。下圖是一張健身動作圖解，48 種健身動作，圖解是每個健身動作。少去繁雜的文字解釋，直接用圖解表示，直觀明了。

2. 圖表（Charts）：運用圖形、線條、及插圖等，闡述事物的相互關係

圖表是將複雜的信息進行整理，使之一目了然的表現形式。它運用線條連接或區分事物，利用箭頭指示方向，將事物之間的關係表達得足夠清楚明晰。流程圖就是典型的圖表。

下圖是一張胎兒成形的發育圖，巧妙的運用了圖形變化和線條的順時針轉動向我們展示了整個過程。

3. 表格（Table）：根據特定信息標準進行區分，設置縱軸和橫軸

表格是指按照一定的標準、規則設置縱軸與橫軸，將數據進行羅的表現形式。

4. 統計圖（Graph)  —  通過數值來表現變化趨勢或者進行比較

常用的統計圖有三種，根據主要功能，可以將其分為兩大類。第一類是為了體現變化或比較關係的柱狀圖及折線圖；第二類是用於體現某種要素在整體中所佔比例的餅圖。

上圖，是某活動頁面的信息圖形展示，通過這些柱狀圖和折線圖，我們能很清晰地看到通過這個活動頁，用戶從參與、領取優惠券、下單到成功支付的比例是怎樣的，以及訂單的金額和新用戶的參與情況。

5. 地圖（Map) ：描述在特定區域和空間裡的位置關係

將真實的世界轉換為平面，在此過程中必然要將一些東西略去。實際上，要說「省略」是地圖上最關鍵的詞也不為過。無論是哪種信息地圖，最重要的是讓用戶找到想要看到的信息。信息地圖也可分為兩大類：第一類：將整個區域的布局或結構完整呈現的地圖；第二類：將特定對象突出顯示的地圖。看看以下美國大選中的美國地圖吧！

6. 圖形符號（Pictogram）：不使用文字，直接運用圖畫傳達信息

所謂圖形符號，基本就是利用圖形，通過易於理解、與人直覺相符的形式傳達信息的一種形式。我們在街上、商場裡、機場、醫院，經常會看到圖形符號，有些是指示方向的標記，有些是安全出口之類的標記。圖形符號的設計原則是儘可能不使用文字，避免語言不通造成困擾，圖形要易懂。

小結：信息圖形的設計，基本是運用這些元素設計的，有的可能用了其中一個元素，有的可能用了幾個元素，有的信息圖形可能涵蓋了這六大元素。一個好的信息圖，不是為了做一個好看的圖表，而是講好了一個故事。歸根究底，還是那句話：形式跟隨內容。

四. 什麼才算好的信息圖形設計？

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

1. 吸引眼球，令人心動

龐大的信息量充斥我們的生活，一張信息圖的設計如果沒有特色很快就會被淹沒。因此，不論是從結構出發，還是趣味性，抑或是色彩衝擊力，一定要有足夠吸引人的地方，首先讓用戶產生興趣。不管是展示什麼樣的信息內容，都要加入一些讓人耳目一新的元素。

註：但需要注意的是，刻意的追求不同也是不可取的。

這是一張facebook社交圖，美國的facebook friendships（臉譜好友）度是最高的，而非洲是最低的。南極洲和俄羅斯基本上看不到，其他地區相對比較明顯。

2. 準確傳達，清晰明了

想要傳達給用戶的內容，還沒有在大腦裡面好好思考就急於去設計，其結果就像一個人說話文不對題一樣。用戶遇到這種設計的時候，很難從你的設計中提取到有效信息。設計重心不明確，設計就會顯得搖擺不定，註定做不出好的圖形。所以在信息圖形設計中，要學會取捨，要給用戶傳達一個最想要傳達的主題，然後將這個主題巧妙的表現出來。

Kantar Media CIC，在上海發布了「60 秒看中國社會化媒體表現」信息圖（上圖）。該信息圖提供直觀全面的中國社會化媒體表現，幫助客戶更好地了解中國社會化媒體平臺每天產生的數以億萬計的數據 。

3. 去粗取精，簡單易懂

根據概念去推敲創意時，其要點在於要從龐大的信息量中將真正必要的信息甄選出來。所謂「真正必要的信息」指的是那些能使用最少的信息使效果最大化的內容。好的設計，讀者只需掃一眼就能知道其主旨是什麼。因此，我們要有快速從信息中抓取最有價值的元素。

簡化也不單單只是對信息內容進行簡化，表現手法也可簡化。如下圖，關於咖啡種類的說明，通過一杯咖啡的圖形樣式，不但直觀的表現出不同種類咖啡的成分組成，而且各成分之間的比例關係也一目了然。

4. 依據視線，眼動規律

這一點要求我們注意視線的移動規律。比如橫向排版的信息，人們一般會首先注意左上角。因此，標題一般出現在這個位置。看過左上角之後，用戶的視線會往右下方移動。我們在排版布局的時候，應該遵循視線的移動規律，人眼在觀察物體的時候，目光不會只聚焦在一點上，而是會覆蓋焦點周邊的一片區域。把時間的流逝感和視線的移動相結合，就能產生更好的效果。

5. 少用文字，用圖釋義

一幅信息圖很少或沒有沒有文字信息，其內涵也能被用戶充分理解，這才不失為最理想的信息圖，這張圖在全世界範圍內使用，也不會有什麼問題。因此，我們在信息圖形的設計過程中，不採用大篇幅的文字，而是儘量使用圖形。在信息設計中，確保在語言不通的情況下也能讓讀者無誤的理解信息內容，這是信息圖形設計所要追求的目標。

圖中通過箭頭的方向表示非洲出口的目標國，並且通過箭頭的大小對比來表現不同的出口增長率。文字信息很少，卻能很清楚的傳達信息。

總結

在信息圖的製作過程中，設計只是其中的一個環節而已，清晰明了地傳達主題才是我們設計的核心內容，掌握這些技巧是為了實現這個最終目的。信息圖形的設計也並不是隨意而為，它是一個循序漸進的過程，主導設計全程的並非只是美感和創意，而恰恰應該是理性思維。因為對設計而言，是要為信息服務，確保信息更為明確、有效地為人們所接受，在這個基礎上，再去追求美感和創意。

參考文獻：木村博之《圖解力》

 

作者：許琴，UEDC視覺設計師，現從事網易帳號中心視覺設計，做過手機ROM、IM產品、雲端存儲產品等；熱愛設計，相信設計可以改變生活，且在此過程中貢獻自己的力量。

本文來源於人人都是產品經理合作媒體@網易UEDC，作者@許琴

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}