首页软件教程正文

UI动效设计之AE基础课

admin2022-05-24122

UI动效设计之AE基础课

动效在UI中的应用包括人机交互、情感化设计、产品包装、运营设计等, 动效设计是UI设计师的必会必备技能之一.掌握一定的动效设计技能,可以提升产品的用户体验推进设计项目过稿,塑造品牌形象在众多竞品中脱颖而出.

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


这就是 Airbnb 最近推出 Lottie 的原因——正如 Lottie 项目所展示的那样,"一种新的开源工具,可以轻松地为原生应用程序添加运动效果",将动画作为一种新元素添加到应用程序和网站中来增加用户体验.越来越重要.


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


以下是介绍的互动动画效果:


水平视差滚动效果;


动画搜索栏交互;


提交按钮启动信息;


页面之间的分页动画;


用粘性元素展开卡片;


1.水平视差滚动效果


视差效果可用于数字系统设计中的垂直和水平平面.视差效果首先用于视频游戏,几十年后用于网页设计应用程序,然后逐渐在移动应用程序中使用,使用静态或慢速移动的背景图像与快速移动的前景图像来创建多层次的 3D 滚动效果.这使用户体验更加身临其境,并以其微妙之处吸引用户.为何如此抢眼——数字屏幕是一个二维空间,但设计师可以在他们的平面像素屏幕上进行深度和广度的创意,这就是微妙的视差效果发挥作用的地方.


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


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


手游武器卡牌:


5 个简单的 UI 交互原则,让你的设计脱颖而出


哈桑·马哈茂德的武器卡


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


耐克APP宣传卡:


5 个简单的 UI 交互原则,让你的设计脱颖而出


Jardson Almeida 的耐克宣传卡


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


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


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


将视差效果的数量保持在更低限度;


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


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


2.动画搜索栏交互


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


查询和搜索数据是与数字产品交互的最常见方式之一,为它们增添乐趣;只有在用户需要搜索输入时才扩展搜索栏,从而有效利用空白.


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


5 个简单的 UI 交互原则,让你的设计脱颖而出


Alex Pronsky 的搜索转换


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


3.提交按钮启动消息


此动画在用户填写表单或在应用程序中进行某些选择并按下提交按钮后出现.启动应用程序时也


版权声明:1、本站所发布的一切学习教程、软件等仅限用于学习体验和研究目的;请自觉下载后24小时内删除,严禁用于其他用途,如果你喜欢教程,请支持正版教程软件,得到更好的正版服务,本站内容全部来自网络,版权争议与本站无关,如果您认为侵犯了您的合法权益,请联系我们删除。 2、对于不当转载或引用本网站内容而引起的民事纷争、行政处理或其他损失,本网站不承担责任。 3、对不遵守本声明或其他违法、恶意使用本网站内容者,本网站保留追究其法律责任的权利。

本文链接:https://www.fdenglong.com/ruanjian/47.html

文件下载

特别声明:本资料教程搜集自网络,本站不对该资料教程的真实性及可行性承担任何法律责任!本站亦不存储该资料教程,如遇下载链接失效,本站不提供该失效链接的补发服务。  

下载密码:siup  

百度网盘

网友评论