在UX中如何正确使用动画设计

新知榜官方账号

2023-07-04 20:07:02

在UX中如何正确使用动画设计

在UX设计中，动画设计是非常重要的一部分，因为它可以帮助用户更好地理解应用程序或网站的交互过程，并提高用户体验。

然而，很多人对动画设计的理解还比较肤浅，只是简单地认为动画是为了好看而已。实际上，动画设计远比我们想象的更复杂，需要遵循一些原则和规则，才能达到最佳效果。

动画的持续时间和速度

当元素改变其状态或位置时，动画的持续时间应该足够慢以使用户能够注意到变化，但同时又足够快以至于不会导致等待。在动画中使用适当的持续时间。不要太快，也不要让用户有足够的时间打呵欠。大量研究已经发现界面动画的最佳速度在200到500毫秒之间。这些数字是基于人脑的特殊感知。任何短于100毫秒的动画都是瞬时的，根本不会被识别。而超过1秒的动画会传达延迟感，因此对用户来说是无聊的。

在移动设备上，“MaterialDesign指南中”还建议将动画的持续时间限制在200-300毫秒。至于平板电脑，持续时间应该延长30％–大约400-450毫秒。原因很简单：屏幕尺寸较大，因此物体在改变位置时会克服较长的路径。在可穿戴设备上，持续时间应相应缩短30％–约150-200毫秒，因为在较小的屏幕上，行程距离较短。

Web动画以另一种方式处理。由于我们已经习惯了浏览器中几乎是即时打开web页面，所以我们希望能够在不同的状态之间快速切换。因此，web转换的持续时间应该比移动设备短2倍——在150-200毫秒之间。在其他情况下，用户不可避免地会认为电脑死机了，或者网络连接有问题。但是，如果你在你的网站上创建一个装饰性的动画或者试图吸引用户对某些元素的注意，忘记这些规则。在这些情况下，动画可以更长。

您需要记住，无论平台如何，动画的持续时间不仅取决于行进的距离，还取决于物体的大小，较小的元素或具有较小变化的动画应该移动得更快。因此，具有大而复杂元素的动画在持续时间更长时看起来更好。在相同大小的移动物体中，第一个停止的物体是通过最短距离的物体。与大型物体相比，小物体移动得更慢，因为它们会产生更大的偏移。动画的持续时间取决于物体的大小和移动的距离。

动画曲线

动画曲线是描述动画过程中物体移动速度的一种方式，它决定了物体在运动过程中的加速和减速情况。

动画曲线有四种类型：线性、缓入、缓和和缓入/标准曲线。其中线性曲线使物体以恒定速度运动，而缓入/标准曲线使物体在开始时获得速度，然后慢慢将其降回零。缓和/减速曲线则是物体快速覆盖长距离然后慢慢降低速度直到它最终停止。

在动画中，应根据不同的情况选择不同的曲线。例如，在元素出现或消失时，应使用缓入/标准曲线，而在元素移动时，应根据具体情况选择线性、缓入/标准曲线或缓和/减速曲线。值得注意的是，元素从屏幕上消失时应使用相同的移动类型，但用户可以随时将其返回到之前的位置。

动画编排

动画编排是指将多个动画组合成一个整体，以引导用户注意一个流畅的方向。动画编排有两种类型：相等互动和从属互动。

相等互动意味着所有对象的外观都服从于一个特定的规则。在这种情况下，所有元素的外观被视为一个引导用户在一个方向上注意的流程。从属互动则是有一个中心对象吸引所有用户的注意力，而所有其他元素都从属于它。这种类型的动画给出了秩序感，并引起了对主要内容的更多关注。

在动画编排中，应清晰地定义其动作的顺序，并尽可能将动画设置为尽可能最小的对象。值得动画的只有一个中心对象，所有其他对象都受其影响。否则，用户将不知道要遵循什么对象。

结论

如果我们总结所有上述规则和原则，界面中的动画应该反映我们从物理世界中知道的运动–摩擦、加速等。模仿现实世界中物体的行为我们可以创建一个序列，允许用户了解接口的内容。如果动画构建正确，那么它是不显眼的，不会分散用户的目标。如果是这样，你要么需要软化它，要么根本不需要删除。这意味着动画不应该减慢用户的速度或阻止执行任务。

本页网址：https://www.xinzhibang.net/article_detail-5476.html

寻求报道，请

关键词

分享至微信：

相关工具

Khroma

AI调色盘生成工具

Microsoft Designer

微软推出的在线设计海报和宣传图工具

阿里云智能logo设计

阿里云推出的智能Logo设计

羚珑

京东推出的商品图智能设计小工具

稿定AI

一站式AI创意工具集合，AI绘图、场景生成，商品合成

ColorMagic

AI调色板生成工具

世优科技推出AI数字人交互一体机，提升企业品牌形象和科技感

世优科技推出AI数字人交互一体机，提升企业品牌形象和科技感在如今数字化快速发展的时代，企业要想提升自己的品牌形象和科技感，不得不深入思考如何用先进的科技手段来服务于顾客。世优科技推出的AI数字人交互一体机，就是这样一种高科技的产品，它具有多模态实时人机交互的能力，拥有智能大脑，业务能力强，形象好，气

分类标签 AI数字人交互一体机多模态实时人机交互全年无休

12-05 22:19

开普云AI数字人能力平台获得中国信通院产品评测肯定

开普云AI数字人能力平台获得中国信通院产品评测肯定据e公司报道，中国信息通信研究院（简称“中国信通院”）发布的数字人产品评测结果显示，开普云AI数字人能力平台在技术能力、工程化能力、安全保障三方面均顺利通过评测，获得肯定。2021年以来，随着元宇宙概念的持续火爆，数字人相关的市场规模也随之迅速扩大。

分类标签开普云AI数字人能力平台中国信通院

12-05 22:18

DORA报告2023：软件研发中的关键指标和趋势

DORA报告2023：软件研发中的关键指标和趋势 DORA发布的State of DevOps 2023报告是研发效能/DevOps领域最有影响力的报告之一。Bytebase作为一家面向研发团队的厂商，在今年的报告中继续进行深度解读。报告覆盖了全球各地的开发者，涉及到了企业的业务、团队和个人表现。报

分类标签 DORA报告研发效能软件交付云计算平台工程人工智能

12-02 16:17

通过图片和语音制作简单的动画

通过图片和语音制作简单的动画最近在学习通过图片和语音制作简单的动画，很高兴跟大家一起分享一下，希望对您有帮助。因为平时上班比较忙，所以今天先大概描述一下整体的流程，后续会针对每个环节再分享细节的处理方法。总体的思路就是我们先要生成一张合适的图片，以及一段语音，然后通过一些操作，让这张图片里的人物可以

分类标签动画图片语音

12-02 16:16

AI动画的崛起：动画师岗位是否受到威胁？

AI动画的崛起：动画师岗位是否受到威胁？随着科技的不断进步和人工智能（AI）技术的发展，动画产业也在经历着巨大的变革。AI动画技术已经在制作过程中发挥着越来越重要的作用，这引发了一个重要的问题：AI动画是否有可能取代传统的动画师岗位？AI动画是指借助人工智能和机器学习技术来生成动画内容的过程。这包括

分类标签 AI动画动画师人工智能

12-02 16:15

AI动画的创意与创新

故事叙述与剧情构建：AI动画的创意与创新AI动画在故事叙述方面的作用日益突显，为动画制作带来了创意与创新的机会。通过机器学习和深度神经网的应用，AI动画不仅拥有独特的创意潜力，还实现了剧情构建的新方式。AI动画通过学习电影、动画作品和文本，从中获取灵感和素材，打破了传统动画制作的局限性。它能够个性化

分类标签 AI动画故事叙述剧情构建

12-02 16:14

AI娱乐公司TreydoraProductions推出VR教育平台，重新定义教育格局

AI娱乐公司TreydoraProductions推出VR教育平台，重新定义教育格局近日，AI娱乐公司TreydoraProductions宣布将于11月推出其开创性的VR教育平台，重新定义教育格局。该公司已经开发了以丰富故事情节为中心的创新AI游戏体验，正在将其技术专长应用于教育领域，将学习过程从

分类标签 VR教育平台AI游戏体验身临其境的教育体验

12-02 02:24

Dora: 无需编码的3D和动画网站设计平台

Dora: 无需编码的3D和动画网站设计平台Dora是一个网页设计平台，使用户能够无需编码就可以创建令人惊叹的3D和动画网站。它具有拖放连接约束布局系统，用于响应式布局、高级动画功能，以及直接将3D对象和场景导入编辑器的能力。Dora的平台提供了一个强大的无代码编辑器，简化了整个网页创建过程。无论你

分类标签 Dora网页设计无代码编辑器

12-02 02:23

腾讯推出深度学习工具套件AILab

腾讯推出深度学习工具套件AILab近日，腾讯宣布将推出自主研发的人工智能框架——AILab。AILab是一个开源的深度学习工具套件，主要面向广大开发者，提供丰富的机器学习算法和深度学习技术，以及丰富的应用场景和示例。AILab的核心技术是名为“Al”的自研深度学习框架。Al是腾讯自主研发的深度学习框

分类标签腾讯深度学习AILab

11-25 16:34

人工智能的场景应用成为新路径，优图实验室探索元素识别技术

人工智能的场景应用成为新路径，优图实验室探索元素识别技术过去几年，有着数十年历史的人工智能驶入了发展快车道，尤其是2016年，谷歌AlphaGo与人类围棋冠军李世石进行的人机大战，更是引爆了全社会对人工智能的关注。从技术角度，人工智能确实取得了跨越式的发展。随着计算机软硬件能力的提升，机器学习、计算

分类标签人工智能场景创新元素识别

11-25 16:33

ChatGPT Midjourney 文心一言文心一格 bing新必应 Stable diffusion 稿定设计墨刀AI mastergo Adobe Firefly runway