感在网页设计教学中的应用

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