必威国际

网页动效究竟是交互设计还是视觉设计,停止不必要的UI动效设计

九月 25th, 2019  |  摄影专区

自从iOS7发布后UI圈就开始疯狂流行起动画效果,尤其是在Facebook
Home之后,大家觉得如果没有酷炫转场、扭来扭去元素,产品就好像上个世纪的老古董一样。但是让整个圈子争相学习的风尚背后却还仍然有一个争议:动效是交互设计还是视觉设计?

前言:这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有效的GUI动效设计的建议。图片 1

最近几年UI设计领域最大的变化便是越来越强调用户体验设计,而在Web或者App中使用动效也就成了一大趋势。这种趋势是如此强烈,以至于我看到越来越多的应用中所使用的那些动效已经不再是为了提升用户体验,而更多是为了强调动效本身了。

在很多外行人眼中,看到一个App动画不错,往往脱口而出的是哇,这个App交互好棒!。或者老板觉得产品太死板了,会对着大家说我们的产品交互还需要再打磨一下。其实从严格意义上来说,动效作为交互反馈的一部分也属于交互设计的范畴,但是大部分交互设计师既没有动效设计的能力,也一般不会去做这种事情,而现在努力学习动效的往往又是那些视觉大牛们。那做动效设计的工作流程到底是如何开展的呢?

1.png (5.49 KB, 下载次数: 2)

设计师 Pasquale D’Silva 在 Web Direction South 大会上曾这样说过:

图片 2

下载附件

好的动效应该是隐形的。(作为用户的)你不应该注意到你正在看一个动效

要了解这个问题,我们先要看动效设计的目的是什么?

2016-1-5 15:57 上传

这是一个非常棒的动效设计建议,甚至可以说是原则。作为这些Web或者App的设计和开发者,在我们设计和开发动效之前,首先应该明确什么才是正确的动效:动效应该是以提高可用性为前提,并且以令人觉得自然,含蓄的方式提供有效用户反馈的一种机制

1,在用户体验上为了达到某种目标的引导

我们将在下文中,简单探讨如何改善下面的这个交互。图片 3

了解动效

优秀的动效往往会被无视,而糟糕的动效却迫使用户去注意界面,而非内容本身。用户都是带着明确的目的来使用你的网站或者App的:买一件东西、学习新的知识、发现新音乐、或者仅仅是寻找最近的吃饭地点。他们不会只为了把玩你精心设计的界面而来,实际上,用户根本不在意界面设计而只关心能否在你这儿方便地达到他们的目的。优秀的动效应该对用户的点击或手势给予恰当的反馈,使用户能够非常方便地按照自己的意愿去掌控应用的行为,从而增强应用的使用体验。

早期互联网产品动画较少时,大部分动效都是为了解决某个具体的交互问题而存在的,有很强的目标性。比如iOS上book的翻页效果,因为用户对手势翻页没有很好的认知也不会很快适应,所以需要模拟真实的翻书效果让用户适应。

2.gif (980.21 KB, 下载次数: 4)

基本动效

我们平时在Web或App中看到的动效其实都是由一些最基本的动效组合而成的,这些基本动效包括:移动(Translate),旋转(Rotate),缩放(Scale)。在一些动效设计工具的帮助下,一般你只需要设置它的起点终点,并告诉它你想要什么类型的动效,设计工具便会根据你的这些设置去渲染出整个动效。

图片 4

下载附件

移动 — Translate

移动,顾名思义就是将一个物体从位置A移动到位置B,这是最常见的一种动效,像滑动,弹跳,振动这些动效中都能看到。

又或者在Safari下载文件后,文件的进度和管理会在Dock的下载文件夹下,用户不容易发现和注意到,这时会有一个图标飞入到下载文件夹的动画,告诉用户下载的文件已经到这里了。

2016-1-5 15:57 上传

旋转 – Rotate

通过改变物体的角度,产生旋转的效果。在页面加载,或点击某个按钮触发一个较长时间操作时,经常使用到的Loading效果或一些菜单图标的变换都会使用旋转动效。

图片 5

UI动效设计的反面案例注:这个反面案例并非假设,而是来自近期的真实客户案例。概述自从
70、80
年代首个光栅图像在CRT屏幕出现以来,人们对于视觉设计的态度一直在不断进化。与其他艺术领域不同,在数字设计领域显露的趋势,与使用设备的发展史紧密相关。设备能力的提升有目共睹,显示器技术使分辨率从CGA320*200,到VGA的640*480,然后到SVGA的800*600,到现在已快速提升至4k及以上。类比视觉设计发展历程动效设计正在经历成长的疼痛,正如在当年90年代和21世纪初的视觉设计。追溯视觉设计进化发展的过程,有助于我们去理解现阶段的动效设计。图片 6

缩放 – Scale

缩放在App应用中被广泛地使用,如点击一个App图标,打开App全屏界面时,以及通过点击一张缩略图查看具体内容时。

2,让界面更灵动活泼

3.jpeg (74.7 KB, 下载次数: 3)

动效曲线

自然界大部分物体的运动都不是线性的,而是按照物理规律呈曲线性运动的。通俗点来说,就是动效的响应变化与执行动效的物体本身质量有关。优秀的动效应该反映真实的物理现象,如果你想表现的对象是一个沉甸甸的物体,那么他们的起始动画响应/参数的变化会比较慢。反之,物体如果是轻巧的,那么其起始动画响应/参数的变化会比较快。

你也可以在easings.net中查看所有的动效曲线,获取它们对应的CSS,JS代码,并在你的项目中使用

因为现在越来越流行扁平化,所以设计师都开始用更简单的元素尽量去突出内容。但是如果只是纯粹的扁平的话就未免有点太粗糙了,给人一种界面很死板、没怎么设计的感觉。所以为了泥补这个问题,动效可以让扁平的界面更活泼起来。

下载附件

属性变换

属性变换是非常常见的一种动效。比如可以通过改变透明度来实现淡入/淡出效果等。同时你还可以改变对象的大小,颜色,位置等几乎所有属性来体现动画效果。

注意下面这个动效的底部的菜单栏,当他的高度减小的同时,他的透明度也相应地降低,从而产生出一种折叠的效果。

图片 7

停止不必要的UI动效设计

组合动效

在大多数场景中,我们需要同时使用2种以上的动效,将它们有效地组合在一起,以达到更好的效果。另外你仍需要让你的动效遵循普遍的物理规律,这样才能使它们更容易被用户接受。

比如Skype将普通的菜单弹出过程加上了果冻效果,让整个界面可爱了许多。类似于这样的动效有很多其实只是为了好看而制作的,他们属于视觉设计的部分,是为了让界面视觉更优秀。

2016-1-5 15:57 上传

动效不应该太慢

我认为理想的动效时长应该在0.5-1秒之间,当你设计淡入淡出,滑动,缩放等动效时都应将时长控制在这个范围内。如果动效时长设置得太短,会让人看不清效果,甚至更糟的是给用户造成压迫感。反过来如果动效持续时间过长,又会使人感觉无聊,特别是当用户在使用App的过程中,反复看到同一动效的时候

所以可以看出动效即兼顾了交互的功能性,还具有美观性的特征,应该是交互设计师和视觉设计师互相合作的结果。

21世纪初期的网页设计在更精妙的设计语言出现之前,设计师们在初期阶段容易滥用新功能,这是正常的。90年代末和21世纪初的界面设计师,应该还记得以阴影、斜角、高光,无留白这特征的过度设计。当设计师们着迷于新媒体,并陶醉于像素的奇妙时,这一结果再自然不过了。扁平化设计图片 8

动效的开发

很多设计人员往往会遇到这样的困扰,他们看到的最终产品中出现的动效与他们在设计阶段定义的有很大出入。那是因为,虽然作为设计师,可以定义非常酷炫的动效,但由于技术或成本上的限制,有些动效往往由于开发代价过高而被摈弃了。所以作为设计师,你可能需要同时理解如何设计动效,以及动效背后所使用的技术。这会帮助我们在整个项目的设计阶段就能作出明智的取舍,从而节省大量的开发成本。

我们团队在具体开展动效设计的过程中,交互设计师会扮演导演的角色,视觉设计师扮演摄影师的角色。在设计动效时,交互设计师要先想明白动效所能解决的问题是什么,需要应用在什么场景下,以及把控动效的实现自然柔和不要过度。而视觉设计师不但要负责动效的制作,还会根据产品的特点加上很多风格化的效果。

4.png (167.61 KB, 下载次数: 0)

动效制作工具

目前有一些非常流行的动效设计工具,它们基于不同的技术,也有各自的特点。你可以从中选择你最喜欢的来使用。

图片 9

下载附件

Framer

Framer是一个基于JavaScript的原型设计工具,并且它是一个开源项目。Framer有以下一些特点:支持手势、动效、状态、基于网页、容易实现、可在任何设备上浏览。如果你很精通Javascript,那么这个工具应该会适合你。


交互设计师并不是动效的制作者,相比较而言视觉设计师不但更方便修改产品的素材,而且对产品的视觉把控能力也更强一些,所以更适合成为制作者。所以我觉得交互设计师要多了解动效的实现原理,学会运用动效解决问题,思考动效的概念。但是鼓励视觉设计师尽量多的掌握动效制作技术,让自己的效果图动起来。

停止不必要的UI动效设计

Principle

Principle
可能是所有动效工具中最简单易用的。你只需要设置屏幕A和屏幕B,Principle就能自动地产生这两个屏幕之间的过渡动效。当然,你也可以通过设置不同的时间和动效曲线,来调整动效。Principle是一个桌面应用,它的界面和Sketch非常像,另外,你可以方便地将Sketch中的设计直接拷贝到Principle中使用。

视觉设计师在动效设计上需要交互设计师的把控,避免成为花瓶。和界面一样,动效在实现过程中也会影响到用户体验,比如过渡的并不自然,或者虽然很好看但是太花哨反而影响信息的阅读等,这些都可以让交互设计师帮忙check一下。

2016-1-5 15:57 上传

Flinto

Flinto
和Principle一样,也非常简单易用。特别的是,它提供了一个[Skech插件]
,能够直接将你Sketch中的Artbords和3D transform导出到Flinto中。

最后希望各位UI和UE同学,在面对新的流行趋势下能够更多的理解和认识它,不盲从,一起探索更好的工作方法。

扁平化设计示例不管你喜欢与否,扁平化设计在设计圈中已成为主流思想。所有的主要系统平台(Android、iOS、OSX、Windows、Windows
phone)都已经开始拥抱这种极简设计语言。同时,它还主宰着高速发展的网页设计。扁平化设计是视觉设计思考成熟的体现。它是一个自然的进程,一方面是被潮流和时尚驱使,另一方面折射出业内人士终于逐渐掌握了数字媒体
动效设计现阶段的动效设计,可以类比视觉设计史的“阴影阶段”。网页动效能力有了显著提升,得益于CSS中的过渡属性(transition)和被硬件加速支持的变形属性(transform),以及正在发展的标准,如JS动效(JS
Web
Animations)。另外,现在的移动设备由于其不断精进的性能,以及多核、多存储、高dpi等优越的特性,可以流畅地输出60fps动画效果。图片 10

Pixate

Pixate 是一个Web
App,能够帮助你快速地制作原型。与Flinto或者Marvel不同,你可以区分层(layers)和嵌入的交互,如拖拽,点击,双击等。制作出来的原型保存在Web上,你可以使用一个iOS
app来预览原型的效果。

5.jpeg (29.2 KB, 下载次数: 2)

Origami

Origami是一款免费的Quartz
Composer的插件,Origami使QC的界面变得更加友好,更加适合进行移动App的界面设计。从2013年5月开始,Facebook的产品设计师们就开始开发这款QC插件。Origami的开发过程与Paper一同进行,随着Paper的功能越来越复杂,Origami也变得越来越强大,Paper上的每个动画效果都是由设计师首先在Origami上制作成型后,再由iOS工程师编写的。

标签:, , , , , , , , , , , , , , , , ,

Your Comments

近期评论

    功能


    网站地图xml地图