赞助商
立即赞助

做H5没头绪?这有一份完整的H5案例思路

UI设计3年前 (2021)发布 流光
2.8K 0 0

朋们,是否还得朋圈不断刷屏的网易H5活动,为一位互联网设计师,不争气的眼泪从嘴角流出来,馋呀、羡慕呀!同样九年义务教育,为啥人家的活动效果么?总是一做就爆,而自己一做就废。

做H5没头绪?这有一份完整的H5案例思路

么一款优的H5它包含哪要素呢?用的、玩的、触动人心的?下面通个踩无数坑的H5案例思路分享,希望能大家带来启发,避免再踩坑。

大纲:

  • 活动概述
  • 主题构思
  • 视觉风格设
  • 交互动效计
  • 于适配
  • 数据复盘结

做H5没头绪?这有一份完整的H5案例思路

活动概述|OVERVIEW

1. 为什么做H5活动

活动由平安银行对业务中台联合Planet B举办,以IT对派驻新设计的IP形象灯泡仔及家族成为载。活动旨在推对业务中台产品,由wowdesign团设计的IT对派驻IP-灯泡仔及其家族品牌形象结合灯泡仔快闪打卡活动,上下联合运营推对业务中台。

做H5没头绪?这有一份完整的H5案例思路

主题构思|H5 THEME

1. H5类型选择

么样的题勾起户的注意?么样的容引起户的共鸣?自愿转发,愿意这个虚拟的向友来展现表达自我人设。的方向择尤为重要。我们对场已有的H5做了归类,分析他们对应抓住了户哪些痛点,从中获取方向。

做H5没头绪?这有一份完整的H5案例思路

测类:契合用户低成有趣自我的需求。

新闻热点类:热点话题、事件为素材,特点是时效性,讲究与户的距离,参与感、真实感。

互游戏类:以互动性较强,特点多趣、简单易手,愉悦感、就感。

公益类:以社会热问题为题材,如环保、保护濒危动物、关爱等,社会焦问题出发,彰显社会责任感,深刻教育警醒作用。

软文故事类:以独立的经历、故事为引导,多为熟为人知的生活、工作、情的糗事,侧面达某种营销目的。

2. 哪些因素影响用户参与并转发

用户的参度转发裂变数据,是衡量一个活动的成功否。那从用户心理学角度析,响因素有以下点:恋炫耀心理、共鸣心理、好的视觉效果。

做H5没头绪?这有一份完整的H5案例思路

3. 当下热点及用户心理状态

疫之下,家的理济都受到不小影响,焦虑失望绪高涨,希望得以表达绪。

做H5没头绪?这有一份完整的H5案例思路

4. 综合分析结论

A.结合疫情下用户心理状态,疫情对他们生活、工、经济的影响。

B.通过刷屏因素中的”共鸣“,再结合熟悉的网络流行语作标签关键词,精准的贴合了用户表达自我、分享自我状的诉求。

C.选用测类玩法,让用户去测pick的2020生活状,了解,享现状。

希望户通过键词择,测试生成2020生状态报告,由此击中了户心,引起共鸣,使参与转发此。并定题《pick你的2020戳心话》

UI风格设计|H5 STYLE

做H5没头绪?这有一份完整的H5案例思路

通过网易等过往H5案例析,计风格多为孟菲斯风格、蒸汽波故障风、插画风等较为年轻活泼有表现力的风格。结IP形象的线描风格和主题,最终敲定了孟菲斯风格计风格。该风格能表现各种于个性化的文化内涵,从真滑稽怪诞、离奇等不同情趣。在色彩上运用一些快、风趣、饱和度高的亮色调,给用户极的官刺激和丰的情,贴本次活动戳心话的各种话语景。

做H5没头绪?这有一份完整的H5案例思路

△ 计展示

交互动效设计|DYNAMIC EFFECT

对于H5而言,简不需思考的交互操作是基本的要求,炫酷好玩的交互动效是必不可少的加项,把交互动效拆解为三个方面:

1. 操作指引动效:

首页的h5主题交代清楚之后,首要的就是引导用户去下一步的标签选择页面,所以按钮一定要在最舒适的点击位置,且有最的操作提示,所以按钮呼吸缩放动画提示是一个不错的选择。

2. 交互转动效:

界面转素的贯性和界面素的进出动画,能让界面更加流畅贯,操作体验更佳。

3. 标签选择页标签翻动动效:

标签选择页面是整个产品最核心的交互部,在足易用性的基本操作交互要求上,还需要增加一定的操作趣味性,给用户带来惊喜的交互动效,比如标签3d景深旋转翻动操作方式,点击选择趣味动反馈。

做H5没头绪?这有一份完整的H5案例思路

关于适配|ADAPTATION

1. 屏幕适配

为适16:9及更长的面屏手机,须把页面拆为主、元素、背。

主、元素

需要把各元素定位对应的位置关系,主通切图整画面居中位置,确定元素距离顶部、底部的距离。注意里的数据需从矮屏(16:9,也就是iphone6)向高屏幕适,以矮屏幕为基础,样就能避免适之出现元素重叠的问题。

背

背图根据屏幕尺寸做缩放、裁剪适填充满屏幕。所以背一般设计成相对简单的画面,以免在裁剪缩放时出现大的视差异。

做H5没头绪?这有一份完整的H5案例思路

2. 结果页扩展性适配

在选择标签类H5活动,结页需展示用户选择标签,用户选择标签数是不确定,这样涉及到结页长短适配问题。所以在标签展示部分底色需要是纯色或连续图,连续图高度需和单标签高度致,保证增加标签,增加应高度连续背景图,保证背景页高度是适配于应标签数量所需高度。

做H5没头绪?这有一份完整的H5案例思路

复盘总结|DATA SUMMARY

1. 浏览数(PV)、用户数(UV)

为检测活动效果,在活动的各期通过数据拉取了浏览数(PV)、用户数(UV)帮助判断活动的传播裂变效果,并析其响因:曝光数、渠道质量、标题内容吸引力,通过不断优化响因素,以保证在计划的间内达预期的活动效果。

2. 漏斗数据

通过漏斗数据析用户流失情况,可进一步析流失因:页面操作引导是否确、页面内容是否有吸引力、页面可用性,帮助优化操作指引、内容计优化可用性查。

做H5没头绪?这有一份完整的H5案例思路

3. 本次H5活动可以提升点

Ui风应更贴合主题

主题表达上:首先为疫情下戳心的活动主题,并没有很的在视上传达戳心和疫情的氛围,导致活动的代感不够,用户对活动的主题感不够明确,更的只是灯泡仔IP风的延续。

风格选择:本次h5设基于刚刚诞的IP形象灯泡仔视觉kv主体,IP形象的初创的表形式线描风格,还未扩展其他表形式,此况下选用线描的孟菲斯风格必然的选择。所以IP形象熟的丰富的风格形式后,整活动的风格也能多试可能,找到该活动主题的视觉表形式。

做H5没头绪?这有一份完整的H5案例思路

动效需要有大的突破

随着手机能的提升,炫酷新颖的h5动效是提升用户验,抓住用户猎奇心理和眼球的不错方式。但需要大量开资源的投,和设计对动效的设计和研究。天猫和网易近期的H5动效运用大量的3d视效果和3d深操,对h5的创新验有着极大的帮助。次活动在动画方面还有很大的挥研究的空间。

做H5没头绪?这有一份完整的H5案例思路

运文案需更抓眼球

在这个信息爆炸时代,没有个抓眼球标题,那么注定会沉默在海量信息。为此上线后我们做了大量用户调研,其标题根据业务广导、实时热导等多尝试,结合新闻常用3段标题结构。并做了AB测试及用户调研。其标题用实时热反馈最好,以业务导c端用户毫吸引力。所以后续在做b端品出圈设计时,在特殊要求下,尽量往用户关心热、好奇为导去设计标题和内容。

做H5没头绪?这有一份完整的H5案例思路

总结

A.设计之前要清楚设计背景,确定好相对应的设计题和方向,么样的题吸引户参与进。

B.孟菲风格、蒸波故障风、插画风是H5不选择,孟菲风格最容易出视觉效,这都需要贴合主题,帮助渲染活动主题氛围。

C.H5活动在证用户验的基础上,能加玩有趣的互动效是一个加分项。

D.由于市场手机的尺寸小不一,必须考虑好配问题。

E.上线后的数据复盘总结能够帮助发现问题,使下一次活动做得更好。且一个有吸引力的标题能让你成功一半。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

项目背景 2019年春节期间,QQ红包运营活动进行了全新改版,将卡券福利、现金奖励打包成福袋形式,并通过年俗小游戏及共享福袋...
QQ空间
编者按:占据社交领域大半个江山的腾讯,到底是如何做社交产品的?今天用一个腾讯的实战案例,为你完整展现腾讯内部是如何从...
DOV
前言 高德作为国民出行平台,随着用户量的不断增加,业务覆盖也越来越广。目前除了提供更精准的导航服务外,还陆续推出了聚合...
AlibabaDesign
项目复盘对设计师的成长来说是一个很重要的环节,不仅可以巩固自己的设计理论,同时还可以与小伙伴们分享自己的小心得。 本...
主题设计
最近《创造101》让 pick 一词大火,大家都在讨论自己 pick 了哪位小姐姐,pick 到一定地步的人被称为铁粉,极端失去理智的叫...
QQ空间
每个公司都有着它的独特性,这种独特性是由它的发展历程和特有的服务细节所塑造的,也正是因为这种独特性的存在,设计师总能...
logo设计
@途家UED:途家网,全球民宿预订平台,为用户提供公寓、别墅、树屋等各式新奇住宿。 为了更好的贴近及满足用户体验,设计团...
实战案例
58UXD:我们认为,视觉设计在产品中主要起以下作用,视觉可用性、信息设计、品牌输出等。 借空状态改版,我们尝试落实视觉设...
品牌设计