策划方案案例(h5策划方案案例)
1. h5策划方案案例
01 单击交互
点击是最常见的手势之一，可以用在页面转场上。这种交互手势，一般需要设置点击引导。
引导可以作为注释帮助用户理解H5，让用户跟着H5的思路行动，推动剧情发展。与主题相符的个性化的引导设计，能快速将用户带入情境。
比如红网的《带上“希望的种子”去北京》中，用户可以点击行李传送带上的行李“开箱验货”，查看代表们的建议，聆听他们的故事。
H5用行李箱作为点击按钮，为用户搭建去北京的场景。即使不能亲临现场，也可以“参与”会议，了解到会议内容。
点击手势也常用在测试型H5上，用户点击屏幕选择不同选项，生成专属测试结果。
网易哒哒的《测测你的哲学气质》、《测测你是欢乐颂里的谁》、《饲养手册》都是测试型H5，只需简单的点击交互即可完成。
02 连击交互
连击交互主要应用在游戏类H5中。连续点击屏幕的节奏感比较强，关联点击次数与积分排名，则会带有竞技性，能刺激分享、吸引更多人参与。
这种单一的交互方式操作比较简单，所以会搭配限时、限次等玩法。
网易哒哒的《漫威电影十周年》H5设计了一个“揍”灭霸的环节，用户需要猛点屏幕，记录10秒内时间“揍”灭霸的次数。10秒结束后，用户可看到连击的次数和自己全网排名。
《守护你的幸运足球》属于不设置连击次数限制的H5。连击求精准不求数量，需要点击屏幕控制足球高度，不能“飞”得太高撞上飞鸟和石柱，也不能掉在地上。
《穿越中国70年》是网易哒哒出品的一支“庆祝新中国成立70年周年”的视频型H5。
其中“为祖国点赞”环节需要用户连击屏幕，每点击一次记为一分。连击时产生的爱心特效会变色，画面给用户新鲜感。
点赞创意来自短视频点赞，交互手势是用户熟悉的形式，有利于带动为祖国“打call”的积极情绪，增强体验感和沉浸感。
03 长按交互
长按需要用户根据引导，长时间接触H5页面中的某处按钮，保证画面的连续播放和顺利转场。
由于长按需要用户的手指保持静止的停顿状态，用户可能会感到无聊乏味。在设计时，最好可以提示H5的播放进度，给予用户时长参考。
长按交互常用于一镜到底形式的H5。往往考验故事的衔接和镜头的转换，运用得当可以带给用户很好的体验，让用户精神更加集中，从而提升完播率。
《你我当年》利用长按动作，用户可以用画中画形式畅快观看所有内容。
《武林外传》、《仙剑奇侠传》
04 长图视差交互
长图视差交互常搭配滑动手势进行，带动H5连贯播放。
视差动画由于运动速率与主视觉画面不同，空间层次感更加鲜明。
这可以增加画面的新鲜感，缓解高密度内容带来的的视觉疲劳。减少阅读长图文时的乏味，从画面效果上辅助H5流畅转场。
网易哒哒的《自白》利用这种方式，向下滑动推进故事剧情，把主人公的变化呈现给用户。借用滑动手势控制故事的播放，让用户更有参与感。
《你想要的每个好，我们都努力做好》用滑动长图+视差动画的形式，带领用户从1988年穿越到2018年，串联起兴业银行的30年发展历史。
《我在童话里遇到你的时光》使用一张长图，滑动时会有一些小元素穿插过场，使得整支H5看起来炫酷又丰富。
05 拖拽交互
拖拽区别于滑动，需要按着屏幕不松手，从一个点拖到另一个点，移动速度由用户控制，适合图片展示类或叙事类的策划专题。
网易哒哒的《睡姿大比拼》H5利用了骨骼动画技术，用户可以拖动小人的四肢，DIY自己在床上的睡姿。
除了可以选择场景、人物外貌，H5还提供床上的小物件做搭配，放大或缩小后用来布置卧室。
06 双指缩放交互
双指交互需要用户两只手指同时接触屏幕，比如滑动屏幕放大或缩小某物，也常用于画面转场。
这种交互方式对手势的微操有要求，玩法有些复杂。但互动性比单指点击、滑动更强，也更具趣味性。
网易新闻的H5《跟贴比新闻更接近真相》采用穿越时空设定，设计了双指放大手势进入下一页，点击按钮查看当页详情。每页统一的手势便于用户理解。
07 声音交互
除了触觉交互，还有听觉交互。声音交互方式比较少见，大多与录音有关，按照H5引导录一段话，DIY生成专属音频。
网易云音乐的《有故事的声活单曲》，就是让用户录音，讲出自己的故事，创建录音文件。录音结束后，配上文案生成定制海报。
用声音控制H5，还可以表现为自选音乐片段，DIY成一首完整歌曲。
网易云音乐的《玩音乐，我从来没在怕的》，让用户从几种音效中选出最喜欢的风格，再为原曲调音，生成个性化乐曲。
DIY出来的音乐代表个人喜好，具有一定的社交属性。
08 书写交互
书写交互是自由度较高的互动方式，用户可以根据提示自由创作文字、图画。
通过绘画创作出来的形象个性鲜明，也是用户情绪的体现，面对自己绘制的角色，用户也能更用心地投入到H5，流失率往往不高。
网易哒哒的《里约大冒险》给予用户一定指导，根据提示绘制小人、绳子、降落伞等形象。
这些形象虽然线条有些粗糙，运动起来与背景对比鲜明，但是因为是原创角色，用户对画面的包容性也更强。
文字部分的书写交互，常用在测试类H5上。用户根据提示输入名字或者想说的话，生成海报得到测试结果。
网易新闻的H5《以你之名，守护汉字》可以输入自己的名字，找到需要自己守护的濒危汉字。
H5测试生成的都是日常很少用到的生僻字，主题“守护”汉字，既可以让用户认识这些濒危汉字，也能够给予用户一种使命感，将汉字主动分享传播。
09 重力交互
模拟现成的物理规律能大大降低理解门槛，还能为策划增添趣味性。
手机在硬件上给出了很多技术发挥的可能性，活用重力感应、陀螺仪、速度加速器等硬件设备可以创新H5玩法，增加代入感。
摇晃手机时，H5会自动判断手机倾斜的角度。由于技术性比较强，所以重力交互常用在某个特定页面。
网易新闻的《时空恋爱事务所》就是利用手机重力传感器，摇晃手机唤醒主人公，开始剧情。
10 3D空间交互
3D交互主要利用3D技术，搭建立体化场景，突破画面扁平化的限制，强调层次感。
但这种交互方式在开发设计环节难度较大，考虑到用户的使用习惯，3D交互的玩法也比较单一，常搭配点击、滑动等基础手势操作，3D作为H5亮点出现。
《龙猫线上扭蛋机今日营业！》中将“扭蛋机”“金币”等元素3D化，原本正常比例的动漫人物Q版化。
扭扭蛋是一个动态的过程，如果使用二维平面形象，互动的效果并不明显；3D物体强调了用户的临场感，还原扭扭蛋未知的趣味性，H5玩起来更加真实。
11 全景交互
在360°全景形式中，用户可以上下、左右滑动。
这种H5以类VR的形式承载整个画面交互，更注重H5场景的设计，空间立体感比较强，要求画面360°边界衔接流畅。
不过由于加载内容较多，H5体量较大，很可能会出现播放时画面卡顿等问题。
2. h5营销方案
1、互动游戏类
这个类型的H5活动通常会以互动性比较强的小游戏为题材，以有缺且简单容易上手方式来让用户感受到游戏的愉悦感，成就感。可以让用户在不知不觉间认识到品牌，通过参与小游戏达到转化效果。
2、新闻类
这个类型的H5活动会以热点话题或者是事件作为素材，具有高的时效性。会借助H5有趣的方式来拉近用户的距离感，让用户有更多的参与感和真实感，从而吸引用户主动参与到内容互动中，而且还会通过一镜到底的形式让用户以第一视角完成活动体验。
3、软文故事类
这类型的H5活动会以场景故事为主，通过一些独立的经历、故事为引导，通常可以用实际生活、工作等熟悉的场景故事来策划营销活动。这样可以通过熟悉的场景经历来引起用户的共鸣，触发用户的情感点，从而达到营销的目的。
4、抽奖类
微信朋友圈好友转发抽奖类的H5游戏大家已经司空见惯了，因为这类的微信互动游戏最为广泛，而且也因为其有奖环节的设定非常受到大家的认同。用户都会比较乐忠于参与游戏的进行，也愿意主动分享转发。但是企业特别需要注意的一点是奖品如何选择才能既吸引到用户又不影响成本的投入，所以，要提前制定好方案，权衡好利弊。
5、测试类
这个类型的H5活动是朋友圈场景的，很多的品牌商家都会选择这个方式来做营销活动，多为常识问答、运势占卜、趣味测试的活动方式。这是因为测试类H5可以契合用户低成本有趣了解自我的需求，最后的结果还可以充当“我”的人格代言词，帮助用户获得社交货币。例如为用户提供谈资、给与帮助、有用好玩、塑造形象、社会比较等分享的理由和动机。
3. H5策划方案
H5的核心优势在于它在不同浏览器之间提供了更理想的互操作，使得它成为跨平台移动应用程序开发场景中的一个重要语言选项。许多框架还为PhoneGap和Cordova等解决方案提供支持，这意味着我们可以为各种不同的平台和设备构建动态混合Web应用程序。5种常用H5框架介绍：
1.TwitterBootstrap是一套强大的前端框架，能够利用HTML、CSS以及JavaScript快速简单地实现Web应用开发任务。这套框架为开发人员提供一系列极具实用性的功能，具体包括一套12列响应式网格系统、JavaScript插件外加HTML元素等等。它还提供一系列可复用组件，从而实现导航、下拉菜单、面包屑导航、排版、提醒以及进度条等功能。
2.GroundworkCSS2是一款响应式HTML5、CSS以及JavaScript框架。这套框架拥有一套强大的网格系统外加对应划分功能，足以满足各类台式机、智能手机以及平板设备的需要。其网站还提供数量可观的使用示例及说明文档，足以帮助大家快速实现原型设计以及面向标准网站、电子商务网站以及图片库等应用场景的布局模板。值得强调的是，这套框架还提供其它一些功能，例如响应式文本以及易于定制特性。
3.QUICKUI是一套完整的企业级web前端开发解决方案，由基础框架、UI组件库、皮肤包、示例工程和文档等组成。使用QUICKUI开发者可以极大地减少工作量，提高开发效率，快速构建功能强大、美观、兼容的web应用系统。
4.SproutCore是一款高人气前端框架，且利用MVC架构规范构建而成。立足于HTML5的强大能力，它允许我们通过高效客户端逻辑与高质量主题特性构建出运行速度出色且具备可扩展能力的Web应用程序。
5.52Framework是一套强大的前端开发框架，其能够充分发挥HTML5、CSS3以及JavaScript的可观潜能。这套框架当中捆绑有大量内置功能，具体包括HTML5视频播放器、HTML5表单验证、CSS3属性、网格系统以及HTML5canvas示例等。
4. h5设计案例
H5是html5的缩写，是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。制作H5页面的方法：
1、首先在电脑中安装H5的制作软件，以WPS为例，点击打开WPS H5软件。
2、进入H5的制作页面后可以选择一种模板作为制作的基础样式。
3、点击需要的模板后点击其右侧的“立即使用”按钮。
4、点击后即可进入编辑页面，可以点击上方工具栏中的“文本、形状、图片、表单、背景”选项。
5、还可以设置“互动、音乐、图表、动画”的相关选项。
6、设置制作完毕后可以点击右上角的“预览/发布”按钮进行保存及发布。
5. h5创意策划方案
一个有互动的H5（不是易企秀和MAKA之类的）。
大概如下：
1.前期沟通了解需求。
2.策划H5方案
3.设计出草稿
4.定稿出正稿
5.后期工程师开发
6.测试
7.正式上线
6. h5策划方案案例怎么写
答，h5是基于微信的一种网页格式，可以是卡通画面，也可以是某小游戏，常用在互联网公司的推广中，内容好的h5可以带来非常好的用户体验，策划h5，就是策划h5的内容和展现推广方式。
7. h5广告策划方案
h5页面大小一般为640x1136px，在保证显示需求的同时，也能降低加载图片需要的带宽。我们可以使用稿定设计提供的模板，尺寸合适，直接使用即可。而除了推荐尺寸，还可以根据自己的需求修改尺寸，点击编辑尺寸。
8. h5策划方案案例分析
从技术层面看：
H5实际上是一个解决方案，一个看起来酷炫的移动端网站的解决方案。而这个解决方案不仅包含了HTML5新增的audio标签，canvas，拖拽特性，本地存储，websocket通信，同时也包括了盒模型，包括绝对定位。
如果你想学怎么制作H5页面。那你要先学习HTML，包括HTML5的新标准和之前的全部标准，然后学CSS以及CSS3，了解它们在浏览器的实现情况，原生JS了解一点就可以，大多的操作可以用Jquery，了解常用的几个Jquery插件的用法，应该就差不多了。如果想要做更酷炫的的，学一下egret或者cocos2d更好。如果要优化加载速度，还要学一下grunt一类的自动化工具。可以说，前端的基本知识都要学。
”H5“本应是一个技术合集，却被意会成了一项技术，所以很多初学者以后简单学下就能学会，还不要急，慢慢来的好。如果不写代码，有什么好办法？现在已经有很多工具可以帮你实现H5的制作了。
从设计层面看
我所说的设计，特指视觉设计，近几年，随着产业细分，视觉设计也从平面设计、动漫设计、影视动画设计等。设计大类细分为字体设计、手绘设计、UI设计、VI设计、、影视设计、二位动画设计、三维动画设计等等等等，而H5设计会运用到所有的视觉设计。也可以说，根据不同的表达内容与策划形式，各种类型的视觉设计都可以转化为H5。
如今，H5设计师的工资普遍高于其他类型的设计师，不仅因为H5市场需求火爆
更因为H5考验的是一个设计师的综合实力，作为一个H5设计师，首先要精通各类平面设计，其次要懂手绘、3d制作、视频剪辑、音乐搭配。
综上所述，H5设计是一个视觉设计的综合应用
从策划层面看
如果是推广产品的，那就结合产品特征来考虑。热点选题刷屏几率更高，热点元素结合一个普通的玩法，都会造成刷屏效果。
用户在社交媒体平台上的行为，包括点击浏览、互动留言和分享转发。浏览和分享相互促进，形成闭环。因此创意产出时，要考虑的一个重要前提是：用户为什么分享，好友为什么点击？直达内心情感G点、勾起好奇、引起同情、攀比炫耀……
除了选题和确定互动形式外，成本和设计考虑也重要。
另外策划注意的细节非常多，比如开头吸引用户、加载页、标题和分享语、音效注意声画同步
一个好的策划案是成功的一大半！
从推广层面看
微信渠道为主，但是理论上，H5可以在任何web页面传播，比
9. h5策划书范文案例
通常我们所说的H5就是H5广告，大多是在微信上宣传营销使用的，而HTML5是第五代HTML的标准，可以说，H5都是基于 HTML5 实现的，包括目前我们看到的大部分网页，基本上所有H5都遵循HTML5这个规范，不然就会出现问题。
通俗的讲，H5是一个网页，就像一个很大的容器，里面可以放文本、图片、音视频等基本的流媒体格式的文件。
既然H5作为广告的一种形式，那么在不同应用场景是有一定区别的，比如市场策划说它是一些品牌文案，设计师眼中它是平面UI界面，编程开发人员说它是一个HTML网页，推广营销人员说它是一个活动……那么我们从创意形式、行业、场景三个维度来划分目前H5的实际应用表现：
创意形式：视频H5 、一镜到底、 全景VR、 快闪、 答题测试 、合成海报、 游戏、 拟态类、 数据表单 、横屏H5、 长页面
行业：互联网/IT、 汽车、 地产/酒店 、金融/银行、 文化/娱乐、 服饰/时尚 、电商/商业、教育/培训、 媒体/政府、 旅游/会展
场景：邀请函、 招聘 、品牌推广、 产品宣传、 婚礼庆典 、活动营销 、节日主题、 数据报告、 微杂志 、微官网、 年会
H5工具制作：
现在随着互联网的发展，H5技术的普及，对人力成本的控制和开发效率需求，萌生出一堆H5工具，简单的类似易企秀（推荐小白），可以实现一些翻翻页的小动效，复杂的其中就有意派Epub360，专业H5页面制作工具，大大缩短项目的开发周期，灵活度超高，几乎一个人就可以完成以前需要一个团队制作的H5项目
H5页面制作工具推荐：意派∙Epub360
10. 创意H5案例
我觉得意派Epub360很好用，它的定位就是一款专业的在线H5页面制作工具，交互功能还是挺不错的，可以制作一镜到底、全景VR、人脸识别、走马灯、画中画等互动感很强的创意型H5，而且案例、模板和教程都很丰富，很多新闻媒体和广告公司都在用。
11. h5创意策划
H5原本是一种制作万维网页面的标准计算机语言，由HTML5简化而来的词汇，如今却借由微信移动社交平台，走进大家的视野。 从营销角度来讲，我们不但可以用H5在页面上融入文字动效、音频、视频、图片、图表、音乐和互动调查等各种媒体表现方式，将品牌核心观点精心梳理重点突出，还可以使页面形式更加适合阅读、展示、互动，方便用户体验及用户与用户之间的分享，正是具备了这样的营销优势，H5技术的运用不但为移动互联网行业的高速发展增添了新的契机，也为移动互联网营销开辟了新渠道。 企业要想应用H5营销取得理想效果，就要从H5立意、创意、设计，到制作、传播上下足功夫。 首先、要在创意和内容上追新求异。一个让人眼前一亮的H5营销一定是一个会制造话题的技术活。创意上要结合品牌调性，达到视、听创新；内容上要做到有趣、好玩、实用、有价值，另外还需紧跟热点，利用话题效应，只有这样才能抓住用户的眼球，才能促使用户进行分享、传播，达到营销效果。 其次、要深挖H5的价值点。一个好的H5一定具备打动用户的价值点，尤其是功能型H5，需要根据本身品牌的形象定位以及受众的特性设计，要将品牌或产品的功能性特征抽象到生活方式或者精神追求的层次，只有这样才能与用户产生共鸣。例如，卖体育用品的可以抽象为体育锻炼与健康生活方式，设计一个改善身体健康状态的功能型H5。 第三、要从技术上寻求突破。要想让H5营销脱颖而出，其核心应用技术也必须“高大上”，必须大胆应用其多媒体特性、三维图形制作及3D特效等功能属性，而不是仅体现在触摸、滑动等传统PPT幻灯片的简单操作上。 第四、多渠道推广H5。可以充分调动身边任何可以利用的渠道资源，进行多种形式的推广，比如通过公众号进行图文群发推广、微信群推广、线上线下二维码推广，以及KOL（意见领袖）转发和投稿等。另外，可以策划开展多样线上线下活动，促进用户品牌倾向性。