高二机工社UI设计项目教程课件学习单元7项目2：Banner动效设计

学习单元7——动效设计. UI设计项目教程 单元概述 动效设计在提升产品体验、用户黏性方面的积极作用有目共睹，已然成为现在Web、APP产品交互设计和界面设计必不可少的元素。为什么要为产品设计动效呢？首先必须弄清楚这个问题，才能让我们设计的动效更符合产品实际，给产品带来实质性的提升。除了欢迎动画外，其他常见动效通常是由多个基础动效组合而成，动效必须帮助用户高效地完成当前任务，给予用户明确的指引和提示。 学习目标 1．能够掌握常见基础动效的制作思路 2．通过项目制作，学习动效的制作方法及作用 3．通过学习动效设计，了解动效的应用设计和动效评判 Banner动效设计 项目2. TWO 项目描述 E-Design设计公司近期承接了“法国Bonnet红酒展销”主题网页的设计项目。 伯涅酒庄（Chateau Bonnet）是法国波尔多产区的酒庄，历史悠久。酒庄出产种类多样的葡萄酒，有红葡萄酒、白葡萄酒和桃红葡萄酒，且多以多种葡萄混酿的形式酿成，品质非常不错。在这里酿造出的伯涅酒庄干白葡萄酒曾多次在葡萄酒竞赛中获奖。 网页设计项目中，最重要的一个模块就是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动效。 $