文章目录[隐藏]

一.活动概述:概述二。主题构思:H5主题H5选型影响用户参与和转发的因素有哪些？当前热点和用户心理状态综合分析结论三。UI风格设计:H5风格四。互动设计:动态效果操作指南动态效果互动过渡动态效果标签选择页面上标签翻转的动态效果动词 （verb的缩写）适应:适应屏幕改编结果页面可扩展性调整六。恢复摘要:数据摘要浏览量(PV)，用户数(UV)漏斗数据这个H5活动可以推广。摘要

导语:亲爱的朋友们，你们还记得在朋友圈不停刷屏的网易H5活动吗？作为一个互联网设计师，失望的眼泪从嘴角流了出来，又馋又羡慕！同样是九年义务教育，为什么人的活动效果那么好？别人做了就爆，自己做了就没用了。一个优秀的H5包含哪些元素？通过分享以下踩过无数坑的H5案例的思路，希望能启发大家，避免再次踩坑。

大纲:

活动概述主题构思视觉风格设计交互动效设计关于适配数据复盘总结

一.活动概述:概述

H5为什么要活动？

本次活动由平安银行公司业务中心和星球B联合举办，以全新设计的IP形象灯泡和家庭成员为载体。

该活动旨在公司业务中推广产品。wowdesign团队设计的IT认证IP- light bulb及其家族品牌形象，结合灯泡的快闪打卡活动，线上线下联合运作，促进了企业在台湾的业务。

二。主题构思:H5主题H5选型

什么样的活动主题才能引起用户的关注？什么样的内容才能引起用户的共鸣？

让它自愿转发，也愿意用这个虚拟的活动向朋友们展示如何表达自己。因此，活动方向的选择尤为重要。我们对市场上现有的H5活动进行分类，分析它们抓住了用户的哪些痛点，并从中得到方向。

1)测试类别

满足了用户低成本、有趣的自我理解需求。

2)新闻热点

以热点话题和事件为素材，特点是时效性高、注重与用户的距离、参与感和真实感。

3)互动游戏

具有很强的互动性，特点多是趣味性，简单易用，有愉悦感和成就感。

4)公益类

以社会热点问题为主题，如环境保护、濒危动物保护、关爱老人等。，从社会焦点问题出发，表现了社会责任感，给人以深刻的教育警醒。

5)软文故事。

以独立的经历和故事为导向，多为大家熟知的生活、工作、感情的轶事，在侧面达到某种营销目的。

影响用户参与和转发的因素有哪些？

用户的参与度和转发裂变数据是一个活动成功与否的衡量标准。那么从用户心理的角度来看，影响因素有:自恋、炫耀、共鸣、视觉效果好。

当前热点和用户心理状态

疫情之下，大家的心理和经济都受到了很大的影响，焦虑和失望情绪高涨，希望表达自己的情绪。

综合分析结论

结合疫情下用户心理状态，疫情对他们生活、工作、经济的影响。通过刷屏因素中的”共鸣“，再结合熟悉的网络流行语作为标签关键词，精准的贴合了用户表达自我、分享自我现状的诉求。选用测试类玩法，让用户去测试pick自己的2020生活状态，了解自我，分享现状。

所以希望用户通过关键词选择和测试，生成2020生活状态报告，击中用户的内心，产生共鸣，从而参与转发这个活动。并选择主题“挑你2020戳心谈”

三。UI风格设计:H5风格

通过网易等平台过往的H5案例分析，设计风格多为孟菲斯风格、汽波断层风格、插画风格等年轻化、活泼化、富有表现力的风格。结合我们IP形象的线描风格和主题，最终敲定了孟菲斯风格的设计风格。

这种风格可以表达各种个性化的文化内涵，从天真滑稽到怪诞离奇。色彩上运用了一些明亮、搞笑、高饱和度的色彩，给用户强烈的感官刺激和丰富的情感，契合了本次活动的各种话语场景。

设计:

四。互动设计:动态效果

对于H5来说，简单的无思考交互是基本要求，酷炫好玩的交互是必不可少的加分项。我们将交互分为三个方面:

操作指南动态效果

主页的h5主题讲解清楚之后，第一件事就是引导用户进入下一个选项卡选择页面，所以按钮一定要在最舒适的点击位置，有最强的操作提示，所以按钮呼吸缩放动画提示是个不错的选择。

互动过渡动态效果

界面过渡元素的连续性和界面元素的动画化可以使界面更加流畅连贯，操作体验更好。

标签选择页面上标签翻转的动态效果

选择标签页是整个产品最核心的交互部分。为了满足易用性的基本操作交互需求，还需要增加一定的操作趣味性，给用户带来惊喜的交互效果，比如标签页的3d景深旋转翻转操作方式，点击选择有趣的动态反馈。

动词 （verb的缩写）适应:适应屏幕改编

为了适应16:9和更长的全面屏手机，页面必须拆解成主层、元素层和背景层。

1)主体层和元素层

需要定位各个元素的对应位置关系，比如通过裁剪图片将主层调整到图片的中心，然后确定元素层与上下的距离。

注意这里的数据要从低屏(16:9，也就是iphone6)适配到高屏，以低屏为基础，避免适配后元素重叠的问题。

2)背景层

背景根据屏幕大小进行缩放、裁剪和调整以填充屏幕。所以背景层一般设计成比较简单的图片，避免裁剪和缩放时出现较大的视觉差异。

结果页面可扩展性调整

在选择标签类别的H5活动中，结果页面需要显示用户选择的标签，但是用户选择的标签数量是不确定的，这就涉及到结果页面长度的适配。

因此，标签显示部分的背景颜色需要为纯色或双面连续图形，双面连续图形的高度需要与单个标签的高度一致，以保证每增加一个标签，就会增加相应高度的双面连续背景图形，背景页面的高度始终适应相应数量标签所需的高度。

六。恢复摘要:数据摘要浏览量(PV)，用户数(UV)

为了测试活动的效果，从数据平台中选取了活动各期的访客数(PV)和用户数(UV)来帮助我们判断活动的裂变效果，并分析其影响因素:曝光数、频道质量和标题内容的吸引力。通过不断优化影响因素，在计划时间内达到预期的活动效果。

漏斗数据

通过用户流失的漏斗数据分析，可以进一步分析流失的原因:页面操作引导是否清晰、页面内容是否吸引人、页面可用性，帮助我们优化操作引导、内容设计优化、可用性走查。

这个H5活动可以推广。

1)Ui风格要更符合主题

主题表达:首先，作为疫情下戳人心的活动主题，并没有直观的传达疫情的氛围，导致活动代入感不足，用户对活动主题的感知不清晰，更多的只是灯泡男孩IP风格的延续。

风格选择:本次h5设计以新诞生的IP形象灯泡为视觉kv主体，而IP形象的初始形态是线描风格，并没有扩展到其他形态。在这种情况下，选择孟菲斯风格的线描是必然的选择。

因此，在IP形象有了成熟、更丰富的风格形式后，可以更多地尝试整个活动的风格，找到活动主题的最佳视觉表现形式。

2)动态效果需要大的突破。

随着手机性能的提升，酷炫新颖的h5动态效果是提升用户体验，抓住用户好奇心和眼球的好方法。但这需要大量的开发资源投入，以及设计方的动态效果的设计和研究。

天猫和网易最近的h5动态特效使用了很多3d视觉效果和3d景深操作，对H5的创新体验有很大帮助。这个活动中动画研究的空间空还是很大的。

3)运营文案需要更加醒目。

在这个信息爆炸的时代，没有一个吸引眼球的标题，就注定了它在浩如烟海的信息中沉默。

为此，上线后我们做了大量的用户调研，其中头条基于业务推广定向、实时热点定向等多向尝试，结合新闻常用的3段式标题结构。并且做了AB测试和用户调查。其中实时热点反馈是头条最好的，面向商业的反馈对C端用户没有吸引力。

所以在B端产品的后续设计中，在没有特殊要求的情况下，尽量根据用户关心的热点和好奇点来设计标题和内容。

摘要

活动设计之前要理清楚设计背景，确定好相对应的设计主题和方向，什么样的活动主题能吸引用户参与进。孟菲斯风格、蒸汽波故障风、插画风是H5不错的选择，孟菲斯风格最容易出视觉效果，但这都需要贴合主题，帮助渲染活动主题氛围。H5活动在保证用户体验的基础上，能加入好玩有趣的交互动效是一个加分项。由于市场上手机的尺寸大小不一，必须考虑好适配问题。上线后的数据复盘总结能够帮助我们发现问题，使下一次活动做得更好，且一个有吸引力标题能让你成功一半。

作者:WOWdesign，研究设计价值最大化，涉及用户体验、品牌体验和空体验。

本文由@agoodesign原创发布。每个人都是产品经理。未经许可，禁止复制。

来自Unsplash的图像，基于CC0协议。

目前上述的内容应该能够为大家解答出大家对于h5如何制作(h5页面设计案例)的疑惑了，所以如果大家还想要了解更多的知识内容，也可以关注本站其他文章进行了解哦。

---

版权说明：本文由用户上传，如有侵权请联系删除！

---

标签：