H5制作及案例分享.pdf

H5制作及案例分享.pdf

《H5制作及案例分享.pdf》由会员分享，可在线阅读，更多相关《H5制作及案例分享.pdf（31页珍藏版）》请在冰豆网上搜索。

H5页面制作分享门外汉兼搬运工一枚，大家千万别拍砖，如要拍砖，请轻拍目录壹：

H5的优势贰：

H5设计心得分享叁：

H5案例分享肆：

H5网页编辑工具大全H5的优势壹腾讯新闻客户端内的H5专题1、与原生应用相比，H5页面的传播性和灵活性使它更加符合媒体产品对时效性和差异化的要求。

2、它将图、文、动画、视频、音频等媒体形式进行合理组合，突破了传统专题的内容、形式界限，让资讯变得更加直观、生动。

人性化的交互设计更好地将内容与人机互动结合，强化了用户的参与感。

3、同时，这种多媒体形式创新带来的趣味性和新鲜感，也使用户分享专题的意愿得到提高，促进了资讯专题的二次传播。

H5设计心得分享贰字体默认中文字体中文名称叫黑体-简，一般我们用华文黑体来代替，两者差异微小，仅排列上有差距，笔画的差距也十分微小。

默认英文字体有一些H5制作工具只有一种字体，但是如果想显示其他字体的话可以用图片制作代替，这时就需要运用PS建议字号选择提醒：

建议最小不要超过18，其他字号双数，同类别下用一样的字号版式JDC的拍拍十二星座使用手册项目中，只用了最简单的图形和文字居中摆放。

在有限的手机屏幕空间内，大牛们积累的经验说明最好的效果是简单集中，最好有一个核心元素，中心元素不宜过多，突出重点为最优。

动效如果不是使用辅助工具进行H5的设计，前期可以跟前端设计师进行沟通，讨论页面中元素的动效呈现。

例如一些元素的位移，旋转，翻转，缩放，逐桢，淡入淡出，粒子效果，照片处理等等，还有3D展示效果。

复杂多变的动效不一定是好的，要考虑到加载速度等用户体验问题动效易企秀动效vxplo动效云来音效考虑到用户使用场景的多样性，如果是那种介绍类的如果要加背景音乐，尽量不要太粗暴，有一点循序渐进最好。

所有的H5都要根据主题选择音乐类型。

交互交互设计，又称互动设计，是定义、设计人造系统的行为的设计领域。

H5和与其他传播形式比起来优势在于开发周期时间短，传播起来有效率，并且在更新迭代的成本上要小很多。

特别在游戏上，未来H5会有更多的可能性。

IDEA被大众主流乐于分享的信息大概有这么几种：

1、最直接的利益驱动，分享有奖或者需要众筹等，2、对自己有用并且也对周围人也会有新鲜感的信息，3、自己参与游戏或者测试得到的结果。

4、不管是分享给朋友或朋友圈还是QQ对话，让用户主动去分享你的，带有很大性质的广告意味的信息在自己的社交群体中的话，此条信息与自己相关并且别人也能参与进来是最理想的。

相信自己，论想法，别人是赢不过你的必备技能美感、协调性、内容、熟悉H5编辑平台、PS等设计工具应用看十次，不如操作一次小贴士移动页面用户行为报告没睡着吧！

讲了一半了，再坚持一下H5案例分享叁案例品牌宣传型品牌宣传型H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。

在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。

伴随着浪漫的钢琴旋律，首草先生的情书以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚，最后引出“首草滋阴圣品，爱妻首选”的宣传语。

设计上采用回忆般的黑白色调，简单的照片加文字，配以花瓣掉落、水面涟漪等轻动画，渲染出唯美优雅的气氛。

“首草”这个全新的高端养生草药品牌，用H5打出了一副走心的情感牌，让用户记住了“半生只为你”的爱妻品牌形象。

产品介绍型聚焦于产品功能介绍，运用H5的互动技术优势尽情展示产品特性，吸引用户买买买。

这一类型的H5页面多见于汽车品牌，LEXUSNX（雷克萨斯）是其中的优秀代表案例。

精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。

用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性，宏观和微观都照顾周全。

案例形式为功能服务简单图文简单图文是早期最典型的H5专题页形式。

“图”的形式千变万化，可以是照片、插画、GIF等。

通过翻页等简单的交互操作，起到类似幻灯片的传播效果。

考验的是高质量的内容本身和讲故事的能力。

滴滴打车这个案例就是典型的简单图文型H5专题页，用几张照片故事串起了整套页面。

视觉简洁有力，采用整屏黑白照片，点缀以滴滴的品牌橙色。

每切换一张图片，文字就渐隐浮现，没有其他互动形式，让观众聚焦于内容，通过陌生人之间的真情联系来塑造品牌的正能量形象。

案例形式为功能服务礼物/贺卡/邀请函每个人都喜欢收到礼物的感觉，抓住这一心理，品牌推出了各种H5形式的礼物、贺卡、邀请函，通过提升用户好感度来潜移默化地达到品牌宣传的目的。

既然是礼物，那创意和制作便是重要的加分项。

AKQA创意营销公司在圣诞之际献上了一份厚礼梦幻水晶球。

通过移动手机，镜头从水晶球外不断摇晃推近，渐渐走进水晶球的微观世界里。

通过手机环顾四周，可以360度欣赏水晶球里的全景，摇一摇雪花便漫天飘洒。

这个H5页面使用了重力感应、3D等技术，文字与BGM的使用也十分讲究，给用户带来了完美的互动体验。

案例为H5加分的要点紧跟热点，利用话题效应天天P图抓住武则天热播的契机推出了风靡海内外的媚娘妆，同时全民COS武媚娘的H5互动页也第一时间上线，操作简单易上手，一键上传照片就能立刻完成媚娘妆，与万千媚娘们进行PK，娱乐了大众又推广了产品。

网易娱乐在武媚娘剪胸风波的风口浪尖上推出了名为神还原武媚娘被剪胸真相的H5专题页，放下节操用极富想象力的粗旷草图风向广大观众“还原”了真相。

一时间被疯狂转发，网易娱乐也算是顺势自我宣传了一把。

案例为H5加分的要点讲个好故事，引发情感共鸣不论H5的形式如何多变，有价值的内容始终是第一位的。

在有限的篇幅里，学会讲故事，引发用户的情感共鸣，将对内容的传播形成极大的推动。

LEVIS新年优惠活动专题页以第一人称的口吻，用小时候简朴却热闹的新年与长大后富足却乏味的新年做对比，用手绘风渲染出亲切的怀旧氛围。

最后引出“这个新年，把压力和束缚打包扔掉，用新鲜的眼光感受生活，一起活出趣”的品牌推广slogan，代入感极强的故事无疑是驱动分享的源动力。

案例H5网页编辑工具大全肆推荐10个易上手H5网页编辑工具别问我是谁，请叫我红领巾1、Liveapp场景应用/云来云来Liveapp是面向企业方的移动场景APP云服务平台，许多知名企业都在使用，购买场景应用，近日云来开放了免费体验，“认证企业”可以申请获取，体验时长31天。

2、秀制作“秀制作”为秀米出品，免费提供多种模板，傻瓜式操作，可以外链。

推荐10个易上手H5网页编辑工具3、初页初页作为手机端制作动态海报的app，面向C端，门槛极低，上手简单容易，可在Appstore免费下载，直接在手机上编辑创作。

众多模板版式，任君挑选，也提供定制服务。

4、Epub360意派为专业设计师打造的交互设计利器，交互效果强大，动画效果出色，虽然简单傻瓜式的模板不多，但自由度相对较高。

5、点点客海报点点客作为微信第三方开发服务商，推出了免费的点点客海报，无需注册，扫码登录，即可编辑动态海报，多种效果、翻页动画、背景音乐、可统计浏览量，也提供定制。

6、兔展兔展目前只支持Safari和chrome浏览器，承诺免费永久开放所有功能。

7、易企秀有免费模板，有多种动态模板，能实现文本和图片带有滑动、隐现、放大缩小等动态效果。

同时有ios移动客户端，在手机上也可创建场景应用，以及数据统计功能。

8、Vxplo专注在线交互设计，功能强大，同epub360一样适合专业设计师，可以零代码制作轻应用。

谢谢！