必备!H5场景制作流程

分享到:

  H5场景制作包含多个步骤,创建者在构建时,不能省略一个步骤,今天,凡科微传单就来和大家探讨一下H5场景制作流程。


  一、新建H5微场景


  (1)登录后台管理系统,单击“凡科微传单-微场景设计”,进入微场景主界面。


  (2)单击“新建空白微场景”,进入新微场景的编辑界面。


H5模板


  二、设计微场景


  为了使演示更加直观,我们隐藏了编辑界面的网格线。


  1、微场景设置


  基本信息设置(设置微场景的标题,SEO关键字和SEO描述);


  访问权限设置(设置微场景的访问权限);


  共享设置(共享微场景时设置图像和ICON图像);


  微场景的音乐设置(“打开微场景时将播放音乐”和页面切换器设置“打开微场景后可以在右侧显示页面切换状态”);


  全局头/尾码(输入代码以控制微场景,此操作需要一定的代码知识);


  单击“保存”完成场景设置。


  三、页面设置


  1、整体设定


  (1)基本选项(复制到剪贴板:复制页面,在另一个微场景页面上按“Ctrl+V”粘贴模块;页面名称:用于页面名称);


  (2)页面样式:


  页面背景:有图像背景(以图像为背景),纯色背景(以纯色为背景),渐变背景(以两种或更多种颜色的渐变为背景)和纹理背景(以可变颜色的纹理为背景);


  上下左右边框:设置页面上下左右边框线;


  圆角:设置页面上下左右圆角;


  (3)旋转页面(旋转页面,倾斜等操作,一般不需要设置)。


  2、关于(请参阅此页面上的相关信息)


  单击“保存”以完成页面设置。


  四、设计页面


  1、添加组件(此处以设置为红色的页面背景为例);


  2、组件修改(更改组件中的图像,文本和超链接);


  3、将组件拖动到适当的位置(您可以单击右上角的“更多”进行快捷操作,例如水平居中对齐,左对齐等),并调整组件的大小(宽度和高度)组件的数量不应超过电话界面上的虚线框,并且超出的部分不应显示在页面上);


  4、组件的层次设置(如果组件和组件之间存在屏蔽,则可以改进组件的层次结构以使其更易于操作):


  方法1:拖动左侧组件列表中的相应组件以提高或降低组件级别(随着级别的变化,右侧组件的遮挡也会实时更改)。


  方法2:单击相应的组件,然后单击“上移”或“下移”以提高或降低组件级别。


H5场景制作


  5、为组件设置动画(有三种基本动画,自定义动画和共享动画)


  (1)基本动画:走马灯、720°全景、画中画、一镜到底等;


  (2)自定义动画:个性化设置动画路径,动画节点时间;


  (3)共享动画:选择共享动画。


  其余页面可以用相同的方式创建,但我们在此不进行演示。


  五、保存并预览微场景


  1、保存微场景(创建所有页面后,保存微场景并完成微场景的创建);


  2、预览微场景(在手机界面中预览微场景)。


预览H5


  关于H5场景制作步骤和如何制作H5页面,凡科微传单便分享到这里了。

本文为凡科微传单原创文章,转载请标明出处:https://cd.fkw.com/news/25523
相关模板推荐
  • 720°全景×五一劳动节全场钜惠
    ¥49
  • 720°全景×五一劳动节促销宣传
    ¥49
  • 720°全景×六一儿童节卡通玩具促销
    ¥49
  • 电商风情人节促销活动
    ¥49
  • 电商风母亲节营销电商零售促销活动
    ¥49
  • 五一促销活动
    免费
  • 五一劳动节产品促销宣传
    免费
  • 谷雨节气宣传
    免费
  • 走马灯x插画风感恩母亲节邀请函
    ¥49
  • 快闪×五一大型商场活动宣传
    ¥49