美文网首页
移动应用中的过渡动效

移动应用中的过渡动效

作者: _Fanta | 来源:发表于2018-03-29 16:42 被阅读0次

    动效是用户体验的重要组成部分。在移动应用中,您可以通过过渡动效非常巧妙地进行传达很多事情。 发送消息、打开设置、勾选选项、跳转到其它页面 —— 这些都是变化的时刻, 对转场制作过渡动效是强化用户行为的绝佳方式。

    在本文中,我们将回顾功能性动效可以补充视觉设计和支持交互的常见情况。

    指示系统状态

    当用户触发某些操作时,他们希望看到一个视觉响应 - 系统应该明确表示它已收到请求并进行处理。 以下是动效反馈可以提升用户体验的几种情况:

    · 确认用户操作 。 用户得到系统收到该操作的确认。 当用户有视觉反馈时,这可以防止他们重复点击元素。

    通知用户他们的行为结果     图: Colin Garven

    · 下拉刷新页面内容。 加载指示图标的动效带来的视觉反馈可帮助用户了解系统正在处理他们的请求。

    微妙的动效可以帮助用户理解正在发生的事情     图: Ramotion

    · 等待内容加载。 加载不一定是很无聊的,几乎所有的应用都可以在加载内容时利用微妙的动效来防止用户离开。 加载动效会通过视觉反馈吸引用户的注意,用户也会因此感觉到更短的等待时间。

    甚至在应用程序完全加载之前,动效可以保持用户参与     图: UI8

    在多步过程中串联不同的步骤

    有时用户需要通过一系列步骤来完成操作。 用户应该清楚步骤之间是相互连接的。动效可以帮助你连接每一环节来创建一个完整的体验。

    下面是一个很棒的例子,它通过动效来串起一系列线性的事件。

    图: JakubAntalík

    动效可以帮助设计师实现渐进式披露 。 渐进式披露通过减少一次提供的信息量,使界面更易于被理解。 以下是两个很好的例子,它们使用了渐进式披露,通过有意义的块来提供信息:

    图: Ramotion 图: Anton Skvortsov

    引入新的元素

    当我们在页面上引入一个新元素时,我们尝试将用户的注意力集中在该对象上,并帮助他们回答“为什么我会看到一个新元素?”这个问题。当引入新元素时,动效果可以帮助您定义元素关系和层次结构。

    动效可以显示新元素来自哪里     图: Virgil Pana

    给用户一种空间定位感

    动效可以帮助用户建立更好的空间信息心智模型。 这对于移动用户来说尤其重要 - 将短时间关注和小屏幕尺寸组合在一起可能会导致用户在屏幕迷宫中迷失的情况。

    我们可以使用动效来指导用户。 动效有助于解释信息如何从一个状态流向另一个相关的状态。 通过向用户提供关于他们目前正在进行的操作的信息,可以防止用户出现困惑。

    方向性动效让你知道你现在在哪里与你来自哪里      图: Jae-seong,Jeong

    在下面的例子中,浮动播放按钮的状态转换,明确地用户说明两者之间的关系。

    动效可以帮助你建立元素之间的关系     图: Anish Chandran

    减少认知负担

    认知负担是使用产品所需的心里上的付出。 认知负担直接影响用户与您的应用交互的方式。 一般来说,产品所需的努力越多,用户就越没有使用它的欲望。

    作为设计师,我们的目标应该是创建一个易于使用的界面。 如果将动效使用得当,可以减少完成任务所需的用户负担。

    在几乎所有应用中,用户都必须填写一些表单。 许多表单都将标签写在该字段的默认位置, 当用户点击这个字段时,标签就消失了。 因此,用户很难弄清这个字段代表什么。 浮动标签可帮助用户保持上下文,并使其与长表单交互更加舒适。

    当涉及到用户输入时,不要依赖用户记忆, 使所有关键信息可见      图: MDS

    让用户理解功能变化

    功能变化指当元素在交互之后改变其功能。 例如,当用户点击按钮时,该按钮将意味着不同的事情。 这个动效可以帮助用户理解“这个元素现在做什么?”

    可以在许多移动应用中看到功能变化的一个常见例子是开关。 动效可以帮助用户了解元素的状态。

    点击按钮时的动效,绷住用户看到变化。 图: Jurre Houtkamp

    在某些情况下,单个元素的功能变化会导致整个视图的变化。 例如,一个汉堡菜单变成'X'并激活一个新的视图。

    向用户明确表示对象的功能已更改     图: Tamas Kojo

    结论

    通过一些复杂巧妙的方式运用动效,动效可以发挥非常强大的作用。 它解决了界面中的许多功能问题,并使其鲜活起来并真正对用户给予及时的反馈。 无论你设计什么应用,它都是在向用户讲故事,动效可以帮助你更生动而有效地讲述这个故事。

    谢谢!

    原文作者: Nick Babich

    UX Planet: Twitter | Facebook   最初发表于 babich.biz

    原文链接:http://babich.biz/animated-transitions-in-mobile-apps/

    相关文章

      网友评论

          本文标题:移动应用中的过渡动效

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