各位小伙伴们还记得朋友圈里不断刷屏的网易H5活动吗？作为一个互联网设计师，眼泪从嘴角流了出来，贪婪又羡慕！同样是九年义务教育，为什么别人的活动效果这么好？他们总是一做就炸，自己做就失败。那么一个优秀的H5包含哪些元素呢？有用、有趣、感人？下面分享一下这个踩了无数坑的H5案例的思路，希望能给大家带来启发，避免再次踩坑。大纲：活动概览主题构思视觉风格设计交互动态设计关于适配数据回顾总结活动概览|概述1.为什么要做H5活动本次活动由平安银行企业业务中心和B星球组织，IT企业进驻全新设计的IP形象灯泡小子和家人作为载体。该活动的目的是推广公司业务的中台产品。由wowdesign团队设计的IT企业站IP-灯泡小子及其家族品牌形象，结合灯泡小子的闪签活动，线上线下联动，推动中台企业业务。主题概念|H5主题1。H5型什么样的活动主题才能引起用户的关注？什么样的内容才能引起用户的共鸣？让他们自愿转发，愿意用这个虚拟活动向朋友圈表达自我。因此，活动方向的选择尤为重要。我们对市场上现有的H5活动进行分类，分析他们抓住了用户的痛点，并从中获取方向。测试类：满足用户低成本、有趣地了解自己的需求。热点新闻类：以热点话题和事件为素材，具有时效性高的特点，注重与用户的距离、参与感、真实感。互动游戏：互动性强，特点多为好玩、易上手、欢乐、有成就感。公益类：以环境保护、濒危动物保护、关爱老人等社会热点问题为主题，从社会热点问题出发，突出社会责任感，给予人们深刻的教育和关怀。警惕作用。软故事：以独立的经历和故事为导向，多为广为人知的生活、工作、人际关系的尴尬故事，并在侧面达到一定的营销目的。2、影响用户参与和转发的因素有哪些用户的参与和转发裂变数据是衡量一个活动成功与否的标准。那么，从用户心理来看，影响因素有：自恋炫耀心理、移情心理、良好的视觉效果。3、在当前热点疫情和用户心理状态下，大家的心理和经济都受到了很大的影响，焦虑和失望情绪高涨，希望表达一下自己的情绪。4.综合分析结论结合用户在疫情下的心理状态，疫情对其生活、工作、经济的影响。通过刷屏因子中的“共鸣”，结合耳熟能详的网络流行语作为标签关键词，精准贴合用户表达自我、分享现状的需求。选择测试型玩法，让用户测试挑选自己2020年的生活状态，了解自己，分享现状。因此，希望用户选择关键词并测试生成一份2020年生活状态报告，直击用户内心，引起共鸣，让用户参与转发本次活动。并选定了主题《pick你的2020戳心话》UI风格设计|H5STYLE通过以往网易等平台的H5案例分析，其设计风格多为孟菲斯风格、蒸汽波故障风格、插画风格等相对年轻、活泼、表现力强的风格。结合我们IP形象的线描风格和主题，最终确定了孟菲斯风格的设计风格。这种风格可以表达多种个性化的文化内涵，从天真滑稽到怪诞离奇。在色彩上，采用了一些活泼、搞笑、饱和度高的亮色调，给用户强烈的感官刺激和丰富的情感，与本次活动的各种演讲场景相契合。△设计展示交互动态效果设计|动态效果对于H5来说，简单的交互操作无需思考是基本要求，炫酷好玩的交互动态效果是必不可少的加分项，我们拆解交互动态效果分为三个方面：1.操作引导动画效果：h5主题后首页上有明确的说明，首先是引导用户进入下一个标签页选择页面，所以按钮一定要在最舒服的点击位置，并且有最强的操作提示，所以按钮呼吸缩放动画提示很好选择。2、交互过渡效果：界面过渡元素的连续性和界面元素的进出动画，可以让界面更加流畅连贯，操作体验更好。3、标签选择页面标签翻转动画：标签选择页面是整个产品的核心交互部分。除了满足易用性的基本操作交互需求外，还需要加入一定的操作乐趣，给用户带来惊喜的交互。交互效果，比如标签3d景深旋转和翻转操作方式，点击选择有趣的动态反馈。关于适应|适应1。屏幕适配为了适配16:9及更长的全面屏手机，页面必须拆分为主层、元素层、背景层。主层和元素层需要定位到各个元素对应的位置关系。例如通过裁剪图片将主层调整到屏幕中心，然后确定元素层与顶部和底部的距离。注意这里的数据需要从短屏（16:9，即iphone6）适配到高屏，在短屏的基础上，避免适配后出现元素重叠的问题。背景层的背景图片根据屏幕尺寸进行缩放裁剪??以填满屏幕。因此背景层一般设计成比较简单的图片，避免裁剪缩放时视觉差异过大。2、结果页的可伸缩适配在选择标签类别的H5活动中，结果页需要展示用户选择的标签，但用户选择的标签个数是不确定的，涉及到长度适配结果页面。因此，标签显示部分的背景颜色需要为纯色或二方连续图，且两方连续图的高度必须与单行标签的高度保持一致。为保证每增加一行标签，都添加相应高度的两方连续背景图，保证背景页面高度始终适配相应数量标签所需的高度。审查摘要|数据摘要1。浏览量（PV）和用户数（UV）用于检测活动的效果。在活动的每个时段，通过数据平台拉取浏览量（PV）和用户数（UV），帮助我们判断活动的传播裂变效果，并分析其影响因素：曝光量、频道质量、标题内容的吸引力，不断优化影响因素，确保在计划时间内达到预期的活动效果。2.漏斗数据通过漏斗数据分析用户流失可以进一步分析流失原因：页面操作指南是否清晰，页面内容是否吸引人，页面易用性，帮助我们优化操作指南，内容设计优化和可用性审查。3、本次H5活动可以提升Ui风格，应该更适合主题表达：首先，作为活动主题在疫情下戳心，没有在视觉上传达戳心的氛围和疫情，导致活动的代入感不够，用户对活动主题的认知不够清晰，更多的是对灯泡小子IP风格的延续。在风格选择上：本次h5设计以新生的IP形象灯泡小子为主要视觉kv，IP形象的原始表现形式为线描风格，未拓展其他表现形式。在这种情况下，白描选择孟菲斯风格是必然的选择。因此，在IP形象有了成熟丰富的风格之后，整个活动的风格也可以有更多的可能性去尝试，找到活动主题的最佳视觉表达形式。动效需要重大突破随着手机性能的提升，炫酷新颖的h5动效是提升用户体验、抓住用户猎奇心理和注意力的好方法。但这需要大量的开发资源投入，以及从设计端对动效的设计和研究。天猫、网易近期的H5动画大量使用了3D视觉效果和3D景深操作，对H5的创新体验有很大帮助。本次活动在动画方面还有很大的研究空间。运营文案更要抢眼在这个信息爆炸的时代，如果没有一个抢眼的标题，注定在海量的信息中沉寂。为此，我们在上线后做了很多用户调研。标题基于业务推广导向、实时热点导向等多方位尝试，结合新闻中常用的3段式标题结构。并进行了AB测试和用户研究。其中，标题最好反馈到实时热点方向，业务导向方向对c端用户没有吸引力。因此，在后续的出圈b端产品设计中，在没有特殊要求的情况下，尽量将标题和内容设计成面向用户关心的热点和好奇点。总结在设计一个活动之前，需要明确设计背景，确定相应的设计主题和方向，什么样的活动主题才能吸引用户参与。孟菲斯风、蒸汽波故障风、插画风都是H5不错的选择。孟菲斯风格最容易产生视觉效果，但都需要贴合主题，有助于渲染活动主题的氛围。在保证用户体验的基础上，H5活动可以加入好玩有趣的互动动画效果是加分项。由于市面上的手机尺寸不一，必须要考虑适配问题。上线后的数据回顾总结，可以帮助我们发现问题，把接下来的活动做的更好。一个吸引人的标题可以让你成功一半。
