开发H5的流程与策略

开发H5的基本流程主要包括对接需求、项目策划、视觉设计、技术开发等。本章将从H5开发过程中角色分工的角度介绍H5开发的基本流程，需要注意的细节规范，以及如何打造爆款H5等知识。CHAPTER02运营规划：开发H5的流程与策略学习目标了解开发H5的基本流程。掌握H5开发的细节规范。掌握打造爆款H5的策略。目录CONTENT开发H5的基本流程2.1开发H5的细节规范2.2打造爆款H5的策略2.3H5开发角色及分工利用5WH产品需求分析法拆分需求项目经理统筹全局1H5策划常用工具项目经理统筹全局1策划方案制作2项目经理统筹全局1策划方案制作2原型图策划方案制作2项目经理统筹全局1设计视觉设计3设计视觉设计3策划方案制作2项目经理统筹全局1开发技术开发、测试、上线、数据监控反馈4友盟数据分析平台H5的制作流程目录CONTENT开发H5的基本流程2.1开发H5的细节规范2.2打造爆款H5的策略2.32.2.1选择合适的浏览器在H5的制作过程中建议使用GoogleChrome浏览器，因为它在所有浏览器中对H5的兼容性最好。安装GoogleChrome浏览器后，会发现默认的搜索引擎无法使用，此时可以对浏览器进行设置，将默认的搜索引擎改为“百度”即可。2.2.2页面尺寸匹配手机屏幕建议开发人员在xhdpi下作图，因为这个尺寸在720像素×1280像素下显示完美，在1080像素×1920像素下看起来也比较清晰，且图片大小适中。并且在这个分辨率下，Android系统的像素计量单位dp与像素（px）之间的换算比较简单（1dp=2px）。安卓系统需要以iPhoneX的屏幕尺寸（750像素×1624像素）来进行开图，去除头部128像素的白色导航条。内容区域按照750像素×1448像素尺寸进行作图，重要内容（如按钮，重要的视觉原点等）不要放到非安全区域中，否则在进行前端布局时可能出现内容显示不全的情况。这时需要设计可裁切的部分来填充空白区域。iOS系统H5开图设计2.2.3优化设计细节有些H5页面在展示时，如果手机屏幕处于横屏或竖屏状态，页面的整体显示效果会很差，这时就需要设置相应的提示，告诉用户怎样浏览页面才是正确的方式。设置提示2.2.3优化设计细节在H5的分享页面中，如果没有进行分享设计，一般需要通过文案说明如何分享H5。这时可以通过创建一个浮层来引导用户点击分享，当用户点击分享按钮后，显示这个浮层，在这个浮层中可以加入H5主题元素，促使用户分享。设计分享浮层2.2.3优化设计细节H5中一般都会有“点击开始”“分享”“再看一遍”“查看详情”等按钮，如果在文案设计上只采用“开始”“分享”“返回”“查看详情”这样的文案，虽然表达上没有问题，但缺乏趣味性。设计师在文案设计上，应符合H5的主题。文案符合主题2.2.3优化设计细节用户在微信上观看H5时，虽然导航栏中提供了“返回”和“关闭”按钮，但这些按钮不一定适合所有的H5页面，有时点击导航栏中的“返回”按钮会直接退出H5。有些H5页面有多个层级，在较深的层级中应设计一个“返回”按钮，点击该按钮后即可返回上一层级。返回按钮设置2.2.3优化设计细节一般情况下，设计师最好把H5的页面数量控制在10页之内，但内容较多的H5往往会超过10页，这是就需要对H5做分段处理，如设置目录。分段设置2.2.3优化设计细节在影视剧中，往往会在片中增加一些隐藏的彩蛋，或者在片尾增加彩蛋，让观众觉得惊喜和快乐，以达到幽默、诙谐、富有情趣和意味深长的效果。在H5中同样可以增加一些彩蛋，以提升用户的好感度。增加彩蛋2.2.3优化设计细节在影视剧中，往往会在片中增加一些隐藏的彩蛋，或者在片尾增加彩蛋，让观众觉得惊喜和快乐，以达到幽默、诙谐、富有情趣和意味深长的效果。在H5中同样可以增加一些彩蛋，以提升用户的好感度。增加彩蛋2.2.4优化H5的性能加载优化01脚本执行优化02CSS优化03JavaScript优化04渲染优化05目录CONTENT开发H5的基本流程2.1开发H5的细节规范2.2打造爆款H5的策略2.32.3.1充电增值一般来说，用户都有强烈的求知欲，他们关注的东西往往是自己需要的、对自己有用的，如一些实用干货、生活技巧等，当用户认可了其价值性，对自己产生了帮助，就愿意分享到其他有同样需求的群体中。2.3.2娱乐消遣在网络推广中，有趣是很重要的一个吸引读者的因素，一些颠覆认知的内容、有趣的段子、出其不意的新鲜内容等总能备受用户的追捧。测试类H5是一种刷屏频率非常高的H5营销形式，主要以问答、评分、测试为表现形式，利用各种有趣的问题吸引用户参与问答，分享测试结果，从而产生裂变效应。2.3.3情感共鸣故事是吸引人类的艺术形式之一，通过沉浸式的体验来勾起用户的回忆，引起情感共鸣。2.3.3情感共鸣情感路线的H5容易让用户产生共鸣，这类H5一般会在节日期间推出，其主题也大都与节日有关，如母亲节，父亲节、七夕节等。当H5有了节日氛围的烘托时，其推广会变得更有意义，也更有效率。2.3.4利益驱使在H5中增加一些利益因素，能够调动用户自主传播的积极性。例如，通过分享领取卡券、礼品等方式，让用户主动把H5活动页面转发给好友，以获取一定的奖品或优惠。2.3.5自我展示互联网是一个社交型的舞台，用户可以在这个平台上展示自我。可以玩H5游戏得到高分，继而成为一种炫耀的资本；也可以自主输出内容，如海报生成类H5，邀请别人和自己一起创作传播内容，这类H5无须专业技术，傻瓜式的简便操作给足了用户自由发挥的空间。2.3.6创意创新构思新奇、富有想象力的H5能够吸引用户主动观看，也会使其乐于传播。2.3.6创意创新任何一个领域的技术创新都会对用户产生很大的吸引力，H5也不例外。2.3.7热门话题社会热点事件是指在社会上引起广泛关注、参与讨论，引发强烈反响的事件。相对于商家造势所形成的关注度来说，社会热点事件拥有更高的社会价值和更广泛的关注度，且更易被人们接受。因此，在制作H5时要善于抓住并结合当下的热点事件，利于话题效应让H5在短时间内火爆起来。2.3.7热门话题社会热点事件是指在社会上引起广泛关注、参与讨论，引发强烈反响的事件。相对于商家造势所形成的关注度来说，社会热点事件拥有更高的社会价值和更广泛的关注度，且更易被人们接受。因此，在制作H5时要善于抓住并结合当下的热点事件，利于话题效应让H5在短时间内火爆起来。2.3.8内容精致不论H5的形式如何变化，有价值的内容始终要放在第一位。H5的内容不仅要精致、优质，还要具备分享的价值，这样才能获得用户的关注，推动H5的传播。2.3.8内容精致不论H5的形式如何变化，有价值的内容始终要放在第一位。H5的内容不仅要精致、优质，还要具备分享的价值，这样才能获得用户的关注，推动H5的传播。2.3.9多样交互随着技术的发展，如今的H5拥有众多出彩的特性，让用户能够轻松实现绘图、擦除、摇一摇、重力感应、3D视图等互动效果。2.3.10风格统一在设计H5时，风格统一是一项基本原则。H5中各种元素的色彩、文案风格等要和谐、自然，所有细节设计都要符合整体的设计风格，这样才能带来高品质的用户体验。