《新媒体视觉设计》课件 02H5交互动态页面设计与制作-1

新媒体视觉设计视觉传达设计专业新媒体视觉设计实战匠心实践项目六H5交互动态页面设计与制作App交互页面的设计与制作010203信息可视化设计与制作2.1H5的基础概念2.2H5的设计与制作流程2.3H5的设计规范和工具2.4H5中的信息可视化设计2.5H5交互动态页面设计与制作2.6AIGC在H5交互页面设计中的应用H5交互动态页面设计与制作02项目六

匠心实践新媒体视觉设计实战2.1H5的基础概念H5是HTML5的缩写，HTML5是第5代超文本标记语言（HyperTextMarkupLanguage，HTML）的简称。浏览器通过解码HTML，可以把网页内容显示出来，这样用户就能看到H5的设计内容。本地储存性H5具有本地储存性的特点，用户只需要扫描H5二维码，即可查看H5的内容。跨平台性H5能兼容PC、Pad、手机等常用的电子设备平台，具有很好的跨平台性和兼容性，用户可以轻松地将需推广的内容植入各种不同的开发、应用平台上。2.2.1H5的设计与制作流程-明确设计目标明确设计目标是进行H5设计的前提条件。如果没有明确的目标，设计人员设计出的效果将难以令人满意。在设计之初，H5就要建立在具体的目标上，如到底要做什么，需要在其中表达什么内容等。在设计前还需要考虑是直接套用模板进行制作，还是先用图像工具进行页面设计，再使用H5编辑器进行动效制作，并将重点信息罗列出来，如需要在H5中体现的促销产品价格，需要展现的具体内容，或需要总结和展示的企业信息、企业特色等。2.2.2H5的设计与制作流程-内容策划内容方向内容方向是指以介绍内容为主的H5页面效果交互方向交互方向是指注重与用户建立丰富的互动体验的H5页面效果，用户操作是该H5页面的主要卖点，如游戏类、广告类H5多从交互方向策划。视觉方向视觉方向是指以画面为主的H5页面效果。2.2.3H5的设计与制作流程-页面设计1.搜集素材在进行H5设计时，设计人员常会将图片、视频和音效素材运用到页面的模块、交互等内容中。图片、视频和音效素材主要通过3种方式进行获取，分别是网上搜集、实物拍摄和录制。网上搜集指在互联网上通过素材网站，搜索需要的图片、视频和音效进行下载。图片、视频和音效的搜集信息的搜集这里的信息主要是指企业信息、活动内容、游戏文字等。其中企业信息包括企业的组织结构、企业文化、发展方向等。2.2.4H5的设计与制作流程-页面设计2.设计H5页面若是使用模板进行H5设计，可在素材搜集完成后选择制作H5的编辑器，在编辑器中选择合适的模板，并将前面搜集到的素材添加到编辑器中，替换模板内容。使用模板设计H5页面2.2.5H5的设计与制作流程-页面设计除了使用模板设计H5页面，还可使用图像工具进行H5页面的设计与制作。在设计时要注意页面的统一性和内容的连贯性。使用图像工具设计H5页面2.2.6H5的设计与制作流程-页面设计使用模板设计的H5页面，大多已经包含交互效果，而使用图像工具设计的H5页面则只是简单的图像展示。此时需要将图像文件导入H5编辑器，然后进行动画、音效、互动等内容的制作。2.2.7H5的设计与制作流程-页面设计完成H5的交互设计后，即可对完成后的效果进行预览，若需要发布到微信或网页中，可在发布页面通过二维码或链接的方式，生成与发布H5。v课