h5创意思路(h5的劣势)

做一个好的缩略图，事半功倍。用户会点击一个H5，它与标题、缩略图和发布时间有关。一个醒目的标题可以吸引点击，一个醒目的缩略图可以引起人们的好奇心。
请在12点或22点释放H5H5。腾讯的《移动页面用户行为报告》给出了以下答案。
请将引流页放在首页或最后一页。H5页面首屏和末屏平均停留时间比中间页面长，按钮点击率更高，是放置引流页面的最佳选择。
合理的用户指南按钮命名值得学习。
尝试在三秒内渲染第一个屏幕。一般来说，74%的用户会在加载超过五秒后离开页面。
用户不耐烦了。首屏渲染越短越好。所以第一屏的体积一定要尽量减小。一般行业使用联通3G网络平均338KB/s(2.71Mb/s)，3秒内完成渲染，首屏资源不要超过1014KB。
大规模资源页面使用加载页面。如果不能保证3秒内第一屏，那就加一个有趣的加载页面进行预加载，等资源加载后再显示页面。虽然加载页面可以缓解用户等待的焦虑，但是时间过长也会导致用户的流失。所以，H5材料优化才是硬道理。
用单一颜色绘制。这是三张200*200像素图片的体积对比，第一张单色块，第二张垂直渐变，第三张对角线渐变。对H5来说，流畅往往比画面的精细更重要。
尝试将静态图像保存为png8。这是一张1M的图片被PS压缩成jpg，png8，png24的体积对比。需要补充的是，Png8最多只能显示265色，而png24可以有1600万。所以颜色单一时用png8，颜色丰富时用jpg，要求精度时用png24。
网站上有无损压缩图片。大家都知道——TinyPNG是业内口碑不错的——智慧图。
避免调整图片大小。根据需求上传相应大小的图片。避免调整大小，不宽于640像素(以手机屏幕一般宽度为准)，以免画质残留。
擅长用H5工具匹配多终端H5中的背景图像。宽度固定在640px，那么高度怎么搭配？如果你使用——ih5.cn H5生产工具，你可以解决它。打开ih5.cn，在舞台下添加【移动设备】功能，设置不同方案的高度，让案例根据终端设备自动跳转到相应的方案进行浏览。这种方法需要反复设计各种尺寸的图纸，可以称之为累死设计师的方法。
懒人设计师用3354按照最大的方案，也就是640*1040px，创建设计文档，然后添加移动设备，选择默认高度。设计文档的时候，记得把主要信息放在中间，重要的按钮尽量放在中间。
动态图的优化和重新优化是通过修改尺寸、质量、帧数等来实现的。而不影响动态图形的整体效果。
善用背景色属性。如果您使用H5工具编辑案例，以ih5为例。如果需要使用纯色作为背景或者其他情况，可以使用图形工具中的背景色属性或者舞台和页面的背景属性。
我们开发了大家都喜欢的H5音频标准格式：mp3，monorail，最好在30秒以内，最好文件大小控制在100k以内。
从上图可以看出，mp3文件大主要是因为比特率高。一般来说，64kbps对于H5背景音乐比特率是足够的。你可以使用AdobeAudition、format factory或一些音乐播放软件来编辑和压缩音乐。需要注意的是，作为无限循环的背景音乐，截取的时候一定要注意头尾的衔接，淡入淡出。
视频3分钟以内，使用H.264格式视频时长：3分钟以内。近几年流行的全屏视频，比如《薛之谦史上最疯狂的广告》(腾讯出品，2分51秒)，都是为了避免高跳出率。格式：MP4、h . 264h . 264编码后生成的视频文件体积小，画质好。蓝光技术和几乎所有的高清相机都采用这种格式。在保证基本清晰度的前提下，用format factory等软件压缩。视频宽度也是640px。尺寸越小，体积越小。
不要滥用网页字体。一般浏览器只支持部分默认字体，如宋松、微软优雅黑、中文细黑，英文如Helvetica、Arial、乔治亚、时代。H5使用其他字体，需要下载、解析并在当前页面上重新绘制。尽量减少使用，或者直接把文字转换成图片再导入。但在ih5中，如果使用中文字体组件输入文字，实际上是自动将文字变成图片，就不需要担心这个问题了。
可重用元素H5经常使用相同的元素，如按钮、箭头等。在生产过程中。我们可以在iH5编辑阶段直接复制或者直接填充复用元素的连接，这样就不用重复插入图片，节省案例内存，提高流畅度。图片属性面板记录资源位置。
H5有必要多使用动态效果，少使用时间轴动态效果。以ih5为例，可以通过使用动态效果、时间轴和幻灯片工具来实现动画效果。
用画布优化动态效果
用逻辑优化H5
遵循用户操作习惯腾讯《移动页面用户行为报告》公告：大部分用户习惯滑动切换，放在左边的按钮点击率较低(大概大部分是右撇子)。
用户习惯于跟随在前一屏幕中学习的操作行为。如果当前操作不同，则需要对它们进行提示。
用很多手机特别是苹果手机小心向右滑动。向右滑动容易触发返回“上一页”的效果。
小心横屏横屏需要用户设备开启屏幕旋转功能才能正常观看，用户操作成本较高(很多安卓手机往往对横屏没有反应)。不同屏幕的手机，长宽比不一样，很难呈现出最佳的视觉效果。
谨慎的输入行为或者复杂的交互行为都会导致用户流失。用户是没有耐心的，如果非要输入，想办法改成自己选择的形式就好很多了。比如ih5平台的设计师五角叔的作品《你，有什么资格睡觉》，就把一些输入行为变成了选择行为。它可以为每一个测试类H5借鉴。
当需要同时控制多个对象时，控制父对象比逐个控制要好。比如在ih5中，需要在其他索引位置进行运算模式，可以在目标坐标中加入父对象，借助父对象减少运算；比如可以在父对象中设置碰撞，减少碰撞事件的计算，添加到画布中的碰撞会平滑很多。