-模块一初识 H5 互动设计-1728199874155.pptx

→模块一：初识H5互动设计设计流程与步骤《前端互动设计》课程讲授人：彭珂珂

H5工作流程与设计步骤

前期策划优秀的数字作品，不仅是在技术上的具有优越性，而且在前期策划上需要找到作品吸引用户的特征和痛点。这样才能事半功倍。H5作品设计的第一步就是策划，可能要比设计制作的时间还要长。有了完整的策划方案作基础，之后的过程才不会迷失方向，可以说这一步是发布一个H5作品最为重要的一步，也是整个作品的灵魂。

前期策划风格定位产品自身分析竞品自身分析用户分析问题与矛盾预算引流促销建立品牌形象信息传播创意交互手绘赛博朋克拼贴拼贴分析需求确定设计目的创意定位差异性、痛点

交互设计作品的操作指引脚本、框架3个左右的交互

页面设计?PS?形成完整的页面?动态素材?静态素材风格定位创意定位?手绘版

制作开发代码编程可视化制作设计人员可用智能软件工具提供的功能实现设计和制作。优点：作品整体风格可控、周期和成本相对较低、不存爱沟通壁垒。缺点：非常炫酷的效果难以实现。开发人员根据设计人员的要求，查看平面稿和脚本，用程序实现交互。优点：最大限度实现设计人员的意图和要求，效果可以达到完美。缺点：周期长、成本高。最重要的是设计人员和技术人员之间沟通时间长，而且很多时候沟通效果不尽人意。

制作开发在完成H5作品之后，我们要对作品进行不同设备的预览测试，确保目标设备上的正常显示，除了内部形式，还需选择邀请用户进行测试，如果效果与设想不一致，或用户提出一些体验、功能方面的突出问题，应该在发布前进行调整。所有制作步骤完成后，即可进行H5作品的发布上线，并按照既定的运营方案进行传播与运用。

1、重点：H5设计的步骤课程总结2、难点：前期策划的工作内容与要点●分析需求●创意定位●确定目的●风格定位

课程作业●如果你和同学组成了3人团队，进行H5的策划和制作，需要如何安排分工？●如果你作为一名H5设计师，需要与技术人员沟通后用代码的方式制作出成品，你将如何跟技术人员介绍、解释你的想法和作品。