H5交互融媒体作品创作 课件 第六章 H5作品的交互设计与互动效果制作

H5作品的交互设计

与互动效果制作本章要点关键词第6章1.掌握H5作品中交互设计的总体原则。2.了解H5作品中的不同交互类型及其分类。3.掌握使用方正飞翔数字版制作不同类型互动效果的方法。交互设计互动效果第1节交互设计原则与方法

20世纪七八十年代之交,旧金山湾区一群敬业而有远见的研究员、工程师和设计师正在忙于发明未来人们与电脑交互的方式。从施乐帕克研究中心(XeroxPARC)到斯坦福国际研究院(SRI),最后到苹果电脑公司,人们开始讨论,为数字产品创造出可用、易用的“人性化界面”到底意味着什么。20世纪80年代中期,两位工业设计师比尔·莫格里奇(BillMoggridge)和比尔·韦普朗克(BillVerplank)着手设计第一台笔记本电脑GRiDCompass。他们为自己所做的工作创造了“交互设计”一词。尽管交互设计常常被看作为一门新兴的设计学科,但实际上人类社会已经有着很长时间的交互设计历史。作为一门从人机交互(HumanComputerInteraction)领域分支并发展得来的新型学科,交互设计具有十分典型的跨学科特征,涉及范围包括计算机科学、计算机工程学、信息学、美学、心理学与社会学等。所谓交互设计,是指在人与产品、服务及系统之间创建一系列对话,其更偏向于技术性的设定与实现过程。世界交互设计协会第一任主席雷曼(Reimann)对于交互设计做出了如下定义:“交互设计是定义人工制品(设计客体)、环境和系统的行为的设计。”从技术层面而言,交互设计需要涉及计算机工程学、语言编程、信息设备、信息架构学的运用。从用户层面而言,交互设计涉及人类行为学、人因学、心理学。从设计层面而言,交互设计还涉及工业设计、界面表现、产品语意及传达。对于H5交互设计而言,在合理选择了H5制作工具、辅助工具、设计工具后,我们需要重点思考的,是用户使用你的H5作品时的体验,因此需要结合用户心理、操作习惯、视觉感受来做整体考量。

一、视觉可见原则

二、环境贴切原则

三、一致性原则

四、容错与及时反馈原则第2节互动效果的分类

H5的互动效果种类繁多,实际上对H5互动效果的分类并没有统一的说法和分类标准,这里仅提供一种笔者认为分类标准比较明晰的、按照H5互动效果功能来源的分类方式,即市面上H5的互动效果可以分为三类:基于传感器的互动效果、基于触摸屏操作的互动效果以及基于融媒体展示的互动效果。基于传感器定位摄像头麦克风01基于触摸屏操作单屏滚动手势操作虚拟现实增强现实02基于画面呈现视频动画特效互动03

一、基于传感器的互动效果

二、基于触摸屏操作的互动效果

三、基于融媒体展示的互动功能方正飞翔数字版V8.3除了41种预设动画外，新增路径动画、形变动画、形变路径三种可自定义的动画功能，用户可根据内容设计创造自己独有的动画效果。动画扫码体验方正飞翔数字版V8.3新增自定义按钮动作。在之前的版本中，一个按钮只能添加一个动作，现在按钮可以设置多个动作同时触发，并增加了双击、长按的动作，以及逻辑条件。按钮扫码体验画廊功能有三种不同的样式，分别是走马灯、按钮式、导航式。走马灯无需按钮滑动切换图片；按钮式如右侧案例，点击按钮显示对应图片；导航式是点击导航键进行前后画面的切换。画廊扫码体验自由拖拽可以实现图片在版面中的任意移动，方正飞翔数字版V7.2.2增加了更多自由拖拽的可控性，可以限制范围、限制操作。自由拖拽扫码体验图像扫视可以实现在局部范围内通过手势滑动，查看高清大图的效果，可模拟镜头移动、物品搜寻等场景效果。图像扫视扫码体验图像对比可以实现两张图片横向或纵向的对比，通过拖动分界线可以改变两张图片的显示占比。图像对比扫码体验类似擦玻璃或刮刮乐的效果，可设置擦除半径和自动消失百分比。支持对擦除设置逻辑事件，可在擦除时、擦除动作结束时、擦除对象消失时设置触发动作。逻辑事件、自定义按钮动作支持根据擦除百分比进行判断触发动作。擦除扫码体验Update!合成图片常用于强交互的H5作品中，作品会引导用户完成一系列操作，并将得到的最终结果保存成一张图片供用户分享传播。合成图片扫码体验动感图像主要运用于H5背景，通过随机生成的运动轨迹形成飘散的效果，飘散的数量、大小区间、摆动区间均可进行设置。动感图像扫码体验数据服务功能包括文本、单选、复选、列表、照片、微信头像昵称等功能，主要用于收集或展示用户信息。数据服务扫码体验丰富的加载页样式方正飞翔提供6种加载页样式，可以自定义背景、logo、进度条前背景色等。计时器常被应用于测验和游戏中，可以记录答题、通关时间，或在计时结束后触发指定效果。计时器扫码体验曾经的接力数据在方正飞翔数字版V8.3中升级为接力计数，升级后不仅支持按照浏览量显示数据，还能够通过按钮控制调整计数，可用于各种游戏、测试的分值计算。接力计数扫码体验Update!扫码体验互动长图