广告

浅谈UI设计中超实用的动效设计入门小手册

新浪微博
QQ空间
豆瓣网
百度新首页
取消

近几年UI设计领域大的变化便是越来越强调用户体验设计,而在Web或者App中使用动效也就成了一大趋势。这种趋势是如此强烈,以至于我看到越来越多的应用中所使用的那些动效已经不再是为了提升用户体验,而更多是为了强调动效本身了。
这是一个非常棒的动效设计建议,甚至可以说是原则。作为这些Web或者App的设计和,在我们设计和开发动效之前,应该明确什么才是正确的动效:动效应该是以提高可用性为前提,并且以令人觉得自然,含蓄的方式提供有效用户反馈的一种机制。
了解动效
的动效往往会被无视,而糟糕的动效却迫使用户去注意界面,而非内容本身。用户都是带着明确的目的来使用你的网站或者App的:买一件东西、学习新的知识、发现新音乐、或者仅仅是寻找近的吃饭地点。他们不会只为了把玩你精心设计的界面而来,实际上,用户根本不在意界面设计而只关心能否在你这儿方便地达到他们的目的。的动效应该对用户的点击或手势给予恰当的反馈,使用户能够非常方便地按照自己的意愿去掌控应用的行为,从而增强应用的使用体验。
基本动效
我们平时在Web或App中看到的动效其实都是由一些基本的动效组合而成的,这些基本动效包括:移动(Translate),旋转(Rotate),缩放(Scale)。在一些动效设计工具的帮助下,一般你只需要设置它的起点和终点,并告诉它你想要什么类型的动效,设计工具便会根据你的这些设置去渲染出整个动效。
动效曲线
自然界大部分物体的运动都不是线性的,而是按照物理规律呈曲线性运动的。通俗点来说,就是动效的响应变化与执行动效的物体本身质量有关。的动效应该反映真实的物理现象,如果你想表现的对象是一个沉甸甸的物体,那么他们的起始动画响应/参数的变化会比较慢。反之,物体如果是轻巧的,那么其起始动画响应/参数的变化会比较快。
属性变换
属性变换是非常常见的一种动效。比如可以通过改变透明度来实现淡入/淡出效果等。同时你还可以改变对象的大小,颜色,位置等几乎所有属性来体现动画效果。
注意下面这个动效的底部的菜单栏,当他的高度减小的同时,他的透明度也相应地降低,从而产生出一种折叠的效果。
组合动效
在大多数场景中,我们需要同时使用2种以上的动效,将它们有效地组合在一起,以达到更好的效果。另外你仍需要让你的动效遵循普遍的物理规律,这样才能使它们更容易被用户接受。
动效不应该太慢
我认为理想的动效时长应该在0.5-1秒之间,当你设计淡入淡出,滑动,缩放等动效时都应将时长控制在这个范围内。如果动效时长设置得太短,会让人看不清效果,甚至更糟的是给用户造成压迫感。反过来如果动效持续时间过长,又会使人感觉无聊,特别是当用户在使用App的过程中,反复看到同一动效的时候。
动效的开发
很多设计人员往往会遇到这样的困扰,他们看到的终产品中出现的动效与他们在设计阶段定义的有很大出入。那是因为,虽然作为设计师,可以定义非常酷炫的动效,但由于技术或成本上的限制,有些动效往往由于开发代价过高而被摈弃了。所以作为设计师,你可能需要同时理解如何设计动效,以及动效背后所使用的技术。这会帮助我们在整个项目的设计阶段就能作出明智的取舍,从而节省大量的开发成本。
动效制作工具
目前有一些非常流行的动效设计工具,它们基于不同的技术,也有各自的特点。你可以从中选择你喜欢的来使用。


本文由广州南跃科技有限公司提供。

广州南跃科技有限公司为你提供的“浅谈UI设计中超实用的动效设计入门小手册”详细介绍
在线留言

*详情

*联系

*手机

UI课程培训信息

VIP推荐信息

热门搜索

广州IT培训>广州网页设计培训>浅谈UI设计
信息由发布人自行提供,其真实性、合法性由发布人负责;交易汇款需谨慎,请注意调查核实。
触屏版 电脑版
@2009-2024 京ICP证100626