单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2020/11/26,0,H5作品的交互设计与互动效果制作,本章要点,关键词,第,6,章,1.掌握H5作品中交互设计的总体原则。,2.了解H5作品中的不同交互类型及其分类。,3.掌握使用方正飞翔数字版制作不同类型互动效果的方法。,交互设计 互动效果,H5作品的交互设计与互动效果制作本章要点关键词第6章1.掌,1,第,1,节 交互设计原则与方法,20世纪七八十年代之交,旧金山湾区一群敬业而有远见的研究员、工程师和设计师正在忙于发明未来人们与电脑交互的方式。从施乐帕克研究中心(Xerox PARC)到斯坦福国际研究院(SRI),最后到苹果电脑公司,人们开始讨论,为数字产品创造出可用、易用的“人性化界面”到底意味着什么。20世纪80年代中期,两位工业设计师比尔莫格里奇(Bill Moggridge)和比尔韦普朗克(Bill Verplank)着手设计第一台笔记本电脑GRiD Compass。他们为自己所做的工作创造了“交互设计”一词。,尽管交互设计常常被看作为一门新兴的设计学科,但实际上人类社会已经有着很长时间的交互设计历史。作为一门从人机交互(Human Computer Interaction)领域分支并发展得来的新型学科,交互设计具有十分典型的跨学科特征,涉及范围包括计算机科学、计算机工程学、信息学、美学、心理学与社会学等。,第1节 交互设计原则与方法 20世纪七八十,2,所谓交互设计,是指在人与产品、服务及系统之间创建一系列对话,其更偏向于技术性的设定与实现过程。世界交互设计协会第一任主席雷曼(Reimann)对于交互设计做出了如下定义:“交互设计是定义人工制品(设计客体)、环境和系统的行为的设计。”,从技术层面而言,交互设计需要涉及计算机工程学、语言编程、信息设备、信息架构学的运用。从用户层面而言,交互设计涉及人类行为学、人因学、心理学。从设计层面而言,交互设计还涉及工业设计、界面表现、产品语意及传达。,对于H5交互设计而言,在合理选择了H5制作工具、辅助工具、设计工具后,我们需要重点思考的,是用户使用你的H5作品时的体验,因此需要结合用户心理、操作习惯、视觉感受来做整体考量。,所谓交互设计,是指在人与产品、服务及系统之间创建一系列对话,3,一、视觉可见原则,一、视觉可见原则,4,二、环境贴切原则,二、环境贴切原则,5,三、一致性原则,三、一致性原则,6,四、容错与及时反馈原则,四、容错与及时反馈原则,7,第,2,节 互动效果的分类,H5的互动效果种类繁多,实际上对H5互动效果的分类并没有统一的说法和分类标准,这里仅提供一种笔者认为分类标准比较明晰的、按照H5互动效果功能来源的分类方式,即市面上H5的互动效果可以分为三类:基于传感器的互动效果、基于触摸屏操作的互动效果以及基于融媒体展示的互动效果。,基于传感器,定位,摄像头,麦克风,01,基于触摸屏操作,单屏滚动,手势操作,虚拟现实,增强现实,02,基于画面呈现,视频,动画,特效,互动,03,第2节 互动效果的分类 H5的互动效果种类繁多,8,一、基于传感器的互动效果,一、基于传感器的互动效果,9,H5交互融媒体作品创作PPT第6章-H5作品的交互设计与互动效果制作课件,10,二、基于触摸屏操作的互动效果,二、基于触摸屏操作的互动效果,11,H5交互融媒体作品创作PPT第6章-H5作品的交互设计与互动效果制作课件,12,三、基于融媒体展示的互动功能,三、基于融媒体展示的互动功能,13,H5交互融媒体作品创作PPT第6章-H5作品的交互设计与互动效果制作课件,14,H5交互融媒体作品创作PPT第6章-H5作品的交互设计与互动效果制作课件,15,问题讨论,尝试着用表格的方式总结一下方正飞翔数字版各个互动效果的类别、使用场景以及对素材的要求。,01,问题讨论尝试着用表格的方式总结一下方正飞翔数字版各个互动效果,16,