Principle也能设计动画效果?

Principle是一个出色的交互设计工具，可以帮助我们把UI交互想法变为现实。它适用于Mac，同时也可以与Sketch和Figma文件无缝协作。Principle会为我们自动化大部分动画和过渡效果，并快速生成交互式动画demo。它为我们提供了平滑及无缝的操作体验。

今天，小编将为大家分享5种Principle的动画设计技术，这些技术将简单高效地帮助大家把枯燥且静态的模型转变为交互式原型，从而增强用户体验。

Principle-Animation

水平视差滚动效果

随着视差效果开始逐渐进入网页设计中，然后慢慢进入移动应用程序，如今大家可以使用静态或慢速移动的背景图像与快速移动的前景图像创建多层3D滚动功能。而这就带来了更加身临其境的用户体验，进而以其微妙之处吸引了更多用户的关注。

那么，为什么我们要在UI中添加水平视差的滚动效果呢？

数字屏幕可能是一个二维空间，但作为设计师，我们可以发挥创意，将平面像素变得更有深度和维度，而这就是视差效果可以发挥作用的地方
视差滚动效果通过在界面设计中采用不同的视觉元素，并以不同的速度移动它们来增加动作和深度错觉

以下是两个在Principle中所设计的视差滚动效果示例：

Weapon Cards for a Mobile Game

当我们在移动应用程序或网站上垂直或水平滚动卡片或部分操作区域时，就会产生视差效果的最佳位置。用户在使用应用程序时，可以在界面所呈现的最后一张卡片上感受到最佳的用户体验。

Weapon Cards by Hassan Mahmud

Nike App Promotional Cards

这是为Nike应用概念创建的视差滚动效果示例，用于宣传即将推出的产品。该设计通过突出前景元素（鞋子）以提升界面层次。与滚动动画一起发生的背景颜色变化补充了这种效果。

正如我们在示例中看到的那样，精心制作的视差交互可以轻松地呈现信息，并为用户留下持久的印象。当然，我们也不能认为视差纯粹是装饰性的，与我们使用屏幕的任何其他技术相似，视差滚动效果应该以一种增加访问者真正价值的方式进行使用。

Nike promotional cards by Jardson Almedia

但是，值得我们注意的是，在设计过程中，我们应该遵循以下三个原则来进行视差效果设计：

将视差效果的数量保持在最低限度
限制屏幕小区域内的移动效果
不要让效果分散用户对重要信息的注意力

动画搜索栏交互

搜索栏是用户在我们的移动应用程序或网页设计中进行交互的最常见的图形元素之一。在这类动画中，界面通常只是一个搜索图标，当用户点击它时，搜索输入框会出现一个弹性动画。通过在搜索元素中添加一个微妙的动画效果，我们就可以实现两个基本设计目标：

为数字产品中最常见的交互，即，查询和搜索数据，增添乐趣
仅当用户需要搜索输入时，才通过扩展搜索栏有效地利用空白

下面，就来看一下在Principle中设计的搜索图标交互的示例。

Search transform by Alex Pronsky

这个设计将放大条显示为一个圆形图标，单击该图标时动画会展开为药丸状的searc元素。这是一个非常轻量级的交互设计，可以在Principle上轻松实现，并且在我们的应用程序或网站中也可以实现同样简单的开发方式。

提交按钮启动消息

当用户在填写表单或在应用程序中进行某些选择后按下提交按钮，就会出现此类动画。当应用程序首次启动并获取所有程序缓存和数据时，也会使用启动动画。启动器动画通常由徽标和应用程序名称组成，并且通常会在应用程序打开之前在屏幕上短暂出现。

这一设计的好处在于：在应用程序进入加载阶段以获取或上传数据时，启动画面会为用户提供参与度。然而，在理想情况下，也可以通过提供强烈影响用户体验的交互式体验，来为用户提供更佳的操作感。

在下图的示例设计中，当用户在应用程序中的完成交互后，会显示启动动画。弹跳球创造了一种有趣的体验，同时数据被发送到数据库，而下方的刻度线则会向用户提供操作成功的反馈，这也是一个重要的UX实现。

Submit splash screen by Khai

分页动画

分页是一系列相互连接并具有相似内容的页面。在这里，大家需要关注的是，即使页面上的某部分内容可以分成不同的页面，我们仍然可以将这个概念定义为分页，它具有包括可以更轻松地导航、具备更好的用户体验、呈现更流畅的用户旅程等等优势。

虽然大多数传统网站和应用程序都习惯使用单独的页面来拆分内容，但由于页面加载时间较长会导致用户体验中断的情况发生。因此，一些较新的设计系统已经开始使用更流畅的分页交互，从而降低流失率和提高用户的保留率。通过使用平滑的分页动画，我们可以为通常需要在多个页面中导航的内容创建单页面交互的错觉。

这是一个移动应用程序中流行的分页动画示例，它被称为拉伸分页。当用户在界面各部分之间导航时，它会创建流畅的用户体验。同时，它也可以帮助用户在各元素之间快速滑动应用程序。例如，在电子商务中浏览产品图像、在教育类APP中阅读不同信息，或在食品类APP中按步骤创建食谱等。

Pagination by André Gonçalves

使用粘性元素扩展卡片

在UI设计中，卡片列表是一种以易于理解的块形式呈现信息的便捷方法。从现实世界中使用物理卡片（如便利贴）记忆和组织信息的方法中得到启发，卡片列表显示的每张卡片都包含少量的小信息。

在浏览卡片时，用户应该清楚了解所传达的信息，同时还可以进一步扩展这些信息并进行深入挖掘。在我们选择使用卡片设计时，应该保持这种扩展的连续性和流动性是平稳的，并且呈现出一种连续良好的操作体验。例如，如果在卡片上使用一个粘性元素，当卡片展开时会黏住，进而可以用来创建微妙的动态交互。

下面是一个在Principle中的示例，它是一个用于手表电子商务概念的应用程序，以显示可以购买的物品卡片。每张卡片都需要显示价格和等级等主要信息。当用户展开卡片时，会显示功能和建议等其他信息。而当他们在做出购买决定所需的信息时，界面上会显示扩展视图，以创造更加互联的用户体验。

MVMT concept by Lukas Guschlbauer

我们需要知道，如果操作得当，使用直观的卡片设计通常在美学上也是能令人愉悦的。在改善导航内容特别多和信息量大的应用程序的体验时，一个扩展的卡片列表可以是构建响应式设计以提高可用性的绝佳方式。

以上，就是Principle的5种动画技术，感兴趣的同学可以前往其官网，进行实际操作。

Principle官网：

https://principleformac.com/

编辑：YAN

原文链接：

https://medium.com/wednesday-is-speaking/5-easy-ui-interactions-in-principle-that-will-make-your-design-stand-out-1b1e82905ccb?source=explore---------43-83--------------------591aefd6_b386_483a_b686_ff5896c24ea7-------15---

图文信息源于网络，侵权告知即删