美文网首页用户体验UI设计创业扶持
UI中使用动效的3个关键点

UI中使用动效的3个关键点

作者: 张安松 | 来源:发表于2017-04-07 10:24 被阅读19次

系统状态

在你的程序在后台总发生一些过程,如正在从服务器下载数据,进行计算。这总是需要一些时间的。你需要让用户知道这个程序没有冻结,显示正在处理的状态。视觉交互给用户一种控制程序的感觉。

加载完成度

加载时间对大多数产品是不可避免的。而动效虽然不能解决这个问题,但会减少一点问题。

当我们不能缩短时,当然可以使等待变得更愉快。

有创意的过程动效可以减少用户感知的时间。动效影响用户感知你的产品,使它看起来比实际上更好。

下拉刷新

这组很流行的动效是“下拉刷新”,它发起一个移动设备上的内容更新的过程。

提示:刷新动效应该与设计整体匹配——如果应用很小,动效也应该是。

通知

因为运动会吸引注意力,动效是一个令人愉快的方式可以与没有太多经验的用户进行交互。

导航和转换

最基本的动效是转换。这种类型的动效背后的逻辑是帮助用户理解发生在页面上的布局的变化,改变了什么以及以后如何再次改变。一个典型的例子是一个汉堡包按钮,进行切换隐藏内容。

导航之间的转换

设计师使用动效在导航之间切换用户上下文,解释屏幕上的元素的变化。

视觉元素之间的层次结构和联系

动效可以完美的描述对象,并说明它们如何进行交互的。

功能变化

在某些情况下,设计师们不得不设计一个在一定条件下变化但操作按钮。我们经常在空间受限的手机设计中看到。

这种类型的动画显示了当用户进行交互时元素是怎样改变的。在下面的示例中,当用户按浮动操作按钮,加号变成了一支铅笔。这表示铅笔是主要的功能。这个小的细节意味着接下来发生不同的情况,知道图标意味着这两种状态。


视觉反馈

任何用户界面的视觉反馈都是至关重要的。它可以让用户有控制感,让用户感觉理解在给定的时间的当前上下文的系统。

反馈确认

用户界面的元素如按钮和控件应该有的,即使他们是在另一个图层后面。

在物质世界中,按钮、控件和其他与我们进行交互的对象。人们都会在交互中期望类似水平的用户界面控件的响应能力。

为了弥合这一差距,视觉和运动轨迹需要即时输入,动画的外观和方式直接进行操作。

可视化的行为的结果

动效可以提高每一个交互并且是加强用户预成型的操作。

在下面的例子中,当用户点击“支付”,一个转轮短暂出现在应用中表示成功的状态。动效让用户觉得他们可以很容易支付而且用户会很喜欢这样的细节。

相关文章

  • UI中使用动效的3个关键点

    系统状态 在你的程序在后台总发生一些过程,如正在从服务器下载数据,进行计算。这总是需要一些时间的。你需要让用户知道...

  • UI设计中的动效具备哪些主要作用

    UI设计中的动效具备哪些主要作用?动效的使用能够有效提升UI设计页面的整体效果,使操作界面具备更加强烈的趣味性,从...

  • AE动效设计课堂笔记

    UI基础动效设计需要考虑的点: ①逻辑 ②空关系 ③层次感 ④架构 UI动效的三个特性: 功能性:动效对交互引导和...

  • UI设计中的动效使用

    UI设计中的动效使用 对于从事ui设计工作或者目前在学习ui设计的人来说,UI设计的学问可大了,它包含了太多太多其...

  • 成就出色的UI动效技巧

    改进UI交互的实用建议 让我们来看一些UI动效从良好到优秀的例子,只要稍稍调整,就可以使用动效来提升UI模式。 列...

  • 动态设计到底有多好用呢?

    作为目前的热门设计,动效是需要每个UI设计师都来学习使用的,但是,许多UI设计师对于动效的了解却少之又少,今天就为...

  • 腾讯出品的交互微动效设计指南

    本设计指南适用于UI设​计界面中交互微动效,涵盖入场、出场动效,过渡动效和加载动效,在时间和缓动曲线的选择上提供了...

  • 桐乡平面设计培训:UI设计如何才能更进一步

    UI动效现如今在APP和网页中几乎已经成为了基本的组成部分,经过仔细打磨的UI动效对于整个界面的提升是显著的。 动...

  • 如何能让UI动效设计更上一层楼?

    UI动效现如今在APP和网页中几乎已经成为了基本的组成部分,经过仔细打磨的UI动效对于整个界面的提升是显著的。 动...

  • 动效篇-AEloading100%极简动效鉴赏与制作

    文中重要的插件和快捷键见片尾(有惊喜)~ 动效鉴赏 动效制作与详解 UI动效常用快捷键(更新中) enter重命名...

网友评论

    本文标题:UI中使用动效的3个关键点

    本文链接:https://www.haomeiwen.com/subject/jzgcattx.html