陳柯辰 蔣曉

摘要：對(duì)通感在線上購(gòu)物界面設(shè)計(jì)中的運(yùn)用進(jìn)行分析，以提高用戶的線上購(gòu)物體驗(yàn)?；谕ǜ欣碚?，分別分析了線上購(gòu)物界面中影響通感體驗(yàn)的視、聽、觸覺三要素，從而指導(dǎo)線上購(gòu)物界面的設(shè)計(jì)。得出線上購(gòu)物界面設(shè)計(jì)中通感的應(yīng)用方式。線上購(gòu)物界面在設(shè)計(jì)時(shí)從用戶視覺、聽覺、觸覺三方面出發(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)物來說是受到限制的。因此在線上購(gòu)物界面的設(shè)計(jì)中引入通感，以此來突破單一感覺的局限，將商品信息傳達(dá)得更為立體有效，并提升用戶購(gòu)物的舒適度，獲得更為豐富的情感體驗(yàn)。

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

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

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

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

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

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

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

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

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

（二）色彩的通感分析

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

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

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

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

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

（三）文字的通感分析

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

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

其次，文本圖形化的編排方式可以在很大程度上豐富文字的表現(xiàn)力。設(shè)計(jì)師通過對(duì)字重、字距、行距等要素的合理編排，形成圖形化的文本，以此增強(qiáng)單個(gè)字體的整體視覺體驗(yàn)。在購(gòu)物界面的產(chǎn)品介紹中，相較于大塊的文本信息，利用圖形化的文字板式如列表式、卡片式等更容易使用戶在閱讀過程中產(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)造出大賣場(chǎng)的感受，傳遞給用戶快節(jié)奏購(gòu)物的心理感受，也符合產(chǎn)品定位。

而垂直類購(gòu)物APP，由于沒有大量的商品信息，其在頁(yè)面布局的設(shè)計(jì)上就相對(duì)來說更加靈活多變。設(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)景來篩選并閱讀筆記;另外，在商品展示上也可以設(shè)計(jì)得更具個(gè)性化，像時(shí)尚購(gòu)物類APP在展示商品時(shí)可以用雜志的版式進(jìn)行排版，以此來傳遞出時(shí)尚感，也有古物拍賣類APP如古一巷會(huì)在展示頁(yè)面放擬物化的指南針指向貨品出土的方位，給人身臨其境尋寶的期待感，如圖1所示。

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

（五）動(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)在線上售賣時(shí)，會(huì)將果子生長(zhǎng)的環(huán)境、過程錄成一小段視頻作為商品展示，這種動(dòng)態(tài)影像可讓消費(fèi)者身臨其境地感受商品的純天然性，心理上產(chǎn)生信賴感從而促進(jìn)消費(fèi)轉(zhuǎn)化。

而基于用戶行為的反饋動(dòng)態(tài)能使用戶感覺到自己與購(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)起來，讓用戶產(chǎn)生情感上的互通。

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

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

（一）符合界面主題的背景音樂

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

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

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

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

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

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

多點(diǎn)觸控技術(shù)的發(fā)展給用戶與界面的交互手勢(shì)帶來了更多的可能性，觸屏手機(jī)常見的交互手勢(shì)有單擊、雙擊、長(zhǎng)按、平移、速滑及反向滑動(dòng)。在設(shè)計(jì)交互行為時(shí)不僅要考慮用戶熟知的這些界面交互手勢(shì)，更要符合用戶的行為習(xí)慣。用戶的習(xí)慣來自于現(xiàn)實(shí)世界的觸感經(jīng)驗(yàn)，將這種觸感經(jīng)驗(yàn)抽象提取應(yīng)用在界面的操控上，能給用戶帶來熟悉的感覺，增強(qiáng)觸覺通感體驗(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)寫在本子上的信息有誤或者不需要的時(shí)候，我們一般會(huì)劃去，而在此設(shè)計(jì)中，正是以橫滑的手勢(shì)去引導(dǎo)用戶刪去不想要的商品。用戶在和界面交互的過程中能迅速關(guān)聯(lián)到現(xiàn)實(shí)生活的使用記憶，產(chǎn)生情感上的互通，實(shí)現(xiàn)通感。

（二）界面給予用戶的觸覺反饋

積極的觸覺反饋不僅給予用戶正確的引導(dǎo)信息，幫助用戶判斷和決策，還能讓用戶聯(lián)想到真實(shí)觸摸的感受，增強(qiáng)體驗(yàn)。振動(dòng)為觸覺反饋的一種表現(xiàn)形式，能讓用戶通過觸覺來感知產(chǎn)品的反饋及回應(yīng)。在購(gòu)物界面中，振動(dòng)形式的觸覺反饋往往用于消息提醒或者錯(cuò)誤操作的提示。比如在線上購(gòu)物時(shí)，當(dāng)有客服信息送達(dá)或者是物流信息更新時(shí)，不僅視線中會(huì)出現(xiàn)消息浮窗，手中也會(huì)傳來振動(dòng)的觸感;另外當(dāng)我們選購(gòu)?fù)晟唐泛?，假如輸入了錯(cuò)誤的支付密碼，界面也會(huì)給予振動(dòng)的反饋提示。這種振動(dòng)的觸覺反饋就像是有人在你手中戳了兩下，相比于單純的視覺反饋來說，真實(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ì)思維，以視覺為主，聽、觸覺為輔去介入設(shè)計(jì)，并利用用戶的感官經(jīng)驗(yàn)，將用戶的想象聯(lián)想和認(rèn)知理解聯(lián)系在一起，最終形成了立體的購(gòu)物感官體驗(yàn)，增強(qiáng)了用戶線上購(gòu)物的趣味性和互動(dòng)性。