移动App应用设计和动效原理

如今,人们对于网站动效的追捧和热爱可以用一句很简单的话去表达：带有动效的app才是好的app。良好的效果,用户粘度的积极作用,在改善产品体验设计方面已成为一个网站设计的一个主流方向,应用现在产品交互设计和界面设计基本要素。基于动态效果,上海海涛科技想从以下常见的四个方面简述动态都有哪些独特的效果

Part 1 基础动效

常见动效通常是由多个基础动效组合而成。下面就让我们来看看有哪些常见的基础动效。

一般常见的网站的动态效果是由很多个基础动效组合成的，接下来，我们就一起来欣赏平时常见的基础动效都有哪些

位移和速度

位移是一个物理量，把它设计在网站的动态效果中式做适合不过了，因为位移本身表达的就是一个在移动的物体，从一个位置到另外一个位置的距离。因此，动画中的元素是可以通过位移的变化而产生的动态的效果

相同的位移，元素通过不同的速度可以产生不同的动画效果，就是因为他们关系密不可分的，这些不一样的动画效果可以通过匀速、加速、减速和缓入缓出等方式展现，不同速度的变化可以为网站的页面增加动感，给用户带来不一样的视觉体验

放大和缩小

界面元素等比放大或缩小的过程。

放大

缩小

消失和出现

网页的界面是一个从有到无或者是一个从无到有的过程

翻转

翻转既是上下翻转或者左右翻转或带有动画3D效果180度转动，也可以是带有折叠效果的90度

翻转

翻折

旋转

旋转是围绕中心点转动的界面元素，同样也是整个界面元素围绕中心点转动，比如说移动设备横屏和竖屏之间的切换。

局部旋转

全部旋转

变形

界面元素根据可触发或可自发变化的不同的形状设计操作形成的变形情况。

变色

变色是指动态效果中界面元素具有不同的色彩设计，以至于发生不同的变化

Part 2 动效作用

结论动态效应有许多功能,可以分为五个方面:友好,有趣,反馈,过渡和引导。下面一起来了解下这方面具体作用,同时享受一些良好的动态效果。

友好

与手势结合，增强操控感

当界面的元素是可以随着手指的操作而在动时，用户会觉得控制界面,好像不是在使用一个智能设备接口,不是被界面所控制,而是在操作一个真实的运动的物体。这种模拟现实操作的一个界面，使手势操作更容易学习,体验更流畅。

让错误不再令人沮丧

有些是网络不稳定，服务器不稳定，网络容易出错或者是用户输入的验证码不正确，用户名不存在等，这时为了让你再次重新操作，界面的设计可以制作成萌萌哒的动效，这种效果可以缓解那些没有耐心或者是感觉自己经常出错愚蠢的行为。让出错也是那么的可爱

有趣

让等待不再无聊

很多的用户在网上会等待着下载文件软件等，或者是等待着网页的刷新，为了不让等待变成的很乏味。可以在用户操作页面增加动态效果，当你还在沉浸在萌萌哒或创意搞笑的动效中的时候，时间已经悄然的流失。

增添趣味性，创造超出预期的惊喜

网络时代，登录是一种最传统的不可避免的操作,当我们在一个新网站迫不及待想评论时，登录界面的出现不觉得让人产生厌烦的心理。但当看到动态的效果,真的觉得很有趣,惊讶的愉快地完成首次登录。

过渡

表现层级关系

转场效果的展示是从一个界面到另一个界面的切换过渡，设计出与众不同的转场效果可以很好的把两个界面的层级关系展现给用户。

增加界面转场的延续感

两个开关之间的接口,有一些常见的界面元素,在设计过渡的动态效果,保存延续常见的界面元素显示,可以使界面更加流畅自然。

隐藏和展示界面元素

接口界面的空间是有限的,需要显示大量的信息。可以将当前不需要的界面元素显示不出来，将需要展示的元素使用一定的空间展示出来

反馈

让反馈更高效触达

生硬的文字反馈与直观的动态效果相比较，高等和底下立刻可以显现。动态反馈也可以带一些情感因素,抓住用户的心情。

令人愉快的提示