論信息可視化設計中的圖形表現

于海嬌

摘 要：在信息社會，大腦通過對信息的感知構建意識，由意識指導行為。本文以“三亞市旅游服務網站”為載體，通過對網站的信息構建，運用可視化的設計方法，進行文字和數據的可視化設計，促使公眾對整個網站內容的吸收更加便捷。用戶若要得到較好的信息體驗，需要通過可視化的表達形式，這是利用人類的視覺和觸覺通過大腦分析來接收信息的交互技術。本文設計三亞旅游服務網站的過程，主要偏向傳統的信息圖設計，以靜態圖的方式呈現。通過圖形轉換重構數據媒介的可視化結構，將單一、平面、無序、碎片式的信息群轉變為可視的模塊化信息單元，或演化為動態流變的圖像。

關鍵詞：信息可視化;旅游服務;人機交互;網站設計

三亞是全國知名的旅游城市，在海南自貿區建設戰略中，三亞占有重要的位置。三亞作為全國最南端的熱帶海濱城市，占據了北緯18度地區特有的宜人氣候，非常適合旅游行業的開發。信息化社會中，良好的信息傳遞能夠提高發展的效率，對于旅游城市來講，信息可視化設計可以提升城市的整體形象。

人類接收信息的途徑有很多，利用現代技術將信息可視化，能夠讓閱讀者更快速、高效地吸收信息所要表達的含義，旅游者的信息接收效率和旅游體驗也能因此得到明顯提升。本文以三亞這個城市為載體，通過對其旅游服務網站的信息可視化設計，提升三亞的信息傳遞服務水平，提高游客與媒介之間信息的傳遞效率，為三亞的國際化添磚加瓦。

1 三亞市旅游信息的采集

在整個設計的數據收集過程中，從三亞市旅游的相關網站、政府的信息發布平臺、相關統計部門的數據以及三亞市的旅游發展整體規劃收集相關數據。通過對這些旅游信息數據的可視化設計，解決用戶的信息焦慮，達到更好的信息傳遞。

美國的著名建筑師沃爾曼首次在其著作《信息焦慮》一書中提出，正是因為用戶真正理解到的信息和認為應該理解到的信息存在差異，信息焦慮才會產生。[1]所以，如何對海量數據進行有效的處理、分類，構建次序分明的結構體系、適用于信息的高速傳播的模型，是當今信息大數據時代的發展要求，也是滿足公眾心理需求的必然要求。因此，信息可視化設計得到了越來越多的專家和學者的認可，吸引了越來越多人的關注，更多的人投入了信息可視化設計研究中。

1.1 三亞旅游服務信息的統計

以2017年元旦的旅游者相關信息為樣本——入境游客接待情況：

2017年元旦，三亞市共接待過夜入境游客44.89萬人次，同比增長25.31%，其中外國人27.22萬人次，同比增長41.60%。按各大洲游客統計：歐洲10.60萬人次，同比增長49.94%;亞洲9.86萬人次，同比增長44.75%;美洲2.47萬人次，同比增長8.57%;大洋洲0.71萬人次，同比增長4.79%;非洲0.19萬人次，同比下降22.8%。外國游客總量排名前三位的客源國分別是俄羅斯（7.12萬人次，同比增長102.67%）、韓國（3.70萬人次，同比增長65.79%）、馬來西亞（1.73萬人次，同比增長189.92%）。[2]

三亞政務系統的信息構建中主要包括辦事大廳、網上辦公和公共服務的內容。其中，辦事大廳有星級飯店、旅行社、旅游景區等內容;網上辦公有三亞市導游網格化管理系統、出境游組團社簽證專辦員管理系統、導游個人信息查詢、檢查員個人信息查詢、導游檢查記錄公示、導游檢查手持機系統、國家旅游公共服務監管平臺、飯店統計管理系統、旅游統計系統、行業財務信息系統站點、旅行社業務管理系統、投資項目管理系統、景區管理系統、假日旅游預報系統;[3]公共服務內容有政府服務熱線12345、旅游服務投訴12301、旅游消費投訴12315、旅游價格投訴12358、食品衛生投訴88281474、旅游交通咨詢88276703、出租車電召96789。

1.2 三亞旅游服務信息的分類

三亞主要的景區包括南山文化旅游區（5A）、大小洞天旅游區（5A）、天涯海角游覽區（4A）、西島海洋旅游區（4A）、熱帶天堂森林公園（4A）、千古情文化旅游區等。

三亞酒店主要分布在四大灣，分別是三亞灣、大東海、亞龍灣和海棠灣。三亞灣的酒店主要有國光豪生度假酒店、三亞海韻度假酒店、三亞灣度假酒店、陽光度假酒店、銀韻度假酒店、克拉碼頭、天福源度假酒店等。大東海的酒店主要有三亞湘投銀泰度假酒店、三亞海天大酒店、寶宏龍都大酒店、文華東方海景度假酒店等。亞龍灣的酒店主要有麗斯卡爾頓度假酒店、希爾頓度假酒店、喜來登度假酒店、萬豪度假酒店、天域度假酒店、凱萊度假酒店、紅樹林度假酒店、天域度假酒店、愛琴海岸度假酒店、假日度假酒店、仙人掌度假酒店、金棕櫚度假酒店、環球度假酒店、亞龍灣五號度假酒店和波爾曼度假酒店等。

2 數據信息可視化分析

2.1 數據信息圖形化

信息可視化不單單依靠某一門學科，而是多個學科、多個專業領域知識結合的成果。國內著名學者彭度潔提出，近幾年，信息可視化技術已經趨于成熟，得到了普遍廣泛的應用，但視覺傳達方面依然進展緩慢，具有專業技能的人雖然能夠快速地理解這些符號、圖像表達的信息，但是普通受眾依然迷惑不解。[4]因此，在信息可視化設計開發中，需要更多地從普通群體的需求角度出發，在視覺藝術的表現形式上進行設計和改良。本文著力于視覺元素在視覺藝術設計中的重要地位，展開討論和研究。

圖形化的定義比較明確，是將在人類認知范圍內的信息以及他們之間的相互關聯，通過一定的技術手段轉化為人類視覺能夠識別、消化的圖形或符號的一種信息化過程，實際上是對信息數據進行可視化的過程。[5]人類的傳播途徑中，圖形的傳播能力是高于文字的，從人類遠古時代記錄生產活動和祭祀的巖洞壁畫，到現代社會的信息可視化，圖形所覆蓋的信息是抽象文字無法比擬的。信息的圖形化不僅能夠高效、直觀地發揮信息的傳遞作用，更能保持圖形視覺帶來的強烈沖擊力。圖形化研究的是如何把人類社會交流的信息通過視覺可見的方式直觀地展現出來。隨著信息技術的發展，有了更多的技術能把信息通過可視化的方式傳播，越來越多的設計師開始從事信息圖形化研究，許多設計師喜歡使用“信息圖形化”來區別傳統意義上的信息設計。信息圖形化的目的是借助圖形、圖像等處理方式，將設計者所要表達的信息，準確、有效地傳遞給受眾，以便于受眾的閱讀、理解和更深層次的思考，以適應當代復雜的信息環境。[6]圖形化的表現方式是基于邏輯的思考，它符合視覺作用于大腦的思考分析方式。在大數據時代，信息中含有大量復雜枯燥的數字與數據，并且這些數據對于非專業人士來說很難快速理解，從而使信息的傳播效力減弱。

特定的風格設計需要遵循一些特定的設計原則。在扁平化的設計中，富有想象力和創造力的作品應該遵循以下幾點。第一，整體結構的統一性。通過創造相似的視覺模型來達到相應的視覺效果，一系列相同主題的視覺體驗，能夠讓用戶快速理解產品表達的信息，從而更加快速地指導用戶上手，提升用戶的參與度，提高產品的價值。第二，元素的對比。利用特殊的設計元素如顏色、比例、排版、選中和未選中的差異等，形象直觀地向用戶表達產品的使用方式。第三，合理的排版布局。為了讓設計界面看起來更加和諧，符合人類的視覺美感，通過對界面布局的排版來引導用戶的視覺導向，從而更好地傳遞網站所要表現的信息，滿足用戶的使用需求。

圖形設計通過象征和隱喻把人類的社會活動概括化，同時發散思維，運用形式法則重構，對圖形進行視覺化設計，創造出符合大眾認知特征的圖形。[7]受眾則通過圖形的外形特點和聯想機制產生視覺認知，從而通過大腦解讀圖形意義，最終達到傳播的目的。美國學者菲利普·B·梅格斯曾說：“如果圖形設計不具有象征的詞語的含義，就不再是視覺傳播，而成為美術了。”從這一角度而言，意義的實現主要是以同構—同質異構及異質同構的手法生成視覺意象。[8]

2.2 數字語意的可視化設計

柱狀圖用來對比同類信息，它具有橫向和縱向坐標的屬性。在形式上，它可以由一個中心點向上下和左右擴展，也可以以對稱的形式來分布。

餅形圖是圓形類圖表的基本形式。通過對同一圓的不同比例的分割，表示某一狀態量或者數據量所占總體的比例。

線性圖的表現形式分為折線和曲線，利用建立的坐標軸，通過線段關鍵點的高低表示事物的變化情況。線性圖不能簡單地理解為地圖，其表現的是節點之間的關系而不是地理位置關系。它也可以用來表現時間的變化和發展，可以是縱向，也可以是橫向，通過簡單的地線形圖形表現來記錄事物在時間上的位置。

點陣圖是圖示類圖表的基本形式。點陣圖以點為形式要素，通過點的軌跡達到視覺牽引，點陣圖以坐標為基礎，用點的位置描述信息，點是視覺的聚集處，通過點的大小、顏色和形狀，對信息進行呈現。

2.3 文字語意的可視化設計

具象形是指能夠詳細地描述事物具體形象的圖形，有更為生動和形象的特征，更易于識別。[9]與抽象的聯想相比，具象聯想更加表象，思維也更為輕松。人們常常習慣通過構造一個具體圖像來探究更深層次的內涵，使讀者與畫面形成思想溝通。在文字圖形化的設計中，應該強調鮮明、感性，用具體的形象來表述，盡可能遵守事物的客觀形態，實現對現象的提煉，使作品來源于生活而高于生活。

具象美在表現技法上是指用真實的描繪手法對人和物的形象進行表現，其語義能夠被直接生動地表現出來，讓受眾一目了然，加上形象的展示和氣氛的營造，使其具有很強的真實感。

抽象是相對具象而提出的，抽象沒有具體的想象，是對具體形象的概括、歸納，提取了實物的本質特征。[10]圖形的抽象性是人類對于描述事物一種主觀概括，這種概括是對事物本質的探索，它撇去了圖形的裝飾性，例如光的質感和現實的肌理。對于文字而言，它背后的意義是我們關注的重點，通過概括的手法對文字進行圖形化設計，簡化是一種手段。抽象圖案的形成是對人類社會生活和自然事物的高度概括，運用點、線、面的設計語言來表現，可形成視覺的共鳴。

3 情感化的視覺可視化

3.1 擬物設計

在眾多的互聯網設計產品中，不少商家受到蘋果公司的影響，多少會在自己的產品中引入Matephor Design這一設計概念，中文為擬物化設計。[11]

設計者通過對人們記憶中的情境進行重組加工，創造新情景，將隱喻建立在其豐富外延的準確表達上，創造舊有經歷與新體驗的聯系。在視覺設計中引入了類似現實世界感受的設計，尋找心理共鳴。因此，擬物化設計名為擬物，意圖擬情，也可算作情感化設計的一種具體設計手法。

擬物化的重點在于模仿人們日常熟知的事物，以這些事物為線索，模擬設計出符合用戶認知的產品。理解這些，你就能知道實際上擬物化設計不僅僅是一個設計趨勢，它還包括一個設計理念，即把現實生活中的對象用作視覺隱喻，使產品更便于使用。通過直觀化的操作方式，只需要看一遍，就能知道一款應用程序是關于什么的，以及如何使用它。因此，照片應用程序中的圖像看起來像一堆真實的照片，電子書看起來像真實的書籍，結合了現實物理學，應用到了翻頁功能中。

3.2 扁平符號化設計

國際主義平面設計風格的誕生被視為扁平化設計的起點，其設計的特點不能不提到“形式服從功能”，這是美國建筑著名人物路易斯·沙利文提出的，他表述，應該當裝飾部分與設計本體融為一體，則看上去比貼上去美觀很多。[12]

扁平化設計如今存在的一個問題是，對界面上的所有元素包括按鈕、按鍵都進行二維、平面化設計，按鈕與其他元素都處于一個平面。若只是單一地將所有裝飾元素去掉，不加任何設計改變，那么用戶在使用過程中很容易會對按鈕的可用性產生懷疑。簡單來說，就是用戶會考慮這是一個按鈕，還是只是圖片文字信息的一部分。所以，扁平化設計并不是簡單地做減法，需要通過對色塊的運用，根據不同的區域功能選擇不同的字體等，才能達到功能最大化與形式最簡化的統一。

3.3 情境化設計

受眾是情感化對象，有著豐富和細膩的情感需求和變化。情感是伴隨著理解過程而產生的心理感受，對人的心理和行為具有能動作用，中國人十分重視“情”，強調內在體驗和情感作用，所以信息可視化設計將情感融入設計是情感化設計的重要方面。受眾的情感化需求已經成為信息可視化探索中的一大要點，如何在信息與受眾之間架起一座橋梁，是信息可視化的考慮范疇。情感化的介入的特征是：具有功利性、目的性，情感體驗的交互性、層次性，既有直接的情緒，也有更高層次的與社會意義相聯系的情感，例如道德感和理智感等。

信息可視化除了要滿足對信息的高效傳遞外，還要增添信息傳遞過程中的樂趣，受眾除了能快速獲得所需信息，還能被觸動，產生對美好事物的聯想和回憶，同時，樂趣性的加入也促進了人們對信息的主動接收。情感化設計的核心是以人為中心的設計思想，功能實用性與情感化的介入并不矛盾，而是可以相互促進，推動信息可視化傳遞的。設計主要通過以下幾點實現：第一，巧妙的形式感，吸引受眾注意;第二，合理的交互體驗，促進受眾參與;第三，趣味元素的加入，激發受眾愉悅的情感體驗。

4 以三亞市旅游服務網站為例的信息可視化設計流程

4.1 PC終端網站

網站設計過程如圖1所示，但有一點需要注意，這個項目關注可視化設計而不包括用戶體驗設計，例如用戶研究、可比評論、用戶行程映射、信息架構等。

4.2 手機終端APP

手機端分辨率較小，所以設計時要考慮得更為詳細周到，在保持簡潔的同時提升易用性。

5 結語

社會在不斷進步的同時，對信息可視化的要求也在不斷提高，不僅要做到信息的準確、有效傳達，更要不斷增強設計細分，滿足用戶對好的設計的需求，提升信息傳播效率，這對設計師來說既是機遇也是挑戰。諾曼認知心理學中對產品情感化設計的本能層、行為層論述，對信息圖形化的情感因素分析起到了很大的作用。技術的進步，國內外信息可視化設計的發展，促使信息圖形化傳達在最近幾年發生了新的變化，傳統的印刷媒介轉變為多維度媒介，除了靜態的信息圖形，動態信息圖形和交互設計與體驗設計都為設計師傳達設計情感提供了方式和渠道。如今，每個人都是信息的傳播者，也是信息的接收者，信息可視化在新的社會形勢下，一定會有新的變化和發展。

參考文獻：

[1] 理查德·索爾·沃爾曼.信息饑渴：信息選取、表達與透析[M].李銀勝，等，譯.北京：電子工業出版社，2001：18-23.

[2] 葉俊一.元旦期間三亞接待游客18.55萬人次，同比增長9.3%[EB/OL]. http：//www.hkwb.net/news/content/2017-01/03/content_3136813.htm，2017-01-03.

[3] 張僑，黃偉展.海南國際旅游島城市旅游經濟效率評價研究[J].海南熱帶海洋學院學報，2017（4）.

[4] 張宇雷，劉湘琳.基于視覺元素的數據可視化感性特征的探討[J].設計藝術研究，2012（6）.

[5] 斯蒂勒.數據可視化之美[M].祝洪凱，李妹芳，譯.北京：機械工業出版社，2011：117-128.

[6] 斯彭思.信息可視化：交互設計[M].陳雅茜，譯.北京：機械工業出版社，2012：104-106.

[7] 王凱，賀麗.信息可視化設計[M].沈陽：遼寧科學技術出版社，2013：89-92.

[8] 曹方.視覺傳達設計[M].江蘇美術出版社，2002：262.

[9] 麥克坎德萊斯.信息之美[M].溫思瑋，譯.北京：電子工業出版社，2012：93-99.

[10] 溫新才.意象文字與圖形的關聯性設計研究[D].西南交通大學，2015：14-29.

[11] 李佳.界面設計中的扁平化設計與擬物化設計之探議[J].藝術與設計（理論），2014（03）：56.

[12] 郝世博，朱學芳，朱光，李剛.國內外信息可視化研究的比較分析[J].圖書情報工作，2013（07）：34-35.