交互动效|优秀的UI动画设计技巧

新知榜官方账号

2023-07-04 19:48:58

交互动效|优秀的UI动画设计技巧

技术知识、行业知识、业务知识等，都是B端产品经理需要了解和掌握的领域相关的知识，有助于进行产品方案设计和评估。本文笔者将为大家展示一些UI动画的案例，期以通过这些案例，帮助大家在为交互添加动画时做出更好的决策。让我们看一些UI动画从好到优秀的例子，通过这里和那里的一些调整，你可以使用动画提升你的UI模式。列出的交互表示状态之间的连续性，表示共享元素之间的关系，并将用户的注意力引用到他们应注意和采取行动的事物上。为了创建这些动画，我遵循了MaterialMotion、IBM的动画原则和UXinMotionManifesto中的指导原则。所有的交互都是使用InVisionStudio的早期访问版本完成的。

1. 使标签中的内容滑动左边的内容淡入淡出

一个好的动画将内容从一个状态转换为另一个状态。一个优秀的动画通过使内容在状态之间移动来显示转换的连续性。当您设计像标签或弹出菜单这样的交互时，请尝试将内容的位置相对于打开它的操作。这样，您不仅可以设置内容的可见性，还可以设置位置的动画。哦，当你在浏览它的时候，添加一个轻扫手势，将你从一个内容带到另一个内容。

2. 连接卡片的共享元素

一个好的动画使用左推或向上滑动等过渡来在细节屏幕上显示内容。一个优秀的动画通过动画共享内容在两个状态之间建立连接。在不同状态之间制作动画时，查看它们之间是否存在任何共享元素并连接它们。使用InVisionStudio时，在创建Motion转换时会自动连接两个链接屏幕之间重复的组件，这使得原型制作动画变得轻而易举。查看MotionManifesto，了解您可以应用的动画类型。上面的示例使用了Masking、Transformation、Parenting和Easing原则的组合。

3. 在您的内容中使用级联效果

一个好的动画会在材料进入屏幕时改变材质的位置和不透明度。一个优秀的动画很快就会错开每个组或元素的外观。要完成瀑布效果，请尝试对每个内容或每组内容应用延迟。保持相同的缓和和持续时间，因此感觉一致。尽管如此，不要对每个小元素进行级联，使内容组具有动画效果。保持动画的快速和活泼。谷歌建议开始每个元素不超过20毫秒。查看MaterialMotion中的编排原理以查看更多示例。

4. 使内容将其他元素排除在外

好的动画移动并在上下文中显示元素。优秀的动画在变化时会显示影响周围环境的元素。使你内容中的元素了解周围环境。这意味着使内容吸引或排斥其周围的元素。有关更多示例，请查看MaterialDesign中的Aware运动原理。

5. 使菜单显示在上下文中

好的动画菜单显示从打开它们的按钮方向出现的内容。优秀的动画从创造它们的动作中出现了很棒的动画菜单，从触摸点开始增长。

6. 使用按钮显示不同的状态

良好的交互显示按钮旁边的事件。优秀的交互使用按钮本身来显示不同的状态。尝试使用按钮的容器来提供状态的可视反馈，例如：你可以使用微调器或加载动画替换CTA;或者你可以在显示进度的背景中添加动画。解决方案取决于你，我们的想法是使用用户已经与之交互的空间。如果你使用按钮颜色并复制以确认成功状态，则奖励积分。

7. 注意重要的事情

好的设计使用颜色，大小和位置来突出用户需要注意或采取的重要行动。优秀的设计使用动画来引起对重要动作的注意，而不会造成破坏性。当用户需要对重要事项采取行动时，请尝试设置动作以吸引他们的注意力。从一个微妙的动画开始，增加与动作重要程度相关的强度（大小，颜色和速度的变化），仅将其用于关键操作——你使用此效果的次数越多，其影响就越小……用户获得的烦恼越多。

我希望这些示例可以帮助您在为交互添加动画时做出更好的决策。借助InVisionstudio等新动画和原型制作工具，我预测我们很快就会看到创意互动的复兴。我们只需要记住认真负责地使用这个新的强大工具。让我们应用动画来解释状态的变化，引起对必要动作的注意，确定元素之间的关系，并为我们的产品添加一些乐趣和特征。通过遵循这些原则，我们将动画从好转变为优秀。

本文由@Chris原创发布于人人都是产品经理，未经许可，禁止转载。

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

寻求报道，请

关键词

分享至微信：

相关工具

MasterGo AI

国产产品设计工具MasterGo推出的智能UI设计助手

Magic Design

在线设计工具Canva推出的AI设计工具

Looka

AI在线设计和生成logo

阿里云智能logo设计

阿里云推出的智能Logo设计

美间

AI软装设计、海报和提案生成工具

Luma AI

AI 3D捕捉、建模和渲染

世优科技推出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