感在網(wǎng)頁設(shè)計(jì)教學(xué)中的應(yīng)用

周金霞

摘要：在網(wǎng)頁設(shè)計(jì)教學(xué)活動(dòng)中，善用通感，可以充分激發(fā)創(chuàng)作主體的熱情，使之進(jìn)入創(chuàng)作狀態(tài)。在具體創(chuàng)作環(huán)節(jié)中，通感特別體現(xiàn)在視覺、聽覺、動(dòng)畫元素的使用中，合理的運(yùn)用通感設(shè)計(jì)可以調(diào)動(dòng)瀏覽者的感官，使瀏覽者能夠迅速理解網(wǎng)頁的設(shè)計(jì)訴求，在情感上與設(shè)計(jì)產(chǎn)品建立共鳴。

關(guān)鍵詞：通感；網(wǎng)頁設(shè)計(jì)

中圖分類號：TP37 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2015）29-0138-02

The Application of Synesthesia in Webpage in Design Teaching

ZHOU Jin-xia

（Communication University of China， Nanguang College， Nanjing 211172， China）

Abstract： In the teaching activities of web page design， make the best use of synaesthesia can fully arouse the enthusiasm of creation subject， make it into the creation of the state. In the specific process of creation， synaesthesia is particularly reflected in the use of visual， auditory， animation elements， reasonable use of synaesthesia design can mobilize the viewer senses， so that visitors can quickly understand web page design demands， in emotion and product design build chord.

Key words： synaesthesia； webpage design

1 通感概念及應(yīng)用狀況

通感意即感官間的遷移。在心理學(xué)領(lǐng)域被解釋為針對一種感官的刺激能同時(shí)引發(fā)另一種感官的反應(yīng)。藝術(shù)研究領(lǐng)域中，通感也有著豐富的研究成果，陳育德先生在其《靈心妙悟-藝術(shù)通感論》中曾提出，在各類藝術(shù)作品中通感有著不同類型的表現(xiàn)，它能夠使得創(chuàng)作者、欣賞者突破單一的感覺局限，豐富人們的審美體驗(yàn)。通感的本質(zhì)是一種藝術(shù)心理機(jī)制，是營造意象、形象、意境的藝術(shù)表現(xiàn)方式。1

目前，在文學(xué)、產(chǎn)品設(shè)計(jì)、視覺傳達(dá)設(shè)計(jì)、平面設(shè)計(jì)等諸多領(lǐng)域，通感現(xiàn)象的應(yīng)用都受到重視。設(shè)計(jì)過程中，通過對設(shè)計(jì)（或創(chuàng)作）對象的表象與意象充分的分析，適當(dāng)?shù)剡\(yùn)用通感方式引導(dǎo)創(chuàng)作，使作品呈現(xiàn)出格外的魅力。

2 網(wǎng)頁設(shè)計(jì)與“體驗(yàn)”需求

生活在數(shù)字化時(shí)代，人們可以越來越便利、高效的獲取信息。隨之而來，人似乎只剩下面對冰冷的屏幕、鍵盤敲擊、注視這樣的簡單行為。近些年，設(shè)計(jì)行業(yè)開始逐漸注重在設(shè)計(jì)活動(dòng)中強(qiáng)調(diào)敘事和體驗(yàn)。滿足用戶不斷提高的體驗(yàn)需要，重視人的情感需求已經(jīng)成為當(dāng)下設(shè)計(jì)活動(dòng)中的重要趨勢。

“網(wǎng)頁設(shè)計(jì)是近二十年以來意義深遠(yuǎn)的新興設(shè)計(jì)領(lǐng)域形式”。2區(qū)別于傳統(tǒng)的平面設(shè)計(jì)等門類，一般而言，在網(wǎng)頁當(dāng)中可以承載的媒體形式集“音”、“文字”、“圖像”、“視頻”于一身。可見就其本身的特殊形式而言，在設(shè)計(jì)創(chuàng)意過程中，合理使用視覺、聽覺等素材，以通感思維的角度大膽創(chuàng)意，是具有天然優(yōu)勢的。通過合理創(chuàng)作可以調(diào)動(dòng)瀏覽者的感官，使瀏覽者沉浸于網(wǎng)頁的意境，網(wǎng)頁設(shè)計(jì)的訴求能夠被感知，進(jìn)而滿足數(shù)字化生活中人們對“體驗(yàn)”的需求。

3 通感對創(chuàng)作主體的影響

在設(shè)計(jì)中，創(chuàng)造性思維的鍛煉必不可少，在創(chuàng)意思維的鍛煉中豐富的聯(lián)想與想象又是不可或缺的。網(wǎng)頁設(shè)計(jì)教學(xué)之初，面對有基本設(shè)計(jì)表現(xiàn)能力的教學(xué)對象，將通感作為一種創(chuàng)意思維方式，啟迪學(xué)生的創(chuàng)意設(shè)計(jì)，往往能夠事半功倍的激發(fā)創(chuàng)作主體的創(chuàng)作興趣。

例如在網(wǎng)頁設(shè)計(jì)課堂教學(xué)活動(dòng)中，為某傳統(tǒng)品牌重新設(shè)計(jì)網(wǎng)站界面，引導(dǎo)學(xué)生不僅僅從視覺角度切入，而是先嘗試對品牌有所認(rèn)知，之后自主選擇感興趣的品牌，嘗試進(jìn)行再創(chuàng)意設(shè)計(jì)。學(xué)生在創(chuàng)意陳述時(shí)，一般都能擇取與成長、記憶有所關(guān)聯(lián)的品牌。

4 通感與網(wǎng)頁創(chuàng)意設(shè)計(jì)

激發(fā)創(chuàng)作興趣僅僅是網(wǎng)頁設(shè)計(jì)教學(xué)中的第一步，在教學(xué)環(huán)節(jié)中，結(jié)合網(wǎng)頁設(shè)計(jì)的多媒體特性，教學(xué)對象需要掌握通感中各個(gè)要素的特點(diǎn)，尤其是能夠運(yùn)用“視覺”、“聽覺”，結(jié)合網(wǎng)頁設(shè)計(jì)的多媒體特性和互動(dòng)特征，步步為營，精心設(shè)計(jì)，打造一部能夠“喚醒”人的感受的多媒體網(wǎng)頁作品。

4.1 視覺與觸覺

觸覺從心理學(xué)角度而言，是一種主觀類型，主要依賴于個(gè)體的生活體驗(yàn)、閱歷等。在設(shè)計(jì)中如果能做到以視覺感知、調(diào)動(dòng)觸覺活動(dòng)，進(jìn)而使得人們產(chǎn)生一觸即發(fā)、一探究竟的愿望，這將是視覺與觸覺通感帶來的最佳效果。在網(wǎng)頁界面之中，圖形圖像需要完成的任務(wù)不僅僅是展現(xiàn)“美”，還必須兼具引導(dǎo)用戶使用的實(shí)用功能。因而嘗試?yán)靡曈|通感是視覺創(chuàng)意中優(yōu)選的策略。

4.1.1 材質(zhì)肌理

在一般的視覺設(shè)計(jì)中，視觸通感最常見的表現(xiàn)形式是肌理特性的視覺呈現(xiàn)引發(fā)出關(guān)于觸覺的聯(lián)想。

手工愛好者網(wǎng)站MADEINMAD3，在界面中呈現(xiàn)出生動(dòng)的工具，諸如“紐扣”“卷尺”“剪刀”等數(shù)字形象，仿佛觸手可及。典型的視覺典型迅速構(gòu)建了一個(gè)手工愛好者的精神家園。毫無疑問，這樣的界面會幫助到訪的目標(biāo)用戶第一時(shí)間建立起友好、熟悉的感受。網(wǎng)站上方的主導(dǎo)航利用了紐扣的圓形結(jié)合布料質(zhì)感給出自然而然的主導(dǎo)航提示，用戶自然而然的產(chǎn)生試圖撫觸以獲得更多信息的行文，網(wǎng)站用戶可以輕松自如的依據(jù)導(dǎo)航找到自己所需要的相關(guān)信息。

4.1.2 行為認(rèn)知的交互表現(xiàn)

在視覺范疇下的視觸通感不僅僅涵蓋肌理、觸摸特征的視覺表現(xiàn)，還體現(xiàn)在行為認(rèn)知的交互行為中 。一般認(rèn)為，行為習(xí)慣是人們長期習(xí)得的行為方式。對于用戶而言，將日常生活的點(diǎn)點(diǎn)滴滴逐漸轉(zhuǎn)移到各種設(shè)備的屏幕上已成為常態(tài)。移動(dòng)互聯(lián)網(wǎng)擬物化的界面設(shè)計(jì)，針對到有著較多移動(dòng)設(shè)備使用經(jīng)驗(yàn)的用戶來說為避免累贅，有可能在視覺表現(xiàn)上另辟蹊徑。大受好評的日程管理應(yīng)用ANY.DO4圖形界面極為簡潔。在界面中不難發(fā)現(xiàn)它實(shí)質(zhì)上是采用了用戶日常行為習(xí)慣的模仿設(shè)計(jì)，當(dāng)我們把寫在本子上的行程完成時(shí)，我們一般會劃去，而在此設(shè)計(jì)中，正是采用了此種方式。用戶在使用數(shù)字產(chǎn)品時(shí)迅速關(guān)聯(lián)到現(xiàn)實(shí)生活的使用記憶，即可心領(lǐng)神會，迅速實(shí)現(xiàn)了情感上的互通。

4.2 聽覺與視覺

網(wǎng)站設(shè)計(jì)中，可以有效地借助聲音配合畫面進(jìn)行設(shè)計(jì)，進(jìn)而傳遞品牌形象、營造與表現(xiàn)主體一致的故事氛圍。

4.2.1 聲效設(shè)計(jì)

在喜力啤酒5配合世界杯設(shè)計(jì)的產(chǎn)品網(wǎng)站中，當(dāng)鼠標(biāo)移到已滿18歲可以進(jìn)入頁面按鈕，按鈕觸發(fā)音效為體育場上的口號聲和呼喊聲，積極地調(diào)動(dòng)了受眾的視覺、聽覺。同樣，當(dāng)進(jìn)入不同類型產(chǎn)品展示頁面中，點(diǎn)擊不同類型的啤酒時(shí)，網(wǎng)頁通過一只手在冰桶中拿酒的形象來進(jìn)行展示，同時(shí)伴以啤酒瓶與冰塊撞擊摩擦的強(qiáng)勁音效。頃刻之間，喜力啤酒的冰爽、清涼，通過視覺與聽覺的合力，迅速引發(fā)了瀏覽者的味覺甚至觸覺的聯(lián)想。使瀏覽者感受到喜力啤酒這健康向上、積極熱情的品牌形象。

這里，聽覺要素的運(yùn)用無疑為品牌塑造貢獻(xiàn)了重要的一筆。網(wǎng)站借助與主體一致的音效設(shè)計(jì)，使得網(wǎng)頁所展示的信息量增大，不僅僅使瀏覽者看到視覺形態(tài)，還能夠營造立體氛圍，增強(qiáng)了品牌傳遞過程的感染力。

4.2.2 背景聲音

背景聲音是迅速的構(gòu)造故事化情境的有效方式。聲音促發(fā)人的想象力，激發(fā)人的聯(lián)想，鑒賞者在感知的基礎(chǔ)上，通過聯(lián)想或想象，如臨其境被作品吸引，從而形成正面積極的體驗(yàn)。

例如同里的南園茶社網(wǎng)站6。南園茶社坐落于同里的“南市曉煙”景致之中。該茶社始建于清末，素有 “江南第一茶樓”的美譽(yù)。在此網(wǎng)站的設(shè)計(jì)中將中國南方古鎮(zhèn)建筑及裝飾的種種細(xì)節(jié)融匯在網(wǎng)站設(shè)計(jì)中，將手工編織的吊籃、古舊的留聲機(jī)、油燈、木茶壺和酒葫蘆等視覺符號，同抑揚(yáng)頓挫，輕清柔緩的蘇州評彈結(jié)合起來，營造出濃濃的江南水鄉(xiāng)氣息。

4.3 動(dòng)態(tài)交互與通感

相對于平面設(shè)計(jì)、產(chǎn)品設(shè)計(jì)而言，動(dòng)畫元素是網(wǎng)頁設(shè)計(jì)可用的特殊的表達(dá)方式。使用得當(dāng)?shù)脑?，往往可以增?qiáng)用戶對界面反饋的認(rèn)知，在輕松愉悅的過程中完成交互。

4.3.1 交互動(dòng)態(tài)效果

天貓網(wǎng)站7關(guān)于購物車的動(dòng)效設(shè)計(jì)中，模擬了人們在超市購物時(shí)取放物品至購物車的行為。點(diǎn)擊加入購物車圖標(biāo)后，商品圖標(biāo)以拋物線形態(tài)飛出，落在界面中的瞬間，購物車所在的提示頁面友好呈現(xiàn)。該動(dòng)效能夠在觸發(fā)視覺注意的同時(shí)引起使用者的心覺聯(lián)想，把現(xiàn)實(shí)生活經(jīng)驗(yàn)與網(wǎng)絡(luò)購物行為迅速關(guān)聯(lián)，產(chǎn)生情感上的互通，以達(dá)到通感效果。促進(jìn)了信息的高效傳遞。

4.3.2 交互環(huán)節(jié)動(dòng)畫設(shè)置

網(wǎng)絡(luò)多媒體環(huán)境中對交互流程進(jìn)行充分的預(yù)見，以有趣的界面引導(dǎo)用戶克服操作過程中的障礙。對有可能出現(xiàn)的頁面加載延遲、網(wǎng)速卡頓等不利情況，使用合適的趣味化設(shè)計(jì)，取得用戶的理解。例如，在用戶的網(wǎng)速影響界面的使用速度時(shí)，卡通形象的等待畫面會呈現(xiàn)出來，伴隨之一句調(diào)侃般的“網(wǎng)速不給力啊”，會讓使用者感受到這個(gè)產(chǎn)品的人情味。

在學(xué)生創(chuàng)作項(xiàng)目中，要求創(chuàng)作者充分預(yù)見網(wǎng)絡(luò)交互流程中的各個(gè)環(huán)節(jié)，根據(jù)項(xiàng)目特色，設(shè)計(jì)動(dòng)態(tài)界面。使瀏覽者即使在網(wǎng)絡(luò)不佳的等待中也設(shè)計(jì)作品的個(gè)性感染，如圖學(xué)生作品為采用html5視差滾動(dòng)技術(shù)制作的科普類型網(wǎng)站《航天夢想》，創(chuàng)作者以年輕的學(xué)生群體作為目標(biāo)受眾，意圖通過交互網(wǎng)站普及航天知識。

網(wǎng)站通過輕松趣味的扁平化圖形界面，多層空間動(dòng)畫形式，以界面中小火箭在太空穿行的方式，講述了航天史上的重

大事件。設(shè)計(jì)圖形活潑有趣，兼顧網(wǎng)絡(luò)帶寬限制，在網(wǎng)速出現(xiàn)卡頓時(shí)，加載動(dòng)畫頁面出現(xiàn)，微微扭動(dòng)的秒針圖形，具象化的告知網(wǎng)站后臺的努力動(dòng)作，使瀏覽者即使在這樣的網(wǎng)絡(luò)延遲的等待中為創(chuàng)作者的幽默感染，有效地實(shí)現(xiàn)了情感溝通。

綜上所述，正在被數(shù)字化包圍的現(xiàn)代生活中，人們需要有情感的設(shè)計(jì)。網(wǎng)絡(luò)正在成為日常生活的組成部分，如何使學(xué)習(xí)中的設(shè)計(jì)者關(guān)注網(wǎng)頁設(shè)計(jì)的特性，設(shè)計(jì)出優(yōu)秀的符合人群需求的網(wǎng)絡(luò)作品，是網(wǎng)絡(luò)設(shè)計(jì)教學(xué)中關(guān)注的要點(diǎn)。以“通感”作為切入點(diǎn)，可以使創(chuàng)作者感知項(xiàng)目的人情味，激發(fā)創(chuàng)作欲望；在創(chuàng)作流程中，必須依據(jù)網(wǎng)頁設(shè)計(jì)的特性，熟練的運(yùn)用設(shè)計(jì)語言，激活瀏覽者的“通感”，以實(shí)現(xiàn)對用戶情感的關(guān)照同時(shí)在交互界面中順利引導(dǎo)用戶使用網(wǎng)頁所提供的功能。

參考文獻(xiàn)：

[1] 陳育德.靈心妙悟——藝術(shù)通感論[M].安徽教育出版，2005.

[2] 麥克唐納.什么是網(wǎng)頁設(shè)計(jì)[M].譯者：戴剛，譯.中國青年出版社，2006：6.

[3] http：//www.madeinmad.it/index.html.

[4] https：//web.any.do/.

[5] 喜力啤酒網(wǎng)站：http：//www.heineken.com.tw/welcome.aspx？send=http%3a%2f%2fwww.heineken.com.tw%2f.

[6] 南苑茶社網(wǎng)站：http：//www.tongli.net/china/nanyuanchashe/.

[7] https：//www.tmall.com.

[8] 李硯祖.設(shè)計(jì)理論的文史哲[J].設(shè)計(jì)藝術(shù).

[9] （美）魯·阿恩海姆.藝術(shù)與視知覺[M].北京：中國社會科學(xué)院出版社，1984.