基于用户体验的H5互动广告设计研究

张欣雨

摘要：目的：新媒体时代，广告的设计形式发生了很多变化，H5互动广告便是其中之一，该广告形式体量小、易传播，有很高的应用价值，且产品服务于人，一个好的产品必须具备良好的用户体验，文章探究什么是好的用户体验、用户体验在H5互动广告中的应用价值以及H5互动广告发展面临的挑战与机遇，为未来新媒体H5互动广告发展提供参考。方法：文章首先归纳概括用户体验和H5互动广告的概念；其次，结合市场上现有的H5互动广告设计案例分析探讨H5需要的全方位用户体验，包括视听体验、交互体验、情感体验，在此过程中，关键要精准定位目标用户，以便有针对性地进行广告推广，充分发挥广告价值；再次，分析研究用户体验在H5互动广告里的应用价值，包括满足个人情感价值、提供企业商业价值、传播社会责任价值；最后，探讨未来H5互动广告的发展趋势。结果：一个H5广告要想获得成功，受众是其“内核”，广告制作方只有抓住受众的兴趣偏好，才能制作出符合用户体验需求的互动广告。结论：H5互动广告若只是简单堆砌图片、文字、背景音乐等，用户在浏览过程中难免会觉得枯燥、无趣，只能起到简单的信息传播作用，用户无法深入了解广告的内涵及其想要传达的信息，这就要求在设计H5互动广告时充分考虑用户体验。

关键词：新媒体；用户体验；H5互动广告；广告设计

中图分类号：F713.8；F274 文献标识码：A 文章编号：1004-9436（2023）21-0-03

0 引言

新媒体时代，各种移动端产品应运而生，H5互动广告作为一种移动端产品，凭借自身的传播优势在新媒体广告行业中占有一席之地。在生活中不难发现H5互动广告的身影，如邀请函、招聘信息、APP年末总结等，这些都是广告商向用户推广和传递自身品牌活动、内涵、价值观的途径，广告商在传播品牌的过程中，还会引导用户传播，以达到宣传产品的目的。此外，H5互动广告的制作不能仅围绕产品或期望传递内容本身，还需要着重考虑用户体验，即让受众更好地查看、互动和传播，从而实现广告价值最大化。

1 用户体验概念

用户体验，顾名思义就是用户对某一产品的使用体验，包含用户体验过程中的所有想法、感知和交互行为，良好的用户体验是产品体验中每个细节的集合，能让用户从中获得有用信息。“用户体验”一词由用户体验设计师唐纳德·诺曼提出并推广，在20世纪90年代中期被广泛认知。用户体验在产品设计中极其重要，产品要服务于人，高质量的产品设计必须能让用户获得良好的使用体验。

2 移动端H5互动广告概念

H5由HTML5简化而来。广义上的H5指HTML5，即第五代超文本标记语言，通常在网页中使用HTML代码。狭义上的H5指移动端上的具有多种互动形式的数字交互产品。H5广告有成本低、传播广、互动性强等优点，同时也存在一定的缺点，如时效性差、传播渠道受限等，用户往往只打开一次，这就需要H5互动广告能够快速引起用户注意。H5互动广告主要有以下几个类别：展示类、全景/VR类、视频类、动画类、数据应用类、游戏类等。随着视觉创意表现和互联网技术水平的提高，H5互动广告的形式和类别会越来越丰富。

3 H5互动广告设计的全方位用户体验

用户体验的核心是用户需求［1］，在H5广告策划制作前期，要准确定位广告受众，即目标用户，然后针对目标用户进行视听语言设计、交互体验设计、情感体验设计，全方位考虑用户体验。

3.1 用户的视听体验

好的H5互动广告能让人获得良好的视听体验，视听要素包括图片、文字、动画、视频、音效、动效等。H5页面的视觉呈现需要符合移动端页面设计原则，减少用户的认知负荷，图片和文字的排布要清晰和易识别，便于用户读取可用信息［2］。文字主要包括广告文案、操作提示、操作反馈等，广告文案要让用户清晰地了解产品的“重点”，如展现产品的鲜明特点，策划具有创意的广告文案，通过文字操作提示和操作反馈引导用户进行下一步操作，需要围绕整个H5广告的设计风格进行文字样式和排版设计［3］。动画包括加载动画、动效元素、动画片段等内容，趣味性强的加载动画可以避免用户在等待过程中感到枯燥，页面元素动效起到引导和强调作用，引导用户查看主要信息，强调产品卖点。视频的呈现方式不同，带给受众的感受也不同，有的以展示为主，有的则以竖版视频让观众以第一人称视角获取相应信息，提升作品内容呈现的真实感。如腾讯公益H5《跟着阿猫去流浪》，以猫咪的视角完成拍摄，让用户沉浸式了解流浪猫在外觅食的不易，呼吁大家对流浪猫伸出援手。音乐和音效贯穿用户体验产品的整个流程，选择的背景音乐要契合产品调性，有趣的音效可以加深用户对产品的印象。视听设计往往是H5互动广告的“门面”，视听设计需要结合产品特点进行创意设计，这样才能在激烈的市场竞争中脱颖而出，给用户留下深刻的印象。

3.2 用户的交互体验

用户体验设计是以人为本的设计，在设计H5广告的过程中，交互体验设计至关重要。首先，由于H5广告的体量和能传达给用户的信息量小，因此H5广告设计的交互方式要多考虑用户的操作习惯，做到简洁明了，否则用户将没有耐心去浏览和操作。在用户翻阅查看H5互动广告时，要适当插入交互提示，即操作反馈。恰到好处的操作反馈能丰富用户的产品使用体验，给用户带来惊喜。例如，操作完成后屏幕中间弹出小字，页面发生变化，或以特定音效和动效提示用户，为用户查看操作提供便利。

其次，H5廣告设计中常用的交互方式有点击、长按、滑动。点击这种交互方式得到了广泛应用，要让简单的交互方式变得生动有趣，还需要结合H5本身想传递的内容；长按这种交互方式要求H5有较强的故事性与情节性，能给用户带来较好的视觉体验；滑动这种交互方式常用来翻页，往不同方向滑动往往有不同的交互效果，普通的交互方式结合广告中的创意性内容，会焕发生机，让用户眼前一亮。在H5《是谁在弹古琴》中，左右滑动时会出现人在水上行走的画面，上下滑动时可以寻找线索，任意滑动可以拨开画卷。结合画面与音效，营造飘逸悠扬的氛围，让用户感受到高山流水和琴音结合的独特意境。

最后，应将新的科技手段运用到H5广告中，如VR、AR、AI绘画，在H5《AI画笔连接爱》中，通过AI技术，分隔两岸的《富春山居图》山水合璧，用户只需在手机上操作即可实现山水相连，体会到山水画的古韵。良好的交互设计能让H5互动广告的视听体验锦上添花，在增强广告可读性的基础上，让互动方式更加新颖、有趣。

3.3 用戶的情感体验

H5互动广告感染力的强弱的判断标准在于，能否给用户带来美好与独特的情感体验，即用户能否与品牌或宣传的内容产生情感共鸣，获得独特的心得体会，或者受到积极影响［4］。唐纳德·诺曼在《情感化设计》一书中提到，人类情感系统包括本能层、行为层、反思层三个层次［5］。

本能层即用户对产品的直观感受，如颜色和形式等视觉内容。在受众见到H5广告的第一眼，产品的颜色基调就可能影响用户的情感体验。在这一层次，H5广告制作者应关注用户对产品的初印象，创建充满新意或与总体宣传基调相吻合的H5广告，避免用户流失，增强用户黏性。

行为层即用户和产品之间的交互关系，如用户怎样触发开始浏览H5、浏览形式、交互方式；整个交互和流程是否符合逻辑，不合理之处可能影响用户整体使用感受，如卡顿、交互手势复杂、反馈不及时等。在这个层次，H5互动广告的设计者应注重用户使用产品的逻辑，保证用户顺畅使用产品。

反思层即用户在了解产品后的思考与共鸣，在这一层次，好的H5广告能给用户留下“独家记忆”，如公益救助类、弘扬传统文化类、科普类广告，会在用户心中埋下一颗种子，引发用户思考。H5的情感体验主要来自其自身的立意，有了好的立意，才能融入视听和交互元素，形成完整的H5互动广告产品。视听体验和交互体验最终都会影响用户的情感体验。

4 H5互动广告用户体验的应用价值

4.1 个人情感价值

良好的用户体验可以提高品牌价值和用户忠诚度。年末各大APP多以H5互动广告的形式让用户查看年度报告，虽然设计风格和交互形式各不相同，但都是围绕用户进行年度总结。将用户使用APP的轨迹数字化和可视化，给用户贴上一些有趣的标签，让用户感受到自身的独特性。报告内容截图会被用户分享至社交平台，这不仅为用户提供了展示自己的机会，也扩大了品牌传播范围。有的品牌在制作H5互动广告时会针对特定用户进行宣传，唤起他们的特殊情感。例如，腾讯联合QQ浏览器和上美影厂推出H5互动广告《百年梦想家》，对标“80后”和“90后”用户，他们既是上美影厂动画片的忠实观众，又是QQ浏览器的主要用户。上美影厂挑出的25个动画，唤醒了这些用户对儿时所看动画片的回忆，在H5交互长卷模式下，用户能够体验和感受不同动画片的魅力和它们背后的故事；其中还融入了QQ浏览器的数字搜索功能，在满足用户情感需求的同时，加深用户对品牌的印象。在制作这一类互动广告时，需要更多地关注广告内容对个体的影响，让个体也能获得创意性表达，这样才能更好地满足用户的情感体验。

4.2 企业商业价值

具有良好用户体验的H5互动广告，能给企业和品牌提供更多的商业价值，让用户了解企业活动信息或品牌宣传理念，引导用户去发现它、探索它，从而了解它。在2022年《天猫双十一狂欢城》H5广告中，狂欢城由5个模块组成，每个部分都实现了信息的高效展示，用户能清晰地了解天猫“双十一”的活动日期和功能信息，交互方式简单又不失趣味性，整体建模动画清晰流畅，有很强的科技感，让用户耳目一新。“双十一”的活动比较多，用户难以在短时间内厘清所有信息，这个H5广告在带给用户良好体验的同时，也为活动增益良多。H5互动广告设计可以结合流量作品，如天眼查和电视剧《甄嬛传》联合推出的《终究是错付了》，将现代商业社会中人与人之间的关系与剧中人物关系对应，让人们直观地了解天眼查的核心作用。在思考什么样的互动广告能带来更大的商业价值时，需要清楚用户到底想要关注什么、想获取什么信息，或者借势已获得人们大量关注的内容去设计H5互动广告，获得关注度和讨论度。

4.3 社会责任价值

具备良好用户体验的H5互动广告，可以发挥社会责任价值。H5互动广告体量小、易传播，如果能在短时间内引起用户关注，使大量用户转发分享，就能发挥较为显著的社会责任价值，引起大众对社会问题和现象的思考。2022年6月11日是“文化和自然遗产日”，多家企事业单位联合推出了H5《甲骨书信》。该广告虽然互动方式比较简单，但趣味性很强，H5通过9道猜字题带领用户了解甲骨文的含义，感受甲骨文的魅力。答题结束后，用户还可以领取一个还未破解的甲骨文自行研究，吸引用户参与关于甲骨文的思考和讨论。这有利于弘扬传统文化，增强文化自信。一些H5能让用户获得沉浸式体验，传播正确的价值观。例如亿众互动推出的H5《凶手》，通过长按的交互方式带用户走进一段情节，女孩因网络暴力“逃生”失败，且通过画面和音乐渲染了比较恐怖的氛围，让人不寒而栗，最后H5发出“拒绝网络暴力，共建网络文明”的呼吁。在设计制作H5互动广告时，应该多关注问题和现象本身，深入思考受众喜欢哪些设计方式和互动方式，以提高H5互动广告的关注度，更好地承担社会责任，引导受众树立正确的价值观。

5 结语

随着互联网技术的高速发展和相应技术手段的迭代升级，H5未来拥有广阔的发展前景，后续可以将更新颖、更有趣的技术融入H5互动广告设计过程。归根结底，H5的设计要以人为本，考虑用户体验，这样才能实现广告制作方和用户的双赢。在大数据时代，海量的网络信息真假难辨，这就要求H5制作方考虑信息安全问题。很多H5广告需要用户授权信息，部分H5广告还需要用户上传照片进行换脸，制作方要提供技术保障，避免在用户浏览H5的过程中跳出不明链接，导致用户上当受骗。当下，互联网广告商推出的H5互动广告质量参差不齐，广告制作方还需要考虑这些问题：用户为什么要打开这个H5？他们能从中得到什么？只有广告制作方把用户放在首位，制作出新颖、有趣、审美价值高且能够传递正能量的广告，才能把用户转化为推广者，让他们自发转发宣传，从而扩大品牌影响力，达到良好的宣传效果。

参考文献：

［1］ 卢克·米勒.用户体验方法论［M］.北京：中信出版社，2016：3.

［2］ 董建民.人机交互［M］.北京：清华大学出版社，2021：219.

［3］ 邓嘉琳. H5页面创意设计［M］.北京：人民邮电出版社，2021：76.

［4］ 网易传媒设计中心. H5匠人手册［M］.北京：清华大学出版社，2018：126.

［5］ 唐纳德·诺曼.情感化设计［M］.北京：电子工业出版社，2005：5-6.