UI设计项目教程 课件 学习单元7 项目1：界面背景动效设计、项目2：Banner动效设计

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

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

E-Design设计公司最近承接了“作业帮手”的教育类APP的设计项目。“作业帮手”是一款专注于智能学习的平台，题库量大，搜题速度快，答案精准。为了避免界面的枯燥乏味，公司希望在原有基础上为界面背景制作动态效果。经过公司讨论，项目总监将此款APP的元素制作任务分配给β小组，由Sunny完成该项目。UI设计项目教程任务1：设计前期准备

流行趋势

动态效果在传达产品功能和拓展用户感官体验等方面有着举足轻重的作用。手机端的动态设计效果也提升了用户的感知度，提高了产品的易用性。曾经流行的Flash主页如今已经被html5和css3所取代，从而用户可以体验到更流畅的动态效果。UI设计项目教程任务1：设计前期准备

动效设计分析

移动端自身的硬件可以支持手势、重力、光线、距离感应等操作，人机互动的形式也变得更加有趣，拓展了用户的操作维度。动态交互是从用户触发行为到预期结果之间的合理变化过程。UI设计项目教程任务1：设计前期准备

动效设计分析

动效应该是有意义的、合理的，动效的目的是为了吸引用户的注意力，以及维持整个系统的连续性体验。动效反馈需细腻、清爽。转场动效需高效、明晰。（1）加强体验舒适度表现层级关系：用户知道这个界面和上一个、下一个界面的关系。与用户手势结合，更自然的动画表现：界面的动态走向更符合手指的运动，让用户感觉到是自己控制了界面的动向，而不是机械化的跳转。愉快的提示功能：提醒的时候能吸引用户的注意，但是又不会生硬，符合预期的出现。额外增加界面的活力：用户预期之外增加的惊喜，让用户感知到产品的生命力。吸引用户持久的注意力：在一些数据量较大的界面中添加一些动效，让用户保持注意力。（2）减少不可避免的不适感设计师都在努力把产品打造得更加优秀和完美，但是总有一些无法避免的问题出现，造成用户对产品的体验感下降。适当地增加一些动效，可以弥补这种情况。（3）不易被察觉的动效由于不容易被发现，普通用户通常会忽略它们的存在，但很多时候这些小细节让交互变得更加有趣。UI设计项目教程必备知识

动效使用情境（1）转场页面层级切换或跳转、Tab切换、加载或刷新。（2）引导或反馈操作引导、控件、Hover、Toast、弹窗进出。（3）感官刺激关键内容的呈现和情感化取悦用户。UI设计项目教程必备知识

基本动效作用（1）指向性动效指向性动效能够有效地描述物体之间的逻辑关系。同时通过视觉效果，可视化地描述物体当前运动状态。指向性动效能够让用户清晰地感受到物体与物体的位置关系，以及信息的层级架构。指向性动效包括滑动、滚动、平移、弹出、最小化、切换、展开堆叠等。（2）空间扩展移动产品设计的空间是有限的，内容需求却是无限的。空间扩展就是从不同维度来寻求解决方法，包括收纳、层级化分割和视觉感受扩张等。类比到移动产品的体验上，最基础的也是如何让有限的屏幕承载更多的功能，让用户感受到空间的扩展。（3）突出显示通过动画吸引用户的注意力，使用户清楚界面上可能被忽略的变化，其目的是通过动画引导用户注意特定的对象。突出显示主要采用缩放、着色、发光突显、模糊等方式。（4）反馈反馈动效可以有效地告知用户“操作是否成功”。反馈的表现形式或以明显的弹性效果为主，或是基于进度条的动效。反馈主要采用运动、形变、模糊、变色等方式。（5）前馈控制部分发出指令，使受控部分进行某种活动，同时又通过另一快捷途径向受控部分发出前馈信号，受控部分在接受控制部分的指令进行活动时，又及时地受到前馈信号的调控，因此活动可以更加准确。UI设计项目教程必备知识

动效制作的原则（1）个性化这是动效设计最重要的原则之一，任何动效或动画都应该追求个性化，通过个性化设计展示界面作品的独特性。（2）动效的功能性动效设计的目的是帮助用户理解界面信息，达成更佳的操作体验。（3）关联性好的动效设计，可以让用户清晰地感受到内容之间的脉络关系，了解到各个元素的物理状态，与此同时还能够知晓元素当前所处的环境。（4）情感性动效应该能唤起用户积极的情绪。流畅、合理的动效能够让用户感受到一切都是那么的自然。（5）适当性太多的动效会让用户眼花缭乱，同时感到分心，可以在需要凝聚用户注意力的地方提供动效。UI设计项目教程任务拓展1．根据项目描述中对“作业帮手”这款教育类APP的介绍，结合原有界面结构，设计两款增加界面活力的动效。2．收集两款自己比较喜欢的APP动效，分析其动态效果的合理性。3．收集两款自己比较喜欢的APP动效，分析其动态效果的动画原理。UI设计项目教程任务2：界面背景动效制作动效效果UI设计项目教程必备知识

无论是在一系列草图间快速切换，还是在屏幕与屏幕之间切换，想要在这些场景切换中加入动效进行完美过渡，并不是一件容易的事情。这需要用眼睛仔细观察人和物体在时间和空间中的运动和变化。（1）挤压和拉伸当物体受到外力作用时，必然产生形体上的压缩和伸展。动画中运用压扁和拉长的手法，夸大这种形体改变的程度，以加强动作的张力和弹性，从而表达受力对象的质感、重量，以及角色情绪上的变化。（2）预期动作动作一般分为预期动作和主要动作。预期动作是动作准备阶段的动作，它能将主要动作变得更加有力。在动画角色做出预备动作时，观众能够以此推测出其随后将要发生的行为。（3）夸张夸张是动画的特质，也是动画表现的精髓。夸张不是无限制的夸张，要适度，要符合运动的基本规律。UI设计项目教程必备知识

无论是在一系列草图间快速切换，还是在屏幕与屏幕之间切换，想要在这些场景切换中加入动效进行完美过渡，并不是一件容易的事情。这需要用眼睛仔细观察人和物体在时间和空间中的运动和变化。（4）重点动作和连续动作动画的绘制，有其独特的步骤，重点动作（原画）和连续动作（中间画）需分别绘制。首先把一个动作拆分成几个重点动作，绘制成原画。原画间需插入中间画，即补齐重点动作中间的连续动作，这个补齐中间画的工作叫中割。（5）跟随与重迭跟随和重迭是一种重要的动画表现技法，它使动画角色的各个动作彼此间产生影响。移动中的物体或各个部分不会一直同步移动，有些部分先行移动，有些部分随后跟进，并和先行移动的部分重迭。跟随和重迭往往与压缩和伸展结合在一起运用，能够生动地表现动画角色的情趣和真实感。UI设计项目教程必备知识

无论是在一系列草图间快速切换，还是在屏幕与屏幕之间切换，想要在这些场景切换中加入动效进行完美过渡，并不是一件容易的事情。这需要用眼睛仔细观察人和物体在时间和空间中的运动和变化。（6）慢进与慢出动作的平滑开始和结束是通过放慢开始和结束动作的速度，加快中间动作的速度来实现的。现实世界中的物体运动，从开始到结束，其速度的变化多为一个抛物线。（7）圆弧动作动画中物体的运动轨迹，往往表现为圆滑的曲线形式。因此在绘制中间画时，要以圆滑的曲线设定连接主要画面的动作，避免以锐角的曲线设定动作，否则会出现生硬、不自然的感觉。不同的运动轨迹，表达不同的角色特征。例如，机械类物体的运动轨迹，往往以直线的形式进行，而生物体的运动轨迹，则呈现圆滑曲线的运动形式。UI设计项目教程项目拓展1．收集一款自己比较喜欢的APP动效，临摹其动态效果。2．根据项目描述中对“作业帮手”这款教育类APP的介绍，结合任务1中设计的动效实现其效果。学习单元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设计项目教程必备知识

动效设计的注意事项

具有动效的Ba