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

陳柯辰 蔣曉

摘要：對通感在線上購物界面設(shè)計中的運用進行分析，以提高用戶的線上購物體驗?；谕ǜ欣碚?，分別分析了線上購物界面中影響通感體驗的視、聽、觸覺三要素，從而指導線上購物界面的設(shè)計。得出線上購物界面設(shè)計中通感的應(yīng)用方式。線上購物界面在設(shè)計時從用戶視覺、聽覺、觸覺三方面出發(fā)，并基于用戶的感官經(jīng)驗，將用戶的想象聯(lián)想和認知理解聯(lián)系在一起，讓用戶在線上購物時獲得愉悅的情感體驗。

關(guān)鍵詞：通感 購物界面 情感體驗

中圖分類號：J05文獻標識碼：A

文章編號：1003-0069（2019）010-0141-03

引言

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

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

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

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

二、線上購物界面中影響通感體驗的視覺要素分析

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

（一）圖標的通感分析

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

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

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

（二）色彩的通感分析

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

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

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

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

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

（三）文字的通感分析

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

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

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

（四）布局的通感分析

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

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

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

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

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

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

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

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

三、線上購物界面中影響通感體驗的聽覺要素分析

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

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

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

（二）音效設(shè)計

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

四、線上購物界面中影響通感體驗的觸覺要素分析

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

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

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

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

積極的觸覺反饋不僅給予用戶正確的引導信息，幫助用戶判斷和決策，還能讓用戶聯(lián)想到真實觸摸的感受，增強體驗。振動為觸覺反饋的一種表現(xiàn)形式，能讓用戶通過觸覺來感知產(chǎn)品的反饋及回應(yīng)。在購物界面中，振動形式的觸覺反饋往往用于消息提醒或者錯誤操作的提示。比如在線上購物時，當有客服信息送達或者是物流信息更新時，不僅視線中會出現(xiàn)消息浮窗，手中也會傳來振動的觸感;另外當我們選購完商品后，假如輸入了錯誤的支付密碼，界面也會給予振動的反饋提示。這種振動的觸覺反饋就像是有人在你手中戳了兩下，相比于單純的視覺反饋來說，真實感更強，也更能起到提醒作用。

結(jié)語

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