在设计过程中,设计师如何输出一个更落地的动效呢?

优秀的动效设计更能让用户从中感到惊喜,让用户感受到产品的温度和调性。


优秀的动效设计更能让用户从中感到惊喜,让用户感受到产品的温度和调性。

在设计过程中,设计师如何输出一个更落地的动效呢?

国际惯例,在开始之前,还是先来聊一聊我们设计中心在人机交互中对于动效的一些经验和想法。

动效,一直都存在于这个物理世界中。随着技术的不断进步和设备性能的不断提高,以及带有动效行为设计的不断优化,改变了我们在人机交互过程中原本复杂而无聊的交流过程,暂且不考虑它的作用,最直观的就是用户已经习惯了在电脑中体验丝般顺滑的动画效果(流畅性)。

手机终端也是如此。在扁平化设计的时代中,一个落地的手机界面的动态效果可以帮我们提升用户体验,使产品显得更加鲜活和统一的同时,也提升用户感知度并且进一步提升了产品的易用性。优秀的动效设计更能让用户从中感到惊喜,让用户感受到产品的温度和调性。

在设计过程中,设计师如何输出一个更落地的动效呢?

越来越多设计师设计动效作品

优秀的动效是克制的产品表达

在UI领域中,优秀的动效是一种克制的产品表达。许多设计师在设计过程中都会遇到一个问题,如何设计动效才算是输出了一个优秀并且有价值的方案呢?

我们考虑的方向是,优秀的动效设计不仅仅赋予了产品本身的调性和趣味,其次还要充分体现产品的定位和特点。它的发生并非是让用户去在意动效的本身,而是旨在让用户感知到它原本就是你产品的一部分,从而体现品牌的价值。

在设计过程中,设计师如何输出一个更落地的动效呢?

示例来自网络

作为每天都得和产品打交道的设计师,我们不仅仅在让产品和用户建立联系,更需要在这种联系的场景中让用户保持着简单愉快的任务体验。作为身经百战的设计师,我们很清楚用户在有明确需求的场景下并不会马上去分辨一个产品的美与否,而是直接希望快速达成任务,就像是[好无聊,听首歌儿吧!]或[好饿,点个外卖吧!]然后就会直接打开一个APP去完成任务了。这些行为都有着十分明确的目的,可以看出用户思维就是最简单的思维。所以不以真正的用户体验(场景)为基础来设计的产品,可能对于用户来说都是耍流氓。

所以,一个优秀的动效起的作用应该是基于用户的交互行为(功能)作出恰当的反馈,从而让用户更明确感知到发生了什么,并把用户的注意力吸引到正确的位置,让用户在不经意间快速养成对产品的使用习惯。当设计师不断思考并优化各种体验的同时,产品的粘性也大大增强了。

那么,设计师在设计过程中如何输出一个更落地的动效呢?下面讲述一些设计思路:

落地的UI动效原则

1、有效

有效的动效提升操作感受并提供良好的视觉效果,提升产品界面的灵动性、和带入感,增强用户对产品的认知和情绪的带入。

在设计过程中,设计师如何输出一个更落地的动效呢?

示例来自网络

2、适度

Ios10 和 Material motion 带来很多优秀的动效,越来越多设计师热衷于设计众多的动画效果,很多动效由于本身的复杂性和冗长的时间产生的拖沓,使得用户产生不适,并失去产品的焦点。所以设计师在设计动效时,应该更克制,做到最短最高效,轻快流畅的交互表达。

在设计过程中,设计师如何输出一个更落地的动效呢?

Material Motion

3、性能优先

所有动效都不应牺牲产品本身的性能和响应时间,不仅起不了效果更影响用户体验,如果没有找到更加简明轻快的解决方案,那么我们更建议不要轻易加入动画效果。

4、开发效率

开发是真正的动效“设计师”。越复杂的动效,开发难度越大。没有谁能阻止设计师天马行空,但是要推动项目的进行,一定要考虑开发效率。对于最终实现的效果和完成的时间,这两者一定要做好权衡。我们建议设计师在开始动手设计之前,可以先和开发蜀黍们评估一下开发的时间和成本。

在设计过程中,设计师如何输出一个更落地的动效呢?

示例来自网络

5、意外的惊喜

巧妙的动效设计,不仅能够提升产品体验,增加趣味性,甚至对完成产品目标和业务目标也有着事半功倍的效果。挖掘用户的兴趣点,提供超出用户预期的愉悦体验,是设计动效时需要思考的其中一个方向。比较有代表性的一个案例是Twitter的点赞效果。

在设计过程中,设计师如何输出一个更落地的动效呢?

Twitter的点赞效果

动效输出规范

终于,一个好的idea有了,万事俱备,只欠开发了。我们正在努力建立一套高效的动效输出规范,让动效更有效地进入开发环节。

如何把设计师的想法更准确的表达出来、并且工程师能准确理解,最终快速实现效果,这样高效的流程才是我们想要的结果。

我们总结出一套专用的动效组件库以及动效的输出规范以供于内部设计人员使用,也希望未来能有机会公开这个库供更多外部设计师使用。

在设计过程中,设计师如何输出一个更落地的动效呢?

KUDC动效库部分截图

下面我将着重讲述动效的输出规范。举一个非常简单的例子:

在设计过程中,设计师如何输出一个更落地的动效呢?

Twitter

1、关键帧图例

对于一些相对简单的交互效果,我们可以用关键帧图例说明,主要表现在动效的三个状态,分别为操作前、操作时、操作后。这样开发能清楚每个状态下展现的效果及最终效果。

在设计过程中,设计师如何输出一个更落地的动效呢?

关键帧图例

2、运动参数

运动参数主要包括动态元素运动的时间,元素出现或者消失的先后顺序的时间点。参数的准确性决定了整个动画的还原度。

在设计过程中,设计师如何输出一个更落地的动效呢?

每个元素的运动时间和透明度变化

3、缓动曲线

元素运动的加速度曲线,专业称为贝塞尔运动曲线(Bezier)。建议设计师们每实现一次效果,都能沉淀一些通用的曲线,方便开发蜀黍下次直接套用。

在设计过程中,设计师如何输出一个更落地的动效呢?

常用缓动曲线

标准缓动曲线查询网址:http://easings.net/zh-cn

缓动曲线中,需要注意的一点是,如何准确去描述出你设置好的运动曲线参数。通常在交互工具和AE当中,在调整曲线的时候会有四个值如下图:

在设计过程中,设计师如何输出一个更落地的动效呢?

  贝塞尔参数值

和开发沟通时,我们提供以上两个轴的x、y参数值即可,称贝塞尔参数值。

如图,即cubic-bezier(0.25,0.1,0.25,0.1)

贝塞尔曲线预览:http://cubic-bezier.com/

4、高保真交互demo

借助强大的交互工具,制作带交互的demo。

在设计过程中,设计师如何输出一个更落地的动效呢?

有了高保真参考,再也不用担心说不清楚了

5、png序列

适用于一些比较复杂的动画,例如加载动画,特殊的控件动画,启动动画。如果开发写起来特别麻烦的,可以先用ae实现好效果,然后导出png序列直接给开发使用。具体过程和方法小编在这里不再赘述了,网上有许多相关教程可以参考。

在设计过程中,设计师如何输出一个更落地的动效呢?

用的动效交互工具推荐

以下推荐工具,网上教程也很丰富,具体操作这里不展开来说了。

1、Principle

是一款非常简单上手的交互原型工具,即使它已经很久没有大版本迭代。具体到透明度变化,XY轴旋转,XY轴位移,运动曲线调整,都能轻易做到,并且动画的参数也非常具有参考意义。并且能和sketch直接配合,关联到设计稿,实时改动设计图。

2、Flinto

比Principle稍微难一丢丢,但是多了很多能变化的参数,除了基础效果之外,还加入Z轴的旋转,以及单个元素behavior的独立调整,都比较方便。Flinto也能和sketch直接配合,关联到设计稿,实时改动设计图,非常方便。

3、Framer

更接近工程师思维的一款交互工具,交互效果也最接近原生效果,但是会涉及一些基础代码,不过最新版本已经支持自动生成代码功能,有余力的设计师可以尝试一下。

4、Hype3

虽然放在推荐模块,但是他并没有上面介绍的工具那么简单和方便,但是他的强大之处在于,做完了直接可以生成html文件,接入服务器就可以直接上线了,做h5的一大利器。

5、After Effects

无所不能的AE,就不多说了,动画能力强,对于比较复杂的动画,可以用ae来完成,如果只是基本的交互动画,建议还是用上面所推荐的工具更快出效果。

PS:用工具就像买汽车一样,每年都有新车型,每年都有改款和新配置,不可能年年换的。许多设计师一开始都过度纠结于日新月异的工具,但其实在设计过程中,怎样把自己的想法通过工具更准确的表达出来才是我们应该在意的。

随着设备性能和网络带宽的发展,用户对视频消费越来越多,对设计师动画能力也要求越来越高,未来我们还会持续更新有关动效的知识~

 

作者:圆早

来源:优酷土豆用户体验设计中心

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23496/

(0)
CatherineCatherine
上一篇 2017-05-05 18:15
下一篇 2017-05-05 20:15

相关推荐

  • 为Apple TV进行UI设计需要了解哪些基本规则?

    仔细想想,你会发现我们正处于大屏UI 设计的一个有趣的阶段。2015年推出的Apple TV 已经是第四代产品了,但是其他的同类型产品尚且处于第一代或者说早期阶段。发布会上吹出的牛逼最终还是要经过市场验证,而实际状况比起大家预期的结果,更加复杂。到底要如何给Apple TV 设计APP呢?今天的文章,我将为大家分享一下我们为丹麦最大的内容供应商设计APP的经验和相关的资源,也许能帮大家一窥究竟。

    2017-05-26
  • 用户行为的“及时”理论 【UXRen译#184】

    作者:Jeff Atwood   |  翻译:露露,校审:Chen Jing   我一直认为软件设计对用户在使用该软件时的行为有着深远的影响。 从两方面来讲: 有意地让“正确”的操作容易操作。 有意地让 “错误”的操作不容易操作。 无论…

    交互专题 2017-11-01
  • 交互设计师如何做竞品分析

    竞品分析的目的并不是为了抄袭,而是为了超越竞品。

    2017-05-15
  • 怎么免费学习 UI/UX 设计?

    一些资料是英文的,需要一点基础,如果看不太懂可以使用谷歌翻译之类的工具辅助一下,有的图书也有中文版,自己在亚马逊上搜索英文名即可。 我从来没有去一所设计学校。但我只是喜欢做的事情。 3年前,我开始了我自…

    2016-06-09
  • 李斌:用户体验是商业变革的核心 ▏笔记

    混沌大学2017年商业创新第29课与做“车”相关领域的互联网人中,你很难再找到一个经历比李斌更加丰富的人。作为易车网的创办者、蔚来的操盘手和摩拜单车的天使投资人,李斌已经在汽车领域创业18年。对于创新的商业模式,李斌认为核心在于重新定义用户体验。伟大的商业模式变革,都不是从商业模式出发的。李斌老师在混沌大学授课授课老师|李斌易车网、蔚来汽车创始人、董事长,兼任摩拜单车董事长过去20年互联网获得的巨大成功告诉我们,用户只会为好的体验买单。...

    2018-04-06
  • UI设计师最该考虑微交互的设计

    前言什么是微交互?微交互是用户在完成某个小任务时产生的交互体验。例如,解锁手机就是一个微交互,手机调成震动模式时会震一下也是一个微交互。为什么称为“微交互”呢?所谓的“微”其实就是指的产品的细节设计。微交互正在成为产品设计中越来越重要的部分。正如同Charles Eames曾经所说,“细节并不只是细节,它是构建起整个设计的基本元素。”你的UI和交互设计中的每一个元素都是至关重要的,一个又一个细节设计让你的产品最终脱颖而出,而真正让人难忘...

    2018-04-20
  • 同学进了大公司的UED部门,我想一部分原因是…

    2017年开年,已经陆续有毕业生提前找实习工作了,在与一位成功入职的新人设计师交谈中,有一个重要发现:交互设计越来越受重视了。这位计算机专业的小伙伴,机缘巧合接触了设计,从此一发不可收拾,短短不到一年时间就熟练掌握了PS、AI、AE等软件,还自学了手绘技能。不过即使如此,她的求职仍困难重重。不是985 重点大学/非视觉传达专业/只会画图标界面等等,都成为用人单位将她拒之门外的理由。虽然要求有点苛刻,但站在公司的角度,想要在浩浩荡荡的求职...

    2018-01-31
  • 学交互设计我看过的那些书

    亭决-Thu 2015.03.06 摩客www.mockplus.cn⤴ 【导读】这个书单是跟交互相关的人员必看书目,其中有一半左右我都已经看过了,觉得受益匪浅,另外几本今年也要找时间看一下。 学了三年交互设计,想写写我看的书,和回…

    2015-03-17
  • Think in ID 前言

    前言   交互设计师们总觉得,可以用的工具特别少。我们国内目前流行的交互设计工具也非常多,各有各自用着顺手的工具,这些年我见过不少各种各样的工具,例如说:Axure、手绘(姑且也算是工具)、Pencil、Visi…

    交互设计 2014-09-17
  • 多功能福彩APP用户体验调查问卷

    近日,湖南省福彩中心在全省7100多个彩站安装使用“智慧福彩APP”。该APP具有申领热敏纸、报修设备故障、发布活动公告、发布开奖公告、发布消息通知等功能,并服务于彩站具有各站点详情、销售目标、巡检劝人、评价管理员、问卷调查、意见反馈的功能,从而实现“福彩中心”、“市场管理员”、“彩站站主”、“彩民”、“社会公众”五者间的互通互联。彩站或彩民们有任何意见建议或技术方面的问题,均可通过该APP上报省中心,为中心机构与站主、彩民之间搭建了桥...

    2018-04-24