淺析數字美術館網站的視覺設計

【摘要】：數字技術的發展推動了新媒體在公眾設施中的廣泛應用，受眾群體對數字媒體的需求不在僅僅局限于了解信息、獲取信息，對于視覺的美感也有更高的需求。本文將以依托網絡平臺建立起來的數字美術館為例，通過分析其網站的視覺設計，多方面解析視覺元素在網絡平臺發揮的不同作用，體現視覺設計在數字美術館建設中的價值。

【關鍵詞】：數字美術館；新媒體；網站；視覺設計

隨著互聯網產業的飛速發展，數字虛擬現實、三維建模、物聯網、移動互聯、云計算、大數據等各類新技術應用大量出現。如今，這些新媒體技術已經廣泛應用于美術館的展覽陳列之中。其中，數字美術館，以數字化、網絡化、虛擬化的手段，極大的增強了展示的生動性和交互性，擴展了展示的空間和時間。

依托網絡平臺，結合虛擬現實技術和網絡技術的數字美術館，打破了實體美術館現有空間的限制，延伸到數字空間進行展示。為滿足受眾的個性需求，在表現形式上和內容組織上持續創新，更注重在虛擬現實和制造虛擬現實空間方面的視覺設計。

視覺設計在數字美術館建設中的價值

數字美術館就其內涵可以分為兩種：基于現有實體美術館的數字化改造和純網絡虛擬的美術館信息展示平臺。無論是前者還是后者，視覺設計都占有重要的分量。應用了視覺設計的數字美術館，打破了實體美術館展示上一貫單一呆板的陳舊模式，更注重數字展陳設計，優化多媒體界面，全方位的融合數字媒體前言技術與文化創意，使參觀者更好的與美術館近距離互動。

在數字美術館中，視覺設計應用的價值通常表現在三個方面：

1.數字美術館網站的用戶界面上的視覺應用

2.突破空間時間限制的場館及展品展示的視覺設計應用

3.用戶體驗與互動中的視覺設計應用

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

數字美術館網站界面視覺元素分析

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

1.LOGO與標題設計

在整個版面設計中，標題設計是最應重視的部分。數字美術館的標題大多數以標題和LOGO的形式單獨呈現在版面的左上角，這也是用戶在瀏覽網頁時，首先會注意到的地方。標題的位置位于用戶瀏覽頁面的起點處，在簡練而醒目的給予用戶信息提示的同時對頁面瀏覽的順序起到了很好的引導作用。

（1）數字美術館LOGO實例

在大多數的數字美術館的網頁中，LOGO屬于視覺重心，是傳達美術館主題精神。多以美術館的形象標志+美術館全稱的形式出現。這類形式的LOGO設計簡潔大方，適用于各種風格的網站頁面。最重要的是能傳遞準確的信息，而采用簡單的圖案造型與字體設計結合的形式來表達主題更為直接，更便于記憶。圖1中分別是波士頓美術博物館、大都會藝術博物館、哥德堡藝術博物館。

（2）數字美術館的標題實例

用戶在搜索引擎檢索時，一般頁面會首先出現網頁標題（加鏈接）和網頁摘要信息。要想引起用戶的關注，網頁標題就得發揮最大的作用。因此一個概括了網頁核心內容的標題有助于用戶判斷是否點擊該網頁標題鏈接。

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

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

圖4是美國大都會藝術博物館的網頁標題。相對于哥德堡藝術博物館，大都會藝術館的網頁主要是采用色彩區分主次。在主欄標題部分，除了藝術館的LOGO，還在右邊加入了網頁的登陸注冊與搜索欄兩部分。讓整個頁面標題的功能性增強。用黑色作為主標題欄的背景，在視覺上拉開了標題與內容之間的層次，同時穩重的色調也很符合大都會這樣國際級別的藝術博物館的形象。

2.整體色調與背景底紋設計

對于網站設計來說，整體版面的定位是應該放在首位考慮的事。美術館這樣具有公眾效應的網站，版面的整體布局代表了整體美術館傳遞的主題精神。因為要達到與用戶多方位互動，所以決定了界面設計的重要性，其底圖背景的設計也就自然承擔了視覺效果中不可或缺的部分。

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

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

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

3.圖文設計

（1）文字設計

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

以韓國的國立當代藝術博物館的網頁為例。（見圖7）在標題欄，就通過大小文字大小、粗細的不同，區分出目錄下的一級標題、二級標題、三級標題。在中心內容部分，則是通過借用色塊的區分，統一小版塊間的題目與內容上文字大小、間距、色調，這樣用戶在瀏覽網頁時，不會因色塊的不同，而影響文字的閱讀。信息傳遞方式的統一性更能明確表達出主要意思。

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

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

2.文字一般放在畫面的突出位置（如左邊），具體依據整個畫面版式調整。

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

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

（2）圖像信息

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

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

圖9

4.動畫影像與其他設計元素

網頁在展示平面視覺的元素以外，還會加入媒體影像。對于數字美術館的頁面來說，一方面靜態與動態的結合，可使整個版面的視覺傾向更加均衡；另一方面從用戶體驗的需求考慮，動態的視覺加音效效果更容易產生感染力，也能讓新用戶在第一時間里最快速的了解整個美術館的當下展訊或者是單獨主題的表達。

并不是所有的數字美術館網站都會加入動畫影像，但隨著設計體驗概念的不斷強化，動畫影像的互動方式將會越來越普及。

總結

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

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

參考文獻：

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

【2】陳 剛.從數字博物館到智慧博物館的發展趨勢與挑戰【C】北京：中國傳媒大學出版社，2014：274-280

【3】張浩達.視覺傳播-信息、認知、讀解【M】.北京：北京大學出版社，2012： 239.