通过开发人员与设计人员的协作使微交互和UI动画栩栩如生

我们可以通过微交互和UI动画为用户创造愉悦的体验!

嗨,我叫Kyo Kim,我已经在Capital One担任产品设计师大约两年了。在这里的整个工作中,我一直在使用微交互和动画,包括您可能曾经使用过的一些移动项目。在开始从事技术工作之前,我的背景是电影。在电影中,重点全部放在讲故事和剪辑上,以创造一个吸引观众的故事。大部分是通过使用过渡来完成的。当我为数字工具创建经验和故事时,我发现这些技能今天非常有用。

在设计时,我会考虑一些因素,这些因素会给用户带来过渡和讲故事的绝佳体验。

为了使用户获得愉悦的体验,产品必须提供美观的设计和令人印象深刻的动画效果。

无论产品是基于应用程序,基于Web的产品,还是任何其他形式的数字产品,它都必须吸引用户,使用户使用愉快,并让他们有机会直接,有意义地与之互动。道路。

微交互功能可以使用户感到愉悦和满足,这是许多设计元素无法实现的。在我们进行产品设计中的微交互之前,让我们从基础开始。

这些是什么?为什么对用户体验有利?为什么设计师和开发人员应将它们纳入他们的工作中?产品设计团队如何共同努力以改善他们?

什么是微交互,为什么我们要关心它们?

什么是微交互或UI动画?人们通常将它们称为漂亮的动画,运动图形或运动图像设计。但是,它们远不止于此。

与其他形式的动画完全是为了创造运动的幻觉不同,微交互可以直接与用户互动,从而使他/她能够完成各种任务并以直观有效的方式与产品互动。

如果我们将其与良好的系统设计原则联系起来,则可以增强并为用户提供系统反馈。如果正确完成,则用户将微交互视为来自用户的消息,即它(系统)正在响应用户的需求执行其应做的工作。

即使您不知道什么是微互动,也可以定期与他们互动。每次您使用应用程序或基于Web的产品来完成特定任务时(无论是阅读新闻,进行购买,玩游戏,创建个人资料还是调整设置和通知首选项),您所做的每个动作都会构成微观互动。微交互被无缝地编织到产品平台中,使其功能透明且可访问,从而有效地改善了用户的整体体验。

尽管这些“动作”采取多种不同形式,但一些常见示例包括:

  • 当我们将商品“移动”到虚拟购物车时。
  • 当我们在类似CTA的切换按钮上的两个选项之间进行选择时。
  • 当我们“下拉”以刷新新闻提要并查看最新更新时。
  • 当我们在长的Feed或页面中“上下滚动”时。

在设计微互动时,我们需要检查它是否确实对用户的体验是必要的并且至关重要。否则,有可能会有效地分散您使用产品的用户信息,或者成为视觉噪音。

微交互原理

设计微交互时,我总是考虑三个原则。

  1. 连续性(和微妙性)

微交互元素应该是微妙的,以便用户进行操作时,他/她的体验会持续不断。例如,如果我们要长时间创建滚动动画,则用户应该能够专注于页面的内容,而不是滚动动画本身。

2.可预测性

高质量的微交互具有可预测性,使用户能够有效而高效地导航产品。用户可以准确地预测其动作的效果,可以舒适地反转其动作,并对其执行预期功能的能力充满信心。

3.可转换性

多个屏幕之间的流体转换以及其中的各种对象的明确定义的转换是高质量微交互的关键方面。它们使用户能够直观地理解屏幕与屏幕中元素之间的关系。

按照这些原则进行设计时,微交互可通过帮助用户知道如何与之交互来为设计提供上下文。微交互是完成单个任务的瞬时事件。可以说,微交互可以说是网站或应用程序设计中最小的交互元素,因为它们具有多种核心功能,因此它们是最重要的。

触发器(轻击,滑动,拖动等)将启动上一节中列出的每一项操作(连续性,可预测性和可转换性)。用户在网站或应用上执行操作以启动该过程(即使该过程在初始步骤之后仍继续进行)。这遵循用户的号召性用语模式,由界面确定的参与规则(将发生什么事情以及如何发生),用户的反馈(它是否起作用)以及模式或循环(执行操作)一次或按计划重复)。

-开发人员和设计师如何共同努力,实现微交互的生命

如您所见,微交互在塑造用户体验方面起着至关重要的作用。因此,它们已成为我作为产品设计师的工作中越来越重要的一部分。在跨多个平台和用途进行各种项目的工作后,我注意到并不是每个人都认识到这些元素的价值或如何有效创建它们。更重要的是,团队成员通常不知道如何在设计过渡和微交互时彼此表达想法。

我意识到这一切都归结为交流-当我向开发人员解释我的设计思想时,翻译中有些失落了。您可能以前曾听过孔子的话:“告诉我,我会忘记的。给我看,我可能会记得。让我参与其中,我会理解。”通过参与,我们作为设计师和开发人员团队创造了很棒的体验。

首先,让我们快速介绍一下设计过程...

在理想情况下,当设计师提出微交互的想法时,传统的工作流程按以下顺序进行:

  1. 设计者开发实现他/她的想法所必需的视觉元素和动画效果。
  2. 设计者向其他团队成员介绍最终模型及其基础概念。

但是,如果设计过程在实践中无法像理论上那样发挥作用呢?如果我们要提供分镜脚本或不完整的模型怎么办?还是团队中的其他人正在设计模型?

发生这种情况时,表示或开发中可能会出现问题。这些问题通常分为以下三类之一:

  1. 动画创意传达得不够清晰。

如果您尝试用文字或静态图片来描述动画概念,则观众的脸上可能会出现鬼脸。这意味着他们正在尽力了解您的想法,但是他们并没有真正理解它。即使他们了解基本概念,他们在脑海中想到的画面也可能与您的设想不一致。由于人们倾向于以不同的方式感知运动图像,静止图像和口头描述,因此依靠文字或图像来传达动画创意会产生沟通不畅的空间,并且常常会给团队成员带来不必要的紧张感。

2.设计人员直到检查并测试了开发人员的原型后,才知道动画效果是否良好。

当设计师没有原型制作技能时,他们只能通过情节提要向开发人员介绍他们的想法。即使设计人员坚信微交互模型,他或她也无法说出微交互模型是否正在发挥其全部潜力,直到开发人员完成原型。由于多种原因,这是有问题的,主要的原因是这种方法引入过程的错误传达的可能性很高。此外,它为团队成员带来了质疑的大门,并引发了有关该想法可行性的质疑。从开发角度来看,这可能会花费大量时间。

3.设计者和开发者不在同一页面上

当设计师制作UI动画或微交互时,他们会尝试包含复杂的设计细节,例如自定义缓动,脚本,表达式和其他效果。向开发人员介绍这些想法时,他们可能会听到“不可能在时间轴上做到这一点”或“我们不能完全做到这一点,但我们会尽力而为。”此时,他们可能会尝试散列与开发人员讨论各种细节和技术问题。但是,如果设计人员对开发人员使用的工具或语言不了解,那么这些讨论最终将毫无结果。在制定和讨论想法时,应考虑这些因素,以使微交互与开发人员的默认设置兼容,从而增加最终产品符合设计人员(和其他所有人)标准的可能性。

这些问题有什么解决方案?

尽管所有设计师和开发人员都有他们自己的动画概念交流方式,但我想分享团队使用的一种方法。这种方法非常成功,减少了会议次数,极大地改善了我们团队的沟通。

现在,我们不再争论是否包括微交互,我们正在探索使它们变得更好的方法!

骨骼互动概念和互动指南

“骨骼交互概念和交互指南没有解释的余地​​,这使我能够立即开始工作,并有信心匹配设计师的愿景。” –Jesse M Majcher / IOS首席工程师

我们用于传达UX设计的标准流程无法很好地转换为UI动画。首先,UX设计和流程仍然逐个屏幕地设计,并且是静态的。 UI动画本身就是流程,它们是流动的,并且是基于时间的。当我们创建静态设计时,我们会制作一个粗略的线框,以便我们可以理解想法并讨论流程。这样,我们可以在创建最终版本之前轻松修改和微调设计。一旦每个团队成员都同意可以将设计移交给开发人员,设计人员就会为开发人员提供样式指南和红线,其中包含有关设计的详细信息,规格和其他重要信息。

如果我们对动画使用类似的过程,则我们的过程可能会更快更好。

  1. 骨骼交互概念(运动研究)

骨架交互概念类似于您在设计流程时将创建的线框,主要区别在于这是一个可播放/可单击的原型演示。如果我们将其召开会议,我们的团队成员就不必用想象力来理解这个概念。设计人员可以使用可播放/可单击的演示或静态故事板直接引用设计的视觉和动画元素。这将使每个人都清楚,准确地了解他/她的想法。反过来,合作伙伴可以提供非常具体的反馈,因此对设计者来说非常有价值。同时,产品管理和开发团队将获得信息,使他们能够改善内部沟通和项目时间估算。

2.互动指南

一旦团队对概念达成共识,设计师将创建交互指南。这与样式指南相似,因为它概述了元素的位置,旋转,比例和时序。我们可以添加有关动画的每一个细节,这将帮助我们的合作伙伴清楚地了解它。当设计师向其合作伙伴显示交互指南时,他或她甚至可以更清楚地了解动画概念的移动和度量。这对于通过协作完成工作非常有帮助。它还可以帮助设计人员在动画/微交互设计方面更加周到。

3.设计师的原型制作技巧

以我的经验,要为成功的设计合作做好准备,产品设计师应该是动画的驱动者,而开发商应该提供支持。这意味着产品设计人员在合伙企业中承担了大部分责任。他们不仅负责非常清楚地解释他们的想法,还必须通过提供概念证明来证明它们是可行的。这也意味着产品设计师需要能够制作自己的动画原型。如果产品设计师可以创建原型并在会议期间展示它,则随后的讨论将更加清晰,耗时更少,从而使整个交流过程更加有效。

那么,设计人员应该熟悉哪些原型制作工具?那里有很多工具,但是并不是每个人都知道哪种工具最适合特定的微交互任务。根据我在设计这些元素上的个人经验,这是我的建议。

如果您熟悉编码:

  • 手机:Xcode,Android Studio
  • 手机或网络:成帧器
  • 网页:CSS动画

如果要设计类似屏幕的推送和模块之间的交互,请执行以下操作:

  • Invision和Marbel

如果要创建更详细的交互,请执行以下操作:

  • Principle,Adobe CC,origami Studio和Pixate

如果要创建详细的交互+动画:

  • 后遗症

目前,我非常喜欢使用After Effects进行原型制作。即使它不是交互式的(即可点击的),它也是呈现动画概念的理想方式。此外,效果没有限制,您可以控制明细移动。甚至可以使用它在3D空间中进行交互,例如AR和VR。

令人愉快的团队互动造就了令人愉快的产品

微交互已成为越来越重要的(即使不是至关重要的)网络,移动设计等元素。即使设计人员和开发人员都认识到UI动画的价值并有动力去创建它们,他们仍然常常难以以有效的方式进行协作。需要一支强大的团队才能按时交付出色的微交互。这样的团队需要清楚地描述角色,有效的沟通技巧以及正确的原型工具来处理当前的任务。

为了使您的微互动成功,请确保您的团队具备这些特征并参与这些流程。祝您自己进行微互动之旅好运!

公开声明:这些观点是作者的观点。除非本文中另有说明,否则Capital One不与任何提及的公司有关联或认可。使用或显示的所有商标和其他知识产权均为其各自所有者的所有权。本文为©2017 Capital One。

有关Capital One的API,开放源代码,社区活动和开发人员文化的更多信息,请访问我们的一站式开发人员门户DevExchange:developer.capitalone.com。