UI设计项目教程 课件 学习单元7 项目2：Banner动效设计、项目3：H页面动效设计

学习单元7——动效设计.UI设计项目教程机械工业出版社单元概述

动效设计在提升产品体验、用户黏性方面的积极作用有目共睹，已然成为现在Web、APP产品交互设计和界面设计必不可少的元素。为什么要为产品设计动效呢？首先必须弄清楚这个问题，才能让我们设计的动效更符合产品实际，给产品带来实质性的提升。除了欢迎动画外，其他常见动效通常是由多个基础动效组合而成，动效必须帮助用户高效地完成当前任务，给予用户明确的指引和提示。学习目标1．能够掌握常见基础动效的制作思路2．通过项目制作，学习动效的制作方法及作用3．通过学习动效设计，了解动效的应用设计和动效评判Banner动效设计项目2.TWO项目描述

E-Design设计公司近期承接了“法国Bonnet红酒展销”主题网页的设计项目。伯涅酒庄（ChateauBonnet）是法国波尔多产区的酒庄，历史悠久。酒庄出产种类多样的葡萄酒，有红葡萄酒、白葡萄酒和桃红葡萄酒，且多以多种葡萄混酿的形式酿成，品质非常不错。在这里酿造出的伯涅酒庄干白葡萄酒曾多次在葡萄酒竞赛中获奖。网页设计项目中，最重要的一个模块就是Banner动效设计。经过公司讨论，项目总监将红酒Banner动效设计任务分配给α组Emma负责。

Emma首先明确了此次任务的目的，宣传、推广本次展销会，并且展示部分商品。经过收集资料和小组讨论，将需要做的工作分成两个阶段的任务。

第一个阶段：设计前期准备。利用平面设计知识，将文案、商品/模特、背景、点缀物等融合在一个Banner里面。

第二个阶段：Banner动效制作。动效的设计，能够吸引视线，使得网页页面更加生动，更具有交互性。UI设计项目教程任务1：设计前期准备

α小组设计师Emma接到任务后，明确了完成任务的流程，了解Banner的定位与针对人群的特征，最后经过项目例会讨论，确定Banner的设计方案。以葡萄庄园、城堡素材作为背景，前景点缀葡萄等素材，主体物是红酒产品素材，整体布局优雅大气。UI设计项目教程必备知识

Banner设计常识（1）Banner的色彩主体物与背景及其他元素之间应具有足够的对比度，有助于引起用户的关注。Banner的整体色彩可以选择品牌本身的代表色，或者是比较情绪化的色彩，让受众更有代入感。（2）Banner中的平面设计知识Banner设计不要拘泥于某个特定的布局，可以充分结合平面设计中的平面构成知识进行设计。例如，点线面的构成、重复构成、近似构成、渐变构成、发射构成、特异构成、对比构成等。UI设计项目教程必备知识

设计尺寸一般来说，Banner的设计尺寸是由网页本身的设计规格和广告图片的规格决定的，可以说它的设计规格是没有固定要求的。但即便如此，也有比较常用的设计尺寸供大家参考。UI设计项目教程必备知识

组成要素Banner组成要素包含4个方面：文案、商品/模特、背景、点缀物。UI设计项目教程任务拓展

公司近期承接“粤美食”主题商业网页设计项目，主要是宣传粤菜，介绍原创菜谱以及各种美食点心。其中网页Banner设计应体现粤菜的特点，“重品质，味清淡，色香味型”。1、请根据项目需求，收集同类型网页Banner并进行分析。2、使用不同的平面构图方法，设计几款不同的“粤美食”的Banner。UI设计项目教程任务2：Banner动效制作动效效果UI设计项目教程必备知识

动效设计的注意事项

具有动效的Banner往往会比静态的Banner更有效地吸引用户的注意力。在设计Banner的动效时，首先要注意度，不能过多、过于复杂，否则会起到反效果，让用户反感；其次，尽量使背景颜色或背景图不要变动，仅改变Banner上的主体物或者文字。

主体物数量

在Banner动效中，背景不变，主体物改变。主体物一般是商品或模特，注意数量不要太多，一般3～5个是合适的。UI设计项目教程项目拓展1．收集各类动效Banner设计案例，并进行分类整理。2．使用Photoshop软件制作几个Banner动效。学习单元7——动效设计.UI设计项目教程机械工业出版社单元概述

动效设计在提升产品体验、用户黏性方面的积极作用有目共睹，已然成为现在Web、APP产品交互设计和界面设计必不可少的元素。为什么要为产品设计动效呢？首先必须弄清楚这个问题，才能让我们设计的动效更符合产品实际，给产品带来实质性的提升。除了欢迎动画外，其他常见动效通常是由多个基础动效组合而成，动效必须帮助用户高效地完成当前任务，给予用户明确的指引和提示。学习目标1．能够掌握常见基础动效的制作思路2．通过项目制作，学习动效的制作方法及作用3．通过学习动效设计，了解动效的应用设计和动效评判H5页面动效设计项目3.THREE项目描述

E-Design设计公司近期承接某购物网站的“双11网购狂欢节”H5页面动效设计项目。“双11网购狂欢节”的H5页面动效属于商业促销类动效设计。项目总监将该动效设计任务分配给α组由Emma负责，由助理设计师Marry协助。Emma将工作分为两个任务阶段：设计前期准备，H5页面动效制作。UI设计项目教程任务1：设计前期准备

α小组设计师Emma接到任务后，明确任务目标，收集同类型H5页面动效，之后根据本项目的需求设计静态H5页面，最后进行修改以及细节调整。本项目的页面为手机横屏显示的效果。UI设计项目教程必备知识

H5页面设计尺寸

H5页面设计尺寸为740×1136px，能够填充不同手机屏幕边缘的区域，确保不会露白；内框区域640×960px，这个区域里的内容可以确保在所有手机屏幕上完整显示。UI设计项目教程任务拓展

打开手机，从个人手机中挑选出不同的H5的页面，观察它们的特点并进行分析。UI设计项目教程任务2：H5页面动效制作动效效果UI设计项目教程必备知识

H5页面动效制作常用工具

除了我们所熟悉的Photoshop软件，还有几款比较常用的H5页面动效制作工具，分别为搜狐快海报、微信初页、Maka、百度H5平台、兔展、易企秀、人人秀等，其中有很多都是可以免费使用的，可供大家学习参考。UI设计项目教