基于視覺傳達設(shè)計的信息圖設(shè)計方法研究

李湘皖

引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

小結(jié)和展望

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