《數(shù)據(jù)之美遼寧》網(wǎng)站
——數(shù)據(jù)可視化動(dòng)態(tài)圖形信息的創(chuàng)新設(shè)計(jì)研究

張 璇　（魯迅美術(shù)學(xué)院　116650）

一、項(xiàng)目的選題背景和前期調(diào)研

（一）《數(shù)據(jù)之美遼寧》網(wǎng)站的選題背景

在這個(gè)數(shù)字化生活的時(shí)代，互聯(lián)網(wǎng)已經(jīng)成為信息傳播的主流載體之一。智能化可操作移動(dòng)設(shè)備、移動(dòng)應(yīng)用程序互動(dòng)體驗(yàn)逐漸成為人們不可剝離的生活必須，包括動(dòng)態(tài)網(wǎng)站信息成為當(dāng)今Web應(yīng)用的潮流。本課題研究用戶互動(dòng)頁(yè)面動(dòng)態(tài)效果生成和信息的整合性體驗(yàn)，現(xiàn)今更多的APP應(yīng)用和網(wǎng)站設(shè)計(jì)強(qiáng)化圖形信息的多樣性并將更多的人機(jī)交互體驗(yàn)，優(yōu)秀的操作界面具有用戶使用更簡(jiǎn)單、反映用戶興趣愛(ài)好更明顯細(xì)致等優(yōu)點(diǎn)。全球新媒體產(chǎn)業(yè)的日趨活躍，技術(shù)演進(jìn)和應(yīng)用創(chuàng)新的加速發(fā)展，使各國(guó)政府逐漸認(rèn)識(shí)到新媒體在推動(dòng)經(jīng)濟(jì)發(fā)展、改善公共服務(wù)，增進(jìn)人民幸福感。新媒體將傳統(tǒng)藝術(shù)作品從美術(shù)館、博物館、展廳走向公共廣場(chǎng)以及各種城市空間，或是虛擬的網(wǎng)絡(luò)平臺(tái)。藝術(shù)家的這些舉動(dòng)無(wú)形中加強(qiáng)了城市的活性化。以城市本身作為藝術(shù)的表現(xiàn)主題，將“提高國(guó)家文化軟實(shí)力，要加強(qiáng)國(guó)際傳播能力建設(shè)，精心構(gòu)建對(duì)外話語(yǔ)體系，發(fā)揮好新興媒體作用，增強(qiáng)對(duì)外話語(yǔ)的創(chuàng)造力、感召力、公信力，講好中國(guó)故事，傳播好中國(guó)聲音，闡釋好中國(guó)特色。這里面不難看出，新興媒體以及新興媒體傳播平臺(tái)建設(shè)的重要性。數(shù)據(jù)化媒體的再利用再建設(shè)可以更好的服務(wù)于遼寧省政治、經(jīng)濟(jì)、文化建設(shè)，推進(jìn)良性的文化發(fā)展。

（二）網(wǎng)站的創(chuàng)作思路和目標(biāo)人群

《數(shù)據(jù)之美遼寧》網(wǎng)站是基于移動(dòng)客戶端的網(wǎng)站，主要功能是從90后的視角記錄遼寧，帶著大家認(rèn)識(shí)有趣的遼寧。項(xiàng)目組9個(gè)成員從不同的角度切入，分析沈陽(yáng)、大連市人文、生活等方面的內(nèi)容。從一個(gè)微小的內(nèi)容點(diǎn)著手，在數(shù)據(jù)收集整理和分析的基礎(chǔ)上， 通過(guò)設(shè)計(jì)的手段得出可視化的圖形，并在此基礎(chǔ)上進(jìn)行網(wǎng)站的界面設(shè)計(jì)。

網(wǎng)站的目標(biāo)受眾是20—40青年人為主（包括7歲以上兒童及所有想要了解不一樣的遼寧的人）。

（三）市場(chǎng)調(diào)研/分析

目前主要是資源分享類網(wǎng)站對(duì)某地的環(huán)境人文進(jìn)行介紹，但是從數(shù)據(jù)的角度出發(fā)宣傳某一地方特色的網(wǎng)站相對(duì)較少，從90后視角關(guān)注遼寧大連、沈陽(yáng)的城市人文、歷史、飲食、語(yǔ)言等方面的分享類網(wǎng)站幾乎還是空白。比如《城》網(wǎng)站講述大連的廣場(chǎng)文化是大連地標(biāo)式建筑特色，從數(shù)據(jù)的角度整理出各個(gè)廣場(chǎng)不同的參數(shù)和特點(diǎn)分析比較便于用戶深入的了解廣場(chǎng)文化的不同層面。

總結(jié)數(shù)據(jù)分享類網(wǎng)站的特征分析出：

1.圖文結(jié)合數(shù)據(jù)分析直觀有效的傳遞信息

2.視角獨(dú)特，從一個(gè)小點(diǎn)出發(fā)深入挖掘

3.加入動(dòng)態(tài)圖形效果豐富視覺(jué)層次

4.卡片分欄方式，清晰便于快速瀏覽信息

二、流程圖

網(wǎng)站的流程圖

圖例1：《數(shù)據(jù)之美遼寧》網(wǎng)站流程圖

三、《數(shù)據(jù)之美遼寧》網(wǎng)站界面設(shè)計(jì)及創(chuàng)作思路

（一）網(wǎng)站的整體風(fēng)格分析

1.網(wǎng)站標(biāo)識(shí)及衍生圖形設(shè)計(jì)

網(wǎng)站的標(biāo)識(shí)數(shù)據(jù)之美遼寧是根據(jù)一種星狀數(shù)據(jù)類圖形設(shè)計(jì)的，體現(xiàn)了文字的內(nèi)涵。將衍生圖形應(yīng)用到網(wǎng)站的圖標(biāo)設(shè)計(jì)中去，使得整個(gè)設(shè)計(jì)具有數(shù)據(jù)的美感。

2.網(wǎng)站的一級(jí)界面設(shè)計(jì)

網(wǎng)站的一級(jí)界面導(dǎo)航分成首頁(yè)、關(guān)于項(xiàng)目、項(xiàng)目成員三欄，主頁(yè)布局上至下分為三個(gè)部分分別為頁(yè)面標(biāo)題及導(dǎo)航區(qū)、通欄超鏈接推送、頁(yè)面內(nèi)容區(qū)（項(xiàng)目網(wǎng)站）。

3.網(wǎng)站項(xiàng)目組界面設(shè)計(jì)

網(wǎng)站項(xiàng)目組界面有9組。成員們選題后收集相關(guān)信息并對(duì)其分析整理成數(shù)據(jù)并將數(shù)據(jù)進(jìn)行可視化設(shè)計(jì)，在這個(gè)基礎(chǔ)上設(shè)計(jì)制作和發(fā)布相關(guān)的頁(yè)面。9組設(shè)計(jì)都有著鮮明的風(fēng)格和特色。比如其中《時(shí)節(jié)印象》是以大連的特色節(jié)日為題材，重點(diǎn)分析討論大連節(jié)日活動(dòng)內(nèi)容，以及數(shù)據(jù)的可視化圖案，在考察時(shí)對(duì)大連節(jié)日數(shù)據(jù)的收集，大連一年之中地方特色節(jié)日主要有八個(gè)，從旅游的方面切入，整理相關(guān)圖案，分析網(wǎng)站服務(wù)人群，及同類網(wǎng)站的交互研究與分析，創(chuàng)作過(guò)程中的數(shù)據(jù)采集，用戶心理分析，數(shù)據(jù)可視化，將插畫風(fēng)格的圖形融于頁(yè)面設(shè)計(jì)中形成獨(dú)特的設(shè)計(jì)風(fēng)格進(jìn)行設(shè)計(jì)。

（二）網(wǎng)站的交互設(shè)計(jì)

1.界面布局的不同

比如在《時(shí)光碼頭》的設(shè)計(jì)中，一級(jí)界面為首頁(yè)，單屏呈現(xiàn)，動(dòng)態(tài)圖案與文字相結(jié)合，以報(bào)紙的風(fēng)格排版，邊框和暗紋相結(jié)合，把主次內(nèi)容通過(guò)圖形圖案分開(kāi)，很容易讓觀者識(shí)別；二級(jí)界面多以小標(biāo)題的方式呈現(xiàn)，把三級(jí)界面中的文字歸納總結(jié)，二級(jí)界面的排版有疏有密，文字大小不同，突出主次，兩段文字之間有插圖作為輔助，增添趣味；三級(jí)界面多以文字和圖案為主，主要介紹的圖案占接近一屏的面積，輔助的圖形穿插在文字段周邊，讓觀者很容易分清主要內(nèi)容是什么。所有的界面設(shè)計(jì)，主要內(nèi)容都放在了“最佳視域”的位置，符合觀者的視覺(jué)方向，盡量做到滿足大部分人的視覺(jué)。

2.導(dǎo)航及輔助圖標(biāo)

按鈕及輔助圖標(biāo)在頁(yè)面中起到引導(dǎo)用戶瀏覽點(diǎn)擊的作用，具有交互的功能。特別是用在導(dǎo)航中，用圖形的語(yǔ)言直觀有效的傳遞導(dǎo)航每一欄的信息。比如項(xiàng)目組《逮味兒》網(wǎng)站，做的是一個(gè)大連特色美食的網(wǎng)站，但這也不是一個(gè)單純的美食網(wǎng)站，它還加入了一個(gè)新鮮元素大連方言。網(wǎng)站名叫：逮味兒，這個(gè)名字就是結(jié)合了大連話所取出來(lái)的，體現(xiàn)了地方特色。首頁(yè)網(wǎng)站導(dǎo)航欄按鈕是結(jié)合大連當(dāng)?shù)氐牟似愤M(jìn)行的圖形元素設(shè)計(jì)。線框式的圖標(biāo)與手繪的配圖形成了有趣的對(duì)比。

圖例2　網(wǎng)站導(dǎo)航欄按鈕

（三）網(wǎng)站的數(shù)據(jù)可視化設(shè)計(jì)

1.數(shù)據(jù)的收集整理

確定主題后，項(xiàng)目組成員通過(guò)不同的方式收集整理數(shù)據(jù)。比如項(xiàng)目組《漁燈影草》研究方法主要以訪調(diào)查走訪的形式，對(duì)周邊的住戶，漁民進(jìn)形一對(duì)一訪問(wèn)，在訪問(wèn)過(guò)程中以錄音，筆錄的形式記錄調(diào)查。調(diào)研的內(nèi)容主要包括周圍的地形，漁民的生活習(xí)俗，金石灘碼頭船運(yùn)情況，金石灘港漁船數(shù)量，金石灘海域有哪些海鮮以及周邊人口分布情況。通過(guò)實(shí)地的考察得出結(jié)果，最后再經(jīng)過(guò)分析整理得出相關(guān)數(shù)據(jù)。

2.數(shù)據(jù)可視化設(shè)計(jì)

數(shù)據(jù)的圖形化一般會(huì)具備以下幾個(gè)特點(diǎn)：準(zhǔn)確性、創(chuàng)新性和簡(jiǎn)潔性。其目的是要對(duì)數(shù)據(jù)進(jìn)行可視化處理，以使得能夠明確地、有效地傳遞信息。在項(xiàng)目組《漁燈影草》網(wǎng)站中數(shù)據(jù)圖形化集中體現(xiàn)在訪問(wèn)數(shù)據(jù)頁(yè)面中，數(shù)據(jù)的內(nèi)容分布有：廟上村漁民年齡的分布圖，本地人口與外地人口環(huán)形圖，金石灘港客運(yùn)信息，漁民收入，漁民打漁的時(shí)間圖，金石灘港周圍地圖，以及漁民使用大船小船的航行的時(shí)間公里圖。比如：年齡分布圖：表現(xiàn)方法；年齡分布圖是以漁民頭像為設(shè)計(jì)元素，用不同深淺的藍(lán)色代表不同的年齡階段的漁民，依次按照采集數(shù)量成比例排列。特點(diǎn)；用戶可以根據(jù)頭像的顏色直接去讀數(shù)據(jù)。

圖例3　數(shù)據(jù)圖形，漁民年齡分布

3.動(dòng)態(tài)圖形信息設(shè)計(jì)

動(dòng)態(tài)圖標(biāo)可以應(yīng)用于導(dǎo)航按鈕、gif動(dòng)態(tài)圖片以及頁(yè)面中圖標(biāo)按鈕。隨著這些動(dòng)起來(lái)的圖標(biāo)出現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)中，給網(wǎng)站的功能增加了很多的趣味性，使機(jī)器和人的交流互動(dòng)不再枯燥，用輕松有趣的方式引導(dǎo)用戶瀏覽視線。

比如項(xiàng)目組《漁燈影草》網(wǎng)站中漁船航行時(shí)間圖，其表現(xiàn)方法分別以木船，和漁民打漁的大船為元素把船設(shè)計(jì)成圖形，結(jié)合海浪線，并做成動(dòng)態(tài)，讓船自然地移動(dòng)到各自的終點(diǎn)處，代表了木船和大船的航行時(shí)間差。特點(diǎn)；動(dòng)態(tài)的效果，增添趣味性。

四、結(jié)語(yǔ)

在項(xiàng)目創(chuàng)作過(guò)程中，結(jié)合我省城市規(guī)劃理念，形成統(tǒng)一的思想情感和創(chuàng)作思路；在題材的選擇上進(jìn)一步拓展形成城市新的文化精神增長(zhǎng)點(diǎn)；利用社會(huì)化媒體的傳播優(yōu)勢(shì)，打造我省經(jīng)濟(jì)、文化、人文精神、城市精神的新視角；拓展新媒體視覺(jué)形態(tài)，塑造城市形態(tài)特征在人們心中的主觀印象。數(shù)據(jù)可視化設(shè)計(jì)是一門綜合了美學(xué)、設(shè)計(jì)藝術(shù)學(xué)、傳播學(xué)、計(jì)算機(jī)學(xué)等多種學(xué)科的藝術(shù)，在進(jìn)行設(shè)計(jì)和研究時(shí)會(huì)發(fā)現(xiàn)它交叉運(yùn)用著其他學(xué)科，正逐步走向數(shù)字化、信息化，從靜態(tài)向動(dòng)態(tài)轉(zhuǎn)化，從單一的表現(xiàn)形式向多元表現(xiàn)形式轉(zhuǎn)化，從二維設(shè)計(jì)向三維思維轉(zhuǎn)化。同時(shí)，它與受眾的互動(dòng)性也正逐步加強(qiáng)，與觀眾進(jìn)行溝通，拉近普通受眾與藝術(shù)的距離。項(xiàng)目組成員的九組作品從90后的視角出發(fā)，表達(dá)對(duì)他們生活了四年的城市遼寧大連以及沈陽(yáng)的感受和情感，創(chuàng)作出有溫度有趣味的作品。并通過(guò)數(shù)據(jù)化圖形設(shè)計(jì)讓更多的用戶深入了解每個(gè)項(xiàng)目點(diǎn)。

經(jīng)過(guò)反復(fù)的推敲、從選題到數(shù)據(jù)收集整理再到網(wǎng)站界面設(shè)計(jì)：dataliaoning.com一個(gè)關(guān)于遼寧的數(shù)據(jù)可視化網(wǎng)站誕生了！