【新手指南-新H5编辑器】制作流程及相关操作指南

使用模版来制作自己的H5,可以更加快速创建作品。小MA哥将在本指南中展示使用MAKA平台快速编辑制作H5的步骤。

 

Step1 - 注册与登录账号

 

1.电脑登录MAKA官方平台(建议使用Chrome浏览器):www.maka.im, 点击右上角的【注册/登录】按钮,手机扫描二维码在注册登录。


blob.png

 

Q1:使用邮箱/手机号码注册的用户如何登录?

A1:点击右上角的【注册/登录】按钮,点击【使用其他方式登录】,确保登录原账号。


Q2:如果旧用户登录的时候忘记密码怎么办?

A2:可以点击【使用其他方式登录】,选择【忘记密码】重新设置登录密码。

 

 



Step2 - 选择和使用模版

 

1.登录MAKA账号后,点击首页上方的【H5模版】进入商城页面,或登录登陆www.maka.im/store进入。

 

2.在MAKA模版商城根据需求筛选模版,将鼠标移动至对应的模版封面上,点击【马上使用】。模版具有完整的行业结构逻辑,只需进行小小的改动即可立刻传播。

 

3.如果是免费模版,预览后直接点击【立即使用】即可。如果是付费模版,预览后点击【立即购买】,选择支付方式(余额/支付宝/兑换券)后点击【确认支付】购买模版即可。

 


Q1:如果筛选不到想要的模版怎么办?

A1:可以尝试在搜索栏输入关键词查找模版。

 

Q2:已购买的模版有使用期限吗?

A2:已经购买的模版是可以无限期使用的。

 

 

 

Step3 - 编辑文本

 

1.如果使用模板,点击文本框,显示为“文本”属性,直接双击文本编辑内容即可。

2.如果要新建文本,右侧导航栏【新建文本】,点击对应的样式可添加至画布,双击文本框可在编辑文字内容。

3.点击文本框,可在右侧栏修改包括字体大小、颜色、粗细、斜体、下划线、行距、透明度、阴影、旋转、对齐以及位置。还可以直接伸缩、拖拽文本框改变文本框位置,来调整文本的整体的风格和内容。

4.如果使用模板,点击文本框,显示“更换图片”。则该文字内容为图片格式。且如果想要更多的字体效果,小MA哥推荐一个自由生成艺术字的网站: http://www.qt86.com/。点击进入,在文本框输入需要展现的文字;择字体样式,大小,颜色,选择背景透明;点击【生成】下载到电脑中,就能作为图片上传到MAKA。

 

Q:为什么有部分文字不能修改?

A:这是设计师在将文本转为图片格式制作模版,点击文本,如果显示“更改图片”则需要添加文本或上传其他文本内容的图片来修改。

 

 

 

Step4 - 使用图片和形状素材

 

1.点击右侧导航栏【素材】,可点击相应的分类,再点击选择素材,即可添加素材至画布。

2.若想上传自己新的图片到素材库,点击【我的】-【+上传图片】从本地上传到图片库。选中想添加的图片,单击右下角【确定】,即可添加图片至素材库。

3.若想添加MAKA提供的矢量素材,可点击左侧导航栏【素材】-【形状】,单击画布中的形状,在右侧栏可更改形状的颜色、透明度、旋转、对齐、大小和位置。

 

Q1:可以上传什么格式的图片?

A1:jpg、png、gif格式的图片都可以上传。

 

Q2:为什么形状的素材可以修改颜色,自己上传的图片不可修改?

A2:形状内的所有素材为SVG格式,即可修改颜色,拉大缩小尺寸也不会模糊。

  

Q3:【我的】上传图片和【背景】的上传图片有什么不同?

A3:在【我的】-【上传图片】为上传普通配图或元素素材,在保证清晰度的前提下建议上传200KB以下的素材。【背景】当中的素材仅作为背景图片使用。



Step5 - 添加编辑器自带的固有版式


1.点击左侧栏中的【版式】。您可以利用版式页面快速定位和创建新页面,非常方便。

2.根据需求选择分类,在弹出的版式中,点击需要使用的版式,当前页面就会变成您选择的页面版式,就能使用和继续编辑该页面的版式。






Step6 - 调整页面和编辑背景

 

1.在画布左侧,可按需求点击【复制该页面】和【删除该页面】,或点击【上移一页】、【下移一页】调整页面顺序。


2.点击左侧导航栏【背景】,选择其他背景图片、纹理背景、上传本地图片作为背景,还可以裁剪图片,添加背景颜色,调整透明度。如果想调整背景,可以先点击画布背景,在右侧样式栏重新调整背景图片。如果想将此背景应该到整个H5场景,可点击【将背景图片应用到所有页面】。

3.点击对应的翻页效果,可添加使用该翻页,并在右上方的【预览】中查看效果。

 

Q1:可以每一页使用不同的翻页效果吗?

A1:为保持作品的美观和统一协调性,一个作品可以使用一种翻页效果。

 

Q2:H5页面背景的尺寸是多少?

A2:背景的尺寸为640*1008。

 

 

 

Step7 - 添加背景音乐

 

1.点击画布背景,右侧样式栏选择【全局】。“背景音乐”模块下,有音乐列表,对于不同风格音乐都有描述。点击音乐旁播放按钮试听,直接点击音乐名字就可以把音乐添加进作品。

2.如果想上传自己的音乐,点击【+上传音乐】,即可上传自己喜欢的音乐。上传的话需要小于2M的MP3格式的音乐。

详细内容可参考>>>如何转换音乐的格式和大小?

 

Q1:怎么实现音乐的自动循环播放?

A1:添加的背景音乐默认为自动并循环播放。如果添加音乐后不会自动播放,首先建议您确认一下手机是否开了静音模式,或调整音量大小;另外,切换一下网络,排除网络不稳定从而影响到音乐载入的情况;若同一个作品在安卓手机能自动播放而在iPhone不能,请确认这首背景音乐是否在苹果设备上兼容。

 

Q2:怎么取消模版中的背景音乐?

A2:点击画布背景,右侧样式栏选择【全局】,点击音乐右侧的【X清除】按钮即能取消背景音乐。

 

 

 

Step8 - 设置元素的动作

 

1.在画布中点击要设置动作的元素,然后在右侧的样式栏里设计动作效果。

2.除了动作设计之外,还可以通过设置“速度”以及“延迟”的时间来设计这个动作的具体效果。

“速度”是指元素完成整个动作需要的时间长度;

“延迟”是说翻到这个页面之后,什么时间这个元素开始动。

通过设置“延迟”,可以调整元素的出场顺序,延迟时间越短的元素出场越早,反之亦然。

 

 


Step9 - 添加报名表单等互动功能


1.可点击导航栏的【互动功能】,点击【表单】样式添加至画布。并在右侧样式栏修改和编辑报名表单,用于收集用户报名的信息。查看报名表单详细教程

2.插入更多功能,可点击导航栏的【互动功能】(点击查看互动功能详细教程),点击对应的链接组件可在画布中会直接新增。包括拨号组件(一键拨号)、图组(添加多张浏览图片),投票(添加投票选项),接力(激励用户分享传播),跳转链接(一键跳转外部链接),地图(定位导航),视频(添加视频窗口),抽奖(企业可激励用户传播并发放福利)。

4.点击画布中的组件,可在右侧编辑页面修改组件内容,比如说按钮的文本内容背景和颜色,链接内容,增减选项,更改地址等等。 

 

Q1:添加视频需要注意什么?

A1:添加的是视频的通用代码,不是播放地址,切勿复制错误。

 

Q2:可以添加哪个视频网站的视频?

A2:可添加开放了复制视频通用代码的3家主流视频平台:优酷、土豆、腾讯视频的视频。

 

Q3:如何使用抽奖功能?

A3:开通企业版后可以开启抽奖功能的使用权限,http://maka.im/expense

 


 

Step10 - 预览保存和分享作品

 

1.H5作品编辑完成之后,点击右上角【预览】保存,系统会弹出作品二维码页面,用户可以点击【更新封面】修改作品封面,点击输入框编辑作品题目和作品简介,让作品更容易被传播分享。


2.在预览页面中,手机扫描二维码可预览作品,复制作品链接至微信好友或朋友圈可分享该作品。

 

Q1:怎么复制二维码图片?

A1:可通过拖曳二维码图片实现复制到本地,或使用截图截取。

 

Q2:点击保存按钮后加载很久或提示无法保存怎么办?

A2:如果出现这种情况,应该是网速问题或者是长时间没有保存。可以该页面重新打开编辑试试,为了防止制作的内容丢失,建议养成随手保存的好习惯。

 

 

 

Step11 - 查看作品流量和访问数据

 

1.在官方平台首页,点击右上角的【作品管理】,进入作品管理页面。

2.在作品列表中点击想要查看数据的作品栏右边的【数据统计】,进入作品数据页面。

 

3.选择查看的数据,包括数据总览传播数据(PV、UV和分享数据)、访客分析(微信内的访问来源比例、设备分布、地区分布),以及表单收集(带有报名表单组件的作品可在此查看表单收集到的用户信息)。

4.点击数据总览页面右上方的【导出excel】可将页面的数据导出表格,进一步统计分析。

 

关于数据查看的问题,一起来研究一下吧!~

Q1:什么是唯一身份访问者?

A1:唯一身份访问者表示在指定当天内不重复(仅计数一次)的访问者。如你今天多次访问你的作品,但只计算一次唯一访问次数。

 

Q2:服务器数据流量是什么意思?

A2:你的作品每次被阅读都会消耗服务器数据流量,例如你的某一项目(图片+背景音乐素材)大小为10MB,体验用户50GB数据流量约可以传播5000人次/月。

 

Q3:看不到作品的访问数据?

A3:你在点击【查看数据】后,系统会实时为你刷新并加载最新的访问数据,如遇较多用户同时查询,你的数据将会在稍后时间才能进行更新,请你耐心等待一天后再查看数据。