李湘皖

引言

《圖解力》一書中提到：針對(duì)內(nèi)容復(fù)雜、難以形象表述的信息，先進(jìn)行充分的理解、系統(tǒng)梳理、再使其視覺化，通過圖形簡單清晰地向讀者呈現(xiàn)出來的圖叫作信島圖。每天，我們?cè)诟鞣N媒介中都能看到信息圖的身影。進(jìn)入互聯(lián)網(wǎng)時(shí)代后，人類社會(huì)信息占有量達(dá)到了空前龐大的程度，亟需一種更加有效的形式予以傳播。此外，包括HTML5、CSS3等技術(shù)的完善和許多數(shù)據(jù)分析軟件的出現(xiàn)等多重因素，使得信息圖首次在社會(huì)各領(lǐng)域廣泛傳播開來。正因?yàn)樾畔D的重要性被逐漸發(fā)現(xiàn)，有很多學(xué)者撰文研究信息圖的設(shè)計(jì)方法，比如：西北工業(yè)大學(xué)機(jī)電學(xué)院的高敏倬、陳登凱、謝凝試圖從圖形符號(hào)出發(fā)，通過研究用戶的信息加工程序和模式，開發(fā)出一個(gè)APP，讓設(shè)計(jì)師在沒有掌握專業(yè)設(shè)計(jì)軟件和手法的情況下更便捷和人性化地制作出信息圖;在《自己動(dòng)手制作“感人”的信息圖》一文中，作者首先明確信息圖的類型、收集信息資料、制作草圖等流程，最后使用了網(wǎng)站的信息圖的在線制作服務(wù)和Adobe Illustrator軟件分別制作了兩幅信息圖。

那么是不是任何圖形和文字相結(jié)合傳達(dá)信息的圖表都能算信息圖呢？信息圖到底屬于哪種設(shè)計(jì)范疇？它有什么設(shè)計(jì)規(guī)律？如何制作出優(yōu)秀的信息圖呢？

一、信息圖的設(shè)計(jì)范疇

（一）信息圖和視覺傳達(dá)設(shè)計(jì)：首先，筆者認(rèn)為，信息圖設(shè)計(jì)屬于視覺傳達(dá)設(shè)計(jì)在新媒體和大數(shù)據(jù)時(shí)代，延伸出的全新設(shè)計(jì)形式。所以，當(dāng)我們要分辨一張作品是否屬于信息圖時(shí)，可以嘗試將圖中的文字都遮住抹去，考察只看圖形是否能夠有效辨識(shí)這張?jiān)O(shè)計(jì)作品的主要含義。如果剩下的圖形仍然能夠有效傳達(dá)信息，那它就是一張信息圖，反之，那它就不具備視覺傳達(dá)設(shè)計(jì)的特征，所以不是一張信息圖。

（二）信息圖、MG動(dòng)畫設(shè)計(jì)和交互式信息圖設(shè)計(jì)：視覺傳達(dá)設(shè)計(jì)發(fā)展到新媒體時(shí)代，除了信息圖這一種形式外，還有MG（Motion Graphic）動(dòng)畫設(shè)計(jì)和交互式信息圖設(shè)計(jì)這兩種形式。有時(shí)客戶不僅需要制作出靜態(tài)的信息圖，還有更高的需求。同時(shí)基于作品展示方式的要求，設(shè)計(jì)師會(huì)嘗試選擇動(dòng)態(tài)的形式更有效地傳達(dá)信息，也就是MG動(dòng)畫。MG動(dòng)畫能更有效地傳達(dá)信息，動(dòng)畫的復(fù)雜程度可以根據(jù)客戶需求決定;隨著htm15技術(shù)的發(fā)展，交互式信息圖也開始流行不同于其他的視覺傳達(dá)形式以及普通的網(wǎng)頁設(shè)計(jì)在這種形式的視覺傳達(dá)設(shè)計(jì)作品中，觀眾可以通過點(diǎn)擊的方式，獲得更深層的數(shù)據(jù)信息。以上信息圖、MG動(dòng)畫和交互式信息圖三種視覺傳達(dá)設(shè)計(jì)的形式，設(shè)計(jì)的難易程度由易到難，而且靜態(tài)信息圖設(shè)計(jì)是MG動(dòng)畫和交互式信息圖設(shè)計(jì)的基礎(chǔ)。本文討論的信息圖都是指的靜態(tài)信息圖。

二、信息圖設(shè)計(jì)的基本原則

明確了信息圖設(shè)計(jì)是屬于視覺傳達(dá)設(shè)計(jì)范疇之后，筆者就信息圖的設(shè)計(jì)特性、設(shè)計(jì)目標(biāo)、設(shè)計(jì)要點(diǎn)和設(shè)計(jì)形式等方面，分析歸納信息圖設(shè)計(jì)的基本原則：

（一）以圖形設(shè)計(jì)為主導(dǎo)：視覺傳達(dá)設(shè)計(jì)要求信息圖中的圖形要通過造型、顏色、版式安排和紋理等視覺形式傳達(dá)信息，文字則起輔助的解釋說明作用。有些看似信息圖的作品中，文字和數(shù)字布滿畫面，同時(shí)起到信息傳達(dá)支撐作用，這種作品不算作信息圖，只能算是一副圖表。

（二）突出達(dá)成一個(gè)設(shè)計(jì)目標(biāo)：信息圖在商業(yè)經(jīng)濟(jì)中常常被用作一種營銷手段。這時(shí)，信息圖的設(shè)計(jì)目標(biāo)主要包括三個(gè)營銷目的：通過增加閱讀流量達(dá)成銷售目的、通過傳達(dá)思想凸顯品牌特征、通過社會(huì)分享達(dá)到社會(huì)引領(lǐng)的效果。在信息圖設(shè)計(jì)和評(píng)價(jià)信息圖設(shè)計(jì)效果的時(shí)候，我們不能以這三個(gè)目標(biāo)來共同衡量.而是選擇其中一個(gè)目標(biāo)貫穿在整個(gè)信息圖設(shè)計(jì)過程，并以是否達(dá)到這個(gè)目標(biāo)為最終的衡量標(biāo)準(zhǔn)即可。

（三）抓住用戶短暫的注意力：由于我們身處信息爆炸的時(shí)代，信息無處不在。信息圖必須把握用戶注意力集中的短短幾秒鐘：在題頭或者設(shè)計(jì)作品的視覺中心位置抓住用戶，并吸引他們繼續(xù)往下看。在豎向構(gòu)圖的信息圖中，需要在題頭700dpi的范圍之內(nèi)制作出能有效吸引用戶的圖形圖像內(nèi)容，這大概是電腦屏幕1/3左右的位置;如果是橫向的信息圖，則應(yīng)該在中心位置做出精彩的內(nèi)容。（如圖1）所示，這是為英特爾公司瀏覽器制作的信息圖，在這個(gè)豎向構(gòu)圖的信息圖中，我們?cè)陧敳?、中部和底部可以很清楚地識(shí)別“Good ldea”（好主意）這幾個(gè)鮮明的字，這都是能吸引觀者的主意力，讓他們繼續(xù)往下看信息圖，以期發(fā)現(xiàn)到底是什么好主意。

（四）提煉好的設(shè)計(jì)形式：設(shè)計(jì)形式是指信息圖中組織圖形和文字的方式.比如：對(duì)比、對(duì)稱、層級(jí)遞進(jìn)和均衡分布等。有時(shí)用戶提出的設(shè)計(jì)需求，讓設(shè)計(jì)師不能馬上找到合適的設(shè)計(jì)形式來表現(xiàn)。（如圖2）所示，客戶的意圖是為了宣傳極客文化，如果在信息圖中進(jìn)行與極客相關(guān)的信息羅列，信息圖的效果將會(huì)很平淡。但是在這件設(shè)計(jì)作品中，設(shè)計(jì)師以西雅圖極客和硅谷極客為例，繪制出兩類極客的典型形象和著裝特點(diǎn)，讓觀者從具象的對(duì)比中獲得信息，畫面效果效果有趣、生動(dòng)而吸引入。所以，要將商品信息組織概括成一種合適的設(shè)計(jì)形式，是需要設(shè)計(jì)師創(chuàng)意思維的。選擇了合適的設(shè)計(jì)形式，信息圖的設(shè)計(jì)效果將會(huì)非常好，同時(shí)給觀者留下深刻的印象，并極好地達(dá)成營銷目的。

（五）使用統(tǒng)一的計(jì)數(shù)方式：信息圖中會(huì)引用包含大量數(shù)據(jù)的圖表，其中計(jì)量數(shù)據(jù)時(shí)，有不同的計(jì)數(shù)表達(dá)方式。在一組數(shù)據(jù)的呈現(xiàn)和表達(dá)過程中一定要保證前后統(tǒng)一，否則會(huì)極大破壞信息圖的統(tǒng)一性。

三、信息圖的設(shè)計(jì)流程

信息圖設(shè)計(jì)和其他類型的視覺傳達(dá)設(shè)計(jì)一樣，設(shè)計(jì)的過程包括構(gòu)思策劃、繪制草圖、使用軟件制作定稿、修改完善和客戶反饋等設(shè)計(jì)步驟。但信息圖又有以下的特殊性：首先，信息圖是完全基于數(shù)據(jù)的可視化設(shè)計(jì)以數(shù)據(jù)分析為基礎(chǔ);其次，龐雜的信息一定要在信息圖中層次分明并通過合適的圖形、顏色、字體和版式進(jìn)行組織;再次，信息圖的設(shè)計(jì)元素種類多、數(shù)量多且比較零碎，選擇合適的軟件來完成制作，用正確的思維分析客戶的反饋，常常能讓我們的設(shè)計(jì)過程達(dá)到事半功倍的效果。所以，在信息圖設(shè)計(jì)過程中，除了要牢牢把握住以上五個(gè)設(shè)計(jì)原則，還要遵循特定的設(shè)計(jì)流程。

（一）分析數(shù)據(jù)信息：將信息分層組織，讓設(shè)計(jì)師清晰明7一在給設(shè)計(jì)師呈現(xiàn)腳本信息時(shí)，可以將原數(shù)據(jù)信息文件按照標(biāo)題、內(nèi)容、數(shù)字論據(jù)等層級(jí)，使用標(biāo)黑加粗的方式進(jìn)行整理后，進(jìn)行處理。這樣，設(shè)計(jì)師接手時(shí)，就能更好地分層、分部分將它們?cè)O(shè)計(jì)成相對(duì)應(yīng)的圖形信息圖。

（二）要使用有說服力的數(shù)據(jù)論據(jù)：獲取數(shù)據(jù)時(shí)，需要注意以下的幾點(diǎn)：1.可以通過在搜索引擎輸入關(guān)鍵詞獲得數(shù)據(jù);2.使用搜索引擎的過濾器來獲得更精確的信息;3.不要使用單一作者提供的片面數(shù)據(jù)信息，因?yàn)榭赡芴^片面。

（三）注意使用一手?jǐn)?shù)據(jù)：選用.gov、org和.edu這樣的網(wǎng)站發(fā)布的一手?jǐn)?shù)據(jù)?？梢栽谶@些網(wǎng)站，先找到與設(shè)計(jì)項(xiàng)目王題相關(guān)的文章，再通過引用文獻(xiàn)找到更多的相關(guān)數(shù)據(jù)。同時(shí)，有時(shí)要注意避免引用這樣的數(shù)據(jù)和信息：“經(jīng)研究表明……”，但并未列出是基于什么研究。

（四）繪制線框草圖：設(shè)計(jì)師完成設(shè)計(jì)作品的第一個(gè)步驟往往是繪制手繪草圖，這樣有助于設(shè)計(jì)師展開思路，但也容易因涉及方方面面，而過于細(xì)化。如果在遞交初稿給客戶的時(shí)候，呈現(xiàn)的是這種手繪草圖，容易在與客戶討論的過程中，糾纏于更多細(xì)節(jié)方面討論。如果，這時(shí)設(shè)計(jì)師用的是線框圖，（如圖3）所示，情況就會(huì)有很大改善。線框圖提供的是一個(gè)信息框架指引，而不是讓設(shè)計(jì)師一開始就具體到選擇設(shè)計(jì)形式。這樣就比較容易得到來自客戶的有建設(shè)性的意見。在當(dāng)作初稿的線框圖中，要求繪制盡可能簡單而且精確。首先，它要告訴客戶，信息是如何在最終的作品上組織和可視化表達(dá)的，這樣客戶能根據(jù)自己的營銷目標(biāo)提出有建設(shè)性的意見。其次，也能夠讓設(shè)計(jì)師自己在正式開始設(shè)計(jì)制作前，有機(jī)會(huì)在信息框架的基礎(chǔ)上做設(shè)計(jì)決策，如：設(shè)計(jì)風(fēng)格等。如果沒有線框圖作為基礎(chǔ)，設(shè)計(jì)師在做設(shè)計(jì)決策時(shí)往往是采用最簡單易行的方式進(jìn)行信息圖設(shè)計(jì)這樣，讓最后的信息圖設(shè)計(jì)質(zhì)量大打折扣。繪制線框圖最好的工具是Adobe Illustrator，顏色最好采用黑白色的形式，這樣客戶在看初稿時(shí)，不會(huì)容易迷失在細(xì)節(jié)中。

（五）確定設(shè)計(jì)風(fēng)格：信息圖的設(shè)計(jì)風(fēng)格要從三個(gè)方面來決定：主題、目標(biāo)和受眾.如果是悲傷的主題，就不要選擇亮色和歡決的字體。設(shè)計(jì)師可以參考設(shè)計(jì)師配色書籍和網(wǎng)站，確定合適的和最新的配色趨勢。除了顏色和字體，插畫的圖形風(fēng)格也是確定設(shè)計(jì)風(fēng)格非常重要的設(shè)計(jì)元素，比如為年輕的客戶選擇明快清新的設(shè)計(jì)風(fēng)格，為商業(yè)客戶選擇商務(wù)聚焦的風(fēng)格。

（六）使用Illustrator完成信息圖設(shè)計(jì)：lllustrator中有專門的圖表工具。以柱狀圖和餅圖工具為例，它們可以通過在類似Excel的輸入框中完成數(shù)據(jù)輸入，再由軟件將數(shù)據(jù)轉(zhuǎn)換成圖表，圖表的顏色和形狀都可以進(jìn)行非常容易的再編輯。在使用Illustrator時(shí)，有一些使用的小竅門是經(jīng)常用到的：第一，要記住幾個(gè)快捷鍵：Shift鍵可以保證對(duì)象等比例縮放;Space鍵可以方便移動(dòng)選框和路徑如果要編輯圖中的一部分，則要使用蒙版，并在選取確定的情況下，使用control/Command+7鍵;按住Alt鍵同時(shí)拖拽，可以在指定位置復(fù)制對(duì)象;第二、善用Illustrator的顏色版和重新著色工具。如果我們?cè)诶L制信息圖時(shí)，使用了客戶不喜歡的顏色或發(fā)現(xiàn)用色錯(cuò)誤，要逐個(gè)修改信息圖中的顏色將是一件非常耗時(shí)的工作。但如果我們使用顏色板和重新著色工具，就能快捷而智能地快速一次性替換多個(gè)顏色。

（七）編輯修改：當(dāng)客戶看到你的第一稿之后，他們會(huì)提出一些非常具體的問題，比如，我不喜歡這個(gè)顏色或者我就是不喜歡看這個(gè)“狗”的造型等。這時(shí)，設(shè)計(jì)師要善于挖掘客戶這些要求背后的問題。比如，客戶說不喜歡這個(gè)配色，也許是顏色的配色與主題不符，而不是客戶的個(gè)人喜好問題。

（八）發(fā)行與評(píng)價(jià)：當(dāng)設(shè)計(jì)師完成設(shè)計(jì)，交稿給客戶時(shí)，一定要適當(dāng)闡述設(shè)計(jì)過程，并突出設(shè)計(jì)的信息圖旨在契合客戶指定用戶消費(fèi)群的閱讀品味。同時(shí)，為了能夠方便客戶發(fā)布在各類宣傳媒介上，還可以在制作好的信息圖基礎(chǔ)上，制作一個(gè)小型的MINI信息圖。（如圖4）所示，方便在新浪微博、微信公眾號(hào)等傳播宣傳媒介上發(fā)布。最后，當(dāng)我們?cè)u(píng)價(jià)信息圖是否達(dá)到客戶的設(shè)計(jì)目標(biāo)時(shí)，要根據(jù)設(shè)計(jì)信息圖的原則，著重于一個(gè)設(shè)計(jì)目標(biāo)來衡量。

小結(jié)和展望

信息圖設(shè)計(jì)是視覺傳達(dá)設(shè)計(jì)另外兩種流行的設(shè)計(jì)形式：MG動(dòng)畫和交互式信息圖設(shè)計(jì)的基礎(chǔ)。這三種視覺傳達(dá)設(shè)計(jì)形式在新媒體時(shí)代都呈現(xiàn)出井噴的發(fā)展態(tài)勢。對(duì)比西方發(fā)達(dá)國家而言，我國的信息圖設(shè)計(jì)尚處于起步階段”。國內(nèi)，針對(duì)這三類設(shè)計(jì)的設(shè)計(jì)方法理論總結(jié)還是比較缺乏的。這可能跟新媒體時(shí)代發(fā)展的速度之快，以及我國對(duì)視覺傳達(dá)設(shè)計(jì)概念的理解仍然趨于陳舊有關(guān)。過宏雷在《視覺傳達(dá)設(shè)計(jì)專業(yè)定位與課程體系建構(gòu)》一文中提到“在復(fù)雜的數(shù)字化生存環(huán)境中，視覺傳達(dá)設(shè)計(jì)的專業(yè)建設(shè)要摒棄本位主義思想，借助信息、交互、體驗(yàn)因素的引入，擴(kuò)充新的研究領(lǐng)域和理論體系?！蓖瑫r(shí)，張陽也在《新媒介時(shí)代下視覺傳達(dá)設(shè)計(jì)教育的思變與創(chuàng)新》中提到“視覺傳達(dá)設(shè)計(jì)多元化、多學(xué)科交叉的專業(yè)定位，是設(shè)計(jì)藝術(shù)學(xué)科健康發(fā)展的必然要求。”只有學(xué)校開設(shè)了信息圖相關(guān)的課程，學(xué)生才能收獲知識(shí)，企業(yè)獲得急缺人才，教師也能更加關(guān)注并實(shí)現(xiàn)更多研究成果。