H5制作流程.ppt

H5制作过程及注意事项分享 目 录 壹：前期考察工作 贰：制作心得 叁：H5分类及案例 肆：H5网页编辑工具 壹：前期考察工作 ▍H5常见发布形式 服务号 订阅号 注意： 服务号通常采用直接发布图文信息，粉丝点击即可砍价，配合导航栏方便新粉丝 订阅号一般情况下会发布图文消息配合点击阅读原文或者设置关键词定义进行砍价 ▍订阅号和服务号的区别 注意： 品牌方大部分为认证过后的订阅号。而在开发者模式下，订阅号不支持网页授权获得用户基本信息 b. 每日调用接口有次数限制，频繁调动会导致程序错误或者封号等风险 贰：制作心得 ▍H5版式-页面适配 H5页面开发的是网页不是Apps，所以网页100%适配所有移动设备是不可能的，每个移动设备的尺寸、比例都不一样的，只能尽力做到兼容性最好 一般情况下用640X1136进行设计；其他安卓机器前端切图时可以适当拉伸，变化不会太大就不用每个进行适配（来自腾讯大讲堂） ▍H5版式-其他 字体默认中文字体 Heiti SC ，中文名称叫黑体-简，一般用华文黑体来代替，两者差异微小；默认英文字体 Helvetica Neue LT ；字号选择不要小于18号，其他字号双数，同种类别下用同一样字号 PNG图片压缩请使用；音效大小一般控制在100k以内 ▍微信号导航栏 订阅号在切换至开发模式后，原有导航栏会失效。 H5在活动条件设置中，如果需要跳转关注微信时，要考虑导航栏和活动的相互配合 叁： H5分类及案例 ▍功能与目标 分类 活动运营型 为活动推广运营而打造的 H5 页面是最常见的类型，形式多变，包括游戏、邀请函、贺卡、测试题等形式 品牌宣传型 品牌宣传型 H5 页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度 产品介绍型 聚焦于产品功能介绍，运用 H5 的互动技术优势尽情展示产品特性，吸引用户买买买 总结报告型 各大企业的年终总结现也热衷于用 H5 技术实现，优秀的互动体验令原本乏味的总结报告有趣生动了起来 ▍活动运营型 如今的 H5 活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信 H5 页面到最后落地到品牌 App 内部，如何设计一套合适的引流路线也颇为重要。 例：《选择吧，人生！》 ▍品牌宣传型 在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象 。 例：《首草先生的情书》 ▍产品介绍型 这一类型的 H5 页面多见于汽车品牌，LEXUS NX 是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的 7 大特性，宏观和微观都照顾周全 例：《 LEXUS NX? 》 ▍总结报告型 自从支付宝的十年账单引发热议后，京东用 10 张横屏页面讲述了在 2014 年的十大成就，视觉设计上采用简洁的扁平风插画，加入纸面质感形成复古卡片拼贴感。不同页面间通过手指滑动实现流畅的视差滚动效果 例：《京东的十大任性? 》 ▍形式为功能服务 分类 简单图文 简单图文是早期最典型的 H5 专题页形式 ?礼物/贺卡/邀请函 每个人都喜欢收到礼物的感觉，抓住这一心理，品牌推出了各种 H5 形式的礼物、贺卡、邀请函 问答/评分/测试 问答形式的 H5 页面也屡见不鲜了，利用用户的求知欲和探索欲 游戏 H5 游戏因为操作简单、竞技性强，一度风靡朋友圈 ▍简单图文 「图」的形式千变万化，可以是照片、插画、GIF 等。通过翻页等简单的交互操作，起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力 例：《从此看尽中国人的名与利》 ▍?礼物/贺卡/邀请函 通过提升用户好感度来潜移默化地达到品牌宣传的目的，既然是礼物，那创意和制作便是重要的加分项 例：《梦幻水晶球》 ▍问答/评分/测试 一条清晰的线索是必要的，最后到达的结果页也需要合理不突兀，如果能辅以出彩的视觉和文案，弱化答题的枯燥感那就再好不过了 例：《评什么爱姜文》 ▍游戏 创意缺乏和同质化现象会导致用户对无脑小游戏逐渐产生了厌倦，所以品牌要在游戏上做到成功传播，需要在玩法和设计上多下点功夫 例：《圣诞老人拯救计划》 肆：H5网页编辑工具 ▍秀米秀制作 体验地址：http://xiumi.us/ 秀米在公众平台的图文排版上可是名声远扬。和秀米的图文神器一样，秀制作目前也是免费的，提供多种模板，傻瓜式操作，可以外链，可与秀米图文排版双剑合璧 ▍初页 体验地址：/ 初页作为手机端制作动态海报的APP，门槛还是比较低的，容易上手，可以直接在手机上编辑，制作极为便利，图文混排的模板也很丰富。可免费下载安卓版和苹果版初