设计一个带有动效效果和转场效果的用户界面，是为另一个手机运用方案一个更好的用户体验的好方法。在一个把稳力持续韶光短暂的天下里，动画-微交互是刺激用户参与的好办法。
这便是为什么 Airbnb最近推出Lottie–它是一个“新开源工具，可以轻松为本地运用程序添加动效效果”像Lottie项目表明了，为运用程序和网站增加用户体验，个中添加动画作为一个新元素越来越主要。
就像所有放入界面中的元素并与之交互的过程一样，动效效果也是一个功能性元素，而不仅仅是一个装饰。动效效果在用户界面该当坚持一个恰到好处的处理，而背后设置始终须要有一个明确的目的。当动效效果是锦上添花而不是美中不敷时，用户体验会更流畅。
以下是先容的交互动效效果：
视差效果在数字系统设计中可以同时用于垂直面和水平面。视差效果首次运用是在视频游戏，数十年后它进入了网页设计运用中，然后逐渐的又进入了移动运用程序，利用静态或缓慢移动的背景图像与快速移动的前景图像，创建一个多层次的3D滚动效果。这利用户体验更加身临其境，以其奇妙之处吸引用户。为什么这会让人面前一亮-
数字屏幕是一个二维空间，但是设计师能在他们的平面像素屏幕上做有深度和广度的创意，这便是奇妙视差效果能发挥浸染的地方。视差滚动效果在界面设计中采取不同的视觉元素并以不同的速率移动它们来增加动作和深度的错觉。一起看一下在设计原则中的两个视差滚动效果实例。
手机游戏武器卡：
Weapon cards by Hassan Mahmud
视差效果最佳位置之一是在移动运用程序或网站上水平或垂直滚动卡片，体验最流畅环节的感想熏染，是在末了部分的一张卡片。类似于iphone在你滚动到特定列表的末端时引入的橡皮筋效应。
耐克APP匆匆销卡：
Nike promotional cards by Jardson Almeida
这个例子是耐克APP观点创作的视差滚动效果，来促进即将到来的产品发布。
这个设计通过突出前景元素—- 鞋子—- 将其提升了一个层次，从而超越了背景卡片的边缘。这个效果填补滚动时发生的背景颜色改变。正如你看到的例子，精心制作的视差互动效果可以很随意马虎帮助你从产品群中脱颖而出并为你的访客建立一个好的印象。不要认为视差是纯粹的装饰，像你利用的其他技能一样，它该当为你的用户增加真正有代价的体验办法被领悟。
但是，须要把稳的是在视差效应范围内过多的运动可能会对那些患有前庭疾病的人造成侵害。运动错觉和深度错觉可能导致眩晕或者迷失落方向感，请牢记这些设计准则：
将视差效果的数量保持在最低限度；屏幕的一个小区域内限定过多移动效果；不要让你的效果分散用户对主要信息的把稳力；二、动画搜素栏交互搜索栏是用户在移动运用程序或网页设计中最常见的图形元素之一。在这种类型的动画中，界面常日只有一个搜索图标，当你点击它搜索输入字段时会显示一个弹性动画。通过在搜索元素中添加一个奇妙的动画，设计师可以实现两个基本目标:
查询和搜索数据是数字产品中最常见的交互办法之一，为他们增长乐趣；只有当用户须要搜索输入时，通过扩展搜索栏有效利用空缺区。让我们看一下这个交互的例子：
Search transform by Alex Pronsky
这个设计展示了放大镜（搜素栏）作为圆形图标，点击该图标时它会有动效，变成药丸形状的搜索框。这是一个非常轻量级的交互设计，在 Principle 上只须要不到5个页面就可以实现，并且在开拓运用程序或网站时也同样大略。
三、提交按钮启动
用户填写表单或在运用程序中进行某些选择按下提交按钮之后就会涌现这个动画。一个运用程序首次启动并且所有序缓存和数据都被提取时，启动(Splash) 动画也会被利用。启动动画常日包括 logo 和运用程序的名称，常日会在运用程序打开前在屏幕上涌现少焉。为什么这会让人面前一亮-
当运用程序进入加载阶段来获取或上传数据时，启动动画非常得当，供应一个为用户参与的锚点；然而，空想情形是通过供应强烈影响用户体验的交互式体验，可以利用户走得更远。让我们来看一个交互式启动画面的例子：
Submit splash screen by Khai
这个设计是用户在运用程序中完成提交交互之后的展示的动画。当数据被发送到数据库时，弹跳球创建了一个有趣的体验，接下来的勾号向用户供应反馈，见告用户的操作是成功的，这是一个主要的体验实现。以下是启动画面时要遵照的一些最佳的方法：
将持续韶光掌握在2秒以内；对付用户可能在运用程序中多次进行的交互将韶光减少到1秒或更短（比如多次提交）；在评估设计想法时要追求大略和大胆的想法而不是难懂的、错综繁芜点子；过于繁芜的序列动画只会显得华而不实，可能会让用户以为他们的韶光被摧残浪费蹂躏；强烈的背景色彩、背景图片都是不错的选择。如果启动画面有动画效果，那么在一个相对固定或渐变的背景上添加动画可能呈现的效果会更好。四、页面间的分页动画分页是一系列相互连接且内容相似的页面，须要把稳的是纵然页面中某一部分的内容可以分为不同的页面，我们仍旧将这个观点定义为分页。其优点包括3个：更随意马虎的导航、更好的用户体验、更流畅的购买过程。常日用在电子商务网站。
虽然大多数传统网站和运用程序利用单独的页面来分割内容，由于页面加载韶光较长，导致用户体验不连贯，但新的设计系统已经开始利用更流畅的分页交互，从而降落了客户流失落率，提高了客户留存率；过去用一个流畅的分页动画须要通过几个页面进行导航，现在我们可以创建一个单页面的内容交互的效果。让我们来看一个分页组件的例子，它可以在各个部分之间滑动并且可以通过动画创建一个令人愉快的用户体验：
Pagination by André Gonçalves
当用户在不同部分之间切换时，它创造了一种流畅的用户体验。它可以用在运用程序中用户可以在各个部分之间快速滑动。例如浏览电子商务网站中的产品图片、阅读教诲运用程序中的不同部分信息，或者按照步骤创建食品运用程序的配方。
五、用粘性元素展开卡片
在用户界面设计中，卡片列表是一个易于展示信息快的方法。借鉴现实天下中利用实物卡片影象和组织信息的方法ーー例如抽屉卡或便利贴ーー卡片列表显示一系列卡片，每张卡片包含一小部分信息。因此，设计的真正的难点在于平衡信息的通报办法，而不是让利用者不知所措。
用户该当得到一个清晰的图片并准确传达信息，如果用户选择深入浏览时，可以选择扩展信息和更深入的展示。保持卡片展开的连续性、流动性应是平顺且觉得就像是一个连接在一起的觉得。
像上面所有的交互一样，看一个交互设计的例子：
MVMT concept by Lukas Guschlbauer
这个设计是用在一个电子商务的运用程序，购买腕表显示卡的项目。紧张的信息如价格和等级须要显示在每张卡片。扩展卡片可以显示额外的信息，例如利用特点和推举。在消费购买决策时，这款腕表的粘性扩展视图创造了一个更好的体验。直不雅观的利用和-精确的操作-常日美学上也是令人舒适的。扩展卡片列表可以构建相应式布局设计，也是提高可用性的绝佳方案。目的是提高浏览内容或者信息量大的运用程序。
原文：https://www.wednesday.is/writing-articles/5-easy-ui-interactions-in-principle
作者：Samarth Zalte
本文由@木之 翻译发布于大家都是产品经理，未经容许，禁止转载。
题图来自 Unsplash，基于CC0协议。