企業網站視覺互動設計與品牌傳播

文/楊飛飛（南京信息工程大學 傳媒藝術學院）

20世紀60年代中期，著名英國“廣告教父”大衛·麥肯茲·奧格威（David MacKenzie Ogilvy）首先倡導了“品牌形象”觀念，經過三十多年的實踐，這一創意策略得到越來越多的工商業和廣告界人士的青睞。現在，樹立和強化品牌形象仍是許多企業網站創意的立足點，而且這一策略還代表了將來的趨勢。

一、整體的風格設計傳遞企業文化

企業網站的整體風格設計是吸引客戶、宣傳和傳播企業形象和文化的第一步。包括色彩、圖形、字體、版式設計等各個方面都在品牌傳播過程中有著各自的地位和作用，也對消費者的心理與情感有著不同程度的影響，網站的整體風格要符合企業的精神、氣質。

日本花王企業旗下的肌膚護理品牌“碧柔”（圖1 http://www.biore.com/）一直以清潔、美麗與健康生活為品牌特點推廣他們的系列產品，并以成為最受顧客支持與信賴的品牌為目標。碧柔標志以白、藍為標準色。白色象征了“清潔的肌膚 ”、藍色的漸變表現了“對肌膚的溫和”。花王大力宣傳“洗后不緊繃”作為品牌特色，網站帶著微妙顏色的干凈的版面設計和一個有組織的移動所營造的平滑質感貼切地傳播了“洗后不緊繃”的品牌特點，增強了和消費者之間的關系，具體的表達了公司的人性化。整個設計風格具有現代化，易用和交互性的特點。此外，訪問的內容很有個性魅力，網站成功的把購買過程帶到了一個虛擬的交互式賣場上，讓人們通過親切熟悉的化妝品柜臺展示步驟來進行購買。為了推廣品牌及相應的產品，所有的皮膚護理工具都可以從主頁通過兩個清晰的路徑進入。

圖1 日本花王企業旗下的肌膚護理品牌“碧柔”

著名的BMW汽車公司的網站（圖2 http://www.bmw.com/），公司在網站的視覺設計上制定了極為詳盡、統一的CI系統手冊。手冊從畫面框架尺寸、結構、標志應用、色彩設定以及BMW網站獨特的字體設計等方面，做了事無巨細的說明。德國人的一絲不茍，從這本網站CI系統設計手冊里得到了充分體現。甚至讓人認為，這不是一般意義上的網站設計，而是工程設計，設計師更像是工程師。從這些網站設計上我們可以看到，作為一個大型跨國公司，在塑造企業形象上所下的功夫。雖然如此，作為一個多國籍的大型企業，在保持自己的品牌形象的同時，也應該考慮到各個國家、民族獨特的文化與市場特征，這樣才能設計出更加完美的網站。隨著企業國際化的加速，這種考慮變得越來越重要。

據調查，在日本比較成功的中小型網絡商店的月銷售額已突破400萬日元。“佐野屋”網站（圖3 http://www.jizake.com/）就是一個成功的品牌塑造案例，他現已成為日本酒類網絡商店的佼佼者，商業性的成功使它被各種媒體所介紹，并且在1999年榮獲第三屆日本電子商務大獎的最優秀網絡商店獎。據店主介紹，僅有便利的銷售系統與周全的服務是不夠的，網站必須持有自己的個性與風格，必須擁有一個獨特的網站形象。這個網站有一套CI系統，從網站標志到展開，以及在各個頁面上的應用。另外，為了突出表現東方文化的特色，還采用了明清山水畫的意境，書法的韻律等等。許多頁面大膽地采用黑色，一般來說，網絡商店都很忌諱用黑色，因為黑色缺乏信賴感，信賴感的高低往往是網絡商店成敗的關鍵因素。但是看了網中的說明便知。其原因是“日本酒是酒窖藏酒，最怕的就是光亮”。從這些細小的部分可以看出他對用戶心理的把握。

另一個傳統商業家具和紡織品公司J.Robert Scott網站（圖4 http://www.jrobertscott.com/）。公司鼓勵商業樣品陳列室參觀與擔當商業商品陳列，公司的網站為此設計出創造流動產品的展示，并成功的展現了豐富的產品圖像和應用留白提供視覺平衡。軸式單杠作為網頁的目標導航，簡單而緊湊的版式風格有效的減少了視覺混亂，使界面很直觀。商家鼓勵訪問商品樣本陳列室，那是一個非常有趣和實用的商業玻璃陳列櫥。這一系列的主題空間圖像使訪問者能觀看到產品處于環境里滾動展示的尺度、施工詳圖和最終結果。盡管這不算是新穎的創意，但是對家具選擇而言，是一個顯著而有用的功能，它能夠使人們觀看到真實的物件。網站像一個小冊子樣，傳達生活的方式、個性等六個明確部分的信息。畫廊和產品目錄在窗口打開，使得客戶清楚地觀看到代表公司理念的系統的設計。

法國的“The Vancouver Playhouse劇院網站”，因為定位從傳統的戲劇轉向更有市場的現代戲劇。劇院的網站也重新進行了整體的風格設計，以符合他們現在的品牌形象。網站運用了明確的視覺結構和經典耐用的顏色，以及符合閱讀習慣的排版和內容劃分，使得網站既美觀又易用。網站導航應用了主流版式，主導航條在頁面上方，二級導航在頁面左部。主導航由六個欄目組成，之間用精致地細豎線分開。主導航的位置始終不變，瀏覽者所在欄目的文字以另一種顏色顯示，能讓瀏覽者便捷明白的穿梭在各欄目中。頁面的文字段落中，使用黃色的字體來突出超級鏈接，既可突出鏈接，又可讓單調的網頁顯得活潑。

圖5 奧迪（Audi）汽車北美官方網站

在網站的整體風格設計當中，不容忽視的還有導航欄的設計，導航是網站中基礎元素之一，引導用戶了解到網站的內容結構進而找到所求。作為基礎元素，導航看起來簡單，但卻是網站設計中最復雜繁瑣的一部分。獨特而清晰的購物導航和指引是一個優秀的銷售類網站的設計重點，一個容易誤導且沒有特點的導航，只會使消費者止步。

奧迪（Audi）汽車北美官方網站（圖5 http://www.audi.com）通過精美流暢的購物導航創造具有說服力的瀏覽體驗，來吸引消費者購買汽車。網站的主菜單內容通過車型的名稱、價格和購車指南的順序清晰排列；輔導航提供了“圖片”、“360度觀看”、“錄像”和“下載”這四部分的導航鏈接。整體的信息結構設計的關鍵是以瀏覽者體驗為導向來安排菜單內容，把車型菜單放在頁面顯著位置，這樣就可以使大部分的消費者們輕松地進行車型選擇，避免了多數人陷入選擇枯燥的技術參數的苦惱中了。在每個車型的首頁中，頁面中有一個關于該車的演示動畫電影，通過動畫全方位地詳細介紹了車的細節。其中還包含了高質量的圖片以及有關車型的解說、錄像和客戶的評價。Flash的動畫影片介紹了車型的技術特征、設計和性能優點，同時也鼓勵瀏覽者們去進一步的配置自己理想的汽車或者觀看汽車的特性和技術規格。此外，網站有一些特別的內容如“購買評估”板塊，可以讓消費者了解如何分期購買汽車；“比較”板塊，通過客觀的數據讓消費者把奧迪汽車同其他可比的汽車進行比較。

另一個華盛頓基于DC的酒宴承辦的飲食業網站Occasions Caterers（www.occasionscaterers.com）也很有特點，這個風格新穎的網站為顧客提供了清晰獨特的導航系統。在主頁，有一個像小冊子的層解答了有關的問題。標題的圖片顯著、簡潔，頁面層清晰且有許多食物照片。活動展示在站點里呈高亮狀態，它里面含有對去活動的介紹。導航條信息，能夠快速地提供給觀眾在這里所需的相關信息。信息區能夠便捷地訪問網站的各部分。頁面頂部有下拉式動態導航條，從主頁能夠訪問網站的所有區域。每個部分的下級導航條，都放在左邊的文本菜單。此外，網站還為顧客提供一個在線服務列表，對消費者的回復是高效、有利、方便和實用的。

總的來說，網站的整體風格設計需要突出該企業明顯的行業特征或品牌優勢，確保該企業在經濟活動當中的獨立性和不可替代性。網站的整體風格設計不僅要傳達該企業的經營理念和企業文化，還要以自己特有的視覺符號系統吸引公眾的注意力并產生記憶，使消費者對該企業所提供的產品或服務產生最高的品牌忠誠度。

二、多媒體動畫創意體現企業精神

尼葛洛龐帝在《數字化生存》中認為多媒體包括文字、聲音、圖形、圖像、動畫與視頻等。這些訴諸用戶不同感官的媒體元素之間可以相互進行信息轉換與融合，用戶通過多感官刺激獲得對作品多維度、多層次、立體化的系統感知。1尼葛洛龐蒂《數字化生存》 胡泳、范海燕譯，海口：海南出版社 1996，89、91網站中加入動畫元素可以營造出純靜態頁面達不到的競爭頁面,具有超強的互動性。媒體與動畫效果感官性極強，可以生動地將企業的產品、服務、品牌更好第呈現在客戶眼前，幫助客戶親身體驗，更有利于誠信環境的構建，在突出企業品牌,彰顯企業形象和實力上面有著獨到的功能。其中虛擬現實技術更能全方位的展示產品的細節。虛擬空間可以創造一種視、聽、觸多感官體驗交融的系統，使潛在客戶完全沉浸其中的虛擬現實環境。它在很大程度上擴展了多媒體交互特性帶給受眾的感官體驗。企業要突顯企業理念、產品品質，恰當的應用動畫與虛擬現實技術非常關鍵。莫里認為：“計算機媒體不僅提供了某種我們可以訪問的空間，而且將我們帶到可以將自己的幻想付諸實施的地方。不論幻想本身的內容如何，親歷仿真之境的體驗都是令人愉悅的。我們將這種體驗稱為“沉浸”。1Murray，Janet Horowitz.Hamlet on the Holodeck[M].New York,NY:The Free Press,1997,p98. 布賴斯《多媒體與虛擬現實工程》［M］，史萍等譯，中國電影出版社 2000，4、5.

圖7 水磨坊旅館網站

加拿大的一個季刊時尚雜志《The Look》網站設計獨特（圖6 www.thelookmagazine.ca），他是專為受過良好教育的富有的年齡在25到49歲的城市女性而設計。這個站點的定位時尚，它的界面不同于一般的在線雜志格式，看上去設計很前衛，它的內容被呈現在一個交互式的Flash畫面上。在很大程度上，網站內容摘要是一個很大的上翻式目錄，當上翻時會占據網頁的大部分頁面，那樣使用戶能夠容易看到標題，它不僅界面簡潔，而且很容易用鼠標操作。到目前為止，這個網站最顯著的特點就是整個頁面綜合了交互式視頻廣告和評論內容。最吸引瀏覽者的是整個動畫頁面加上了即時更新的視頻和評論內容。在導航條底部有一個簡單的鏈接跳轉按鈕，在視頻播放時，很方便地提供想要的廣告。頁面在時尚的色調中反映雜志社的服務宗旨。可以說，網站設計師成功地利用網站的“前衛與高端”藝術特征對企業形象進行了有效地推廣。

另一個“水磨坊旅館網站”（圖7 www.vizimalompanzio.hu）是以一張精心制作的名片的形式來介紹一個位于風景秀麗的匈牙利西部的小旅館。這個網站內容展示很緊湊而雅致，內容簡潔卻很自如的把旅館的氛圍介紹給了訪問者，同時抓住了旅館的悠久歷史和美景這些精髓。主要導航系統與頁面主要內容區獨立了出來。它被包含在頁面頂部的一個分開的區域內。位于各個內容部分的第二層次鏈接主要是利用了那種文件夾指引片式的導航系統。導航和內容的完全區分讓訪問這能夠體驗到旅館的精華，而不被界面所干擾。網站使用的畫面動態展示給豐富的圖片帶來了很好的平衡，它的真正價值在于它展現了這塊地方的氛圍，同時又保留一份神秘。網站還采用了虛擬現實技術，360度的展示了全景。其中的背景音樂，聲響和動畫都在模擬現實生活中的氛圍如雨，蠟燭煙，閃爍的火苗和燈光。正如英國視音頻專家布賴斯（R.Price）指出：“虛擬現實（VR）的目的與多媒體完全不同，其最主要的目是創建所謂“沉浸”的感覺。一個成功的虛擬現實演示或作品可使觀眾、聽眾或游戲操作者產生一種脫離他們所處的現實世界、沉浸在另一種環境中的感覺。這種沉浸的感覺必須是由感覺器官獨自產生的，而不是由心理的想象力產生的。虛擬現實的精華在于：可以創造令人信服的感官輸入和一個逼真的感覺，這個逼真的感覺是指操作者自身的動作和行為可以以一種現實的、令人信服的方式影響世界。簡單地說，我們必須能夠與這個虛擬世界交互。”2網站營造的視聽空間使得潛在的客戶可以在線享受視聽震撼帶來的愉悅感，在網絡視聽空間的虛擬環境越來越愉悅并樂趣無窮。

作為企業網站中的多媒體動畫創意設計者應該意識到:潛在客戶與網站視聽空間的和諧統一關鍵在于“以人為本”的設計與制作,動畫、游戲、視頻等元素所具有的親和力能夠吸引消費者的關注與參與。以功能和形式協調的設計原則可以平衡功能與形式之間的良好關系,可以避免過分的形式主義或是過分的功能主義。

三、獨特的交互體驗傳播企業的理念

黃鳴奮在 《新媒體與西方數碼藝術理論》中論述到“參與者的地位和作用成為藝術理論家所關注的問題。藝術領域最基本的社會角色是創作者、傳播者與鑒賞者，他們之間的交互左右了藝術態勢與藝術發展。社會角色之間的交互深受媒體的影響。媒體變革不能不對社會角色之間的交互產生深刻影響。電子媒體使個人空間成為公共空間，從而使角色扮演發生變化。”1黃鳴奮《新媒體與西方數碼藝術理論》 學林出版社 2009，14.網站交互體驗的個性化可以傳播企業的精神。在企業網站品牌宣傳競爭中，誰的交互體驗具有嶄新獨特的視角和表現，誰就能在吸引客戶從而爭得先機。而缺乏人性化與平淡無奇的交互設計，必將被淹沒在眾多企業網站之中。國際上設計發達國家的設計理念既重視科技含量，又強調了人情味，正在向高科技和高情感結合的方向發展。在進行交互設計之前，需要對客戶進行細致廣泛的信息調查，洞察用戶的心理目標、行為和心理習慣。

斯坦福大學的“虛擬戲劇項目”（The Virtual Theater Project）開發出能在良好定義的故事或者即興表演環境中行動的有才智的自主人物，提供一種多媒體環境。讓用戶可以在其中扮演創造性角色，包括制片人、劇作家、角色分派導演、布景師、音樂導演及演員等。用戶未承擔的角色由智能代理填補。2黃鳴奮《新媒體與西方數碼藝術理論》 學林出版社 2009，138.在企業網站當中，也可以提供一個虛擬的賣場，讓潛在的客戶扮演創造性的角色，從而激發他們的購物興趣。“The Filling Station Miami”網站（www.fillingstationmiami.com）是個介紹邁阿密一新商品房項目的企業網站，其中獨特的交互體驗、強烈視覺的照片和精簡的文字把瀏覽者尤其是年輕瀏覽者深深地吸引住了。這個網站設計了一種很有趣的瀏覽方式，使用了一個特別的導航形式，瀏覽者通過鼠標滑動或點擊，在有限的空間內就相應地滑動變換內容。網站的交互主要集中在客戶可以自定義住房的空間并可以體驗擁有后的感覺，建造自己的房間(Build Your Unit)內容是非常與眾不同的。其內容風格很娛樂休閑。如某一版面里，瀏覽者無意地得到了網站的“彩蛋”，一個像MTV的Flash動畫《The Filling Station Teaser》。在最喜愛欄目中，是一個平常的列表，列出了附近的周邊環境，每個場所用兩句話描述了地點和路線，并附有照片。網站設計像是一部虛構小說，作者用第一人稱敘述了居住于此之后發生的事情，額外的部分包含了獨特意想不到的內容。

另一個特色網站“SUM”（www.allsteeloffice.com/sum）介紹了來自Allsteel公司的最新工作座椅，這款座椅完全滿足了用戶對辦公座椅功能上的渴望。網站突出這款座椅的設計，并且娛樂是這個概念身后的導向力。它的滿足感通過一個簡單、流暢、吸引人的交互方式，在一種新鮮的、消費者導向狀態下被呈現出來。對辦公室座椅來說怎樣才算是一個標準的行銷場所，這是一個很有趣的選擇。一個相關的平面導航，分為五個主要的部分，遍布了所有場所內容，并達到了讓人感覺舒適的平衡，如果沒有斷開內容和導航的聯系，可以在滾動條上點擊主導航詳述和折疊它。網站為整個場所提供了一個明亮的光線，再加上活潑的藝術線條和有趣的聲音，和人們產生交互的感覺。網站通過獨特的交互對這個座椅的構造進行了剖析，包括生動的運動中座椅和身體運動的的狀態。非常有趣的是產品的吉祥物“Paul”，一個印章競選活動的重要元素。它作為代表為觀眾在這個座椅上體驗進行服務。它也會提供一些不穩定的狀態，呈現出奇異的，舒適的，誘發你微笑的表現。他們是靈動的，有趣的，高記憶力的。他們和獨特的音頻使用合作的天衣無縫，這令客戶在訪問網站的過程始終保持心情愉快的。

圖9 Freebord滑板網站

“Vitaminwater”是誕生在紐約的健康飲品，有淡淡水果味兒。“Vitaminwater網站”（圖8 www.vitaminwater.com）它能夠吸引訪問者訪問站點的每個地方，并且能快速召集訪客購買適合每人口味的產品。在主頁，兩個有詳細說明的瓶子是站點的兩個主要部分，訪問者點擊其中任一個進入有關的內容。Vitaminwater被設計成一個形象的、有利于內容傳輸的動態電子發生器系統，例如，在中午站點介紹要吃少量有營養的食物“保持平衡”，在黎明前的幾小時作為殘留的藥物提供“生效”，然而smartwater區域是靜態不動的。每當進入里面部分，在介紹產品時，看起來好像在連續不斷的變化，能夠使事先復制好說明的文字和動作保持完美的一致。另外smartwater的內容簡潔而生動，交互式的瓶子恰恰顯現出凈化水產品的雙重好處和大小實用的便利圖表。在瓶子上上下移動鼠標可以改變水位，而且每在一處都會顯示一個適當的建議性語句。

運動商品 “Freebord滑板網站”（圖9 http://www.freebord.com/）的消費群體主要針對年輕的滑雪、滑板、沖浪愛好者。網站通過獨特且恰當的界面展示公司的產品，說服消費者購買他們的產品。網站主體是一幅3D制作的美麗風景，表現的是有縱橫交錯山脈和一塊城市風景的滑雪場地。導航系統非常的有趣，當鼠標在風景上移動時，附近的導航點就會閃現出來，這個視覺線索就會引導瀏覽者通過有趣的界面來訪問每一個內容板塊。人們可以通過自己對滑雪場的知識來點擊特定的地點，從而獲取自己想要的信息，比如，其中的一個“小兔子山”，瀏覽者就可以在此獲取如何掌握滑板的信息；“售票處”，瀏覽者在此可以定購滑板。網站的內容量雖不多，但是精簡的內容卻明確地說明了產品，Quicktime, Flash和3D動畫的運用使得整個網站有了生機，內容板塊之間的過渡顯得十分流暢。開發者們有意使文件變得最小，以便保持網站的瀏覽節奏。雖然大部分的極限運動網站都有背景音樂，但是這個網站沒有。而替代音樂的是，開發者們精心制作的增加山頂氣氛的環境音效。

從上面的幾個例子可以看出，在企業網站的體驗式設計中，其人性化、互動參與性得到了前所未有的強調。在體驗過程中，最高層面的參與、互動來源于人與產品的情感交流，以及隱藏在網站背后的設計思想的交流。體驗式設計重視對客戶的感官刺激，加強產品的感知化。在視覺方面，我們需要將產品的不同視角、動態、細節、場景都視圖，逼真地呈現在網絡用戶面前，同時結合虛擬現實技術，使網絡用戶能夠自如地旋轉操控廣告畫面，任意察看不同角度視圖，使網絡客戶的信息需求得到滿足；在聽覺方面，可以設計不同的音效。網站的體驗設計還包括對情境狀態的體驗，追求和諧的道具、布景，創造感人肺腑的場景，以具有強烈吸引力的主題，產生出豐富的、獨特的體驗價值。

Packer和Ken將以計算機與互聯網為代表的新媒體的特性歸納為 5 項：“綜合性：將藝術形式與技術結合的表現形式；交互性：用戶直接操作與影響其媒體體驗并通過媒體與其他人交流的能力；超媒體：將分離的媒體要素彼此鏈接起來，創造個人聯想的痕跡；沉浸性：進入仿真或三維環境的聯想的體驗；敘事性：源于上述觀念的美學的與形式的策略，導致非線性故事形式與媒體表現。”1Packer,Randall,and Ken Jordan.Multimedia:From Wagner to Virtual Reality[C].Expanded Edition by Randall Packer andKen Jordan.New York and London:W.W.Nortion & Company,2002,pp.XXXV.從上面的例子可以看出，訪問者可以通過對網站的整體風格設計、網頁的動畫交互、視覺設計而盡快熟悉企業精神和文化。企業網站以其獨特的互動性、多樣性和人性化，彰顯出與潛在客戶溝通時的無限魅力。對于潛在客戶而言，網站訪問的過程就是網站所表現的虛擬平臺與客戶所處的現實時空交互的過程。網站中視覺交互設計與創意要符合企業的文化、理念與精神，利于品牌的傳播，其中動畫多媒體的技術手段是其支撐的力量，網站的多媒體與動畫設計使其表現形式和創意空間都得以拓展，讓消費者能從網絡視聽空間來體會企業所傳達的思想。在進行網站創意設計時,只有品牌形象、視覺設計以及互動性設計多個層面相互結合,才能使網站的宣傳效果最優化,朔造成功品牌。

[1]〔美]杰夫 卡爾森等著.最佳網頁設計——導航.中國輕工業出版社.2001.

[2]〔美]尼科 麥克唐納編著.什么是網頁設計.中國青年出版社.2006.

[3] 余小梅.廣告心理學.北京廣播學院出版社.2003.

[4]陳剛等著.新媒體與廣告.中國輕工業出版社.2002.

[5]肖永亮,江琴.新媒體藝術批評初探.龍全.兼容·和而不同.北京航空航天大學出版社,2009.

[6]王荔.新媒體藝術發展綜述.同濟大學出版社,2009.