H5页面微场景制作入门教程—20150714版本
H5页面微场景制作入门教程(共34张)
表单（也叫信息收集表、报名表、信息反馈表等）是场景创建者用 来收集查看场景的用户反馈信息的重要工具。可点击(diǎn jī)“表 单”创建也可直接在互动模板里直接快捷创建。
第23页，共34页。
【设置动画】
动画设置主要应用于：文字(wénzì)、图片、图形、一键拨号、输入框等组件 设置方法：点击组件→选择“动画”→进入动画设置页面
方式
第32页，共34页。
制作 小窍门 (zhìzuò)
资料准备全，图片要清楚
文字要简洁，重点更突出 制作很简单，就看熟练度
场景有创意，谁也挡不住 愿您出佳作，祝君展宏图
第33页，共34页。
分享 经验 (fēn xiǎnɡ) 共同成长
感谢您的聆听
第34页，共34页。
也可点击“上传”上传图片到“我的背景”库
第15页，共34页。
背景 编辑 (bèijǐng)
→背景创建后，点击编辑栏上的背景齿轮，即可对背景进行 编辑。 →背景编辑主要包括：剪切、更换、效果（放大、缩小）、删除。
第16页，共34页。
点击(diǎn jī)“音乐”即可创建【背景音乐】
1.【音乐库】为官方提供的音乐素材 2.【外部链接】插入网络音乐链接 3.【我的音乐】自主上传音乐
组件是构成场景的基本要素
1.文本 2.背景 3.音乐 4.视频 5.图片 6.形状 7.图集 8.互动 9.表单 10.特效
第13页，共34页。
1.点击“文本”后 →即可创建 2.单击文本框
→出现(chūxiàn)编辑菜 单
3.双击文本框
→进入基础编辑
第14页，共34页。
点击(diǎn jī)“背景”后，选择“背景库”中的背景图
H5页面微场景制作触发功能制作教程
总结：触发逻辑
1.一个组件只能触发其他组件无法触发自己 2.一个组件可以触发多个组件，也可以被多个组件触发 3.被其他组件触发的组件还可以再触发其他组件
第二步：添加“动画”
点击想要触发的组件，并选择触发方式
第二步：添加“动画”
点击想要触发的组件，并选择触发方式
触发方式
1.显示：组件先不出现，点击触发源后从无到有 2.隐藏：组件先出现，点击触发源后从有到无
第三步：确定触发设置
当触发设置后 点击除组件外的其他阴影区域 即可完成触发设置
哪些组件可以设置动画
H5页面微场景制作教程
H5动画设计触发功能指南
触发：在H5页面中，点击一个文字/图片，让其他文
字/图片出现的一个功能。使用触发可以做出与用户互动效 果的H5页面，十分好玩、实用。
扫描二维码 体验一下场景中的触发应用
接下来 进入触发制作过程教学
第一步：调出“触发”
点击图片/文字→选择“触发”→添加触发 →选择触发内容（界面元素/随机图片） →点击元素添加需要触发的元素
H5制作流程
b. 一般情况下用640X1136进行设计；其他 安卓机器前端切图时可以适当拉伸，变化 不会太大就不用每个进行适配（来自腾讯 大讲堂）
整理ppt
7
▍H5版式-其他
a. 字体默认中文字体 Heiti SC ，中文名称叫 黑体-简，一般用华文黑体来代替，两者差 异微小；默认英文字体 Helvetica Neue LT ；字号选择不要小于18号，其他字号双 数，同种类别下用同一样字号
总结报告型
各大企业的年终总 结现也热衷于用 H5 技术实现，优 秀的互动体验令原 本乏味的总结报告 有趣生动了起来
整理ppt
11
▍活动运营型
如今的 H5 活动运营页需要有更强的互动、更 高质量、更具话题性的设计来促成用户分享传 播。从进入微信 H5 页面到最后落地到品牌 App 内部，如何设计一套合适的引流路线也 颇为重要。
例：《圣诞老人拯救计划》
整理ppt
20
肆：H5网页编辑工具
整理ppt
21
▍秀米秀制作
秀米在公众平台的图文排版上 可是名声远扬。和秀米的图文 神器一样，秀制作目前也是免 费的，提供多种模板，傻瓜式 操作，可以外链，可与秀米图 文排版双剑合璧
h5作品制作方法和过程
h5作品制作方法和过程
首先，在开始h5作品制作之前，作者需要明确自己的项目目标。
要想制作出优秀的
h5作品，首先要对作品的核心理念和交互功能有一个清晰明确的把握，要明确作品的定位、用途和技术要求。
其次，分析和设计h5作品的功能模块，作者需要根据作品的目标用户，结合项目的
目的，画出一个概要草图，根据概要草图来分析并设计出h5作品的各个交互环节，这些
交互环节对应的功能模块应该有哪些，以及每个模块内部的子功能设计，并且要经过大量
的用户体验测试，以确保h5作品的功能丰富，用户体验佳。
再次，建立作品的设计稿和流程脚本，作者要根据上述设计分析出来的功能模块等，
建立设计稿和流程脚本，用以详细描述出h5作品各个功能环节和每一步的操作过程，并
且把详细设计文档以及hi-fi设计稿绘制出来，供开发者按照这些文件来制作h5作品。
最后，精雕细琢h5作品，开发者根据设计师提供的设计文档和设计原型，严格按照
前面的流程来制作h5作品，从布局到样式，从交互特效到动画优化，要一步步细致的来做，最终要完成一个精美的h5作品。
H5页面设计初级案例教程：常用操作
元素或动画的复制与粘贴
我们想再次使用同一个元素时，可以在该素材右击，选择复制元素，然后在画布上右击，选择粘贴元素即可；
同样的，我们想再次使用之前已设置好的动画时，可以在在该素材右击，选择复制动画，然后在另一个上右击，选择粘贴动画即可。
移动画布的位置
我们在制作的过程难免会遇到画布的位置不是很理想，增大了制作的难度，可通过两种方法解决：
方法一：鼠标滑动到画布上时，画布的右上角会出现一个可拖动的按钮，点
击拖动即可；
方法二：鼠标放置在画布上，按住键盘上的空格键，点击画布进行拖拽即可。
调整层叠次序
按住图标可以调整组件上下层级关系
点击图标可以切换到指定元素的属性编辑面板
组件暂时隐藏
点击图标可以显示或隐藏组件
组件动画复制／粘贴
右击组件可以复制粘贴动画
页面复制粘贴
在左侧页面列表上右击可以复制粘贴页面
素材／动画／页面复用
我们可以将素材、动画、页面导入到库，方便下次可以直接使用。
意派Epub360-专业H5设计工具 意派Coolsite360-专业响应式网站/微信小程序设计工具。
手机h5页面制作教程
手机h5页面制作教程国内H5页面制作工具评测，iH5排第一当前，H5页面制作工具的各种排行榜与评测文章花样百出、各执一词，却都没有明确依据。
国内的大多评测与利益集团亲密相关，说白了是抬高自有品牌、贬低竞品的工具，因此本文尽量通过可量化的指标，保证评测结果的可信度。
首先须明确，国内的H5页面制作工具，一般指用于HTML5页面可视化开发的在线编辑器，基本目的为生成可用于传播的HTML5网页。
因此，无论不同工具在功能上有多少差异，基本面对作品的一键发布与即时投用，制作流程如下：这与国外存在很大差别。
美国也有H5页面制作工具，但多为离线软件形式、成品是打包的文件夹，功能应用上专用性也较强。
比如Adobe Edge和Tumult Hype偏向网页动画、Google Web Designer偏向广告设计、Construct 2偏向嬉戏制作，制作流程如下：评测以工具功能与性能为主，包括多媒体功能、高级应用、微信应用和用户友好度四个指标（各5分，总计65个参数），总分20分。
有意思的是，诸如初页、MAKA这些在H5界“盛名”的H5页面制作工具，并没有排上名次，评测得出排行榜单如下：第1名 18星半多媒体支持★★★★☆微信应用★★★★☆高级应用★★★★☆用户友好度★★★★★iH5综合性能最强，各项指标的得分均比较高，品牌展现、动画、嬉戏、建站均适用，主要面对企业用户。
因为免费，也不少像我这样的小散户用iH5玩玩票。
多媒体文件支持方面，iH5是唯一同时支持图片（JPG、GIF、ZIP、PSD等）、音视频、网页等的上传，并允许用户在生成页面中重设文件属性的编辑器，拓展性高。
总的来说，iH5目前有超过10项高级功能的可视化是业内独有的，包括：（1）绘画（2）横幅（Banner）（3）画布（4）物理引擎（5）运动模拟与监测（6）智能语音识别（7）轴动画（8）响应设备（9）跨屏互动（10）数据库（11）变量绑定（12）数据运算等的可视化，也支持红包、支付、录音、拍照上传、猎取用户个人信息等微信功能。
h5入门教程
h5入门教程H5（HTML5）是一种用于构建和展示内容的语言，它的出现为网页开发带来了许多新的功能和特性。
本文将介绍H5的基本概念、主要特点和入门教程。
H5是HTML的第五个版本，它在之前的HTML版本基础上进行了扩展和改进。
H5与之前版本最大的不同之处是引入了许多新的元素和API，这些新功能使得开发者可以更加方便地制作复杂的Web应用程序。
H5还提供了更多的多媒体支持，包括音频、视频和画布等元素，使得网页的交互性和视觉效果得到了极大的提升。
想要学习H5，首先需要对HTML和CSS有基本的了解和掌握。
如果你是初学者，可以从学习HTML和CSS开始。
一旦你对HTML和CSS有了一定的了解，就可以开始学习H5了。
在学习H5的过程中，可以首先关注以下几个重点：1. 了解H5的新元素和标签：H5引入了许多新的元素和标签，包括`<video>`、`<audio>`、`<canvas>`等，可以用来展示多媒体内容和绘制图形。
学习这些新元素和标签的使用方法可以为你的网页增加更多的功能和互动性。
2. 熟悉H5的API：H5提供了许多新的API，用于操作多媒体内容、进行本地存储、进行绘图等。
学习这些API的使用方法可以帮助你更好地控制和操纵网页的元素和内容。
3. 掌握H5的样式和布局：H5引入了一些新的样式和布局属性，如圆角、阴影、弹性布局等。
学习这些属性的使用方法可以使你的网页在视觉上更加吸引人。
4. 学习响应式设计：H5提供了一些新的特性，如媒体查询、弹性图像和弹性视频等，可以帮助你创建响应式的网页。
学习响应式设计可以使你的网页能够在不同的设备上自适应。
5. 实践和项目：学习H5最好的方式是通过实践和项目来巩固所学知识。
可以尝试制作一些小的网页和应用程序，逐步提升你的技能和经验。
总结起来，学习H5需要对HTML和CSS有基本的了解，然后可以通过学习新的元素和API、掌握样式和布局、学习响应式设计以及进行实践和项目来逐步提升自己的技能。
H5页面微场景排版技巧
方法
了解了基本的版式，我们再去了解排版中需要注意的几个问题。首先是对于版式的选择， 你如果拿到一份客户的要求而没办法想出接下来可以用哪些方式去排版，显然是作为设 计师而言不太光彩和合格的事情。我在上边的例子中也写到了，不同的情况下可以应用 不同的版式，而所谓的不同情况大多数时候有这么几种，字少图少，字少图多，字多图 少，字多图多，字图均衡。其次就是如何应用，版式是一种飘渺的艺术，理论形式固定 但表现形式多样。当你手法纯熟了，怎么摆放都会很好看，而在刚开始练习的阶段，我 们还是最好注意好排版中需要严格遵守的一样东西——留白 留白很多大师都讲解过，分析过，大部分来说比较宏观，都是跟意境挂钩，我再去说重 复的东西没意义了，我要说的是几个细碎的留白问题，首先我要否认很多人认为留白就 是要做简约风的印象，其实留白无处不在，简约风只是留白更宏观的定义而已｀｀｀
版式
• 首先我们需要了解版式，我们平时制作或看到的版式大部分都是—— 中心型.中轴型.分割型.倾斜型.骨骼型和满版型为主
中心型排版，利用视觉中心，突出想要表达的事物——当制作的图片没有 太多文字，并且展示主体很明确的情况下建议多使用中心型排版。中心排版具有 突出主体，聚焦视线等作用，体现大气背景可以用纯色，体现高端背景可以用 渐变色 Nhomakorabea斜型排版：
通过主体或整体画面的倾斜编排，使画面拥有极强的律动感，刺激视觉
当制作的图片中要体现律动性，冲击性，不稳定性，跳跃性等效果，可以使用倾 斜型排版。倾斜排版可以让呆版的画面爆发活力和生机，当你发现自己图片过于 死板或僵硬时，尝试让画面中某个元素带点倾斜，会有出奇的效果
骨骼型排版
通过有序的图文排列，使画面严禁统一，具有秩序感—— 当制作的图片中，文字较多时，通常都会运用到骨骼型排版。骨骼型排版方式是 较为常见的排版方式，清晰的调理和严谨性让画面平稳，是一种不会出现的错误， 但是比较单一的排版方式，有些时候为了打破骨骼型的单一和平稳，我们也可以 应用下图第三张的形式，在规整的排列中加一些律动强烈的素材
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
特效组件是给某一个页面加上一个特殊的效果。
点击“特效”即可为当前页面选择合适的特效
很重要
特别重要
“保存”只是对操作进行保存，如果不点击
“发布”此场景未发布的编辑内容，在场景 分享出去时，别人看不到最新编辑的内容。 点击“退出”则推出编辑页面。
点击发布后，可获得场景二维码、场景连接和 更多的一键分享方式。
H5页面微场景制作 入门教程
入门了，一切都变得很简单！
制作者：刘艳君
制作小提示
• 制作H5场景推荐使用谷歌浏览器 • 也可在手机上下载制作工具客户端，在手机上进行制 作
H5场景制作与运用流程
1 2 3 4
资料
场景
发布
信息
准备
制作
宣传
收集
制作前，准备好4个资料
创意：
展示什么，用什么方式
无需注册，直接点击图标， 使用微信或者QQ进行登录。
创建场景
点击右上角 创建场景
【套模板】选择一个模板，把模板中需要修改的地方修改即可快捷制作。
【自主创建】点击“+”进入自主创建，一页一页创建场景。
场景名称
填写名称 后期可改 点击选择 为了自己 管理方便
填写完毕 点击创建
制作页面
页面模板
在易企秀制作页面的左侧栏， 易企秀官方为大家提供了分 门别类的“页面模板”，在 制作场景的过程中，可以参 考或者直接套用页面模板进 行场景创建。 自己制作的页面，也可以保 存为“我的”模板，以供下
次使用。
企业账号将自己的场景设置 为“企业页面模板”，子账
号可以直接使用。
右侧的“页面管理”
【设置动画】
动画设置主要应用于：文字、图片、图形、一键拨号、输入框等组件
设置方法：点击组件→选择“动画”→进入动画设置页面
制作小提示
• 点击预览图标，即可对此页面的
动画设置进行整体预览。
设置是对场景的基 本信息进行设置， 主要包括：场景封 面、场景名称、场 景描述、翻页方式。 点击“场景共享” 和“友情展示”下 拉键，可参加易企 秀官方活动和尾页 设置。
5大管理操作
1. 复制：点中条框，点击“复制” 2. 我的模板 ：点中条框，点击“我的
复制”，出现在左侧“页面模板”中， 可删除
3. 删除：点中条框，点击“删除” 4. 移动：点中条框，可上下拖动
5. 添加：点击“+”，添加一页
10个基本组件+设置+发布
组件是构成场景的基本要素
1.文本 2.背景 3.音乐 4.视频
图片：
提前备好，视觉效果好
文字：
准备充分，具有感染力
免费注册易企秀账号
进入官网后点击右上角“注册”
1.邮箱注册： 输入邮箱和密码，点击 “注册”即可。
2.第三方登录： 无需注册，直接点击图标， 使用微信或者QQ进行登录。
登录易企秀账号
点击官网右上角“登录”
1.邮箱登录： 输入邮箱和密码，点击 “登录”即可。
5.图片 6.形状 7.图集 8.互动
9.表单 10.特效
1.点击“文本”后 →即可创建 2.单击文本框 →出现编辑菜单 3.双击文本框 →进入基础编辑
点击“背景”后，选择“背景库”中的背景图 也可点击“上传”上传图片到“我的背景”库
背景编辑
→背景创建后，点击编辑栏上的背景齿轮，即可对背景 进行编辑。 →背景编辑主要包括：剪切、更换、效果（放大、缩 小）、删除。
“形状”是便于用户制作扁 平化页面的素材， 形状素材和文字一样可以做 “颜色、大小”等设置。
图集：是几张图片的集合 主要设置：图片比例、切换方式
“互动”是方便制作者与观看者互动的组件
互动组件目前主要是“一键拨号”，正在不断增加
表单（也叫信息收集表、报名表、信息反馈表等）是 场景创建者用来收集查看场景的用户反馈信息的重要 工具。可点击“表单”创建也可直接在互动模板里直 接快捷创建。
点击“音乐”即可创建【背景音乐】
1.【音乐库】为官方提供的音乐素材 2.【外部链接】插入网络音乐链接 3.【我的音乐】自主上传音乐
点击“视频”后，给场景添加网络视频
点击“什么是视频通用代码”，出现详细操作
点击“图片”后，选择“图片库”中的图片素材 或点击“上传”上传图片到“我的图片”库
点击“形状”后，选择“形状组件” 库中选择形状组件
制作小窍门
资料准备全，图片要清楚
文字要简洁，重点更突出 制作很简单，就看熟练度
场景有创意，谁也挡不住
愿您出佳作，祝君展宏图
分享经验 共同成长
感谢您的聆听
下载更大的场景二维码 （在“我的推广”里找到二维码，如下图）
“我的场景”管理
• 点击“我的场景”可看到自己创 建的所有场景列表。 • 点击单个场景右下角的齿轮，即 可对此场景进行“设置、编辑、 复制、转送和删除”操作。 • 点击“开放”/“关闭”，对场 景进行开放和关闭。
在微信里分享场景
微信扫一扫场 景二维码→打 开场景→点击 右上角菜单→ 选择分享方式