组件设计-网页元素的动态模拟-PS动态应用-备课笔记.doc

编号11-01【web产品交互设计开发制作】 编号11-01 学习任务五、组件设计-网页元素的动态模拟 一、课程说明与要求 1.课程说明 网页元素的动态模拟主要讲动态元素在交互设计汇总的应用原则，实训制作，动态元素的优化设置这三方面内容；相较于文字文本和静止的图像，动态的元素更容易被发觉。我们的视线会不由自主的追寻着动态的物体，这也可以说是一种条件反射。 UI设计中作为功能的一部分被采用的动态效果，可以减轻认知的负担，在空间关系中确立良好的层级关系。 下面我们可以在一些案例中去体验动态元素在交互设计中的应用。在交互设计实践方面，培养学生使用Ps工具制作动态元素。 2.工具材料准备说明 本课的实践需要同学们提前准备一些工具和材料，教师将以下网页元素的动态模拟部分需准备软件及案例材料发到微信群中。 软件工具/案例 备注 Photoshop 每台电脑安装 动态元素的案例 每人下载一份 二、学情分析与课程导入 1.学情分析 本课程授课内容需要学生有一定的Ps软件使用基础，但大部分学生基本没有接触过动态元素应用在交互设计方面的知识，普遍认知不强，为此我们强调进行引导教学，融入市场多元化理念。另一方面，学生对新兴的事物接受比较快，对所选择的专业感兴趣，获取知识的主动性较强。 2.课程导入 为了设计出更好的web端产品，有良好的交互性是非常有必要的。那么如何有效的运用UI动态元素， 动态元素设计都有哪些应用原则，如何制作动态元素，实际在日常生活中我们常见到的网站页面的加载动效、logo演绎动效、进度动效等等都是动态元素的应用，让产品的功能性更加完善。 三、理论知识讲解 （一）了解动态元素设计于web交互设计中的应用原则 1.不要提供多余无效的内容 用户在观看动态图的时候，很容易被过多的内容所分散注意力，多余的色彩和内容很容易弱化它们。 编号11-02 编号11-02 2.在动态图中建立一致的视觉 在设计的时候使用品牌的配色来对动态图进行设计，将品牌的形象在Gif图中呈现，让产品以更加富有活力的方式呈现出来。 3.颜色越少越好 这不仅影响最终文件的大小，而且使用的颜色越少，单位体积内可容纳的动画就越多，可以把文件控制在很小的范围。 4.动态图要尽可能小 不同平台的图片规格不同，使用场景也不一样，因此，Gif 图需要足够小才能兼容不同的需求。 5.在上传动态图的时候，保持良好的可访问性 将动态图中可能会分散精力的视觉内容给去掉，避免动态图自动播放，这样让用户感到可控，并且可以节省流量。 编号11-03 编号11-03 【互动，引导学生感受不同的应用原则对应的动态图，教师做总结】 （二）通过案例使用ps制作动态元素……………………………………………【重点】 1、分析画面 在制作动态元素之前，我们首先要分析画面的组成，拿案例来讲包括：背景、底面、是否有渐变及投影等， 2、调取时间轴面板 通过“窗口”菜单栏调出时间轴面板，打开“时间轴”面板后，点击“选项卡”图标，选择“从图层建立帧”，即可将所有图层在“时间轴”面板中显示；下面是具体参数的释义： （1）“延迟时间”：在图层的下方的倒三角，可以选择每个图层停留的时间； （2）动画播放次数：可以选择“1次”“3次”“永远”“其他（可以自定义动画循环的次数）”； （3）“播放/停止”：播放/停止帧动画，及上一帧，下一帧； （4）添加过渡帧：默认添加5帧（过渡帧越多，动画就会越流畅）； （5）“新建”图标，也可以添加图层； （6）“删除”图层 编号11-04 编号11-04 3、图层显/隐及变换旋转 通过复制图层并控制图层间的显隐等方式，根据需要添加帧数和调整时间轴的各帧播放时间，一般会在结尾稍微加长一点时间作为收尾 所有帧率及图层都调整完毕后，按【Ctrl+Alt+S】存储为Web格式，后缀名为GIF动画格式，经过优化后，供原型设计制作时调用。 4、将动态元素gif格式转换为MP4格式 编号11-05通过时间轴左下角的“转换为视频时间轴”图标，动画图层会出现在视频编辑区，可以通过键盘的“空格键”对动画效果进行预览； 编号11-05 点击时间轴下面的“渲染视频”图标，等待初始化视频导出，弹出“渲染视频”对话框，对文件进行命名，点击渲染，等待视频导出，这样就把动画格式保存为MP4视频格式了，ps不是专业的视频编辑软件，编辑功能比较少，这里不做过多讲解。 （三）web交互设计中Ps动态元素的几种优化设置………………………………………【难点】 1、首先，考虑减小图像大小 一种方法是直接选择菜单栏的“图像图像大小”，快捷键是Ctrl+Alt+I，即可打开调整图像大小面板，输入我们需要的大小尺寸即可。 另一种方法是存储为web所用格式。 编号11-06 编号11-06 2、减少帧数 删掉重复帧，只留一帧关键帧，