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