设计具有运动效果和过渡的 UI 是为另一个移动应用程序计划更好的用户体验的好方法。在注意力持续时间较短的世界中,动画微交互是激发用户参与度的好方法。
这就是 Airbnb 最近推出 Lottie 的原因——正如 Lottie 项目所展示的那样,“一种新的开源工具,可以轻松地为原生应用程序添加运动效果”,将动画作为一种新元素添加到应用程序和网站中来增加用户体验。越来越重要。
就像您放入界面并与之交互的所有元素一样,运动效果是一种功能元素,而不仅仅是一种装饰。用户界面中的运动效果要坚持恰到好处的处理,其背后的设置总是需要有明确的目的。当运动效果是锦上添花而不是美中不足时,用户体验会更加流畅。
以下是介绍的互动动画效果:
水平视差滚动效果;动画搜索栏交互;提交按钮启动信息;页面之间的分页动画;带有粘性元素的卡片扩展;一、水平视差滚动效果
视差效果可用于数字系统设计中的垂直和水平平面。视差效果首先用于视频游戏,几十年后用于网页设计应用程序,然后逐渐在移动应用程序中使用,使用静态或慢速移动的背景图像与快速移动的前景图像来创建多层次的 3D 滚动效果。这使用户体验更加身临其境,并以其微妙之处吸引用户。为何如此抢眼——
让我们看一下设计原则中的两个视差滚动效果示例。
手游武器卡牌:
哈桑·马哈茂德的武器卡
视差效果最好的地方之一是在移动应用程序或网站上水平或垂直滚动卡片以体验体验中最流畅的部分,即最后一节中的卡片。类似于当您滚动到特定列表的末尾时 iPhone 引入的橡皮筋效果。
耐克APP宣传卡:
Jardson Almeida 的耐克宣传卡
这个例子是由 Nike 应用概念创建的视差滚动效果,以促进即将推出的产品。
这种设计通过突出背景卡片边缘之外的前景元素 – 鞋子来提升它的水平。此效果补偿滚动时发生的背景颜色变化。正如您所看到的示例,精心设计的视差交互可以轻松帮助您从产品阵容中脱颖而出,并给访问者留下良好的印象。不要将视差视为仅仅是装饰,就像您使用的任何其他技术一样教育小程序定制,它应该以一种为您的用户增加真正有价值的体验的方式进行整合。
然而 开发个app要多少钱 ,重要的是要注意,视差效应中的过多运动可能对患有前庭疾病的人有害。运动和深度的错觉会导致头晕或迷失方向,请牢记以下设计指南:
二、动画搜索栏交互
搜索栏是用户在移动应用或网页设计中最常见的图形元素之一。在这种类型的动画中,界面通常只有一个搜索图标,当您点击它以搜索输入字段时,该图标会显示一个有弹性的动画。通过在搜索元素中添加微妙的动画教育小程序定制,设计师可以实现两个基本目标:
查询和搜索数据是与数字产品交互的最常见方式之一,为它们增添乐趣;只有当用户需要搜索输入时,通过扩展搜索栏来有效利用空白。
让我们看一个这种交互的例子:
Alex Pronsky 的搜索转换
此设计将放大镜(搜索栏)显示为一个圆形图标,单击该图标时,它会变成一个药丸状的搜索框。这是一个非常轻量级的交互设计 开发一款app价格 ,在 Principle 上实现不到 5 页,在开发应用程序或网站时同样容易。
三、提交按钮启动消息
此动画在用户填写表单或在应用程序中进行某些选择并按下提交按钮后出现。当应用程序第一次启动并获取所有序列缓冲区和数据时,也会使用启动动画。启动动画通常包括应用程序的徽标和名称,通常会在应用程序打开之前出现在屏幕上片刻。为何如此抢眼——
让我们看一个交互式启动屏幕的示例:
由 Khai 提交启动画面
本设计是用户在应用中完成提交交互后的演示动画。当数据发送到数据库时,弹跳球创造了一种有趣的体验,下面的滴答声向用户提供了用户动作成功的反馈,这是一个重要的体验实现。以下是启动屏幕时遵循的一些最佳方法:
四、页面之间的分页动画
分页是一系列具有相似内容的相互关联的页面。需要注意的是,即使页面某一部分的内容可以分成不同的页面,我们仍然把这个概念定义为分页。它的优点包括3:更容易导航、更好的用户体验、更流畅的购买过程。常用于电子商务网站。
让我们看一个分页组件的示例,该组件在部分之间滑动,并且可以通过动画来创建愉快的用户体验:
安德烈·贡萨尔维斯的分页
当用户在不同部分之间切换时,它会创建流畅的用户体验。它可用于用户可以在部分之间快速滑动的应用程序。例如,浏览电子商务网站中的产品图片,阅读教育应用程序中不同部分的信息,或按照步骤为食品应用程序创建食谱。
五、用粘性元素展开卡片
在用户界面设计中 做app的公司 ,卡片列表是一种快速呈现信息的简便方法。借用现实世界中使用物理卡片(例如抽屉卡或便利贴)来记忆和组织信息的方法,卡片列表显示了一系列卡片,每张卡片都包含一小段信息。因此,设计的真正难点在于平衡信息传递的方式,而不是让用户不知所措。
用户应该得到一个清晰的画面,准确地传达信息 开发一款app的价格 ,如果用户选择深度浏览,他们可以选择扩大信息,展示更深入。为了保持卡片展开的连续性,流程应该是流畅的,并且感觉像是一种连接的感觉。
像上面所有的交互一样,看一个交互设计的例子:
Lukas Guschlbauer 的 MVMT 概念
此设计用于电子商务应用程序中,用于购买手表显示卡的商品。每张卡片上都需要显示价格和等级等关键信息。扩展卡可以显示附加信息教育小程序定制 商城app开发定制 ,例如使用功能和建议。手表的粘性扩展视图在做出购买决定时创造了更好的体验。直观的使用和正确的操作通常在美学上也令人愉悦。扩展您的卡片列表可以构建响应式布局设计,并且是提高可用性的好方法。目的是改善浏览内容或应用程序的大量信息。
原版的:
发现、改变
探知、求新
共享,感恩一路相伴
昱远品牌形象已完成全面升级
点击访问新官网