8.2新媒体H5页面设计（课件）《新媒体编辑》（航空工业出版社

CHAPTER 8 新媒体与新媒体编辑 新媒体H5页面设计 8.2 8.2.1　H5页面设计原则 页面内容有条理性 在设计H5页面时，要先对内容做一个整体的规划，分清内容的主次、并列关系，将内容有条理地展示在H5页面中 页面内容简洁 保证内容的简洁性，只展示最精准、最核心的内容，避免给受众带来拖沓、麻烦的观赏感受，防止用户流失。 页面加载流畅 可以通过减少页面数量、合理添加图片、以及精简过渡动画等方法来提高H5页面的加载速度，使其加载流畅。 8.2.2　H5页面设计方法与技巧 增强交互性 设计H5页面时，应设计一些交互元素（如多分支选择、绘图、摇一摇、重力感应、3D视图等），让受众参与其中，并在极具趣味性的交互中深入感知和体验H5页面所宣传的品牌或产品。 内容故事化 在设计H5页面时，可将H5页面的内容以故事的形式展现，最好将故事设置为大多数受众都亲身经历过的场景，如校园、职场、家庭经历等。 8.2.2　H5页面设计方法与技巧 借势营销 在设计H5页面时，应当尽量将其与时下话题度较高的热点事件、节日、知名机构等相结合，借助它们的热度，使H5页面在短时间内获得大量浏览和转发，以达到更好的宣传效果。 融入社交元素 在H5页面中融入社交元素，使得H5页面得到裂变式传播。例如，在H5页面中加入好友排行榜、PK挑战等，激起受众的求胜欲和分享欲，能够主动将H5页面转发分享给他人。 常用的H5页面编辑工具 8.3 8.3.1　易企秀 易企秀是一款针对移动互联网营销的在线编辑工具，内置H5页面、海报、长页、表单、互动、视频六大品类的编辑器和数十款实用小工具。 图8-8　易企秀网页版的工作界面 8.3.2　人人秀 人人秀是一款专业的在线H5页面编辑工具，以操作简便、互动功能多而受到广大用户的广泛好评。 人人秀汇集了数千位设计师和超过5万套H5页面的素材模板，可满足不同的使用场景，如会议邀请、企业招聘、学校招生、店铺活动等。 8.3.3　MAKA MAKA是全球最受欢迎的在线H5页面编辑工具和平面设计工具之一，其用户超过了3 000万。 使用MAKA可轻松制作出宣传海报、电子传单、节日贺卡、婚礼请柬等H5页面。MAKA提供了多种精美的动画和炫酷特效，如刹车、向下滑入、左右翻转、向上飞入等，用户轻点鼠标即可制作出酷炫的动态效果。 8.3.4　凡科互动 凡科互动是凡科网旗下的一款备受好评的在线H5页面编辑工具。 它具有海量模板、丰富的控件和强大的动画效果，可帮助用户轻松制作出包含弹幕、720°全景、画中画等多种绚丽动效的H5页面。 编辑实战 为金企鹅公司制作企业宣传手册 实战目标 使用本章提到的H5页面编辑工具易企秀，为金企鹅公司制作企业宣传手册，具体包括制作图文内容，设置地图、表单等控件，为H5页面设置翻页动画，为H5页面中的元素添加动画和背景音乐，发布H5页面等操作，页面最终效果如图8-9所示。 图8-9　金企鹅公司宣传手册（部分） 实战步骤 1．选择 H5 页面模板 步骤 1 登录易企秀。打开浏览器并访问易企秀官网（https://store.eqxiu.com），单击右上角的“免费注册”按钮，按照提示注册并登录易企秀账号，自动进入“免费模板”页面。 步骤 2 选择 H 5 页面模板。在“ 全部商品分类”组中选择“H 5”选项，在打开的界面的搜索框中输入“ 企业宣传”，单击“ 搜索”按钮（或按“Enter”键），然后在下方搜索结果中选择所需H5页面模板 实战步骤 2．制作 H5 页面内容 步骤 1 单击界面右上角的“ 工作台”按钮，进入易企秀的“ 工作台”界面。在 “全部作品”组中选择刚刚购买的H5页面模板，然后单击“编辑”按钮，见图8-11。进入工作界面，画布上将默认显示该H5页面模板的封面。 步骤 2 单击画布上“LOGO”字样的图片，在右侧弹出的“组件设置”面板中单击“更换图片”按钮，如图8-12所示。 实战步骤 2．制作 H5 页面内容 图8-11　单击“编辑”按钮　　　 图8-12　单击“更换图片”按钮 实战步骤 2．制作 H5 页面内容 步骤 3 打开“图片库”面板，单击“本地上传”按钮，弹出“打开”对话框，选择本书配套素材“素材”/“第8章”/“实战”文件夹中的“封面-LOGO.png”图片，然后单击“打开”按钮，返回“图片库”面板，切换至“我的图片”选项卡，可看到图片已上传到易企秀的图片库中。 步骤 4 单击“封面-LOGO.png”图片，即可用该图片替换原图片。返回画布中，拖动图片四周的尺寸控制点调整其尺寸和位置，使其显示完全且大小适中。 实战步骤 2．制作 H5 页面内容 步骤 5 双击“企业宣传册”文本框，按“Delete”键删除原内容，然后输入“金企鹅宣传手册”，在弹出的文本工具栏或“组件设