巧用动效解决问题

Coldrain1

2019-08-21

自译外文

12349

16

142

经验分类:经验/观点/自译外文

原作者:Tubik Studio

Image title

动效在用户界面中的应用是当今引起人们高度关注和争论的话题。虽然有很多人觉得动效是一个不必要的功能,他会使用户界面过载并使其变得更加复杂,但大多数用户都认为动效是交互体验不可或缺的一部分。设计人员和开发人员研究了越来越复杂的方法,使动画看起来令人愉快,并且能够解决现代应用程序和网站的问题。


为什么用户如此热爱动效?大多数情况下,因为动效支持实际和真实交互的本质,它创造了与人们在现实生活中物理对象交互时所具有的感受和感知水平。这种感觉可以提高用户的积极性,因为用户感觉越自然,处理应用程序或网站所需的精力就越少,工作方式也就越清晰。让用户满意,没有任何秘密,满足和愉悦是鼓励人们再次使用该产品的最重要的事情。


就像界面中的所有内容以及与之交互的过程一样,动效必须是一个功能元素,而不仅仅是装饰。在规划围绕数字产品的用户旅程时考虑运动元素,设计师应该在决定将其应用于布局或过渡之前,深入分析其提高产品的可用性,实用性和可取性的潜力。用户界面中的动效需要经过深思熟虑的思考,并且始终需要有一个明确的目标。在交互过程中使用它的优点和实用性必须是显而易见的并且要大于可能存在的缺点。动效应该成为锦上添花,而不是美中不足。


Image title



定义问题


使用动效不仅具有吸引力,也是揭示可能存在问题的最佳方法之一。它可以在设计过程的任何一个阶段进行:


用户调查会让你知道目标用户是谁,他们的年龄,偏好,技术水平,使用产品的环境和条件,以及来自用户方面的许多其他因素会影响用户体验;


营销研究将洞察现有产品的强弱面,形成用户忠诚度的方法,这是界定USP解决特定用户问题的良好依据,也是产品呈现和表现原始方式的良好基础;


UX线框图阶段可以考虑交互,布局和转场的逻辑,并得到可以通过动效增强目的的第一个假设;


原型设计阶段将揭示与屏幕实时交互的新方式;


UI设计阶段将为产品方案和系统提供复杂的视觉展示,为应用程序或网站应用动效提供新的视角;


用户测试将揭示动效元素的方案是否正确,它们的好处是否真的大于可能存在的缺点。


Image title


在每个阶段,如果设计师设定的目标是揭示用户可能遇到的大或小问题,那么动效以及任何其他设计元素都可以扮演问题解决者的角色。


让我们回顾一下可以通过界面动效解决的一些典型问题。



问题:我想知道行动已经完成


这是可以通过在UI中应用动效细节轻松快速解决的问题之一。通过清晰的运动并结合微交互,为用户创建快速反馈,使得导航变得简单直观,同时也变得更加高效。动效按钮、切换键、切换开关和其他交互元素在几秒钟内通知用户,激活快速视觉感知的所有潜力。


Image title

开关控制动画

Image title

汉堡菜单动画

Image title

汉堡按钮互动

Image title

标签栏交互

Image title

添加按钮交互

Image title

橡胶指示器


问题:我想知道行动正在进行中


当用户与数字产品交互时,他们想知道每一步都发生了什么。让用户等待将会导致用户流失。但是,当用户得到反馈时,等待就不会那么烦人了。所以,这方面应该在设计中着重考虑,通过界面动效来减少等待感有很多种方法。这是“拉动-刷新”发挥作用最大效果的最佳时机。

Image title

拉动刷新

Image title

预载

Image title

拉动刷新

Image title

拉下 - 沙漏

Image title

拉下 - 太空船


问题:我看不到进展,也不明白需要多长时间


通常仅仅让用户知道该过程正在进行是不够的。他们想要的还有很多:看看进展的速度和所需要的时间。此时,界面动效就是一个很好的帮手。加载条和进度条,动效时间轴和其他动态元素等等,都可以一石二鸟:


1、它们能够让用户明确当前进度状态


2、它们可以成为消除互动过程中等待的负面情绪的一种娱乐元素


3、它们可以成为一个病毒性的功能,用户希望与其他人分享,并吸引更多的用户来使用产品

Image title

时间线应用程序的GIF

Image title

动态滚动的GIF


问题:我不想让我的屏幕弄得一团糟


在界面设计中考虑这一点至关重要。如果屏幕或页面的信息看起来乱七八糟,这些信息没有经过明确的梳理编组,那么用户需要付出额外的努力来了解它的工作原理以及可以找到所需信息的位置。


在绝大多数情况下,用户希望拥有能够简化和改善他们生活的应用程序和网站,甚至可能会为他们做一些工作,而不是在交互上花费更多的精力和时间。动效在增强与各种数据模块和部分交互方面是一种很好的方法,即使是在高度数据饱和和复杂的界面中,也能够使所有内容清晰明了。

Image title

Image title

Image title

Image title



问题:我想先看看关键的事情


视觉层次和清晰的导航一直是设计人员创造交互式数字产品的一大关注点。用户应根据其目标和条件,立即关注交互的关键要素。界面中的动效元素为这方面提供了强大的支持力,使布局中重要元素的视觉标记更快、更清晰。

Image title


Image title



问题:我想要感受自然的互动


这是大多数用户无法形容的问题,但对用户体验有着很大的影响。如果用户说“我不确定出了什么问题,但肯定有问题”,试着考虑让动效更加自然。界面中的动效可以创造出令人愉快的错觉,接近与物理对象的自然交互,这通常不需要太多的认知过程。例如,如果拉动物体,按下它,移出标签,动作应该感觉自然。用户无法看到设计师完成这项复杂工作的难度,他们会认为这是理所当然的,而让他们感到舒适的事实,将是对设计解决方案的最大赞誉。

Image title

Image title

Image title


这种问题同样存在与WEB界面中。在滚动网页时,布局元素的平滑移动可以显著增强用户体验,并且创建一个整体流畅交互的感觉,而不是几个单独的页面。总之,这是令人愉快并且有吸引力的,这些情绪是留住用户的一个很好的因素。


Image title

Image title

Image title

Image title



问题:屏幕/页面很无聊


在谈论界面时,人们常常把功能性和可用性作为关键或者有时甚至是唯一需要考虑的因素前置到前面。这是正确的,也是合乎逻辑的,但是不能否定这样一个事实,那就是人们不仅仅受逻辑驱动。情感和审美满意度等因素对用户体验的影响也很大。一方面,实用性和可用性与情感和美学之间的巧妙平衡可以给用户带来友好的产品。动效在界面设计上是一个很好的助推器。它可以勾勒出色彩和渐变的美,将生活气息融入到布局中,使运动充满活力,反之亦然,通过运动和原始过渡增强用户界面元素的力量。

Image title

Image title

Image title

Image title

Image title

因此,毫无疑问,用户界面中的动效在解决各种交互问题方面具有巨大的潜力。尽管如此,即使是添加到UI中的最细微的动作也需要经过深思熟虑的考虑,不仅要分析优点,还分析可能存在的缺点。动效应该帮助用户,这是它在界面中的主要目标。








全部评论:16

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消