通感在線上購(gòu)物界面設(shè)計(jì)中的應(yīng)用研究

陳柯辰 蔣曉

摘要：對(duì)通感在線上購(gòu)物界面設(shè)計(jì)中的運(yùn)用進(jìn)行分析，以提高用戶的線上購(gòu)物體驗(yàn)。基于通感理論，分別分析了線上購(gòu)物界面中影響通感體驗(yàn)的視、聽(tīng)、觸覺(jué)三要素，從而指導(dǎo)線上購(gòu)物界面的設(shè)計(jì)。得出線上購(gòu)物界面設(shè)計(jì)中通感的應(yīng)用方式。線上購(gòu)物界面在設(shè)計(jì)時(shí)從用戶視覺(jué)、聽(tīng)覺(jué)、觸覺(jué)三方面出發(fā)，并基于用戶的感官經(jīng)驗(yàn)，將用戶的想象聯(lián)想和認(rèn)知理解聯(lián)系在一起，讓用戶在線上購(gòu)物時(shí)獲得愉悅的情感體驗(yàn)。

關(guān)鍵詞：通感 購(gòu)物界面 情感體驗(yàn)

中圖分類號(hào)：J05文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003-0069（2019）010-0141-03

引言

在網(wǎng)絡(luò)日益發(fā)達(dá)的背景下，線上購(gòu)物已經(jīng)成為多數(shù)消費(fèi)者首選的購(gòu)物方式，購(gòu)物界面不僅成為用戶與商品之間信息交流的橋梁，更要為用戶創(chuàng)造良好的線上購(gòu)物體驗(yàn)，但隔著屏幕的購(gòu)物體驗(yàn)相較于實(shí)體購(gòu)物來(lái)說(shuō)是受到限制的。因此在線上購(gòu)物界面的設(shè)計(jì)中引入通感，以此來(lái)突破單一感覺(jué)的局限，將商品信息傳達(dá)得更為立體有效，并提升用戶購(gòu)物的舒適度，獲得更為豐富的情感體驗(yàn)。

一、通感在線上購(gòu)物界面中應(yīng)用的意義

通感常被作為一種修辭手法應(yīng)用于文學(xué)領(lǐng)域，著名文學(xué)家錢(qián)鐘書(shū)先生曾對(duì)通感提出以下論斷，“顏色似乎會(huì)有溫度，聲音似乎會(huì)有形象，冷暖似乎會(huì)有重量，氣味似乎會(huì)有鋒芒”。通感，簡(jiǎn)單來(lái)說(shuō)就是在審美活動(dòng)中把人們的五感聯(lián)系在一起，從基礎(chǔ)的感覺(jué)層面到達(dá)知覺(jué)層面，它是一個(gè)物我感通直至交融的過(guò)程，是伴著情感與想象的過(guò)程。通感作為感官體驗(yàn)的客觀存在形式，與設(shè)計(jì)思維有著諸多相通之處，一直以來(lái)被廣泛應(yīng)用在設(shè)計(jì)領(lǐng)域。然而在界面設(shè)計(jì)的研究中，通感的嘗試還處于起步階段。隨著線上購(gòu)物平臺(tái)不斷涌現(xiàn)，購(gòu)物界面承擔(dān)起信息交流的任務(wù)，在購(gòu)物界面的設(shè)計(jì)上亦可以利用通感來(lái)提高界面體驗(yàn)的有效性和情感性。

數(shù)據(jù)表明當(dāng)人在接收外界信息時(shí)，感覺(jué)通道接受到的信息比例是不同的，其基本數(shù)據(jù)如下：視覺(jué)60%，聽(tīng)覺(jué)20%，觸覺(jué)15%，其余5%。其中嗅覺(jué)和味覺(jué)又幾乎是無(wú)法隔著屏幕去感知的，因此文章重點(diǎn)分析了當(dāng)用戶在線上購(gòu)物時(shí)，與界面聯(lián)系最為密切的視、聽(tīng)、觸三個(gè)感官知覺(jué)是如何影響通感體驗(yàn)的，并以視覺(jué)為主，聽(tīng)、觸覺(jué)為輔來(lái)歸納出在線上購(gòu)物界面中實(shí)現(xiàn)通感體驗(yàn)的方式。以通感介入到線上購(gòu)物界面的設(shè)計(jì)中，可以增強(qiáng)用戶感官體驗(yàn)，亦可以激發(fā)用戶線上購(gòu)物的積極性，建立對(duì)界面的信賴感，這對(duì)線上購(gòu)物的未來(lái)發(fā)展具有深遠(yuǎn)意義。

二、線上購(gòu)物界面中影響通感體驗(yàn)的視覺(jué)要素分析

在界面設(shè)計(jì)中，基本視覺(jué)系統(tǒng)包括：圖標(biāo)、色彩、文字、布局等。設(shè)計(jì)師需要考慮將通感融入到這些內(nèi)容的設(shè)計(jì)中，并且協(xié)調(diào)好各元素之間的關(guān)系。另外，為了避免界面設(shè)計(jì)過(guò)于同質(zhì)化的現(xiàn)象，近幾年開(kāi)始將動(dòng)態(tài)效果作為一種視覺(jué)表現(xiàn)語(yǔ)言，在移動(dòng)界面上展示。因此下面將從視覺(jué)要素中的圖標(biāo)、色彩、文字、布局及動(dòng)態(tài)效果來(lái)對(duì)線上購(gòu)物界面的設(shè)計(jì)進(jìn)行通感分析。

（一）圖標(biāo)的通感分析

圖標(biāo)作為一種重要的視覺(jué)元素有其獨(dú)特的魅力。其最大的特點(diǎn)就是具有直觀性和強(qiáng)大的傳播力，不同地域的民族可以通過(guò)圖標(biāo)來(lái)進(jìn)行信息的傳遞。圖標(biāo)與同等面積的文字相比，具有更強(qiáng)的趣味性和互動(dòng)性，在一定程度上對(duì)文字起輔助作用。

設(shè)計(jì)時(shí)用通感的方法不僅能使圖標(biāo)快速被用戶理解，以此來(lái)引導(dǎo)用戶操作，更能與用戶心靈建立溝通。通感在圖標(biāo)設(shè)計(jì)的切入點(diǎn)依賴于用戶對(duì)于物質(zhì)世界的經(jīng)驗(yàn)。如我們常見(jiàn)的相機(jī)拍攝按鈕就有通感的意味在里面，在現(xiàn)實(shí)生活中當(dāng)我們按下快門(mén)后，光圈會(huì)收縮，“咔嚓”一聲，光國(guó)又會(huì)伸展開(kāi)來(lái)。設(shè)計(jì)時(shí)就是將光圈的符號(hào)元素提煉出來(lái)，國(guó)標(biāo)中的光國(guó)以一層一縮的方式去模擬現(xiàn)實(shí)生活中的拍照過(guò)程，從視覺(jué)上喚起人們對(duì)于圖標(biāo)的理解，讓人有準(zhǔn)備好拍攝的心理體驗(yàn)。另外，看到這樣的國(guó)標(biāo)就好像聽(tīng)到了相機(jī)的“咔嚓”聲，從而由視覺(jué)效果引發(fā)聽(tīng)覺(jué)通感。

因此，在購(gòu)物界面的圖標(biāo)設(shè)計(jì)中，不僅需要抽取出最接近事物本質(zhì)屬性的點(diǎn)、線、面來(lái)組成圖標(biāo)的基本形態(tài)，更需要添加與購(gòu)物場(chǎng)景有關(guān)的動(dòng)態(tài)特征，以強(qiáng)烈的表意來(lái)指引用戶操作識(shí)別，并激發(fā)用戶的多感官體驗(yàn)，以此提高圖標(biāo)的可辨識(shí)性和可用性。

（二）色彩的通感分析

色彩作為視覺(jué)元素最大的影響因子，其感官體驗(yàn)往往能與人產(chǎn)生情感上的共鳴，引起消費(fèi)者超乎視覺(jué)以外的通感體驗(yàn)。色彩的通感實(shí)際上是人們生活記憶中對(duì)色彩產(chǎn)生各種生理感受長(zhǎng)期積累的結(jié)果，色彩與人的通感體驗(yàn)主要集中在冷暖、輕重、軟硬的感知覺(jué)中，因此色彩對(duì)人的通感影響可以總結(jié)如下：

1.首先是色彩的冷暖感，波長(zhǎng)較長(zhǎng)的暖色系（紅色、黃色）容易讓人聯(lián)想到太陽(yáng)，從而給人以溫暖、活潑的感覺(jué)，而波長(zhǎng)較短的冷色系（藍(lán)色、綠色）則會(huì)讓人想起碧海藍(lán)天，給人以冷靜、廣闊的感覺(jué)。這也是為什么淘寶、京東這類綜合類線上購(gòu)物應(yīng)用會(huì)采用飽和度較高的橙色及紅色的原因，這樣的界面色彩給用戶帶來(lái)熱鬧、促銷的購(gòu)物直觀感受。

2.其次是色彩的輕重感，在同色相的情況下，明度較高的顏色讓人感覺(jué)較輕，而明度較低的暗色則會(huì)感覺(jué)比較重;在相同明度的情況下，色彩純度高顯輕，低則顯重。

3.最后是色彩的軟硬感，研究數(shù)據(jù)表明，明度越高且融入灰色系的色彩感覺(jué)較“軟”，能營(yíng)造溫和自然的感覺(jué)，而明度較低且融入灰色系的色彩容易讓人心理上產(chǎn)生堅(jiān)硬的質(zhì)感。此外，多色的情況下，強(qiáng)對(duì)比色感覺(jué)較硬，弱對(duì)比色則較軟。

綜上可以看出，色彩能帶給消費(fèi)者豐富的情感暗示作用，設(shè)計(jì)師在設(shè)計(jì)時(shí)需要同時(shí)考慮產(chǎn)品的設(shè)計(jì)定位及面向的消費(fèi)者特征，以1到2種主色來(lái)奠定界面的色彩基調(diào)，同時(shí)搭配3到5種輔色用以界面上的信息區(qū)分，為用戶在線上購(gòu)物時(shí)營(yíng)造出特有的消費(fèi)環(huán)境。

（三）文字的通感分析

文字作為視覺(jué)元素之一，能夠直接地儲(chǔ)存和傳遞信息。在購(gòu)物界面的設(shè)計(jì)中，文字的通感體現(xiàn)在字體本身的性格特征和文本圖形化的感覺(jué)聯(lián)想中。

首先是不同字體有著不同的風(fēng)格和情感，如嬰童類購(gòu)物平臺(tái)會(huì)選擇圓潤(rùn)的字體，給人柔和、親近的感覺(jué);而古玩類產(chǎn)品的平臺(tái)則會(huì)選擇黑體或是古典漢字體，以此傳遞出端莊的感覺(jué)。

其次，文本圖形化的編排方式可以在很大程度上豐富文字的表現(xiàn)力。設(shè)計(jì)師通過(guò)對(duì)字重、字距、行距等要素的合理編排，形成圖形化的文本，以此增強(qiáng)單個(gè)字體的整體視覺(jué)體驗(yàn)。在購(gòu)物界面的產(chǎn)品介紹中，相較于大塊的文本信息，利用圖形化的文字板式如列表式、卡片式等更容易使用戶在閱讀過(guò)程中產(chǎn)生愉悅的情緒，從而增強(qiáng)界面的通感表現(xiàn)力。

（四）布局的通感分析

具有主次性、規(guī)范化地處理購(gòu)物界面，可以使用戶有一個(gè)舒適流暢的購(gòu)物體驗(yàn)。購(gòu)物界面中布局的通感體現(xiàn)在頁(yè)面功能布局及商品陳列方式上。

綜合類購(gòu)物APP的界面需要展示大量的商品信息，因此在頁(yè)面布局的設(shè)計(jì)上劃分出很多功能區(qū)，這幾乎已經(jīng)形成了通用的模板，如搜索區(qū)、類別菜單區(qū)、廣告區(qū)等。商品的排列數(shù)量也是在一屏范圍內(nèi)盡可能多地去展示，這種橫鋪直述的商品展示方式及大量界面信息給用戶營(yíng)造出大賣(mài)場(chǎng)的感受，傳遞給用戶快節(jié)奏購(gòu)物的心理感受，也符合產(chǎn)品定位。

而垂直類購(gòu)物APP，由于沒(méi)有大量的商品信息，其在頁(yè)面布局的設(shè)計(jì)上就相對(duì)來(lái)說(shuō)更加靈活多變。設(shè)計(jì)時(shí)在功能區(qū)的劃分上可根據(jù)服務(wù)的內(nèi)容更加定制化，如女性內(nèi)衣的購(gòu)物應(yīng)用——氧氣，它有一個(gè)板塊叫作“體驗(yàn)師”，一些Kol會(huì)上傳內(nèi)衣推薦的相關(guān)筆記，而用戶可以根據(jù)尺寸或者場(chǎng)景來(lái)篩選并閱讀筆記;另外，在商品展示上也可以設(shè)計(jì)得更具個(gè)性化，像時(shí)尚購(gòu)物類APP在展示商品時(shí)可以用雜志的版式進(jìn)行排版，以此來(lái)傳遞出時(shí)尚感，也有古物拍賣(mài)類APP如古一巷會(huì)在展示頁(yè)面放擬物化的指南針指向貨品出土的方位，給人身臨其境尋寶的期待感，如圖1所示。

根據(jù)平臺(tái)服務(wù)內(nèi)容對(duì)頁(yè)面布局做出個(gè)性化的創(chuàng)新，無(wú)疑是增強(qiáng)購(gòu)物界面通感表現(xiàn)力的一大方式，并帶給用戶耳目一新的視覺(jué)感受。

（五）動(dòng)態(tài)效果的通感分析

購(gòu)物界面中的動(dòng)態(tài)效果主要分成兩個(gè)方面，一是內(nèi)容展示動(dòng)態(tài)化，二是基于用戶行為的反饋動(dòng)態(tài)，動(dòng)態(tài)效果的通感亦體現(xiàn)在這兩方面。

不同于傳統(tǒng)的圖文展示商品，現(xiàn)在購(gòu)物界面都增加了視頻展示，這種動(dòng)態(tài)化內(nèi)容的引入可使商品信息展現(xiàn)得更為直觀且富有感染力。一些果農(nóng)在線上售賣(mài)時(shí)，會(huì)將果子生長(zhǎng)的環(huán)境、過(guò)程錄成一小段視頻作為商品展示，這種動(dòng)態(tài)影像可讓消費(fèi)者身臨其境地感受商品的純天然性，心理上產(chǎn)生信賴感從而促進(jìn)消費(fèi)轉(zhuǎn)化。

而基于用戶行為的反饋動(dòng)態(tài)能使用戶感覺(jué)到自己與購(gòu)物界面上的元素產(chǎn)生真實(shí)的互動(dòng)，如我們?cè)诰€上把商品加入購(gòu)物車的操作，點(diǎn)擊圖標(biāo)后，商品會(huì)以拋物線形式飛出，再落到購(gòu)物車內(nèi)。這樣一個(gè)動(dòng)態(tài)的反饋效果能迅速地把網(wǎng)絡(luò)購(gòu)物行為和現(xiàn)實(shí)生活經(jīng)驗(yàn)關(guān)聯(lián)起來(lái)，讓用戶產(chǎn)生情感上的互通。

三、線上購(gòu)物界面中影響通感體驗(yàn)的聽(tīng)覺(jué)要素分析

跟視覺(jué)信息密切聯(lián)系的是聽(tīng)覺(jué)，聽(tīng)覺(jué)的參與可以讓五感體驗(yàn)更加立體，設(shè)計(jì)時(shí)可以有效借助聲音配合畫(huà)面來(lái)進(jìn)行設(shè)計(jì)。購(gòu)物界面中影響通感體驗(yàn)的聽(tīng)覺(jué)要素主要包括符合界面主題的背景音樂(lè)和用戶操作交互中的音效設(shè)計(jì)。

（一）符合界面主題的背景音樂(lè)

背景音樂(lè)是迅速構(gòu)造故事化情境的有效方式，能激發(fā)人的想象力，適當(dāng)加入背景音樂(lè)不僅能提升聽(tīng)覺(jué)的愉悅度，更能夠促進(jìn)視覺(jué)上的情感體驗(yàn)，調(diào)動(dòng)用戶對(duì)信息的聯(lián)想和感知力，給人以身臨其境的感覺(jué)。如潮汐是一款大自然聲音主題的身心健康應(yīng)用，在用戶選擇一個(gè)場(chǎng)景后，APP會(huì)模擬場(chǎng)景的聲音，圖2中森林、雨聲或是咖啡廳的環(huán)境聲音，你就會(huì)聯(lián)想到淅淅瀝瀝的雨絲、蔥翠的森林等，自己仿佛處在這樣的環(huán)境。這是聽(tīng)覺(jué)感受在通感的作用下產(chǎn)生心覺(jué)聯(lián)想而帶動(dòng)的情感體驗(yàn)。在購(gòu)物界面的設(shè)計(jì)上也可以利用背景音樂(lè)來(lái)營(yíng)造購(gòu)物環(huán)境的沉浸感，如一些賣(mài)文房四寶的電商就會(huì)在網(wǎng)店裝修時(shí)添加古典、雅致的背景樂(lè)，從聽(tīng)覺(jué)上給顧客帶來(lái)不一樣的購(gòu)物體驗(yàn)。

（二）音效設(shè)計(jì)

界面音效在設(shè)計(jì)時(shí)往往是基于用戶行為來(lái)模擬現(xiàn)實(shí)情境，在用戶與界面產(chǎn)生交互時(shí)，給予及時(shí)的音效反饋，這種反饋可以非常有效地讓用戶知道他們正確有效地完成了行為。如在購(gòu)物界面的設(shè)計(jì)中，在用戶添加商品到購(gòu)物車的操作之后給以一個(gè)類似于打開(kāi)收銀機(jī)的音效，同時(shí)配合上文所提到的視覺(jué)動(dòng)態(tài)效果，在通感的作用下，視覺(jué)與聽(tīng)覺(jué)相互置換、相互交融，能讓用戶迅速聯(lián)想到真實(shí)購(gòu)物的情境，給予用戶良好的反饋體驗(yàn)。音效是一種強(qiáng)大的溝通工具，能夠營(yíng)造立體的感官氛圍，合理運(yùn)用不僅能有效提高用戶對(duì)購(gòu)物界面的滿意度，更能在用戶與界面交互過(guò)程中增強(qiáng)界面的感染力，激發(fā)用戶交互的主動(dòng)性和積極性。

四、線上購(gòu)物界面中影響通感體驗(yàn)的觸覺(jué)要素分析

在現(xiàn)實(shí)生活中，人對(duì)于一切事物會(huì)形成自己的觸感經(jīng)驗(yàn)，不同物理性質(zhì)的產(chǎn)品在我們接觸過(guò)程中通過(guò)材質(zhì)、溫度等給我們帶來(lái)不同的心理感受。而在界面設(shè)計(jì)中，用戶跟界面的觸覺(jué)感受可以理解為兩者之間的交互行為，設(shè)計(jì)時(shí)可以通過(guò)對(duì)用戶交互行為的有效引導(dǎo)來(lái)引起用戶的心理聯(lián)想，從而使信息從交互操作過(guò)程中的觸覺(jué)感受傳遞到其他感官知覺(jué)，營(yíng)造立體的感官體驗(yàn)。購(gòu)物界面中影響通感體驗(yàn)的觸覺(jué)要素可以從用戶作用于界面的交互行為和界面給予用戶的觸覺(jué)反饋兩個(gè)方面來(lái)思考。

（一）用戶作用于界面的交互行為

多點(diǎn)觸控技術(shù)的發(fā)展給用戶與界面的交互手勢(shì)帶來(lái)了更多的可能性，觸屏手機(jī)常見(jiàn)的交互手勢(shì)有單擊、雙擊、長(zhǎng)按、平移、速滑及反向滑動(dòng)。在設(shè)計(jì)交互行為時(shí)不僅要考慮用戶熟知的這些界面交互手勢(shì)，更要符合用戶的行為習(xí)慣。用戶的習(xí)慣來(lái)自于現(xiàn)實(shí)世界的觸感經(jīng)驗(yàn)，將這種觸感經(jīng)驗(yàn)抽象提取應(yīng)用在界面的操控上，能給用戶帶來(lái)熟悉的感覺(jué)，增強(qiáng)觸覺(jué)通感體驗(yàn)。如我們?cè)诰€上購(gòu)物的時(shí)候都會(huì)有這樣一個(gè)體驗(yàn)，經(jīng)常會(huì)想要?jiǎng)h除購(gòu)物車或者收藏夾里的一些商品，比起點(diǎn)擊選擇商品再在界面角落點(diǎn)擊刪除按鈕，我們更傾向直接在商品上左滑引出刪除按鈕再進(jìn)行點(diǎn)擊，如圖3。這種與界面的交互形式實(shí)質(zhì)上是模仿了用戶日常行為習(xí)慣。在日常生活中，當(dāng)寫(xiě)在本子上的信息有誤或者不需要的時(shí)候，我們一般會(huì)劃去，而在此設(shè)計(jì)中，正是以橫滑的手勢(shì)去引導(dǎo)用戶刪去不想要的商品。用戶在和界面交互的過(guò)程中能迅速關(guān)聯(lián)到現(xiàn)實(shí)生活的使用記憶，產(chǎn)生情感上的互通，實(shí)現(xiàn)通感。

（二）界面給予用戶的觸覺(jué)反饋

積極的觸覺(jué)反饋不僅給予用戶正確的引導(dǎo)信息，幫助用戶判斷和決策，還能讓用戶聯(lián)想到真實(shí)觸摸的感受，增強(qiáng)體驗(yàn)。振動(dòng)為觸覺(jué)反饋的一種表現(xiàn)形式，能讓用戶通過(guò)觸覺(jué)來(lái)感知產(chǎn)品的反饋及回應(yīng)。在購(gòu)物界面中，振動(dòng)形式的觸覺(jué)反饋往往用于消息提醒或者錯(cuò)誤操作的提示。比如在線上購(gòu)物時(shí)，當(dāng)有客服信息送達(dá)或者是物流信息更新時(shí)，不僅視線中會(huì)出現(xiàn)消息浮窗，手中也會(huì)傳來(lái)振動(dòng)的觸感;另外當(dāng)我們選購(gòu)?fù)晟唐泛螅偃巛斎肓隋e(cuò)誤的支付密碼，界面也會(huì)給予振動(dòng)的反饋提示。這種振動(dòng)的觸覺(jué)反饋就像是有人在你手中戳了兩下，相比于單純的視覺(jué)反饋來(lái)說(shuō)，真實(shí)感更強(qiáng)，也更能起到提醒作用。

結(jié)語(yǔ)

隨著線上購(gòu)物應(yīng)用不斷涌現(xiàn)，購(gòu)物界面也從最初的信息傳遞到提升用戶情感體驗(yàn)的方向不斷發(fā)展。通感這一新的設(shè)計(jì)思維為線上購(gòu)物界面的設(shè)計(jì)提出了新思路，在購(gòu)物界面的設(shè)計(jì)中引入通感的設(shè)計(jì)思維，以視覺(jué)為主，聽(tīng)、觸覺(jué)為輔去介入設(shè)計(jì)，并利用用戶的感官經(jīng)驗(yàn)，將用戶的想象聯(lián)想和認(rèn)知理解聯(lián)系在一起，最終形成了立體的購(gòu)物感官體驗(yàn)，增強(qiáng)了用戶線上購(gòu)物的趣味性和互動(dòng)性。