陈柯辰 蒋晓

摘要：对通感在线上购物界面设计中的运用进行分析，以提高用户的线上购物体验。基于通感理论，分別分析了线上购物界面中影响通感体验的视、听、触觉三要素，从而指导线上购物界面的设计。得出线上购物界面设计中通感的应用方式。线上购物界面在设计时从用户视觉、听觉、触觉三方面出发，并基于用户的感官经验，将用户的想象联想和认知理解联系在一起，让用户在线上购物时获得愉悦的情感体验。

关键词：通感 购物界面 情感体验

中图分类号：J05文献标识码：A

文章编号：1003-0069（2019）010-0141-03

引言

在网络日益发达的背景下，线上购物已经成为多数消费者首选的购物方式，购物界面不仅成为用户与商品之间信息交流的桥梁，更要为用户创造良好的线上购物体验，但隔着屏幕的购物体验相较于实体购物来说是受到限制的。因此在线上购物界面的设计中引入通感，以此来突破单一感觉的局限，将商品信息传达得更为立体有效，并提升用户购物的舒适度，获得更为丰富的情感体验。

一、通感在线上购物界面中应用的意义

通感常被作为一种修辞手法应用于文学领域，著名文学家钱钟书先生曾对通感提出以下论断，“颜色似乎会有温度，声音似乎会有形象，冷暖似乎会有重量，气味似乎会有锋芒”。通感，简单来说就是在审美活动中把人们的五感联系在一起，从基础的感觉层面到达知觉层面，它是一个物我感通直至交融的过程，是伴着情感与想象的过程。通感作为感官体验的客观存在形式，与设计思维有着诸多相通之处，一直以来被广泛应用在设计领域。然而在界面设计的研究中，通感的尝试还处于起步阶段。随着线上购物平台不断涌现，购物界面承担起信息交流的任务，在购物界面的设计上亦可以利用通感来提高界面体验的有效性和情感性。

数据表明当人在接收外界信息时，感觉通道接受到的信息比例是不同的，其基本数据如下：视觉60%，听觉20%，触觉15%，其余5%。其中嗅觉和味觉又几乎是无法隔着屏幕去感知的，因此文章重点分析了当用户在线上购物时，与界面联系最为密切的视、听、触三个感官知觉是如何影响通感体验的，并以视觉为主，听、触觉为辅来归纳出在线上购物界面中实现通感体验的方式。以通感介入到线上购物界面的设计中，可以增强用户感官体验，亦可以激发用户线上购物的积极性，建立对界面的信赖感，这对线上购物的未来发展具有深远意义。

二、线上购物界面中影响通感体验的视觉要素分析

在界面设计中，基本视觉系统包括：图标、色彩、文字、布局等。设计师需要考虑将通感融入到这些内容的设计中，并且协调好各元素之间的关系。另外，为了避免界面设计过于同质化的现象，近几年开始将动态效果作为一种视觉表现语言，在移动界面上展示。因此下面将从视觉要素中的图标、色彩、文字、布局及动态效果来对线上购物界面的设计进行通感分析。

（一）圖标的通感分析

图标作为一种重要的视觉元素有其独特的魅力。其最大的特点就是具有直观性和强大的传播力，不同地域的民族可以通过图标来进行信息的传递。图标与同等面积的文字相比，具有更强的趣味性和互动性，在一定程度上对文字起辅助作用。

设计时用通感的方法不仅能使图标快速被用户理解，以此来引导用户操作，更能与用户心灵建立沟通。通感在图标设计的切入点依赖于用户对于物质世界的经验。如我们常见的相机拍摄按钮就有通感的意味在里面，在现实生活中当我们按下快门后，光圈会收缩，“咔嚓”一声，光国又会伸展开来。设计时就是将光圈的符号元素提炼出来，国标中的光国以一层一缩的方式去模拟现实生活中的拍照过程，从视觉上唤起人们对于图标的理解，让人有准备好拍摄的心理体验。另外，看到这样的国标就好像听到了相机的“咔嚓”声，从而由视觉效果引发听觉通感。

因此，在购物界面的图标设计中，不仅需要抽取出最接近事物本质属性的点、线、面来组成图标的基本形态，更需要添加与购物场景有关的动态特征，以强烈的表意来指引用户操作识別，并激发用户的多感官体验，以此提高图标的可辨识性和可用性。

（二）色彩的通感分析

色彩作为视觉元素最大的影响因子，其感官体验往往能与人产生情感上的共鸣，引起消费者超乎视觉以外的通感体验。色彩的通感实际上是人们生活记忆中对色彩产生各种生理感受长期积累的结果，色彩与人的通感体验主要集中在冷暖、轻重、软硬的感知觉中，因此色彩对人的通感影响可以总结如下：

1.首先是色彩的冷暖感，波长较长的暖色系（红色、黃色）容易让人联想到太阳，从而给人以温暖、活泼的感觉，而波长较短的冷色系（蓝色、绿色）则会让人想起碧海蓝天，给人以冷静、广阔的感觉。这也是为什么淘宝、京东这类综合类线上购物应用会采用饱和度较高的橙色及红色的原因，这样的界面色彩给用户带来热闹、促销的购物直观感受。

2.其次是色彩的轻重感，在同色相的情况下，明度较高的颜色让人感觉较轻，而明度较低的暗色则会感觉比较重;在相同明度的情况下，色彩纯度高显轻，低则显重。

3.最后是色彩的软硬感，研究数据表明，明度越高且融入灰色系的色彩感觉较“软”，能营造温和自然的感觉，而明度较低且融入灰色系的色彩容易让人心理上产生坚硬的质感。此外，多色的情况下，强对比色感觉较硬，弱对比色则较软。

综上可以看出，色彩能带给消费者丰富的情感暗示作用，设计师在设计时需要同时考虑产品的设计定位及面向的消费者特征，以1到2种主色来奠定界面的色彩基调，同时搭配3到5种辅色用以界面上的信息区分，为用户在线上购物时营造出特有的消费环境。

（三）文字的通感分析

文字作为视觉元素之一，能够直接地储存和传递信息。在购物界面的设计中，文字的通感体现在字体本身的性格特征和文本图形化的感觉联想中。

首先是不同字体有着不同的风格和情感，如婴童类购物平台会选择圆润的字体，给人柔和、亲近的感觉;而古玩类产品的平台则会选择黑体或是古典汉字体，以此传递出端庄的感觉。

其次，文本图形化的编排方式可以在很大程度上丰富文字的表现力。设计师通过对字重、字距、行距等要素的合理编排，形成图形化的文本，以此增强单个字体的整体视觉体验。在购物界面的产品介绍中，相较于大块的文本信息，利用图形化的文字板式如列表式、卡片式等更容易使用户在阅读过程中产生愉悦的情绪，从而增强界面的通感表现力。

（四）布局的通感分析

具有主次性、规范化地处理购物界面，可以使用户有一个舒适流畅的购物体验。购物界面中布局的通感体现在页面功能布局及商品陈列方式上。

综合类购物APP的界面需要展示大量的商品信息，因此在页面布局的设计上划分出很多功能区，这几乎已经形成了通用的模板，如搜索区、类別菜单区、广告区等。商品的排列数量也是在一屏范围内尽可能多地去展示，这种橫铺直述的商品展示方式及大量界面信息给用户营造出大卖场的感受，传递给用户快节奏购物的心理感受，也符合产品定位。

而垂直类购物APP，由于没有大量的商品信息，其在页面布局的设计上就相对来说更加灵活多变。设计时在功能区的划分上可根据服务的内容更加定制化，如女性内衣的购物应用——氧气，它有一个板块叫作“体验师”，一些Kol会上传内衣推荐的相关笔记，而用户可以根据尺寸或者场景来筛选并阅读笔记;另外，在商品展示上也可以设计得更具个性化，像时尚购物类APP在展示商品时可以用杂志的版式进行排版，以此来传递出时尚感，也有古物拍卖类APP如古一巷会在展示页面放拟物化的指南针指向货品出土的方位，给人身临其境寻宝的期待感，如图1所示。

根据平台服务内容对页面布局做出个性化的创新，无疑是增强购物界面通感表现力的一大方式，并带给用户耳目一新的视觉感受。

（五）动态效果的通感分析

购物界面中的动态效果主要分成两个方面，一是内容展示动态化，二是基于用户行为的反馈动态，动态效果的通感亦体现在这两方面。

不同于传统的图文展示商品，现在购物界面都增加了视频展示，这种动态化内容的引入可使商品信息展现得更为直观且富有感染力。一些果农在线上售卖时，会将果子生长的环境、过程录成一小段视频作为商品展示，这种动态影像可让消费者身临其境地感受商品的纯天然性，心理上产生信赖感从而促进消费转化。

而基于用户行为的反馈动态能使用户感觉到自己与购物界面上的元素产生真实的互动，如我们在线上把商品加入购物车的操作，点击图标后，商品会以拋物线形式飞出，再落到购物车内。这样一个动态的反馈效果能迅速地把网络购物行为和现实生活经验关联起来，让用户产生情感上的互通。

三、线上购物界面中影响通感体验的听觉要素分析

跟视觉信息密切联系的是听觉，听觉的参与可以让五感体验更加立体，设计时可以有效借助声音配合画面来进行设计。购物界面中影响通感体验的听觉要素主要包括符合界面主题的背景音乐和用户操作交互中的音效设计。

（一）符合界面主题的背景音乐

背景音乐是迅速构造故事化情境的有效方式，能激发人的想象力，适当加入背景音乐不仅能提升听觉的愉悦度，更能够促进视觉上的情感体验，调动用户对信息的联想和感知力，给人以身临其境的感觉。如潮汐是一款大自然声音主题的身心健康应用，在用户选择一个场景后，APP会模拟场景的声音，图2中森林、雨声或是咖啡厅的环境声音，你就会联想到淅淅沥沥的雨丝、葱翠的森林等，自己仿佛处在这样的环境。這是听觉感受在通感的作用下产生心觉联想而带动的情感体验。在购物界面的设计上也可以利用背景音乐来营造购物环境的沉浸感，如一些卖文房四宝的电商就会在网店装修时添加古典、雅致的背景乐，从听觉上给顾客带来不一样的购物体验。

（二）音效设计

界面音效在设计时往往是基于用户行为来模拟现实情境，在用户与界面产生交互时，给予及时的音效反馈，这种反馈可以非常有效地让用户知道他们正确有效地完成了行为。如在购物界面的设计中，在用户添加商品到购物车的操作之后给以一个类似于打开收银机的音效，同时配合上文所提到的视觉动态效果，在通感的作用下，视觉与听觉相互置换、相互交融，能让用户迅速联想到真实购物的情境，给予用户良好的反馈体验。音效是一种强大的沟通工具，能够营造立体的感官氛围，合理运用不仅能有效提高用户对购物界面的满意度，更能在用户与界面交互过程中增强界面的感染力，激发用户交互的主动性和积极性。

四、线上购物界面中影响通感体验的触觉要素分析

在现实生活中，人对于一切事物会形成自己的触感经验，不同物理性质的产品在我们接触过程中通过材质、温度等给我们带来不同的心理感受。而在界面设计中，用户跟界面的触觉感受可以理解为两者之间的交互行为，设计时可以通过对用户交互行为的有效引导来引起用户的心理联想，从而使信息从交互操作过程中的触觉感受传递到其他感官知觉，营造立体的感官体验。购物界面中影响通感体验的触觉要素可以从用户作用于界面的交互行为和界面给予用户的触觉反馈两个方面来思考。

（一）用户作用于界面的交互行为

多点触控技术的发展给用户与界面的交互手势带来了更多的可能性，触屏手机常见的交互手势有单击、双击、长按、平移、速滑及反向滑动。在设计交互行为时不仅要考虑用户熟知的这些界面交互手势，更要符合用户的行为习惯。用户的习惯来自于现实世界的触感经验，将这种触感经验抽象提取应用在界面的操控上，能给用户带来熟悉的感觉，增强触觉通感体验。如我们在线上购物的时候都会有这样一个体验，经常会想要删除购物车或者收藏夹里的一些商品，比起点击选择商品再在界面角落点击删除按钮，我们更倾向直接在商品上左滑引出删除按钮再进行点击，如图3。这种与界面的交互形式实质上是模仿了用户日常行为习惯。在日常生活中，当写在本子上的信息有误或者不需要的时候，我们一般会划去，而在此设计中，正是以橫滑的手势去引导用户删去不想要的商品。用户在和界面交互的过程中能迅速关联到现实生活的使用记忆，产生情感上的互通，实现通感。

（二）界面给予用户的触觉反馈

积极的触觉反馈不仅给予用户正确的引导信息，帮助用户判断和决策，还能让用户联想到真实触摸的感受，增强体验。振动为触觉反馈的一种表现形式，能让用户通过触觉来感知产品的反馈及回应。在购物界面中，振动形式的触觉反馈往往用于消息提醒或者错误操作的提示。比如在线上购物时，当有客服信息送达或者是物流信息更新时，不仅视线中会出现消息浮窗，手中也会传来振动的触感;另外当我们选购完商品后，假如输入了错误的支付密码，界面也会给予振动的反馈提示。这种振动的触觉反馈就像是有人在你手中戳了两下，相比于单纯的视觉反馈来说，真实感更强，也更能起到提醒作用。

结语

随着线上购物应用不断涌现，购物界面也从最初的信息传递到提升用户情感体验的方向不断发展。通感这一新的设计思维为线上购物界面的设计提出了新思路，在购物界面的设计中引入通感的设计思维，以视觉为主，听、触觉为辅去介入设计，并利用用户的感官经验，将用户的想象联想和认知理解联系在一起，最终形成了立体的购物感官体验，增强了用户线上购物的趣味性和互动性。