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