网站内容设计(Airbnb推出一个–它“新开源工具”轻松为本地应用程序添加动效效果)

　　网站内容设计(Airbnb推出一个–它“新开源工具”轻松为本地应用程序添加动效效果)

　　设计具有运动效果和过渡的 UI 是为另一个移动应用程序计划更好的用户体验的好方法。在注意力持续时间较短的世界中，*敏*感*词*微交互是激发用户参与度的好方法。

　　这就是 Airbnb 最近推出 Lottie 的原因——正如 Lottie 项目所展示的那样，它是一个“新的开源工具，可以很容易地为原生应用程序添加动作效果”，增加了应用程序的用户体验，网站一个新的元素越来越重要。

　　就像您放入界面并与之交互的所有元素一样，运动效果是一种功能元素，而不仅仅是一种装饰。用户界面中的运动效果要坚持恰到好处的处理，其背后的设置总是需要有明确的目的。当运动效果是锦上添花而不是美中不足时，用户体验会更加流畅。

　　以下是介绍的互动*敏*感*词*效果：

　　1.水平视差滚动效果；

　　2.*敏*感*词*搜索栏交互；

　　3.提交按钮激活信息；

　　4.页面之间的分页*敏*感*词*；

　　5.用粘性元素展开卡片；

　　一、水平视差滚动效果

　　视差效果可用于数字系统设计中的垂直和水平平面。视差效果首先用于视频游戏，几十年后用于网页设计应用程序，然后逐渐在移动应用程序中使用，使用静态或慢速移动的背景图像与快速移动的前景图像来创建多层次的 3D 滚动效果。这使用户体验更加身临其境，并以其微妙之处吸引用户。为何如此抢眼——

　　数字屏幕是一个二维空间，但设计师可以在他们的平面像素屏幕上进行深度和广度的创意，这就是微妙的视差效果发挥作用的地方。

　　视差滚动在界面设计中采用不同的视觉元素并以不同的速度移动它们以增加运动和深度的错觉。

　　让我们看一下设计原则中的两个视差滚动效果示例。

　　手游武器卡牌：

　　<IMG border=0 src="http://www.visionunion.com/admin/data/file/img/20220406/20220406000115.gif" width=600>

　　哈桑·马哈茂德的武器卡

　　视差效果最好的地方之一是在移动应用上水平或垂直滚动​​卡片或网站来体验最流畅的部分，最后一节中的卡片。类似于当您滚动到特定列表的末尾时 iPhone 引入的橡皮筋效果。

　　耐克APP宣传卡：

　　<IMG border=0 src="/admin/data/file/img/20220406/20220406000117.gif" width=600>

　　Jardson Almeida 的耐克宣传卡

　　这个例子是由 Nike 应用概念创建的视差滚动效果，以促进即将推出的产品。

　　这种设计通过突出背景卡片边缘之外的前景元素 - 鞋子来提升它的水平。此效果补偿滚动时发生的背景颜色变化。正如您所看到的示例，精心设计的视差交互可以轻松帮助您从产品阵容中脱颖而出，并给访问者留下良好的印象。不要将视差视为仅仅是装饰，就像您使用的任何其他技术一样，它应该以一种为您的用户增加真正有价值的体验的方式进行整合。

　　然而，重要的是要注意，视差效应中的过多运动可能对患有前庭疾病的人有害。运动和深度的错觉会导致头晕或迷失方向，请牢记以下设计指南：

　　将视差效果的数量保持在最低限度；

　　限制屏幕小范围内的过度移动效果；

　　不要让你的效果分散用户对重要信息的注意力；

　　二、*敏*感*词*搜索栏交互

　　搜索栏是用户在移动应用或网页设计中最常见的图形元素之一。在这种类型的*敏*感*词*中，界面通常只有一个搜索图标，当您点击它以搜索输入字段时，该图标会显示一个有弹性的*敏*感*词*。通过在搜索元素中添加微妙的*敏*感*词*，设计师可以实现两个基本目标：

　　查询和搜索数据是与数字产品交互的最常见方式之一，为它们增添乐趣；

　　只有在用户需要搜索输入时才扩展搜索栏，从而有效利用空白。

　　让我们看一个这种交互的例子：

　　<IMG border=0 src="/admin/data/file/img/20220406/20220406000118.gif" width=600>

　　Alex Pronsky 的搜索转换

　　此设计将放大镜（搜索栏）显示为一个圆形图标，单击该图标时，它会变成一个药丸状的搜索框。这是一个非常轻量级的交互设计，在 Principle 上实现不到 5 页，在开发应用程序或 网站 时同样简单。

　　三、提交按钮启动消息

　　此*敏*感*词*在用户填写表单或在应用程序中进行某些选择并按下提交按钮后出现。当应用程序第一次启动并获取所有序列缓冲区和数据时，也会使用启动*敏*感*词*。启动*敏*感*词*通常包括应用程序的徽标和名称，通常会在应用程序打开之前出现在屏幕上片刻。为何如此抢眼——

　　当应用程序进入加载阶段获取或上传数据时，启动*敏*感*词*非常适合，为用户参与提供锚点；

　　然而，理想情况下，用户可以通过提供强烈影响用户体验的交互式体验走得更远。

　　让我们看一个交互式启动屏幕的示例：

　　<IMG border=0 src="/admin/data/file/img/20220406/20220406000119.gif" width=600>

　　由 Khai 提交启*敏*感*词*面

　　本设计是用户在应用中完成提交交互后的演示*敏*感*词*。当数据发送到数据库时，弹跳球创造了一种有趣的体验，下面的滴答声向用户提供了用户动作成功的反馈，这是一个重要的体验实现。以下是启动屏幕时遵循的一些最佳方法：

　　控制时长小于2秒；

　　将用户在应用中可能进行多次交互（如多次提交）的时间减少到 1 秒或更短；

　　在评估设计理念时，追求简单而大胆的想法，而不是硬而复杂的想法；

　　过于复杂的序列*敏*感*词*只会显得华而不实，可能会让用户觉得自己的时间被浪费了；

　　· 强烈的背景颜色和背景图片是不错的选择。如果初始屏幕是*敏*感*词*的，那么在相对固定或渐变的背景上添加*敏*感*词*可能会更好看。

　　四、页面之间的分页*敏*感*词*

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

　　虽然大多数传统的 网站 和应用程序使用单独的页面来分割内容，由于页面加载时间较长而导致用户体验断开，但新的设计系统已经开始使用更流畅的分页交互来降低客户流失率，提高客户保留率;

　　不再是过去通过流畅的分页*敏*感*词*浏览多个页面，现在我们可以创建单页内容交互效果。

　　让我们看一个分页组件的示例，该组件在部分之间滑动，并且可以通过*敏*感*词*来创建愉快的用户体验：

　　<IMG border=0 src="/admin/data/file/img/20220406/20220406000120.gif" width=600>

　　安德烈·贡萨尔维斯的分页

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

　　五、用粘性元素展开卡片

　　在用户界面设计中，卡片列表是一种快速呈现信息的简便方法。借用现实世界中使用物理卡片（例如抽屉卡或便利贴）来记忆和组织信息的方法，卡片列表显示了一系列卡片，每张卡片都收录一小段信息。因此，设计的真正难点在于平衡信息传递的方式，而不是让用户不知所措。

　　用户应该得到一个清晰的画面，准确地传达信息，如果用户选择深度浏览，他们可以选择扩大信息，展示更深入。为了保持卡片展开的连续性，流程应该是流畅的，并且感觉像是一种连接的感觉。

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

　　<IMG border=0 src="/admin/data/file/img/20220406/20220406000121.gif" width=600>

　　Lukas Guschlbauer 的 MVMT 概念

　　此设计用于电子商务应用程序中，用于购买手表显示卡的商品。每张卡片上都需要显示价格和等级等关键信息。扩展卡可以显示附加信息，例如使用功能和建议。手表的粘性扩展视图在做出购买决定时创造了更好的体验。直观的使用和正确的操作通常在美学上也令人愉悦。扩展您的卡片列表可以构建响应式布局设计，并且是提高可用性的好方法。目的是改善浏览内容或应用程序的大量信息。

　　原来的：