动效设计原理:从卡通动画到UI动效
计算机动画原理

计算机动画原理
计算机动画原理是利用计算机技术和数学算法来模拟和生成动态图像的技术。
它基于一系列静止图片(称为帧)的快速连续播放,通过每一帧之间微小的变化来创造出动画效果。
首先,计算机动画的基本原理是人眼的视觉暂留效应。
人眼在观看连续的快速帧图像时,会将这些静止图像视为连贯的动态画面。
这是因为当一个图像消失后,人眼的视觉留存能够持续一小段时间,直到下一个图像出现。
这个时间间隔足够短,使人眼无法察觉到图像之间的间断,从而产生了动画效果。
其次,计算机动画的原理还包括动画对象的建模和动作处理。
动画对象可以是物体、角色或其他元素,它们通过虚拟三维空间中的坐标和属性来进行建模。
这些模型可以是简单的几何图形,也可以是复杂的多边形网格。
动作处理则是对模型的位移、旋转、缩放等变换进行操作,以实现对象的运动和变化。
此外,计算机动画还涉及到插值和插帧技术。
插值是通过计算两个关键帧之间的中间帧,来平滑过渡对象的位置、颜色、形状等属性的方法。
插帧是在某些情况下,为了获得更加连贯的动画效果,插入额外的关键帧。
这些技术可以使动画效果更加自然、流畅。
最后,计算机动画的原理还涉及到渲染和光照技术。
渲染是将模型的表面属性(如纹理、颜色、光照等)计算为像素值的过程,以便在屏幕上显示。
通过光照技术,可以模拟真实世界中的光照条件,使动画对象产生阴影、反射和折射等效果,增强
了动画的真实感。
综上所述,计算机动画原理涉及到视觉暂留效应、动画对象建模和动作处理、插值和插帧技术、渲染和光照技术等多个方面,通过这些方法和技术的组合,可以创造出各种各样逼真、生动的动画效果。
弹性动效的原理和应用

弹性动效的原理和应用1. 弹性动效的概念和意义弹性动效是指在交互界面中,元素能够呈现出有弹性的动效,使用户感觉到界面元素有一定的物理性质,如弹簧效果、拖拽效果等。
弹性动效的设计可以提升用户的体验,增加交互的可玩性,并且能够帮助用户更好地理解界面的变化和反馈。
2. 弹性动效的原理弹性动效的实现基于物理动画原理,主要涉及以下几个方面:2.1 弹簧模型弹簧模型是实现弹性动效的基础,它基于胡克定律,描述了弹性物体在受力下的行为。
弹簧模型定义了弹性物体的初始状态、质量、弹性系数等参数,并通过力的作用计算物体的位移和速度。
2.2 阻尼效果阻尼效果是指弹性物体受到外力作用后,逐渐减弱并趋于静止的过程。
在弹性动效中,通过增加阻尼效果可以使动画更加自然,避免突兀的停止。
2.3 弹性系数弹性系数决定了弹性物体在受力下的回弹程度。
较高的弹性系数可以使物体更具弹性,较低的弹性系数则使物体呈现更缓慢的变化。
在弹性动效设计中,需要根据不同的场景和效果来调整弹性系数,以达到最佳的动效效果。
3. 弹性动效的应用场景弹性动效可以应用在各种交互界面中,以下是一些常见的应用场景:3.1 拖拽效果在拖拽交互中,通过给元素添加弹性动效可以增加用户对操作的反馈,使用户更加直观地感受到元素的移动和位置变化。
例如,当用户拖动一个元素时,可以通过弹性动效让元素具有弹簧效果,让用户感受到物体的重量和弹性。
3.2 下拉刷新下拉刷新是一种常见的交互方式,通过下拉页面可以触发刷新操作。
在这种场景中,可以通过添加弹性动效来增加用户的互动感受。
当用户下拉页面时,可以给页面顶部添加一个弹性动效,使用户感受到页面被拉伸的效果,同时也提醒用户即将执行刷新操作。
3.3 动画过渡在界面元素变化的过程中,通过添加弹性动效可以使动画更加平滑、自然。
例如,在滑动切换页面的过程中,可以添加弹性动效使页面变化更流畅,提升用户的交互体验。
3.4 按钮点击效果在按钮交互中,通过添加弹性动效可以增加按钮的点击反馈,使用户感受到按钮被按下的效果。
动画片的原理和制作方法

动画片的原理和制作方法
动画片是一种把静止的图片变成有生动感的影像,使观众感受到动画片中的动作。
动画片的原理是通过连续叠加的图片,每一帧的图片都略有不同,当图片连续播放时,就会产生一种动态的效果,使观众感觉到动画片中的动作。
动画片的制作方法通常分为三个主要步骤:创作原稿、制作原画和渲染动画。
首先,创作原稿是指将动画片的剧情和画面布局设计出来,这也是动画片制作的重要环节,需要经过编剧、导演、美术设计等人员的协作,创作出一个完整的动画片原稿。
其次是制作原画,也叫“绘画”。
绘画时需要根据创作原稿,逐帧绘制动画片的每一帧的图片,这里面特别需要考虑到背景的衔接,人物的变化,以及各种细节,这些都需要经过绘画师的精心绘制,绘制出每一帧的图片。
最后一步就是渲染动画,也叫“动画”。
这个步骤是把制作出来的每一帧的图片按照一定的顺序和速度连续播放,从而产生动态的效果。
这里面需要考虑到技术人员的视觉技巧,以及软件工具的配合,才能将绘制出来的每一帧图片变成动态的画面。
以上就是动画片的原理和制作方法。
这个过程从创作原稿,到制作原画,再到渲染动画,每一步都需要精心设计,这可以说是一个极其复杂的过程,但是动画片的最终效果是值得的。
动态插画的基本原理和应用

动态插画的基本原理和应用1. 什么是动态插画?动态插画是指运用动画和插画相结合的艺术形式,通过连续播放一系列图像的方式,使画面具有动态效果。
它融合了绘画、动画和设计等多种元素,成为当代艺术和设计领域中重要的创作形式。
2. 动态插画的基本原理动态插画的创作涉及许多原理和技术,下面列举了一些基本原理:•动画原理:动态插画通过图像的连续播放来创造出动态效果。
基本的动画原理包括关键帧动画、Tweening 动画等。
关键帧动画是指通过人工绘制多个关键帧,计算机通过插值生成中间帧,形成连续的动画效果。
Tweening 动画是指根据起始状态和结束状态之间的差异,计算机自动生成中间帧。
•插画原理:插画是指通过绘制平面图像,表达故事、情感或概念的艺术形式。
在动态插画中,插画被应用于动画中的每一帧,为整个场景增加生动性和表现力。
•时间轴原理:时间轴是动画创作中的一个重要概念,它是用来控制动画内容的顺序和时长的。
时间轴可以帮助艺术家将不同的元素和动画效果组织在一起,并精确地控制它们的展示方式和持续时间。
•色彩原理:色彩在动态插画中起到非常重要的作用,它可以传达情感、表达主题,并吸引观众的注意力。
艺术家需要考虑色彩的搭配和运用,以达到想要表达的效果。
•运动原理:动态插画的动画效果是通过图像的移动和变形实现的。
艺术家需要掌握运动原理,包括速度、加速度、路径等,以使动画效果更加流畅和自然。
3. 动态插画的应用领域动态插画具有广泛的应用领域,以下列举了一些主要的应用领域:•广告和宣传:动态插画可以为广告和宣传活动增加生动性和吸引力。
它可以用于电视、网络和户外广告,帮助企业或品牌传递信息和吸引用户的注意力。
•移动应用程序:动态插画在移动应用程序开发中起着重要的作用。
通过为应用程序添加动画效果,可以提升用户体验,并增加用户对应用程序的粘性和兴趣。
•游戏设计:动态插画在游戏设计中是必不可少的。
它可以为游戏场景、角色和道具添加动画效果,使游戏更加生动和有趣。
动画形成的原理

动画形成的原理
动画是通过快速连续播放一系列静止的图像帧或矢量图形,在人眼无法察觉到的时间间隔内,营造出连贯、流动的视觉效果。
这种视觉效果是源于视觉暂留性的现象,即人眼在感知到一个物体离开视线后仍保留该物体的影像片刻时间。
动画的制作过程通常包括以下几个步骤:首先,动画师根据需求和创意设计出关键帧,即动画中的重要画面。
然后,制作人员会在关键帧之间插入中间帧,这些帧用来过渡关键帧之间的动画效果。
这个过程称为动画间隔,通过合理安排中间帧的位置和数量,可以让动画流畅自然。
接下来,制作人员会对前面制作的图像进行扫描或者通过计算机软件进行数字化处理,最终生成图像序列。
最后,将这些图像按照一定的帧率播放,就可以形成动画效果。
动画形成的原理是基于人眼视觉系统的特性。
我们的眼睛对于连续的图像流有一种持续保持的感知能力,即暂留性或视觉暂留。
当一幅图像从我们的视野中逐渐消失时,我们的大脑仍能继续保留这个图像的影像。
而当连续播放一系列静止图像时,暂留性让我们感觉这些图像在移动或发生变化,从而形成了动画效果。
通过控制图像帧的播放速度,即帧率,可以调整动画的流畅程度。
一般来说,帧率越高,播放速度越快,动画就会显得更加流畅。
通常,电影的帧率是每秒24帧,而电视、电脑游戏等
多媒体内容的帧率一般是每秒30帧或更高。
总之,动画的形成原理是利用人眼的视觉暂留性,通过连续播放一系列静止图像来创造出连贯、流动的视觉效果。
这一原理在动画制作中被广泛应用,使得我们能够欣赏到各种生动有趣的动画作品。
简述动画的原理

简述动画的原理
动画是一种通过连续播放静态图像来产生运动效果的艺术形式。
它的原理是利用人眼的视觉暂留现象,即当一幅图像在人眼前停留一定时间后,即使它已经消失,人眼仍能保留它的影像,从而产生一种连续的运动效果。
动画的制作过程可以分为三个阶段:预制阶段、制作阶段和后期制作阶段。
预制阶段包括故事板、分镜头和角色设计等,制作阶段则是将故事板和分镜头转化为动画画面,包括动画的绘制、彩色、背景和音效等。
后期制作阶段则是对动画进行剪辑、调色和特效处理等。
动画的制作方式有很多种,其中最常见的是手绘动画和计算机动画。
手绘动画是指通过手工绘制每一帧画面来制作动画,它的优点是可以表现出手绘的质感和风格,但制作周期较长。
计算机动画则是利用计算机软件来制作动画,它的优点是制作速度快、效果逼真,但缺点是缺乏手绘的质感和风格。
动画的应用范围非常广泛,包括电影、电视、广告、游戏等领域。
在电影和电视中,动画可以用来制作卡通片、动作片、科幻片等类型的影片;在广告中,动画可以用来制作产品宣传片、品牌形象片等;在游戏中,动画可以用来制作游戏角色、场景和特效等。
动画是一种非常有趣和富有创意的艺术形式,它的原理是利用人眼的视觉暂留现象来产生连续的运动效果。
随着计算机技术的不断发展,动画的制作方式也在不断创新和改进,相信未来动画的应用范围会更加广泛。
游戏UI与交互设计手册
游戏UI与交互设计手册 第一章 游戏UI设计基础 ............................................................................................................... 2 1.1 游戏UI设计概述 ............................................................................................................. 2 1.2 UI元素分类与功能 .......................................................................................................... 2 1.3 UI设计原则 ...................................................................................................................... 3 第二章 游戏UI布局与结构 ........................................................................................................... 4 2.1 界面布局原则 ................................................................................................................... 4 2.2 常见布局方式 ................................................................................................................... 4 2.3 界面结构设计 ................................................................................................................... 4 第三章 游戏UI视觉设计 ............................................................................................................... 5 3.1 色彩搭配 ........................................................................................................................... 5 3.2 字体与排版 ....................................................................................................................... 6 3.3 图标与按钮设计 ............................................................................................................... 6 第四章 游戏UI动效设计 ............................................................................................................... 7 4.1 动效设计原则 ................................................................................................................... 7 4.2 常见动效类型 ................................................................................................................... 7 4.3 动效应用场景 ................................................................................................................... 8 第五章 游戏交互设计基础 ............................................................................................................. 8 5.1 交互设计概述 ................................................................................................................... 8 5.2 交互设计原则 ................................................................................................................... 8 5.3 交互元素设计 ................................................................................................................... 9 第六章 游戏交互逻辑设计 ............................................................................................................. 9 6.1 交互逻辑构建 ................................................................................................................... 9 6.2 用户行为分析 ................................................................................................................. 10 6.3 交互流程设计 ................................................................................................................. 10 第七章 游戏UI与交互设计协作 ................................................................................................. 11 7.1 UI与交互设计协作流程 ................................................................................................ 11 7.1.1 需求分析 ..................................................................................................................... 11 7.1.2 设计策划 ..................................................................................................................... 11 7.1.3 设计制作 ..................................................................................................................... 11 7.1.4 评审与修改 ................................................................................................................. 11 7.1.5 原型制作与测试 ......................................................................................................... 11 7.1.6 优化与调整 ................................................................................................................. 11 7.1.7 设计交付与后续支持 ................................................................................................. 12 7.2 设计沟通与交流 ............................................................................................................. 12 7.2.1 建立良好的沟通机制 ................................................................................................. 12 7.2.2 保持开放的心态 ......................................................................................................... 12 7.2.3 使用专业术语 ............................................................................................................. 12 7.2.4 定期召开设计会议 ..................................................................................................... 12 7.2.5 建立设计文档库 ......................................................................................................... 12 7.3 项目管理与协调 ............................................................................................................. 12 7.3.1 制定项目计划 ............................................................................................................. 12
动画的基本原理
动画的基本原理动画是一种通过连续播放静止图像或物体的方式来产生运动的视觉效果的艺术形式。
在当今社会,动画已经成为人们生活中不可或缺的一部分,无论是在电影、电视、游戏还是广告等领域,都有着广泛的应用。
而要想成为一名优秀的动画师,首先就需要掌握动画的基本原理。
首先,动画的基本原理之一是运动。
动画的核心就是要表现物体的运动,而要想表现出自然、流畅的运动,就需要深入理解物体的运动规律。
比如,物体在运动过程中会有加速、减速、匀速等状态,动画师需要根据不同的情况来表现出这些状态,使得动画看起来更加真实、生动。
其次,动画的基本原理之二是姿态。
除了运动外,物体的姿态也是动画中非常重要的一部分。
动画师需要通过改变物体的姿态来表现出物体的不同状态和情感,比如一个人物在不同情绪下的表情和动作,都需要通过姿态来表现出来。
因此,对于动画师来说,掌握好姿态的表现技巧是非常重要的。
另外,动画的基本原理之三是时间。
时间是动画中不可或缺的因素,动画师需要通过控制时间的长短来表现出物体的运动和变化。
比如,快速播放多张图像可以表现出物体的快速运动,而慢速播放则可以表现出物体的缓慢变化。
因此,动画师需要对时间有着精准的把控能力,才能制作出优秀的动画作品。
最后,动画的基本原理之四是空间。
在动画中,空间的表现同样是至关重要的。
动画师需要通过控制物体在空间中的位置和移动来表现出物体的运动轨迹和变化过程。
同时,对于三维动画来说,空间的表现更加复杂,动画师需要通过对物体的立体空间进行精准的控制,才能制作出高质量的三维动画作品。
总的来说,动画的基本原理包括运动、姿态、时间和空间,而要想成为一名优秀的动画师,就需要对这些原理有着深入的理解和把握。
只有掌握好了这些基本原理,才能制作出优秀的动画作品,为观众带来更加精彩的视觉体验。
希望本文对动画创作者有所帮助,谢谢阅读!。
短视频中的动效果增加作品的趣味性
短视频中的动效果增加作品的趣味性动画在短视频中的运用,给作品带来了新的趣味性。
动效作为短视频内容的重要组成部分,能够吸引观众的眼球,提升作品的观赏价值和传播效果。
本文将从动效在短视频中的作用、动效的分类以及动效的创作与运用等方面展开论述。
一、动效的作用动效是指利用计算机技术对静态图像进行运动处理,使其产生动态效果。
在短视频中,动效的作用不容忽视。
首先,动效能够吸引观众的眼球,增加作品的趣味性。
通过独特的动画效果,能够让作品更加生动有趣,让观众产生共鸣。
其次,动效能够突出主题,增强作品的视觉冲击力。
通过运用动效,可以在短时间内向观众传递更多的信息,让观众对作品内容有更深入的理解。
另外,动效还能够提升作品的观赏价值和传播效果,使作品更有特色,更易于被观众接受和分享。
二、动效的分类根据动效的表现形式和风格,可以将其分为以下几种类型:1. 动画变换:通过改变形状、颜色、位置等对元素进行转变,如形状变换、颜色渐变、位置移动等。
2. 特效动画:通过添加特效、粒子效果等使画面更具视觉冲击力,如火焰特效、烟雾效果、闪光特效等。
3. 运动路径动画:通过定义元素的运动路径,使其在画面中自由移动,如曲线运动、直线运动等。
4. 骨骼动画:通过对元素的骨骼进行控制,使其具备更灵活的运动能力,如人物角色的走动、跳跃、飞行等。
5. 过渡动画:通过定义元素之间的过渡效果,使画面更加流畅和自然,如淡入淡出、渐显渐隐等。
三、动效的创作与运用动效的创作与运用需要一定的设计和技术能力。
以下是一些动效创作与运用的方法:1. 创作思路:在创作动效时,可以根据作品的主题和情感,确定要表达的效果和风格。
可以借鉴其他作品的设计理念,同时也要注重创新,使动效更具个性化和独特性。
2. 动效软件:在创作动效时,可以使用专业的设计软件,如Adobe After Effects、Cinema 4D等。
这些软件提供了丰富的动画效果库和工具,方便设计师进行动效创作和编辑。
利用AE制作动态UI界面的教程
利用AE制作动态UI界面的教程Adobe After Effects(简称AE)作为一款专业的视频效果制作软件,广泛应用于电影、电视和广告等领域。
除了常见的视频特效制作外,AE还可以用来制作动态UI界面,给你的应用或网站增添更多的交互动感。
本教程将介绍利用AE制作动态UI界面的步骤和技巧。
步骤一:准备素材首先,找到一些合适的素材来构建动态UI界面。
可以使用PSD文件、矢量图形或者字体图标等。
确保素材清晰、高质量,并且符合你想要呈现的风格。
步骤二:创建合成打开AE软件,创建一个新的合成。
根据你的需要,设置合适的分辨率和帧速率。
一般来说,UI界面的分辨率和帧速率与最终编辑的视频保持一致,以确保流畅的播放效果。
步骤三:导入素材将准备好的素材导入到AE中。
可以直接拖拽素材文件到项目面板中,或者使用“文件”->“导入”选项。
导入的素材将出现在项目面板中,方便后续的使用和管理。
步骤四:构建UI界面在合成面板中创建一个新的图层,作为UI界面的底图。
你可以使用形状工具、路径工具或者导入的矢量图形来绘制和构建UI元素。
利用AE强大的图层效果和转换功能,为UI界面添加阴影、边框、渐变等效果,使其更加立体和具有层次感。
步骤五:动画效果一个好的UI界面需要具备生动的动画效果。
在AE中,你可以利用关键帧和过渡效果来实现丰富而流畅的动画。
选择要动画的图层,在时间轴中设定关键帧,并调整属性值,AE会自动生成图层的动画过渡。
你可以控制动画的速度、延迟和缓动效果,使界面元素呈现出动感和变化。
步骤六:添加交互元素在UI界面中,可以添加一些交互元素,例如按钮、滑块、下拉菜单等,用来模拟用户和界面的交互。
利用AE的脚本和表达式功能,可以设定交互元素的动作和响应,实现一些用户体验的交互效果。
例如,点击按钮后,界面元素的颜色改变、文字呈现、过渡动画等。
步骤七:调整和优化完成UI界面的构建和动画后,通过预览功能来调整和优化界面效果。
你可以使用RAM预览或者导出视频预览,观察整个UI界面的行为和效果。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
动效设计原理:从卡通动画到UI动效概要UI是基于静态页面来设计的,页面之间通过跳转切换。在设计过程中,设计师很重视单页的视觉效果,却经常忽略了对界面跳转的处理。这些未经处理的跳转由于没有提供足够的预期,所以用户在使用时经常会觉得困惑。与此相反,在卡通领域,由于使用了足够的动画效果,用户可以非常容易理解某个动作,即使夸张的动作也没问题。
尽管UI设计和卡通动效之间存在差异:卡通更侧重于娱乐,而用户界面却是严谨的互动式工具。但是我们还是可以借鉴卡通动效的优点,从情感和认知层面上将两者的优势相结合。
KeywordsUI、动画效果、卡通
1,UI界面 VS 卡通大家都知道,UI界面一般都是基于静态页面来设计 – 无数个页面组成了一个软件。通常情况下,视觉设计师直接开始设计静态页面,几乎不考虑它们之间如何切换。由于用户对界面之间的关联没有预期,所以他们经常会受到惊吓。用户苦思冥想,想了解界面之间到底发生了什么。(我们的app都是由很多页面组成的,由于用户对界面之间的关联没有预期,所以经常会受到惊吓或者感到困惑。图片来自:http://designbeep.com/2014/06/19/mobile-app-design-
inspiration-as-shoe/ )
当用户感知不到页面之间的关系时,就说明页面之间的因果关系不够清晰。让用户理解页面之间的关系至关重要,这直接关系到操作效率。在没有辅助解释的的情况下,用户只能通过经验去理解。这是一个非常有挫折感的体验。
举例来说,在Windows中,如果我们的任务是:打开“我的电脑”中的D盘,那流程是这样的:1. 双击“计算机”图标;2. 图标扩展成一个窗口;3. 在窗口中选择D盘。
在这种情况下,第一步的元素是图标,第二步元素是扩展的窗口。界面之间的跳转是非常突然且直接,且没有前后关联。如果用户第一次使用Windows,这样的界面跳转需要理解一阵子。(在Windows中,图标和窗口之间的跳转十分直接,如果第一次Windows使用会让用户很困惑)
用户往往通过经验来克服这些问题。前几次的体验是最糟糕的; 最终用户学习了“机器的行为“才能有效地与它进行交互。尽管这些界面的认知可以通过反复使用来提高,但认知负担依然沉重。例如,用户知道点击图标将打开一个窗口,但是突然的变化(突然从图标变成窗口)也会让用户迟疑。
卡通中的动画效果,非常擅长于提供足够的信息让观众理解。动画中一些令人费解的行为没有让用户感到困惑;动画人物并不会突然消失,突然出现;动画在发生形状变化时非常自然。
动画提供了必要的视觉线索,让人理解某个动作前后发生了什么。不像UI一样认知沉重并非常依赖经验,且还将理解界面的责任的归咎于用户。动画利用真实的动作来展示对象变形,让人更加容易理解。
从认知和情感两个角度来说,将动画融入到界面切换中是有好处的。通过对系统的解释,动画允许用户持续的思考一个任务,而无需回想之前的操作。由于没有突然的视觉变化,动画降低了用户被UI界面吓到的机会,从而减少了不安全感。因此,使用动画不仅有助于用户理解界面,提高使用效率。而且还使界面的体验更愉快更舒适。
2,在UI界面中使用动画的几个方法多年来,动画师们已经研究出了很多动画设计的方法。这里选择一些同时符合UI和动画的设计原则,同时展示了如何在UI设计中应用。
我们从3个维度来讨论,分别是:拟物化,夸张和增强现实。本节提到的所有动画设计原则都来自Disney 《Animation: The Illusion of Life》。
2.1 拟物化把UI中的元素当作真实的,有重量的物体。在动画片中,人物和元素都是真实的,有重量的物体。他们每次走动都好像是生活在真实世界中一样,这种感觉非常真实。这种拟物感不仅仅是填充一个像素区域那么简单,这些物件的运动是通过增加惯性来实现的。动画的所有的原则,例如:慢进慢出,跟随,和弧形运动,其随后所有的讨论,都是基于这个原则,他们是有质量的物体。
(所有元素是有重量的物体。这是所有的运动的基础。图片查看:https://medium.com/@druchtie/animation-interfaces-design-2f039da75eeb )
把UI界面中的元素变成独立的,区别于背景的物体,并让其拥有动作惯性是非常重要的。在UI界面中,元素应该被绘制为一个在三维中的对象,用户可以连续并稳定的操作他们。
光是把一个元素拟物化还远远不够,性能优化也是必须的。为了保持移动的假象,对象在运动时,帧速率必须够高(当动画达到每秒24帧时,人眼看到是正常速度的运动)。由于性能下降可能导致移动延迟,从而造成卡顿的现象。这样用户容易分心,体验就会折损。
2.1.1 拟物化的方法一:运动模糊拟物化和无卡顿只是最基本的需求。如果用户大幅移动一个对象,例如从屏幕左侧跨越到右侧。由于视觉停留效应,用户在屏幕上会看到2个以上的对象。眼睛呈现两个短暂对象也被称为视觉暂留效应。
动画设计师面临这个问题时,使用了一个经验法则:如果一个物体移动超过物体本身一半的大小(或者更大)的任何两帧之间,加入运动模糊效果。使用运动模糊填补旧新位置之间的间隙,让眼睛更能接受物体的移动。虽然涉及到抗锯齿的问题,但运动模糊确实是一个低成本的解决方案。
(在Windows中,鼠标指针可以设置成运动模糊,方便用户去追踪鼠标指针)动画师发现,有两种不同的运动模糊方式可以使用。最简单的就是使用半透明的条纹。这种条纹就像尾巴一样跟随在图标后,使用透明条纹来模拟现实的物理作用,并产生非常逼真的效果。另一方式是在单个帧中插入多个图像。例如,手臂迅速来回摆动时,单个帧显示多个手臂,每个手臂在不同的位置呈现。这种技术可以有效提高帧速率,并且很有说服力。(运动模糊的全部帧效果,可以通过每帧展示多个竖线来达到提高帧数的效果)运动模糊的效果表明:运动不仅是一系列的静止图像的集合。它会给用户一个模糊的线索。这种感知来源于人的视觉系统的工作原理。卡通动画师经常使用运动模糊,即使只是粗略进行运动模糊的渲染,也足以打造一种快速运动的幻觉。在App设计中,由于手机尺寸的限制,一般不会出现超远距离的拖动,但是在大屏幕的电脑上就会遇到这个问题。
2.1.2 拟物化的方法二:出现和消失除了移动,元素无规则的出现和消失也会造成用户困惑。在UI设计中,有三种方式展示出现消失的效果:移入,擦除,和模糊消失。他们的动作是快而连续的,给用户必要的视觉线索来理解发生了什么。
(从左到右动效依次是移入,擦除和模糊消失)2.2 夸张通过“夸张现实”的手法,往往可以让设计达到事倍功半的效果。经过夸张手法处理的卡通表现的更现实。
例如在迪斯尼的《白雪公主的小矮人》中,小矮人是非常不写实的:他们的脸和身体都很大,他们的动作大而夸张。相比之下,只有白雪公主的比例是逼真的。相比于矮人,她更像一个真实的人。所以白雪公主这个角色,却因为更接近于现实,所以被渲染成相对平淡的角色。白雪公主是用来配合矮人的。矮人反而看起来更逼真。这种夸张的方式更加的突出了动画本身。这样的原理说明,无论是物理特征,动作特征,或四肢特征,可以通过强化某些方面,让其更显著。
通过这种方式,观众可以更好的去理解这些特征和动作。例如,每个小矮人和白雪公主都有一个特征,往往是和他们的名字(迟钝,脾气暴躁,打喷嚏)遥相呼应的。这些特征非常强烈,即使没有这个名字作为一个额外的线索,人们也能通过每个矮人的身体特征,动作和行为等夸张行为来记住某个角色。
(白雪公主因为更接近于现实,所以被渲染成相对平淡的角色。白雪公主是用来配合矮人的。每个小矮人都有一个特征,往往是和他们的名字(迟钝,脾气暴躁,打喷嚏)遥相呼应的,而白雪公主则特征不明显。图片来自:Disney.com )
所以,夸张的表现手法可以突出某些受到忽视的细节。在卡通中,动画师可以通过夸大某个细节来引起更多的注意力。可能这些细节原本很难背察觉。和卡通一样,UI界面必须让用户理解,并在必要时突出一些细节。采用夸张的方式,使UI界面中的某些对象可以更容易理解,更加“现实”,从而使UI界面更吸引人。
(在图片社区项目中,我们对通知使用了动效。因为通知入口属于细节,在没有通知时,只保留一个icon,不吸引用户注意。当有新消息来时,用动效来吸引用户注意。)
2.2.1夸张方法一:给用户足够的预期在动作发生之前,最好给给观众一些提示。当动作发生时,观众已经准备好,而不必对所发生的动作所惊讶。
( Tumblr中,当鼠标移动到某一功能时,icon会跳动一下,提醒用户点击之后会有变化)像类似预期一样的的夸张技巧,它们可以让用户更容易理解界面。他们不断的为用户解释或者暗示界面之间的继承关系。如果没有这样的线索,用户会非常难以理解这些界面。
2.3 增强现实(Reinforcement)所有的动画技术都会增强某个现实。有些会非常极端-就像在某些动画中,角色高速移动,变成了一道光线,快速的穿过屏幕。实际上这是非常隐蔽的手法。观众不会感知到这些效果很夸张。他们只是感觉超现实。这些夸张的效果已经被精心处理,所以观众不会被这些夸张效果所困惑。本节就是探讨,通过增强现实技术,用来弥补卡通与观众之间的关系,亦或者UI与使用者之间的关系。
2.3.1 增强现实方法一:缓进缓出如前文描述,当卡通人物移动时,是非常拟物化的。 然而,这种移动并不是简单的在纸上画一些等距的角色。动画师在绘制动作时经常使用缓进缓出效果:角色缓慢的走出屏幕,接着一个快速的动作,最后的收尾动作很缓慢。这种方式有助于让角色在移动中看起来更有物理质量。此外,缓进缓出效果出现在某一个快速动作之前,有助于观看时更加舒适。如果没有它,动画中的移动会感觉很假,类似缓进缓出这种细节效果可以极大的影响一个动画的质量。
(使用缓进缓出的效果后,界面感觉更加舒适。图片查看:https://medium.com/@pasql/transitional-interfaces-926eb80d64e3 )