初识H5H5风格与制作流程24课件.pptxVIP

第一章初识H5H5融媒体设计讲师：赖泓君H5风格与制作流程

1.3H5的设计与制作流程目录Content

1.3.1H5设计与制作的项目流程：H5设计与制作的项目流程：

了解需求，选好方向，明确设计目标每个H5的设计都是建立在需求之上的，明确客户需求，找准设计目标。如：推广新产品、促销活动、网站引流、传播品牌形象？

案例：呼呼就VANS品牌：VANS技术实现：html5亮点：1.创意定位VANS是很有活力的经典运动品牌，虎年到来，VANS设计了元气十足的卡通老虎，邀请用户参与手速游戏，赢取福利签，给生活打打气！确定表现形式设计定位和内容明确后，围绕定位构思表现形式，H5的表现形式很多。如：是要讲故事卖情怀，还是强调功能，做陈述页面，还是做小游戏增加用户粘性。

设计表现+开发执行阶段+数据统计设计表现：视觉上设计风格的敲定，准备元素、素材等音频、视频、交互设计的表现开发执行阶段：有两种方法实现H5，1、有代码实现——设计师做好分层图、psd、png切图、MP3音频、视频等打包给前端工程师2、无代码实现——设计师做好设计图文件上传到第三方H5制作工具平台进行制作。第三方H5制作平台后台会根据H5的浏览量等进行数据统计，设计师根据数据分析出H5存在问题，对其进行改良优化

1.3.1明确设计目标H5设计与制作的项目流程：1、前期策划——了解需求+确定形式2、交互设计3、设计制作4、制作开发5、测试发布6、推广运营

1.3.2内容策划内容方向内容方向是指以介绍内容为主的H5页面效果交互方向交互方向是指注重与用户建立丰富的互动体验的H5页面效果，用户操作是该H5页面的主要卖点，如游戏类、广告类H5多从交互方向策划。视觉方向视觉方向是指以画面为主的H5页面效果。

1.3.3页面设计1.搜集素材在进行H5设计时，设计人员常会将图片、视频和音效素材运用到页面的模块、交互等内容中。图片、视频和音效素材主要通过3种方式进行获取，分别是网上搜集、实物拍摄和录制。网上搜集指在互联网上通过素材网站，有哪些信誉好的足球投注网站需要的图片、视频和音效进行下载。图片、视频和音效的搜集信息的搜集这里的信息主要是指企业信息、活动内容、游戏文字等。其中企业信息包括企业的组织结构、企业文化、发展方向等。

1.3.3页面设计2.设计H5页面若是使用模板进行H5设计，可在素材搜集完成后选择制作H5的编辑器，在编辑器中选择合适的模板，并将前面搜集到的素材添加到编辑器中，替换模板内容。使用模板设计H5页面

1.3.3页面设计除了使用模板设计H5页面，设计人员还可使用图像工具进行H5页面的设计与制作。在设计时要注意页面的统一性和内容的连贯性。使用图像工具设计H5页面

1.3.4交互设计使用模板设计的H5页面，大多已经包含交互效果，而使用图像工具设计的H5页面则只是简单的图像展示。此时需要将图像文件导入H5编辑器，然后进行动画、音效、互动等内容的制作。

1.3.5H5的生成和发布完成H5的交互设计后，即可对完成后的效果进行预览，若需要发布到微信或网页中，可在发布页面通过二维码或链接的方式，生成与发布H5。

H5设计与制作的常用软件一览

小试牛刀：认识易企秀制作工具主题：春天根据主题进行发散思维，自定虚拟策划项目，如：我和春天有个约会（营销类H5，春季新品发布/知识新闻类，二十四节气春季篇/春色满园，旅游景点推广H5）形式：滑动翻页根据主题运用易企秀模板工具制作一个6-10页的翻页H5，内容和形式不限，尽可能尝试素材原创。页面尺寸：640*1040px