不止于美:淺析信息圖形設(shè)計
人在喝完可樂一小時內(nèi)會有什么反應(yīng)?高速發(fā)展的中國互聯(lián)網(wǎng)在一分鐘內(nèi)會發(fā)生些什么事情?美國大選,川普和希拉里的支持率到底有多大差距?信息圖帶你一分鐘搞懂這些事!隨著經(jīng)濟(jì)技術(shù)的發(fā)展,信息化科技化速度越來越快,信息量的不斷增加,使我們對于信息的整理與識別要求也越來越高。繁忙的工作生活下,如何使信息更為直觀的提供給用戶,信息圖形設(shè)計在這種環(huán)境下應(yīng)運(yùn)而生。
一. 什么是信息圖形
信息圖形設(shè)計就是針對內(nèi)容復(fù)雜、難以描述的信息進(jìn)行充分的理解、提煉、整理、分類,并通過設(shè)計將其視覺化,通過圖形簡單清晰地向用戶以更為直觀的形式展示,這種圖就叫做信息圖形。
信息圖形由信息和圖形兩個詞語組成,它被稱之為“信息圖形”(Infographics或Information Graphics)。信息圖形最初是用在報紙、雜志、新聞等媒體刊登的一般圖解。圖解這個詞在國內(nèi)外使用了多年,它只是為了充分利用信息,而將這些信息進(jìn)行功能性的整理。有時候,信息圖形也會運(yùn)用符合各種文化習(xí)慣的比喻等手法,以不同的形式來表達(dá)。這種信息圖形能使用戶有驚喜感,也更容易理解、印象深刻。信息圖形設(shè)計不僅從功能上滿足人們對于信息的直觀了解,同時從感官上帶給人們更多的視覺享受。
二. 為什么要進(jìn)行信息圖形設(shè)計
1. 簡化復(fù)雜的概念
面對復(fù)雜的事物,如何快速了解它到底是什么,有什么用?利用圖形能使你快速理解信息,專注于信息結(jié)論,獲得更輕松、更聚焦的閱讀體驗。
2. 讓用戶記得更多更牢
相比于文字,人們能夠在同等時間內(nèi)記住更多信息圖的內(nèi)容。如下圖中,禁止游泳的圖形和兩行文字,很明顯,圖形獲取信息的速度快于文字。而且,圖形的顏色很直觀的傳達(dá)了危險的信號。
3. 易傳播
一張信息圖相當(dāng)于一張創(chuàng)意海報,收藏、轉(zhuǎn)發(fā)都是分分鐘的事情,在手機(jī)、電腦、易拉寶什么地方都能清晰展示。
4. 對比更清晰
這個事物和那個事物有多大區(qū)別?一條條的文字說明看起來太麻煩,來張圖吧,簡單明了的多。
三. 信息圖形的分類
根據(jù)木村博之的定義,從視覺表現(xiàn)形式的角度,將“信息圖形”的呈現(xiàn)方式分為六大類:圖解(Diagram)、圖表(Chart)、表格(Table)、統(tǒng)計圖(Graph)、地圖(Map)、圖形符號(Pictogram)。
1. 圖解(Diagrams):主要運(yùn)用插圖會事物進(jìn)行說明
有些東西僅靠語言是無法有效傳遞的,但是通過圖解就能很好的傳達(dá)你所想要表達(dá)得信息。下圖是一張健身動作圖解,48 種健身動作,圖解是每個健身動作。少去繁雜的文字解釋,直接用圖解表示,直觀明了。
2. 圖表(Charts):運(yùn)用圖形、線條、及插圖等,闡述事物的相互關(guān)系
圖表是將復(fù)雜的信息進(jìn)行整理,使之一目了然的表現(xiàn)形式。它運(yùn)用線條連接或區(qū)分事物,利用箭頭指示方向,將事物之間的關(guān)系表達(dá)得足夠清楚明晰。流程圖就是典型的圖表。
下圖是一張?zhí)撼尚蔚陌l(fā)育圖,巧妙的運(yùn)用了圖形變化和線條的順時針轉(zhuǎn)動向我們展示了整個過程。
3. 表格(Table):根據(jù)特定信息標(biāo)準(zhǔn)進(jìn)行區(qū)分,設(shè)置縱軸和橫軸
表格是指按照一定的標(biāo)準(zhǔn)、規(guī)則設(shè)置縱軸與橫軸,將數(shù)據(jù)進(jìn)行羅的表現(xiàn)形式。
4. 統(tǒng)計圖(Graph)? —? 通過數(shù)值來表現(xiàn)變化趨勢或者進(jìn)行比較
常用的統(tǒng)計圖有三種,根據(jù)主要功能,可以將其分為兩大類。第一類是為了體現(xiàn)變化或比較關(guān)系的柱狀圖及折線圖;第二類是用于體現(xiàn)某種要素在整體中所占比例的餅圖。
上圖,是某活動頁面的信息圖形展示,通過這些柱狀圖和折線圖,我們能很清晰地看到通過這個活動頁,用戶從參與、領(lǐng)取優(yōu)惠券、下單到成功支付的比例是怎樣的,以及訂單的金額和新用戶的參與情況。
5. 地圖(Map) :描述在特定區(qū)域和空間里的位置關(guān)系
將真實的世界轉(zhuǎn)換為平面,在此過程中必然要將一些東西略去。實際上,要說“省略”是地圖上最關(guān)鍵的詞也不為過。無論是哪種信息地圖,最重要的是讓用戶找到想要看到的信息。信息地圖也可分為兩大類:第一類:將整個區(qū)域的布局或結(jié)構(gòu)完整呈現(xiàn)的地圖;第二類:將特定對象突出顯示的地圖??纯匆韵旅绹筮x中的美國地圖吧!
6. 圖形符號(Pictogram):不使用文字,直接運(yùn)用圖畫傳達(dá)信息
所謂圖形符號,基本就是利用圖形,通過易于理解、與人直覺相符的形式傳達(dá)信息的一種形式。我們在街上、商場里、機(jī)場、醫(yī)院,經(jīng)常會看到圖形符號,有些是指示方向的標(biāo)記,有些是安全出口之類的標(biāo)記。圖形符號的設(shè)計原則是盡可能不使用文字,避免語言不通造成困擾,圖形要易懂。
小結(jié):信息圖形的設(shè)計,基本是運(yùn)用這些元素設(shè)計的,有的可能用了其中一個元素,有的可能用了幾個元素,有的信息圖形可能涵蓋了這六大元素。一個好的信息圖,不是為了做一個好看的圖表,而是講好了一個故事。歸根究底,還是那句話:形式跟隨內(nèi)容。
四. 什么才算好的信息圖形設(shè)計?
2009年2月,由國際新聞媒體視覺設(shè)計協(xié)會(SND)主辦的新聞視覺設(shè)計大賽在美國紐約州Syracuse舉行, 評審結(jié)束后,圖文設(shè)計組的專家們總結(jié)了他們認(rèn)為的在制作理想的信息圖時應(yīng)該考慮的五大要素:
1. 吸引眼球,令人心動
龐大的信息量充斥我們的生活,一張信息圖的設(shè)計如果沒有特色很快就會被淹沒。因此,不論是從結(jié)構(gòu)出發(fā),還是趣味性,抑或是色彩沖擊力,一定要有足夠吸引人的地方,首先讓用戶產(chǎn)生興趣。不管是展示什么樣的信息內(nèi)容,都要加入一些讓人耳目一新的元素。
注:但需要注意的是,刻意的追求不同也是不可取的。
這是一張facebook社交圖,美國的facebook friendships(臉譜好友)度是最高的,而非洲是最低的。南極洲和俄羅斯基本上看不到,其他地區(qū)相對比較明顯。
2. 準(zhǔn)確傳達(dá),清晰明了
想要傳達(dá)給用戶的內(nèi)容,還沒有在大腦里面好好思考就急于去設(shè)計,其結(jié)果就像一個人說話文不對題一樣。用戶遇到這種設(shè)計的時候,很難從你的設(shè)計中提取到有效信息。設(shè)計重心不明確,設(shè)計就會顯得搖擺不定,注定做不出好的圖形。所以在信息圖形設(shè)計中,要學(xué)會取舍,要給用戶傳達(dá)一個最想要傳達(dá)的主題,然后將這個主題巧妙的表現(xiàn)出來。
Kantar Media CIC,在上海發(fā)布了「60 秒看中國社會化媒體表現(xiàn)」信息圖(上圖)。該信息圖提供直觀全面的中國社會化媒體表現(xiàn),幫助客戶更好地了解中國社會化媒體平臺每天產(chǎn)生的數(shù)以億萬計的數(shù)據(jù) 。
3. 去粗取精,簡單易懂
根據(jù)概念去推敲創(chuàng)意時,其要點在于要從龐大的信息量中將真正必要的信息甄選出來。所謂“真正必要的信息”指的是那些能使用最少的信息使效果最大化的內(nèi)容。好的設(shè)計,讀者只需掃一眼就能知道其主旨是什么。因此,我們要有快速從信息中抓取最有價值的元素。
簡化也不單單只是對信息內(nèi)容進(jìn)行簡化,表現(xiàn)手法也可簡化。如下圖,關(guān)于咖啡種類的說明,通過一杯咖啡的圖形樣式,不但直觀的表現(xiàn)出不同種類咖啡的成分組成,而且各成分之間的比例關(guān)系也一目了然。
4. 依據(jù)視線,眼動規(guī)律
這一點要求我們注意視線的移動規(guī)律。比如橫向排版的信息,人們一般會首先注意左上角。因此,標(biāo)題一般出現(xiàn)在這個位置??催^左上角之后,用戶的視線會往右下方移動。我們在排版布局的時候,應(yīng)該遵循視線的移動規(guī)律,人眼在觀察物體的時候,目光不會只聚焦在一點上,而是會覆蓋焦點周邊的一片區(qū)域。把時間的流逝感和視線的移動相結(jié)合,就能產(chǎn)生更好的效果。
5. 少用文字,用圖釋義
一幅信息圖很少或沒有沒有文字信息,其內(nèi)涵也能被用戶充分理解,這才不失為最理想的信息圖,這張圖在全世界范圍內(nèi)使用,也不會有什么問題。因此,我們在信息圖形的設(shè)計過程中,不采用大篇幅的文字,而是盡量使用圖形。在信息設(shè)計中,確保在語言不通的情況下也能讓讀者無誤的理解信息內(nèi)容,這是信息圖形設(shè)計所要追求的目標(biāo)。
圖中通過箭頭的方向表示非洲出口的目標(biāo)國,并且通過箭頭的大小對比來表現(xiàn)不同的出口增長率。文字信息很少,卻能很清楚的傳達(dá)信息。
總結(jié)
在信息圖的制作過程中,設(shè)計只是其中的一個環(huán)節(jié)而已,清晰明了地傳達(dá)主題才是我們設(shè)計的核心內(nèi)容,掌握這些技巧是為了實現(xiàn)這個最終目的。信息圖形的設(shè)計也并不是隨意而為,它是一個循序漸進(jìn)的過程,主導(dǎo)設(shè)計全程的并非只是美感和創(chuàng)意,而恰恰應(yīng)該是理性思維。因為對設(shè)計而言,是要為信息服務(wù),確保信息更為明確、有效地為人們所接受,在這個基礎(chǔ)上,再去追求美感和創(chuàng)意。
參考文獻(xiàn):木村博之《圖解力》
作者:許琴,UEDC視覺設(shè)計師,現(xiàn)從事網(wǎng)易帳號中心視覺設(shè)計,做過手機(jī)ROM、IM產(chǎn)品、云端存儲產(chǎn)品等;熱愛設(shè)計,相信設(shè)計可以改變生活,且在此過程中貢獻(xiàn)自己的力量。
本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC,作者@許琴
好想看到一些實際產(chǎn)品設(shè)計的例子,哈哈
信息圖制作流程圖啟發(fā)頗深,感謝分享!
看完,賞心悅目