easy ui

编辑导读:动态效果是一种功能元素，而不仅仅是一种装饰。本文作者介绍了五种交互效果，水平视差滚动效果、动画搜索栏交互、提交按钮启动信息、页面间分页动画、带粘性元素的扩展卡片，希望对你有所帮助。

设计一个具有动态效果和过渡效果的用户界面是为另一个手机应用程序规划更好的用户体验的好方法。在一个注意力跨度很短的世界里，动漫微互动是激发用户参与的好方法。

这就是为什么Airbnb最近推出了Lottie——一个“新的开源工具，可以轻松地为本地应用添加动态效果”。正如Lottie项目所显示的，将动画作为一种新元素添加到应用程序和网站中以增加用户体验变得越来越重要。

就像所有放入界面并与之交互的元素一样，动态效果也是一种功能元素，而不仅仅是一种装饰。动态效果要在用户界面中处理得当，背后的设定总是需要一个明确的目的。当动态效果是锦上添花而不是美中不足时，用户体验会更流畅。

以下是介绍的互动效果:

水平视差滚动效果；动画搜索栏交互；提交按钮启动信息；页面间的分页动画；用粘性元素展开卡片；一、水平视差滚动效果

在数字系统设计中，视差效应可用于垂直平面和水平平面。视差效果最早应用于电子游戏。几十年后进入网页设计的应用，再逐步进入移动应用，利用静止或慢速移动的背景图像和快速移动的前景图像，营造出多层次的3D滚动效果。这使得用户体验更具沉浸感，并以其细微之处吸引用户。为什么这会让人眼前一亮-

数字屏幕是一个二维空间，但是设计师能在他们的平面像素屏幕上做有深度和广度的创意，这就是微妙视差效果能发挥作用的地方。视差滚动效果在界面设计中采用不同的视觉元素并以不同的速度移动它们来增加动作和深度的错觉。

我们来看看《设计原理》中两个视差滚动效果的例子。

手机游戏武器卡:

哈桑·马哈茂德的武器卡

视差效果最好的一个位置是在手机应用或网站上水平或垂直滚动卡片，体验最流畅链接的感觉，就是最后一部分的卡片。类似于当你滚动到特定列表的末尾时，iphone引入的橡皮筋效果。

Nike应用推广卡:

贾德森·阿尔梅达的耐克促销卡

这个例子是Nike应用程序概念创建的视差滚动效果，用于宣传即将发布的产品。

这种设计将前景元素——鞋子——提升到了一个更高的层次，从而超越了背景卡片的边缘。这种效果弥补了滚动时背景颜色的变化。正如你所看到的，精心制作的视差互动可以很容易地帮助你从产品组中脱颖而出，并为你的访问者创造良好的印象。不要以为视差是纯装饰。像你使用的其他技术一样，它应该为你的用户增加真正有价值的体验。

但需要注意的是，视差效应内的过度运动可能会对患有前庭疾病的人造成伤害。运动错觉和深度错觉可能会导致头晕或定向障碍。请记住这些设计准则:

将视差效果的数量保持在最低限度；屏幕的一个小区域内限制过多移动效果；不要让你的效果分散用户对重要信息的注意力；二、动画搜素栏交互

搜索栏是移动应用程序或网页设计中最常见的图形元素之一。在这种类型的动画中，界面通常只有一个搜索图标，当你点击它搜索输入栏时，会显示一个弹性动画。通过向搜索元素添加微妙的动画，设计人员可以实现两个基本目标:

查询和搜索数据是数字产品中最常见的交互方式之一，为他们增添乐趣；只有当用户需要搜索输入时，通过扩展搜索栏有效利用空白区。

让我们来看看这个交互的例子:

Alex Pronsky的搜索转换

这个设计将一个放大镜(搜索栏)显示为一个圆形图标，点击后会变成一个药丸形状的搜索框。这是一个非常轻量级的交互设计，在原理上不到5页就可以实现，在开发应用或网站时同样简单。

三、提交按钮启动消息

这个动画将在用户填写表单或在应用程序中做出一些选择并按下提交按钮后出现。当第一次启动应用程序并且提取所有有序缓存和数据时，也使用Splas。启动动画通常包括应用程序的徽标和名称，并且通常在应用程序打开之前出现在屏幕上一会儿。为什么这会让人眼前一亮-

当应用程序进入加载阶段来获取或上传数据时，启动动画非常合适，提供一个为用户参与的锚点；然而，理想情况是通过提供强烈影响用户体验的交互式体验，可以使用户走得更远。

让我们看一个交互式闪屏的例子:

由Khai提交闪屏

这个设计是用户在应用中完成提交交互后显示的动画。当数据发送到数据库时，弹跳球创造了一个有趣的体验，下一个滴答向用户提供反馈，告诉用户操作成功了，这是一个重要的体验实现。以下是启动屏幕的一些最佳方式:

将持续时间控制在2秒以内；对于用户可能在应用程序中多次进行的交互将时间减少到1秒或更短（比如多次提交）；在评估设计想法时要追求简单和大胆的想法而不是难懂的、错综复杂点子；过于复杂的序列动画只会显得华而不实，可能会让用户觉得他们的时间被浪费；强烈的背景色彩、背景图片都是不错的选择。假如启动画面有动画效果，那么在一个相对固定或渐变的背景上添加动画可能呈现的效果会更好。四、页面间的分页动画

分页是一系列内容相似的相互连接的页面。需要注意的是，即使一个页面的某一部分的内容可以分成不同的页面，我们还是把这个概念定义为分页。它的优势包括三个:导航更容易，用户体验更好，购买过程更流畅。通常用于电子商务网站。

虽然大多数传统网站和应用程序使用单独的页面来分割内容，由于页面加载时间较长，导致用户体验不连贯，但新的设计系统已经开始使用更流畅的分页交互，从而降低了客户流失率，提高了客户留存率；过去用一个流畅的分页动画需要通过几个页面进行导航，现在我们可以创建一个单页面的内容交互的效果。

让我们看一个分页组件的例子，它可以在部件之间滑动，并通过动画创建愉快的用户体验:

安德烈·贡萨尔维斯编页

当用户在不同部分之间切换时，它创建了平滑的用户体验。它可以用在用户可以在部件之间快速滑动的应用中。例如，在电子商务网站中浏览产品图片，在教育应用程序中阅读不同部分的信息，或者按照步骤为食品应用程序创建食谱。

五、用粘性元素展开卡片

在用户界面设计中，卡片列表是一种简单快捷的信息显示方式。借鉴现实世界中使用实体卡片来记忆和组织信息的方法，如抽屉卡片或便利贴。卡片列表显示一系列卡片，每张卡片包含少量信息。所以设计真正的难点在于平衡信息的传递方式，而不是让用户无所适从。

用户应该得到一个清晰的画面，准确地传达信息。如果用户选择深度浏览，可以选择展开信息，深度展示。保持卡片展开流畅的连续性和流动性，感觉像一种连接的感觉。

像上面所有的交互一样，看一个交互设计的例子:

卢卡斯·古施鲍尔的MVMT概念

此设计用于一个电子商务应用程序购买手表显示卡项目。每张卡上都需要显示价格、等级等主要信息。扩展卡可以显示附加信息，例如使用功能和建议。这款手表的粘性扩展视图在消费者做出购买决定时创造了更好的体验。直观的使用和正确的操作通常是令人愉悦的。展开卡片列表可以构建一个响应式的布局设计，也是提高可用性的绝佳解决方案。目的是改善浏览内容或信息丰富的应用程序。

原文:https://www .星期三. is/writing-articles/5-easy-ui-interactions-in-principle。

作者:萨玛斯·扎尔特

这篇文章由@牧之翻译公司发表。每个人都是产品经理。未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。