摘要：在网页设计教学活动中，善用通感，可以充分激发创作主体的热情，使之进入创作状态。在具体创作环节中，通感特别体现在视觉、听觉、动画元素的使用中，合理的运用通感设计可以调动浏览者的感官，使浏览者能够迅速理解网页的设计诉求，在情感上与设计产品建立共鸣。
关键词：通感；网页设计
中图分类号：TP37文献标识码：A文章编号：1009-3044(2015)29-0138-02
作者简介：周金霞（1977—），女，山东济宁人，硕士，助教，研究方向为数字媒体艺术
1通感概念及应用状况
通感意即感官间的迁移。在心理学领域被解释为针对一种感官的刺激能同时引发另一种感官的反应。艺术研究领域中，通感也有着丰富的研究成果，陈育德先生在其《灵心妙悟-艺术通感论》中曾提出，在各类艺术作品中通感有着不同类型的表现，它能够使得创作者、欣赏者突破单一的感觉局限，丰富人们的审美体验。通感的本质是一种艺术心理机制，是营造意象、形象、意境的艺术表现方式。1目前，在文学、产品设计、视觉传达设计、平面设计等诸多领域，通感现象的应用都受到重视。设计过程中，通过对设计（或创作）对象的表象与意象充分的分析，适当地运用通感方式引导创作，使作品呈现出格外的魅力。
2网页设计与“体验”需求
生活在数字化时代，人们可以越来越便利、高效的获取信息。随之而来，人似乎只剩下面对冰冷的屏幕、键盘敲击、注视这样的简单行为。近些年，设计行业开始逐渐注重在设计活动中强调叙事和体验。满足用户不断提高的体验需要，重视人的情感需求已经成为当下设计活动中的重要趋势。“网页设计是近二十年以来意义深远的新兴设计领域形式”。2区别于传统的平面设计等门类，一般而言，在网页当中可以承载的媒体形式集“音”、“文字”、“图像”、“视频”于一身。可见就其本身的特殊形式而言，在设计创意过程中，合理使用视觉、听觉等素材，以通感思维的角度大胆创意，是具有天然优势的。通过合理创作可以调动浏览者的感官，使浏览者沉浸于网页的意境，网页设计的诉求能够被感知，进而满足数字化生活中人们对“体验”的需求。
3通感对创作主体的影响
在设计中，创造性思维的锻炼必不可少，在创意思维的锻炼中丰富的联想与想象又是不可或缺的。网页设计教学之初，面对有基本设计表现能力的教学对象，将通感作为一种创意思维方式，启迪学生的创意设计，往往能够事半功倍的激发创作主体的创作兴趣。例如在网页设计课堂教学活动中，为某传统品牌重新设计网站界面，引导学生不仅仅从视觉角度切入，而是先尝试对品牌有所认知，之后自主选择感兴趣的品牌，尝试进行再创意设计。学生在创意陈述时，一般都能择取与成长、记忆有所关联的品牌。
4通感与网页创意设计
激发创作兴趣仅仅是网页设计教学中的第一步，在教学环节中，结合网页设计的多媒体特性，教学对象需要掌握通感中各个要素的特点，尤其是能够运用“视觉”、“听觉”，结合网页设计的多媒体特性和互动特征，步步为营，精心设计，打造一部能够“唤醒”人的感受的多媒体网页作品。
4.1视觉与触觉
触觉从心理学角度而言，是一种主观类型，主要依赖于个体的生活体验、阅历等。在设计中如果能做到以视觉感知、调动触觉活动，进而使得人们产生一触即发、一探究竟的愿望，这将是视觉与触觉通感带来的最佳效果。在网页界面之中，图形图像需要完成的任务不仅仅是展现“美”，还必须兼具引导用户使用的实用功能。因而尝试利用视触通感是视觉创意中优选的策略。4.1.1材质肌理在一般的视觉设计中，视触通感最常见的表现形式是肌理特性的视觉呈现引发出关于触觉的联想。手工爱好者网站MADEINMAD3，在界面中呈现出生动的工具，诸如“纽扣”“卷尺”“剪刀”等数字形象，仿佛触手可及。典型的视觉典型迅速构建了一个手工爱好者的精神家园。毫无疑问，这样的界面会帮助到访的目标用户第一时间建立起友好、熟悉的感受。网站上方的主导航利用了纽扣的圆形结合布料质感给出自然而然的主导航提示，用户自然而然的产生试图抚触以获得更多信息的行文，网站用户可以轻松自如的依据导航找到自己所需要的相关信息。
4.1.2行为认知的交互表现
在视觉范畴下的视触通感不仅仅涵盖肌理、触摸特征的视觉表现，还体现在行为认知的交互行为中。一般认为，行为习惯是人们长期习得的行为方式。对于用户而言，将日常生活的点点滴滴逐渐转移到各种设备的屏幕上已成为常态。移动互联网拟物化的界面设计，针对到有着较多移动设备使用经验的用户来说为避免累赘，有可能在视觉表现上另辟蹊径。大受好评的日程管理应用ANY.DO4图形界面极为简洁。在界面中不难发现它实质上是采用了用户日常行为习惯的模仿设计，当我们把写在本子上的行程完成时，我们一般会划去，而在此设计中，正是采用了此种方式。用户在使用数字产品时迅速关联到现实生活的使用记忆，即可心领神会，迅速实现了情感上的互通。
4.2听觉与视觉
网站设计中，可以有效地借助声音配合画面进行设计，进而传递品牌形象、营造与表现主体一致的故事氛围。
4.2.1声效设计
在喜力啤酒5配合世界杯设计的产品网站中，当鼠标移到已满18岁可以进入页面按钮，按钮触发音效为体育场上的口号声和呼喊声，积极地调动了受众的视觉、听觉。同样，当进入不同类型产品展示页面中，点击不同类型的啤酒时，网页通过一只手在冰桶中拿酒的形象来进行展示，同时伴以啤酒瓶与冰块撞击摩擦的强劲音效。顷刻之间，喜力啤酒的冰爽、清凉，通过视觉与听觉的合力，迅速引发了浏览者的味觉甚至触觉的联想。使浏览者感受到喜力啤酒这健康向上、积极热情的品牌形象。这里，听觉要素的运用无疑为品牌塑造贡献了重要的一笔。网站借助与主体一致的音效设计，使得网页所展示的信息量增大，不仅仅使浏览者看到视觉形态，还能够营造立体氛围，增强了品牌传递过程的感染力。
4.2.2背景声音
背景声音是迅速的构造故事化情境的有效方式。声音促发人的想象力，激发人的联想，鉴赏者在感知的基础上，通过联想或想象，如临其境被作品吸引，从而形成正面积极的体验。例如同里的南园茶社网站6。南园茶社坐落于同里的“南市晓烟”景致之中。该茶社始建于清末，素有“江南第一茶楼”的美誉。在此网站的设计中将中国南方古镇建筑及装饰的种种细节融汇在网站设计中，将手工编织的吊篮、古旧的留声机、油灯、木茶壶和酒葫芦等视觉符号，同抑扬顿挫，轻清柔缓的苏州评弹结合起来，营造出浓浓的江南水乡气息。
4.3动态交互与通感
相对于平面设计、产品设计而言，动画元素是网页设计可用的特殊的表达方式。使用得当的话，往往可以增强用户对界面反馈的认知，在轻松愉悦的过程中完成交互。
4.3.1交互动态效果
天猫网站7关于购物车的动效设计中，模拟了人们在超市购物时取放物品至购物车的行为。点击加入购物车图标后，商品图标以抛物线形态飞出，落在界面中的瞬间，购物车所在的提示页面友好呈现。该动效能够在触发视觉注意的同时引起使用者的心觉联想，把现实生活经验与网络购物行为迅速关联，产生情感上的互通，以达到通感效果。促进了信息的高效传递。
4.3.2交互环节动画设置
网络多媒体环境中对交互流程进行充分的预见，以有趣的界面引导用户克服操作过程中的障碍。对有可能出现的页面加载延迟、网速卡顿等不利情况，使用合适的趣味化设计，取得用户的理解。例如，在用户的网速影响界面的使用速度时，卡通形象的等待画面会呈现出来，伴随之一句调侃般的“网速不给力啊”，会让使用者感受到这个产品的人情味。在学生创作项目中，要求创作者充分预见网络交互流程中的各个环节，根据项目特色，设计动态界面。使浏览者即使在网络不佳的等待中也设计作品的个性感染，如图学生作品为采用html5视差滚动技术制作的科普类型网站《航天梦想》，创作者以年轻的学生群体作为目标受众，意图通过交互网站普及航天知识。网站通过轻松趣味的扁平化图形界面，多层空间动画形式，以界面中小火箭在太空穿行的方式，讲述了航天史上的重大事件。设计图形活泼有趣，兼顾网络带宽限制，在网速出现卡顿时，加载动画页面出现，微微扭动的秒针图形，具象化的告知网站后台的努力动作，使浏览者即使在这样的网络延迟的等待中为创作者的幽默感染，有效地实现了情感沟通。综上所述，正在被数字化包围的现代生活中，人们需要有情感的设计。网络正在成为日常生活的组成部分，如何使学习中的设计者关注网页设计的特性，设计出优秀的符合人群需求的网络作品，是网络设计教学中关注的要点。以“通感”作为切入点，可以使创作者感知项目的人情味，激发创作欲望；在创作流程中，必须依据网页设计的特性，熟练的运用设计语言，激活浏览者的“通感”，以实现对用户情感的关照同时在交互界面中顺利引导用户使用网页所提供的功能。
参考文献：
[1]陈育德.灵心妙悟——艺术通感论[M].安徽教育出版,2005.
[2]麦克唐纳.什么是网页设计[M].译者:戴刚，译.中国青年出版社,2006：6.
[3]http://www.madeinmad.it/index.html.
[4]https://web.any.do/.
[5]喜力啤酒网站:http://www.heineken.com.tw/welcome.aspx?send=http%3a%2f%2fwww.heineken.com.tw%2f.
[6]南苑茶社网站:http://www.tongli.net/china/nanyuanchashe/.
[7]https://www.tmall.com.
[8]李砚祖.设计理论的文史哲[J].设计艺术.
[9](美)鲁·阿恩海姆.艺术与视知觉[M].北京:中国社会科学院出版社,1984.
作者：周金霞 单位：中国传媒大学南广学院
