淺析數(shù)字美術(shù)館網(wǎng)站的視覺設(shè)計(jì)

【摘要】：數(shù)字技術(shù)的發(fā)展推動(dòng)了新媒體在公眾設(shè)施中的廣泛應(yīng)用，受眾群體對數(shù)字媒體的需求不在僅僅局限于了解信息、獲取信息，對于視覺的美感也有更高的需求。本文將以依托網(wǎng)絡(luò)平臺(tái)建立起來的數(shù)字美術(shù)館為例，通過分析其網(wǎng)站的視覺設(shè)計(jì)，多方面解析視覺元素在網(wǎng)絡(luò)平臺(tái)發(fā)揮的不同作用，體現(xiàn)視覺設(shè)計(jì)在數(shù)字美術(shù)館建設(shè)中的價(jià)值。

【關(guān)鍵詞】：數(shù)字美術(shù)館；新媒體；網(wǎng)站；視覺設(shè)計(jì)

隨著互聯(lián)網(wǎng)產(chǎn)業(yè)的飛速發(fā)展，數(shù)字虛擬現(xiàn)實(shí)、三維建模、物聯(lián)網(wǎng)、移動(dòng)互聯(lián)、云計(jì)算、大數(shù)據(jù)等各類新技術(shù)應(yīng)用大量出現(xiàn)。如今，這些新媒體技術(shù)已經(jīng)廣泛應(yīng)用于美術(shù)館的展覽陳列之中。其中，數(shù)字美術(shù)館，以數(shù)字化、網(wǎng)絡(luò)化、虛擬化的手段，極大的增強(qiáng)了展示的生動(dòng)性和交互性，擴(kuò)展了展示的空間和時(shí)間。

依托網(wǎng)絡(luò)平臺(tái)，結(jié)合虛擬現(xiàn)實(shí)技術(shù)和網(wǎng)絡(luò)技術(shù)的數(shù)字美術(shù)館，打破了實(shí)體美術(shù)館現(xiàn)有空間的限制，延伸到數(shù)字空間進(jìn)行展示。為滿足受眾的個(gè)性需求，在表現(xiàn)形式上和內(nèi)容組織上持續(xù)創(chuàng)新，更注重在虛擬現(xiàn)實(shí)和制造虛擬現(xiàn)實(shí)空間方面的視覺設(shè)計(jì)。

視覺設(shè)計(jì)在數(shù)字美術(shù)館建設(shè)中的價(jià)值

數(shù)字美術(shù)館就其內(nèi)涵可以分為兩種：基于現(xiàn)有實(shí)體美術(shù)館的數(shù)字化改造和純網(wǎng)絡(luò)虛擬的美術(shù)館信息展示平臺(tái)。無論是前者還是后者，視覺設(shè)計(jì)都占有重要的分量。應(yīng)用了視覺設(shè)計(jì)的數(shù)字美術(shù)館，打破了實(shí)體美術(shù)館展示上一貫單一呆板的陳舊模式，更注重?cái)?shù)字展陳設(shè)計(jì)，優(yōu)化多媒體界面，全方位的融合數(shù)字媒體前言技術(shù)與文化創(chuàng)意，使參觀者更好的與美術(shù)館近距離互動(dòng)。

在數(shù)字美術(shù)館中，視覺設(shè)計(jì)應(yīng)用的價(jià)值通常表現(xiàn)在三個(gè)方面：

1.數(shù)字美術(shù)館網(wǎng)站的用戶界面上的視覺應(yīng)用

2.突破空間時(shí)間限制的場館及展品展示的視覺設(shè)計(jì)應(yīng)用

3.用戶體驗(yàn)與互動(dòng)中的視覺設(shè)計(jì)應(yīng)用

其中第一點(diǎn)是數(shù)字美術(shù)館整體定位的關(guān)鍵。如何從色調(diào)、文字設(shè)計(jì)、圖標(biāo)、風(fēng)格等方面去表達(dá)美術(shù)館最核心的文化價(jià)值，如何吸引用戶眼球停留在自己的網(wǎng)站上，除了豐富且具前沿性的內(nèi)容，用戶界面的視覺設(shè)計(jì)起到了決定作用。只有讓用戶在體驗(yàn)過程，既接收到有價(jià)值的訊息，更能從中獲得觀感的愉悅，才能顯現(xiàn)數(shù)字美術(shù)館智能化背后藝術(shù)價(jià)值。

數(shù)字美術(shù)館網(wǎng)站界面視覺元素分析

數(shù)字美術(shù)館的網(wǎng)站界面主要分為三大板塊：1.標(biāo)題；2.主頁面；3.信息鏈接。以舊金山藝術(shù)博物館（FAMSF）為例。在主頁面部分，再細(xì)化為三塊：1.信息欄；2.banner條；3.展館其他信息（開閉館時(shí)間/臨近結(jié)束的展/小banner）。

1.LOGO與標(biāo)題設(shè)計(jì)

在整個(gè)版面設(shè)計(jì)中，標(biāo)題設(shè)計(jì)是最應(yīng)重視的部分。數(shù)字美術(shù)館的標(biāo)題大多數(shù)以標(biāo)題和LOGO的形式單獨(dú)呈現(xiàn)在版面的左上角，這也是用戶在瀏覽網(wǎng)頁時(shí)，首先會(huì)注意到的地方。標(biāo)題的位置位于用戶瀏覽頁面的起點(diǎn)處，在簡練而醒目的給予用戶信息提示的同時(shí)對頁面瀏覽的順序起到了很好的引導(dǎo)作用。

（1）數(shù)字美術(shù)館LOGO實(shí)例

在大多數(shù)的數(shù)字美術(shù)館的網(wǎng)頁中，LOGO屬于視覺重心，是傳達(dá)美術(shù)館主題精神。多以美術(shù)館的形象標(biāo)志+美術(shù)館全稱的形式出現(xiàn)。這類形式的LOGO設(shè)計(jì)簡潔大方，適用于各種風(fēng)格的網(wǎng)站頁面。最重要的是能傳遞準(zhǔn)確的信息，而采用簡單的圖案造型與字體設(shè)計(jì)結(jié)合的形式來表達(dá)主題更為直接，更便于記憶。圖1中分別是波士頓美術(shù)博物館、大都會(huì)藝術(shù)博物館、哥德堡藝術(shù)博物館。

（2）數(shù)字美術(shù)館的標(biāo)題實(shí)例

用戶在搜索引擎檢索時(shí)，一般頁面會(huì)首先出現(xiàn)網(wǎng)頁標(biāo)題（加鏈接）和網(wǎng)頁摘要信息。要想引起用戶的關(guān)注，網(wǎng)頁標(biāo)題就得發(fā)揮最大的作用。因此一個(gè)概括了網(wǎng)頁核心內(nèi)容的標(biāo)題有助于用戶判斷是否點(diǎn)擊該網(wǎng)頁標(biāo)題鏈接。

圖2是哥德堡藝術(shù)博物館的網(wǎng)頁標(biāo)題。標(biāo)題上除了左邊放了藝術(shù)館的LOGO外，其余地方采取了大量留白的方式。讓標(biāo)題的信息更加明確、清晰，也能在第一時(shí)間聚集用戶的目光。其余部分的空白處與下面豐富的色彩內(nèi)容形成了強(qiáng)烈的對比，在做好區(qū)分的同時(shí)也讓整個(gè)頁面的層次感更加強(qiáng)烈。主次分明的表現(xiàn)手法不會(huì)讓用戶瀏覽頁面時(shí)產(chǎn)生審美疲倦。

圖3是洛杉磯藝術(shù)博物館的網(wǎng)頁主欄標(biāo)題。從結(jié)構(gòu)排版上就與一般的美術(shù)館網(wǎng)頁有所不同。前面就介紹過，一般是在標(biāo)題欄下面放上主題的banner內(nèi)容，不過在這個(gè)網(wǎng)頁中，將標(biāo)題欄置于banner條之上，兩者成為一個(gè)部分。同時(shí)頁面上采取明亮的紅色將整體與下面的細(xì)節(jié)內(nèi)容區(qū)分開來。從用戶體驗(yàn)上來講，在瀏覽頁面時(shí)，標(biāo)題與banner都成為需要也是必然會(huì)關(guān)注到的部分，視覺觀感上是沒有辦法忽視。但從版式設(shè)計(jì)上來分析，這樣的設(shè)計(jì)卻并不是很明智。盡管有顏色來區(qū)分主次，但整個(gè)畫面的層次感不清晰，沒有一個(gè)核心的定點(diǎn)去引導(dǎo)用戶瀏覽。

圖4是美國大都會(huì)藝術(shù)博物館的網(wǎng)頁標(biāo)題。相對于哥德堡藝術(shù)博物館，大都會(huì)藝術(shù)館的網(wǎng)頁主要是采用色彩區(qū)分主次。在主欄標(biāo)題部分，除了藝術(shù)館的LOGO，還在右邊加入了網(wǎng)頁的登陸注冊與搜索欄兩部分。讓整個(gè)頁面標(biāo)題的功能性增強(qiáng)。用黑色作為主標(biāo)題欄的背景，在視覺上拉開了標(biāo)題與內(nèi)容之間的層次，同時(shí)穩(wěn)重的色調(diào)也很符合大都會(huì)這樣國際級別的藝術(shù)博物館的形象。

2.整體色調(diào)與背景底紋設(shè)計(jì)

對于網(wǎng)站設(shè)計(jì)來說，整體版面的定位是應(yīng)該放在首位考慮的事。美術(shù)館這樣具有公眾效應(yīng)的網(wǎng)站，版面的整體布局代表了整體美術(shù)館傳遞的主題精神。因?yàn)橐_(dá)到與用戶多方位互動(dòng)，所以決定了界面設(shè)計(jì)的重要性，其底圖背景的設(shè)計(jì)也就自然承擔(dān)了視覺效果中不可或缺的部分。

要吸引到用戶眼球，版面的色彩是最直接的表達(dá)。通過文字的深淺、圖片的明暗、或者色塊間的區(qū)分，拉出頁面中的層次感，豐富畫面的同時(shí)讓用戶審美上不覺疲勞。根據(jù)數(shù)字美術(shù)館不同類別的劃分，在頁面色調(diào)和背景底紋上都會(huì)有所不同。一般，冷色調(diào)、低明度的色調(diào)與白色搭配，能表達(dá)出明朗、沉靜的感覺。而鮮艷、高明度的色調(diào)，通過顏色間的對比強(qiáng)調(diào)主次之分，更增加頁面的活潑感。大多數(shù)的美術(shù)館的網(wǎng)頁都選擇以淺白色為底，搭配深色文字，能更簡潔明了的傳遞信息。

以美國大都會(huì)藝術(shù)博物館（見圖5）為例，就是典型的淺底深色字的版面。沒有過多的修飾，僅依靠線條區(qū)分板塊，整體視覺感清晰明朗。往往越簡單的設(shè)計(jì)在傳遞信息上越難。不過事實(shí)證明，這樣“簡單”的設(shè)計(jì)也是最經(jīng)得起時(shí)間考驗(yàn)的。

而對于像舊金山現(xiàn)代藝術(shù)博物館（見圖6），則屬于具有個(gè)性化的數(shù)字美術(shù)館網(wǎng)站。通過色塊間的變化，區(qū)分版塊見的信息。因是在同一版面，所以很明智的選擇了同色系的顏色，既達(dá)到了信息分類的效果，也在豐富畫面的同時(shí)顯得有章法可循。

3.圖文設(shè)計(jì)

（1）文字設(shè)計(jì)

文字是視覺表達(dá)的一個(gè)重要組成部分，也是網(wǎng)頁設(shè)計(jì)中的主體之一。從標(biāo)題文字到分類欄的目錄再到文案內(nèi)容的表達(dá)，文字在其中都起到了舉足輕重的作用。它除了能表達(dá)意思的作用外，還能通過靈活的排版，帶來視覺美感。而在文字細(xì)節(jié)的表達(dá)上，無論是粗細(xì)、大小、顏色深淺，還是平面或立體，都能讓頁面的設(shè)計(jì)更加精致，起到畫龍點(diǎn)睛的作用。

以韓國的國立當(dāng)代藝術(shù)博物館的網(wǎng)頁為例。（見圖7）在標(biāo)題欄，就通過大小文字大小、粗細(xì)的不同，區(qū)分出目錄下的一級標(biāo)題、二級標(biāo)題、三級標(biāo)題。在中心內(nèi)容部分，則是通過借用色塊的區(qū)分，統(tǒng)一小版塊間的題目與內(nèi)容上文字大小、間距、色調(diào)，這樣用戶在瀏覽網(wǎng)頁時(shí)，不會(huì)因色塊的不同，而影響文字的閱讀。信息傳遞方式的統(tǒng)一性更能明確表達(dá)出主要意思。

Banner是網(wǎng)頁中橫幅設(shè)計(jì)的主要表達(dá)方式，其banner中的文字是體現(xiàn)網(wǎng)站形象的重要元素。每一個(gè)不同的banner都有其特有的標(biāo)語，這就是網(wǎng)站的宣傳標(biāo)語，也可以說是網(wǎng)站的精神，網(wǎng)站的目標(biāo)。一般來講，banner中的文字多以一句話甚至一個(gè)詞來高度概括其核心思想。因此在對banner的文字排版上，應(yīng)該遵循三大原則：

1.選擇符合畫面主題的字體，文字旁注意留白，使其更醒目。

2.文字一般放在畫面的突出位置（如左邊），具體依據(jù)整個(gè)畫面版式調(diào)整。

3.文字內(nèi)容最好簡潔而富有樂趣，引起瀏覽者的興趣。

以舊金山現(xiàn)代藝術(shù)博物館為例（見圖8），其中網(wǎng)站的banner都遵循了以上三個(gè)原則。依照banner畫面，來均勻分布文字間的字間距、行間距。

（2）圖像信息

圖像是信息視覺化的基本元素，在傳遞信息上較文字更為直接明了。相對于其他的網(wǎng)站，美術(shù)館這樣特別強(qiáng)調(diào)藝術(shù)表達(dá)的網(wǎng)站，圖像就是整個(gè)版面的主題，文字實(shí)際上只是起到輔助說明的作用。

因而數(shù)字美術(shù)館網(wǎng)站上照片是場景和藝術(shù)品的真實(shí)記錄，除了能給觀賞者欣賞外，更帶來身臨其境的真實(shí)感。這些圖像信息有效的把分散的語言聚集起來，讓數(shù)字與圖形真實(shí)融合，讓信息的傳達(dá)更準(zhǔn)確、更直觀。（見圖9）西雅圖藝術(shù)博物館網(wǎng)頁展訊。

圖9

4.動(dòng)畫影像與其他設(shè)計(jì)元素

網(wǎng)頁在展示平面視覺的元素以外，還會(huì)加入媒體影像。對于數(shù)字美術(shù)館的頁面來說，一方面靜態(tài)與動(dòng)態(tài)的結(jié)合，可使整個(gè)版面的視覺傾向更加均衡；另一方面從用戶體驗(yàn)的需求考慮，動(dòng)態(tài)的視覺加音效效果更容易產(chǎn)生感染力，也能讓新用戶在第一時(shí)間里最快速的了解整個(gè)美術(shù)館的當(dāng)下展訊或者是單獨(dú)主題的表達(dá)。

并不是所有的數(shù)字美術(shù)館網(wǎng)站都會(huì)加入動(dòng)畫影像，但隨著設(shè)計(jì)體驗(yàn)概念的不斷強(qiáng)化，動(dòng)畫影像的互動(dòng)方式將會(huì)越來越普及。

總結(jié)

信息時(shí)代的到來，給整個(gè)社會(huì)生活都帶來了深刻的影響，美術(shù)館作為當(dāng)今社會(huì)的重要的文化機(jī)構(gòu)，必須緊跟科學(xué)新技術(shù)的發(fā)展，實(shí)施信息化建設(shè)。在數(shù)字美術(shù)館信息化建設(shè)進(jìn)程中，視覺設(shè)計(jì)占據(jù)重要的地位，尤其對其網(wǎng)站的設(shè)計(jì)。用戶最直接全面了解美術(shù)館的體驗(yàn)方式就是對當(dāng)下展館的網(wǎng)站瀏覽，大量的數(shù)據(jù)、圖片、藝術(shù)信息，通過專業(yè)設(shè)計(jì)的合理排版，從獨(dú)特視角去詮釋美術(shù)館的精神文化。

數(shù)字美術(shù)館通過互聯(lián)網(wǎng)技術(shù)實(shí)現(xiàn)了美術(shù)館中“物”與“物”、“物”與“人”之間的信息交互。讓美術(shù)館的信息化傳播不僅僅局限于實(shí)地場館，還借助高新科技，強(qiáng)強(qiáng)聯(lián)合，提升美術(shù)館的服務(wù)能力，增強(qiáng)美術(shù)館文化的輻射力，多元化、多途徑地為更多公眾服務(wù)。

參考文獻(xiàn)：

【1】許冰彬.試論以公眾需求為導(dǎo)向的博物館信息化建設(shè)【C】.北京：中國傳媒大學(xué)出版社，2014：306-309

【2】陳 剛.從數(shù)字博物館到智慧博物館的發(fā)展趨勢與挑戰(zhàn)【C】北京：中國傳媒大學(xué)出版社，2014：274-280

【3】張浩達(dá).視覺傳播-信息、認(rèn)知、讀解【M】.北京：北京大學(xué)出版社，2012： 239.