欢迎访问融科网络!我们专注于郑州网站建设郑州网站制作郑州网站设计郑州做网站等相关服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行

建站知识Website Construction

郑州网站建设总结的一些H5页面制作技巧与规范

作者:融科网络 | 点击:
03

2017
01

导语
H5页面越来越受大家欢迎,使得市面上的H5层出不穷,但是就是因为市面上H5页面的越来越多,使得H5页面的一些规范被忽略掉,融科网络为大家总结一些H5页面制作技巧与规范.
 
 随着H5技术的不断应用,H5页面越来越受大家欢迎,使得市面上的H5层出不穷,但是就是因为市面上H5页面的越来越多,使得H5页面的一些规范被忽略掉,今天,郑州网站建设小编花了大量的时间和心思为大家总结一些H5页面制作技巧与规范(大全)!
一、H5页面制作规范
1、交互:慎用向右滑动的操作方式。慎用向右滑动的操作方式原因:苹果手机上,向右滑动容易触发返回“上一级页面”效果。
2、交互:慎用横屏展示效果。慎用横屏找事效果原因:体验上,需要用户设备开启屏幕旋转功能,才能正常观看,用户操作成本高。对不同屏幕的手机,长宽比例不一,难以展示*佳的视觉效果。
3、视觉:功能按钮等,远离页面底部(大概128px,这个尺寸不是固定值),具体看重构采用什么适配方式(仅供参考:640*1136 px,从上往下计算,主要内容在1008px内)。原因:更好的设备各种屏幕的手机,避免按钮被挡住。
4、视觉:慎用“光线叠加效果”或PS里面的“图层样式”效果。如:给图层加个“柔光”、“滤色”、“色相”等等效果,除非这个视觉元素可以合并为一体。原因:给重构挖坑,导致不好切图,无法还原视觉效果。
5、视觉:矢量图? 想做简单的动画? 导出SVG格式试试! 原因:能减少体积的事,为什么拒绝呢……
6、动画:尽量避免全屏动画,优先考虑局部动画的方式。如:各种粒子效果全屏飘过等。原因:如果呈现的视觉效果无法用代码实现,就意味着要用全屏尺寸的序列帧来处理,体积上会飙升,影响加载体验。
7、动画:序列帧压缩小技巧,静态的画面,保存较高质量。中间运动的模糊状态,大胆的压低画面质量吧。原因:压缩体积,运动状态就算有锯齿也不明显。
8、重构:图片请上“tinypng.com”,压缩下,有效减少体积。原因:额,这个也要说原因?好吧,偷偷告诉你,现在这网站不止可以压缩png,还可以压缩jpg,更重要的是……支持批量下载了!
9、重构:音乐请压缩下,能大大减少整体的体积。技巧:如果没有特殊要求,可以考虑弄成单声道音频文件,比特率48或更低就行了。
10、重构:安卓机不支持多个音频同时播放……意味着无法背景音乐跟音效同时播放!
11、重构:视频无法自动播放,首次播放需要用户点击触发
12、重构:测试请多留意“魅族”手机和华为P6/P7等,屏幕底部采用虚拟按钮的手机。设备容易出问题。
 
二、H5页面制作技巧
1.故事化
H5本身是一个信息承载和传达的工具。讲故事是让信息快速传达的*好方式。你要将品牌故事融入H5,借助H5的技术优势将品牌价值文化理念传达给用户,让其**的记住你。H5融入场景一是让用户能在参与中,找到熟悉感以更容易的接受里面的信息,而是场景承载的品牌信息,用户在特定场景里,唤起他们的认知,从而加深用户对品牌的印象。
 
2、CSS3时序错开渐显动画
  这是一种比较常用的动画,它的优点是节奏感强,做法就是先让每个元素隐藏,然后当页面呈现后每个元素错开时间出现。
3、如果时间紧凑,又不像桑尼一样擅长于动画细节,可以使用一些辅助工具:
  Animate.css,通过直接预览选择想要的动效,然后下载它的CSS把对应的keyframe扒下来就好了(引用整个CSS是资源浪费)。
4、 动效前期跟前端设计师进行沟通,讨论页面中元素的动效呈现。例如一些元素的位移,旋转,翻转,缩放,逐桢,淡入淡出,粒子效果,照片处理等等,还有3D展示效果。 (www.ppssdd.com这个网站里有h5所能实现的效果), 背景动效其实比较推荐缓动效果,如“网站制作案例”的例子里星空中一闪而过的流星,间歇性出现不抢主角风头再好不过了,复杂多变的动效不一定是好的,要考虑到加载速度等用户体验问题。
5.话题性
想要你的H5专题页一夜爆红,*时间抓住热点并火速上线,借机进行品牌宣传也不失为一条捷径。注意借势营销具有很强时效性。要分清主次用热点去推广产品。
6.流畅性
随着技术的发展,如今的HTML5拥有众多出彩的特性,让我们能轻松实现绘图、擦除、摇一摇、重力感应、吹起、3D视图等互动效果。但是切记实现动效的前提是保证流畅性。有些流畅性可以通过动效进行掩盖,但有的时候动效可能会影响画面的流畅性,所以产品经理要根据具体情况具体对待。
目前这些制作H5页面的技巧很多,在这里,郑州网络公司小编列出一部分供大家参考,也欢迎大家在下面留言谈一谈你的建议!
郑州融科网络专注于企业网站建设、网站制作、高端网站设计,郑州荥阳、上街做网站就找融科网络!
本文章网址:http://www.ppssdd.com/website/134.html。转载请保留出处,谢谢合作!

上一篇:网站策划方案在网站是否成功中占有很大的部分

下一篇:网站内容建设:做浏览者喜欢的内容

  • 网站建设咨询
  • 网站建设案例
建站流程
  • 网站需
    求分析
  • 网站策
    划方案
  • 页面风
    格设计
  • 程序设
    计研发
  • 资料录
    入优化
  • 确认交
    付使用
  • 后续跟
    踪服务
  • 151-3895-5886
  • 品牌网站建设定制
  • 营销型网站建设定制