超实用!7 个优秀的 UI 交互动画技巧
以下是提高 UI 动效的实用建议,让我们一起看看 UI 交互动画从良好走向优秀的实例。他们是如何通过细节的调整,使用交互动画来提升用户的界面体验。
本文所列出的界面主要显示状态之间的连续性,表示共享元素之间的关系并将用户的注意力引向他们应该注意和采取行动的事物上。
为了创建这些动画,我遵循了来自 Material Motion、IBM 的动画原理和 UX in Motion Manifesto 中的指导原则。
所有的交互都是使用早期的 InVision Studio 版本访问的。您可以在这里下载源文件。
1.使标签内容可滑动
左边的内容是淡入淡出的,右边的内容是随着标签一起滑动。
- 一个好的动画会将内容从一种状态转换为另一个状态。
- 一个优秀的动画则是使内容在不同的状态转换之间保持连续性。
- 当你设计像标签或弹出菜单类似的交互时,可以尝试将内容的位置与打开它的操作相关联。这样你不仅可以提升内容的可见性,还可以为内容的位置设置动画。当你在设计这个动画的时候,还可以添加一个滑动手势,将你从一个内容带到另一个内容。
2.连接卡片的共享元素
左边的内容是打开一个向上滑动的新界面,右边的内容是将卡片展开并填充满整个屏幕。
- 一个好的动画使用向左或向上滑动等过渡细节来展示内容。
- 一个优秀的动画通过共享元素的动画来建立两个状态之间的联系。
在不同状态之间制作动画时,查看它们之间是否有存在共享元素并将它们联系起来。在使用 InVision Studio 时,创建 Motion 转换时会自动连接两个屏幕之间重复的组件。 这使得原型动画的制作变得轻而易举。
查看动画宣言,了解您可以应用的动画类型。 上面的示例使用了 Masking,Transformation,Parenting 和 Easing 原则的组合。
3.在内容中使用级联效果
左边的内容是在动画中有滑动和淡入的显示,右边是相同的动画,但每张卡片都有短暂的延迟。
- 一个好的动画会在元素进入界面时改变元素的位置和不透明度。
- 一个优秀的动画会很快的将界面元素错落有序的出现。
要完成瀑布效果,请尝试延迟应用到每个内容或每组内容上。 保持相同的缓和和持续时间,会带给用户一致的感觉。 尽管如此,不要对每个小元素进行级联 而是使内容组动画化,保持动画的快速和流畅。 谷歌建议每个元素开始运动不要超过 20 毫秒的间隔。可以查看 Material Motion 中的编排原理来查看更多时示例。
4.让内容把界面的其他元素撑开到界面以外
左边的内容是盖在其他内容的上面,右边的内容是随着界面的展开将内容推出来。
- 一个好的动画是在上下文中移动并显示元素。
- 一个优秀的动画是在当元素改变时会影响周围环境的元素。
让内容中的元素了解周围环境。这意味着内容改变时会吸引或排斥其周围的元素。有关更多示例,请查看 Material Design 中的 Aware 运动原理。
5.让菜单出现在上下文中
左边的内容是菜单从下面飞进来,右边的内容是菜单从创建它的动作中扩展而来。
- 一个好的动画是菜单从打开它们的按钮方向显示出现的内容。
- 一个优秀的动画是从创建它们的动作中浮现出来,从触摸点开始展开。
6.使用按钮来显示不同的状态
左边的内容是按钮显示指示状态的文本,右边的内容是按钮使用变化的容器来显示不同的事件。
- 一个好的动画是在按钮附近显示事件。
- 一个优秀的动画是使用按钮本身来显示不同的状态。
尝试使用按钮的容器来提供状态的可视反馈。例如,您可以使用微调器或加载动画替换 CTA; 或者您可以在显示进度的背景中添加动画。解决方案取决于您,我们的想法是使用用户已经与之交互的空间。如果您使用按钮颜色和样式来确认成功状态,则奖励积分。
7.把注意力放在重要的事情上
左边的内容是用颜色和位置使元素脱颖而出,右边的内容是使用微妙的动画来引起用户的注意。
- 一个好的动画会使用颜色,大小和位置来突出用户需要注意或采取的重要操作。
- 一个优秀的动画会使用动画来引起用户对重要操作的关注,并且不会对用户造成干扰。
当用户需要对重要事项采取行动时,请尝试设置动画来吸引他们的注意力。从一个微妙的动画开始,增加与动作重要程度相关的强度(大小,颜色和速度的变化)。同时仅将其用于关键操作,您使用此效果的次数越多,其影响就越小,并且用户获得的烦恼也会越多。
总结
我希望这些示例可以帮助您在为交互添加动画时做出更好的决策。借助 InVision 工作室等新动画和原型制作工具,我预测我们很快就会看到创意互动的复兴。 我们只需要负责任地在这个新的超级大国里任意发挥。
让我们应用动画来解释状态的变化,引起对必要动作的注意,确定元素之间的关系,并为我们的产品添加一些乐趣和特征。 通过遵循这些原则,我们将把动画从好转变为优秀。
英文地址:uxdesign.cc/good-to-gre…
作 / Pabloy Stanley
译 / 大学不轻松 @ 创宇前端
好看的皮囊千篇一律,有趣的灵魂一百四十斤
编 / 荧声 @ 创宇前端
本文已由译者授权发布,版权属于创宇前端。欢迎注明出处转载本文。本文链接:knownsec-fed.com/2018-09-27-…
想要看到更多来自知道创宇开发一线的分享,请搜索关注我们的微信公众号:创宇前端(KnownsecFED)。欢迎留言讨论,我们会尽可能回复。
感谢您的阅读。
超实用!7 个优秀的 UI 交互动画技巧相关推荐
- 7 个优秀的 UI 交互动画技巧
以下是提高 UI 动效的实用建议,让我们一起看看 UI 交互动画从良好走向优秀的实例.他们是如何通过细节的调整,使用交互动画来提升用户的界面体验. 本文所列出的界面主要显示状态之间的连续性,表示共享元 ...
- 一名优秀的UI设计师应该具备哪些条件?
想做好一个好的UI设计师除了应该具有一定的审美能力,还要了解整个产品的开发过程,因为目前国内的软件行业还不能对UI设计形成应有的重视度,所以对我们的要求就更高了,你要能作出夺人眼球的东西,还要站在用户 ...
- UI交互设计好学吗?如何成为优秀设计师
一般来说,通常认识的产品UI设计就是"图形界面的设计"而产品的交互设计往往被忽略! 一个好的交互设计对产品的成功起着很关键的作用.UI所做的就是用户最先接触到的东西,也是一般性的用 ...
- js svg语音波动动画_让动效更酷炫!4 个常见且常用的 SVG 交互动画方法
本文介绍了 4 种常见的 SVG 交互动画方法,帮你了解 SVG 交互动画的原理和简单方法. 优秀的人机交互和舒适合理的动画,一直是 UX 设计师孜孜不倦追求的目标.但 UX 设计师每天都遇到能做出效 ...
- 一些知名的J2me优秀开源UI项目
一些知名的J2me优秀开源UI项目 源文地址:http://www.open-open.com/73.htm J2ME Polish J2ME Polish是用于开发J2ME应用的工具集: 从 ...
- 如何成为优秀的UI设计师
如何成为ui设计师,如何成为一名优秀的ui设计师? 随着互联网浪潮的不断发展,ui设计师这个职业也被越来越多的人所重视,成为了炙手可热的职业. 在零售,交通,金融等行业都可以见到ui设计师的身影.那么 ...
- 怎么用class引入svg_让动效更酷炫!4 个常见且常用的 SVG 交互动画方法
本文介绍了 4 种常见的 SVG 交互动画方法,帮你了解 SVG 交互动画的原理和简单方法. 优秀的人机交互和舒适合理的动画,一直是 UX 设计师孜孜不倦追求的目标.但 UX 设计师每天都遇到能做出效 ...
- 一个优秀的UI设计师必备的能力,你都有吗?
UI:User Interface,直译成中文就是用户界面.UI设计是指对软件的人机交互,操作逻辑,界面美观的整体设计. 说到界面设计,其实非常好理解,因为我们每天都在使用,我们手机里面的APP软 ...
- 麓言信息 优秀的UI设计师必须了解UI设计原则
UI设计是指在考虑用户体验和交互设计的前提下,对用户界面进行的美化设计,涉及移动端.PC端.多媒体终端等各个领域.在实际生活中,一个优秀的UI设计师不仅需要对界面进行美化,还需要对界面中的一些元素 ...
最新文章
- SAP PP使用ECR去修改BOM主数据
- java多线程基础篇第二篇-volidate关键字
- spring同类调用事务不生效-原因及三种解决方式
- CVTE2016校招试题摘选
- Jupyter notebook绘制热力图边缘只有一半的问题
- 吴恩达机器学习笔记一
- 信道模型多径传播阴影衰落——无线接入与定位(2)
- 【报告分享】2021技术趋势报告-德勤.pdf(附下载链接)
- redis java 下载_linux系统下安装redis以及java调用redis
- org.gradle.api.tasks.compile.CompileOptions.setBootClasspath
- android qq勋章动画,qq最新的勋章怎么获得?教你最快刷满10个勋章
- 评《宁可放弃五十万也要逼你去读书》,作者来自另外一个星球?
- cad编辑节点快捷键是什么_cad进入块编辑快捷键是什么,Auto CAD进入块编辑快捷键是什么?...
- 计算机英语calculate,计算英语
- 困惑了很久的函数D3DXCreateTextureFromFileInMemoryEx
- css特效实现透明渐变
- 与表达式p =0等价的c语言表达式是,2015年3月全国计算机二级C语言选择第1套
- 手工检测SQL注入漏洞
- (转)chrome浏览器收藏夹(书签)的导出与导入
- 1.GSAP(专业的Web/JavaScript动画库)