朋友们,是否还记得朋友圈不断刷屏的网易H5活动,作为一位互联网设计师,不争气的眼泪从嘴角流了出来,馋呀、羡慕呀!同样九年义务教育,为啥人家的活动效果那么好?总是一做就爆,而自己一做就废。
那么一款优秀的H5它包含哪些要素呢?好用的、好玩的、触动人心的?下面通过这个踩过无数多坑的H5案例的思路分享,希望能给大家带来启发,避免再次踩坑。
大纲:
1. 为什么做H5活动
本活动由平安银行对公业务中台联合Planet B举办,以IT对公派驻全新设计的IP形象灯泡仔及家族成员为载体。活动旨在推广对公业务中台产品,由wowdesign团队设计的IT对公派驻IP-灯泡仔及其家族品牌形象结合灯泡仔快闪打卡活动,线上线下联合运营推广对公业务中台。
1. H5类型选择
什么样的活动主题能勾起用户的注意力?什么样的内容能引起用户的共鸣?能让其自愿转发,愿意用这个虚拟的活动向朋友来展现表达自我人设。所以活动的方向选择尤为重要。我们对市场已有的H5活动做了归类,分析他们对应抓住了用户哪些痛点,从中获取方向。
2. 哪些因素影响用户参与并转发
用户的参与度与转发裂变数据,是衡量一个活动的成功与否。那么从用户心理学角度分析,影响因素有以下几点:自恋炫耀心理、共鸣心理、好的视觉效果。
3. 当下热点及用户心理状态
疫情之下,大家的心理和经济都受到不小影响,焦虑失望情绪高涨,希望得以表达情绪。
4. 综合分析结论
所以希望用户通过关键词选择,测试生成2020生活状态报告,由此击中了用户内心,引起共鸣,使其能参与转发此活动。并选定主题《pick你的2020戳心话》
通过网易等平台过往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端产品出圈设计时,在无特殊要求下,尽量往用户关心的热点、好奇点为导向去设计标题和内容。
总结
直播主题:云原生下如何高效开发? 直播时间:2021.05.13 15点 讲师:纳海,阿里...
产品介绍 IDO-SOM3568 采用 Rockchip 新一代 64 位处理器 RK3568(Quad-core ARM...
服务器的 虚拟主机 虚拟化技术大大降低了应用成本,因此成为中小企业建站的福音...
香港 服务器租用 计划适合对于网站或电邮服务需求量较大的企业或个人客户,如公...
1. 接口描述 接口请求域名: tat.tencentcloudapi.com 。 此接口用于预览自定义...
案例背景 杭州市一医院是杭州市属最大综合性三级甲等医院,也是浙江省首批通过三...
服装是我们每个人的生活必需品 从全球几十亿人口的基础上可了解到 服装市场需求...
不好意思,又好多天没更文章了 眼看着离过年越来越近了,很多工作都要在年前冲刺...
影响服务器租用稳定运行的因素 服务器是一个网站稳定运行的基石,不仅影响网站的...
“5G+工业互联网促进国家数字经济的高质量发展,更推动了数字中国和智慧社会的发...