基于情感体验的HTML5广告设计研究

刘春雷 高研

关键词：情感体验;HTML5广告设计;互动;方法

1情感体验论述

情感是人类精神活动的重要组成部分，是人们评价客观事物是否满足自我需求和态度的一种心理反应。情感体验强调人的情绪与感受，每个人在接触相同事物的时候所引发地情感是不同的，这是受到个人的文化、经验和价值观念的影响，呈现出的个体差异性。情感来源于体验，同时体验引发情感，两者相互作用，在不同的环境下建立永恒的愉悦回忆。在体验经济信息化时代下，人们由物质层面的功能追求逐渐转向精神层面的情感追求，设计除了“好用”以外，还要通过设计背后的故事来激发用户反思，实现情感共鸣和建立精神寄托。因此，情感体验设计可以等同于“以人为本”的设计。从情感出发，发掘用户深层次的需求，帮助用户建立良好的自我形象和社会地位，是当代设计师的价值追求。

美国著名的心理学家和工业设计师唐纳德·诺曼专注于研究用户的情感体验。他在《情感化设计》著作中将情感体验进行层次性地划分，包括本能层、行为层以及反思层三种层次。本能层作为基础层，是情感处理的起点，再设计中通过注视、感受和声音等生理特征起主导作用;行为层次和使用有关，强调整个使用过程的体验，想要达到良好的行为层次，就要了解顾客是如何使用产品的，发掘用户的真正需求;反思层次作为情感体验的最高层次，它决定着一个人对某件产品的整体印象。反思层次的设计已经超越了外表，是自我意识的反思经验，表现为唤醒的记忆。

2 HTML5广告设计概念及表现形式

2.1 HTML5广告设计概念

HTML5广告设计简称H5广告设计（文中均用简称），它是一种高级网页技术;集文字、图片、音乐、视频、链接和丰富的控件、技术、动效等组成。最初H5广告是指利用HTML5技术实现的互联网广告设计，但随着媒体表现形式的丰富与转变，H5广告设计不仅是运用了HTML5技术实现的Web广告页面，还涵盖了因H5而涉及到H5相关技术的所有社交媒体的互动广告。H5广告设计以多媒体形式发布产品、活动或品牌信息，通过趣味性的互动体验让受众者参与其中，对品牌推广、产品宣传等具有重要作用。

2.2 HTML5广告设计表现形式

H5广告普及于各行各业，成为大众必不可少的信息源，针对不同的目标人群和应用目的，表现形式呈现多元化和分众化。通过大量的H5广告设计案例分析，从表现形式上可总结为以下几种类型：

2.2.1图文介绍

图文结合是H5广告设计中最为基础和常见的表现形式。“图”的运用和展现不仅仅局限于静态的图片，动画和视频的介入更容易引发视觉冲击。丰富多态的图片展示搭配相关文案说明就可清楚明了地传递广告内容。这一表现形式的H5广告设计通常通过点击、滑动等行为来进行页面切换，操作简单，实用性强。

2.2.2情境故事

情境故事作为“以情动人”的广告设计表现形式，通常在H5广告设计中建立场景或以某个故事为主线。用户在体验时被设计师带入设定好的情境中，变身为故事的“主人公”。在身临其境中引发情感共鸣，激发记忆触点，从而形成长久而深刻的回忆。设计师在制作情境故事形式的H5广告时，需要对目标人群进行深入地剖析，寻找用户关心和敏感的热点和话题，发觉共性痛点，用户体验的过程则成为了情感寄托的过程。

2.2.3互动游戏

互动游戏H5广告设计形式是大众乐于接受的表现形式。将H5广告变身成小游戏，通过设置关卡和测试来进行间关，游戏成功后获得相应的奖励，可以激发用户参与和互动的积极性，从而享受游戏的乐趣。这种广告表现形式通常深受销售商家的喜爱，游戏的介入使广告由硬式填压变为趣味渗透，用户的态度也由抗拒抵触转变为积极参与。互动游戏形式的H5广告设计将整个营销过程转变为游戏体验的过程，商家通常将相关产品的优惠券或代金券等作为游戏的奖励，无形中激发用户消费，实现利益的最大化。

3基于情感体验的HTML5广告设计方法

3.1本能层次的生动视觉设计

人们在进入全新的空间时，会通过自身的感官系统有效感知空间的色彩、材质以及整体的布局，这种通过感官获取印象是情感体验的第一步。人类的视、听、嗅、味、触觉感官在接触到新鲜事物时会通过形态、声音、气味等元素产生情感上的变化。在H5广告设计中，视觉元素对用户的体验质量影响最大，听觉和触觉作为次要元素配合视觉营造感知氛围，嗅觉和味觉也只能通过可视化形态的变化产生联觉和通感效应。

例如，由“IDO”婚戒H5广告设计：“十一，别喊朕回宫”，画面中严肃的古代人物形象进行了生动化地动态处理，加上丰富的场景切换，从杭州西湖到云南丽江再到海南，在视觉上带领用户体验了—把十一长假的游玩之乐。设计上采用黄橙色的复古风格，技术上运用Video视频来进动态化展示，并配以线下大热的说唱音乐，从本能层次上激发用户的感官体验（如图1）。

3.2行为层次的趣味互动设计

丰富且趣味性的操作能够引发联想，生动地引导用户解读品牌信息，激发受众者参与的热情。趣味性的手势操作将H5广告延伸为互动小游戏，操作设计必须要以受众的需求为中心。

例如，在内衣品牌“维多利亚的秘密”H5广告中，首页是一幅经过雾化处理的照片，通过手指摩擦屏幕就能清晰地看到穿着内衣的性感女郎。魅力、浪漫和纵容是此品牌的亮点，雾化处理手段散发着一种朦胧的吸引力，切合品牌的神秘性。用手擦除的行为使用户不免感到亲密和暖昧，这种行为层次下的趣味操作使“维多利亚秘密”的品牌理念在用户体验中形成不言而喻的故事。

3.3反思层次的带入情境设计

受众行为的反思层次受到个人意志、理解、思维模式的影响，在H5广告设计中，若要突出情感体验的反思层次，则需注重广告体验过程中对受众者长久记忆的引发。反思层次的建立不仅仅是所有功能的集合，真正的价值在于整体印象所满足的情感需求。因此，H5广告在进行情节和场景的设计时，要让用户进入情境中，形成自我心中的故事，故事性的设计体验可以加深受众的信任感和认同感。

由“腾讯新间”和“局部气候”制作的庆祝中华人民共和国建国70周年的国庆H5广告设计“一条长街看尽七十年岁月的故事”，在设计反思层次做得十分成功。整个广告采用长图设计，只需长按画面即可播放，没有过多复杂地交互操作。但广告的故事情节激发回忆，并让人回味无穷。故事内容是从建国开始到步入现代社会70年间每个时代的变化，色调由旧到新加上简单地动態演示，将每一次改革和发展的故事都演绎得淋漓尽致。广告的用户群体是所有的中国公民，建国初期的景象、唐山大地震、城市和网络的发展故事都能与用户产生情感共鸣。在整个体验过程中，每个年龄段的用户都能带入情景，在相应的画面找到情感寄托（如图2）。

4结语

从情感入手，挖掘H5广告设计的视觉要素，分析能够产生共鸣的故事情节，在用户心中留下长久的回忆是未来设计师共同努力的方向。随着移动互联网新技术的持续涌现和受众需求的不断提升，以情动人的H5广告设计从技术支持到体验效果上都会充满无限的可能。未来用户的行为习惯将会更加精准地被获取，受众者的体验导向也会被准确地定位，H5广告设计会更多元化和全面地服务于人类。