高二机工社UI设计项目教程课件学习单元7项目1：界面背景动效设计

学习单元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）关联性 好的动效设计，可以让用户清晰地感受到内容之间的脉络关系，了解到各个元素的物理