大家好,上一次我们和大家探讨了动效设计的基本原则以及六个动效设计中的常见形式,今天我们会继续介绍其他几种常见的动效表现形式,在动效设计上为大家提供更多的灵感和参考。
七、叠加
叠加的目的是当对象分层显示时,通过同一平面上的几个对象间进行前后叠加创造连贯的交互效果。在用户看到的平面上通过叠加关系,制造出 Z 轴的概念,让不同的内容在不同的景深下排布,以此定义内容的次序进而定义内容的先后和连贯顺序。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=66b08452c3177f3e1034fc0540ce3bb9/c381544bd11373f0357a797bae0f4bfbf9ed04cb.jpg)
叠加不仅可以用来实现界面间的切换过场,也可以用来隐藏一些功能性的按钮,在有限的界面内尽可能展示内容,而功能性按钮则被叠加于内容之下,这种设计方式也十分常见。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=1ffeeac3753e6709be0045f70bc69fb8/bf89281373f08202e2d787db41fbfbeda9641bcb.jpg)
八、克隆
克隆是以一个对象为起源,衍生出更多一致或是相似的对象,作为原有功能的延伸。这种设计方式在 Material Design 中被用在悬浮按钮上,一个圆形按钮通常可以展开变幻出更多的功能。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=706f5cea6d09c93d07f20effaf3cf8bb/c3d18af082025aaf1d77682ff1edab64014f1acb.jpg)
克隆是整个动画的统称,但事实上这样的概括也并不准确,事实上一个对象衍生出其他对象也只是整个交互动画的第一部,当操作完成或取消时,被克隆出来的对象会被遮盖或是叠加在原有克隆对象上,至此,整个交互动画才完成,而这一流程也符合我们之前提到的交互设计的原则,即叙事性。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=c54644ddc33d70cf4cfaaa05c8ddd1ba/61327b025aafa40ff183d839a164034f7af019cb.jpg)
九、模糊
模糊的作用是允许用户在空间上区别与自己主视觉关注内容不在同一层次的对象或场景。和遮罩、叠加等等方式类似,目的是作为一种状态去表现未被遮罩、叠加的内容。也就是说我们使用模糊效果不是为了过渡而是为了让对象处于主视觉重心状态之下。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=dc71eae97acf3bc7e800cde4e101babd/90c0a3afa40f4bfb409588b0094f78f0f53618cb.jpg)
使用了模糊效果的同时,也可能同时包含其他对象的其他属性的改变,例如在 iOS 中,当我们点击桌面上的某个文件夹时,文件夹之下的背景被整体模糊,与此同时伴随的是这个文件夹及其中包含应用图标的放大以及位置上的改变。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=7545531b31c79f3d8fe1e4388aa0cdbc/486d5d0f4bfbfbed171c209b72f0f736adc31fcb.jpg)
十、视差
视差的效果与叠加比较相似,都是在平面空间上产生景深的概念,但通常情况下叠加对空间的运用较为单一,包含的对象的层级可能比较少,而视差可能会产生更加错落有致的视觉效果。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=cdb71813953df8dca63d8f99fd1072bf/b6cdb2fbfbedab64be375b24fd36afc37b311ecb.jpg)
我们的大脑会告诉我们向我们移动地更快地对象距离我们更近,而移动较慢的对象距离我们更远,视差除了在层级上通过推拉叠加产生层级区分,也会在不同对象的运动速度上加以区分,让我们对距离的感知更加强烈。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=85bfbce9f2dcd100cd9cf829428a47be/593902edab64034fc688d4e2a5c3793108551dcb.jpg)
十一、维度
维度彻底打破了用户对手机界面只限于一个平面的观念,引入了三维的概念。如果说之前的叠加或是视差是希望通过“欺骗”用户大脑产生视觉上的认知,那么维度就是直接告诉用户,在平坦的手机屏幕中存在着三维空间。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=2045db08db00baa1ba2c47b37711b9b1/e92f5264034f78f0484e8c1773310a55b1191ccb.jpg)
维度的表现方式通常包括折纸,浮动和对象三种,著名的新闻聚合应用 Flipboard 即是采用折纸的方式,将普通的卡片翻折产生近似于现实中报纸展开折叠的效果,更加强化了真实感。而浮动的案例更是举不胜举,例如在风靡全球的社交应用 Tinder 中,每一个用户的个人信息一卡片的形式浮动排列,滑动后还会继续依照次序前后排列就是采用了这种表现方式。而对象这种表现方式通常被用在延迟交互当中,特别是转场上,切换的动作由平面转向立体,视觉冲击更强烈,大名鼎鼎的锤子科技的 Smartisan OS 在桌面主题更换动画上采用的就是这种方式。
十二、多莉和缩放
多莉和变焦是指涉及到相机相关的物体运动的电影概念。如果对象在 3D 空间中向相机运动或者相机向 3D 空间中的对象移动,我们可以知道发生了缩放,但是是不能判断是否有变焦发生的,而多莉这一概念则是指那些偏离主视觉的相机运动,因此在动效设计中将偏移主视觉的相机运动与缩放结合,就会产生特别的效果。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=38a4f2d4b0a1cd1105b672288913c8b0/b9a6fa4f78f0f7366fbb5ae50055b319e9c413cb.jpg)
多莉和缩放不仅包含了景深的变化,也包含缩放,而缩放效果中每个对象的属性,例如位置,尺寸,甚至颜色,透明度等等也都可能在这一过程中发生变化,这种由整体到局部,由局部到整体的展示方式非常适用于那些内容规律排布,即可总览又可以放大观察细节的地方去使用。 iOS 的相册就是一个非常好的例子。无缝转换让用户在浏览相册内容时即可以获得时间地点等信息又可以观察每一张相片的具体细节进行更多操作。
好了,动效设计常见的一些形式也介绍给大家了,当然这绝不是全部的交互方式,事实上,本文中介绍的绝大多数交互方式在十年前 iPhone 尚未问世之前也并没有太多应用在交互当中,是大屏幕触屏手机的全面推广让大家知道了在这块不大不小的屏幕上还可以做出更多新颖且能帮助提升用户体验的事情。随着科技的发展,虚拟现实和现实增强的时代也离我们越来越近,当这些新的交互方式如同浪潮一样涌向我们的生活,交互乃至设计上,定会发生更加翻天覆地的变化。而能够有幸生在这个时代去见证这一改变的发生,是我们最大的幸运。
欢迎关注像素范儿相关公众号:
优阁视觉
设计前沿
石家庄像素范儿
七、叠加
叠加的目的是当对象分层显示时,通过同一平面上的几个对象间进行前后叠加创造连贯的交互效果。在用户看到的平面上通过叠加关系,制造出 Z 轴的概念,让不同的内容在不同的景深下排布,以此定义内容的次序进而定义内容的先后和连贯顺序。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=66b08452c3177f3e1034fc0540ce3bb9/c381544bd11373f0357a797bae0f4bfbf9ed04cb.jpg)
叠加不仅可以用来实现界面间的切换过场,也可以用来隐藏一些功能性的按钮,在有限的界面内尽可能展示内容,而功能性按钮则被叠加于内容之下,这种设计方式也十分常见。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=1ffeeac3753e6709be0045f70bc69fb8/bf89281373f08202e2d787db41fbfbeda9641bcb.jpg)
八、克隆
克隆是以一个对象为起源,衍生出更多一致或是相似的对象,作为原有功能的延伸。这种设计方式在 Material Design 中被用在悬浮按钮上,一个圆形按钮通常可以展开变幻出更多的功能。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=706f5cea6d09c93d07f20effaf3cf8bb/c3d18af082025aaf1d77682ff1edab64014f1acb.jpg)
克隆是整个动画的统称,但事实上这样的概括也并不准确,事实上一个对象衍生出其他对象也只是整个交互动画的第一部,当操作完成或取消时,被克隆出来的对象会被遮盖或是叠加在原有克隆对象上,至此,整个交互动画才完成,而这一流程也符合我们之前提到的交互设计的原则,即叙事性。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=c54644ddc33d70cf4cfaaa05c8ddd1ba/61327b025aafa40ff183d839a164034f7af019cb.jpg)
九、模糊
模糊的作用是允许用户在空间上区别与自己主视觉关注内容不在同一层次的对象或场景。和遮罩、叠加等等方式类似,目的是作为一种状态去表现未被遮罩、叠加的内容。也就是说我们使用模糊效果不是为了过渡而是为了让对象处于主视觉重心状态之下。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=dc71eae97acf3bc7e800cde4e101babd/90c0a3afa40f4bfb409588b0094f78f0f53618cb.jpg)
使用了模糊效果的同时,也可能同时包含其他对象的其他属性的改变,例如在 iOS 中,当我们点击桌面上的某个文件夹时,文件夹之下的背景被整体模糊,与此同时伴随的是这个文件夹及其中包含应用图标的放大以及位置上的改变。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=7545531b31c79f3d8fe1e4388aa0cdbc/486d5d0f4bfbfbed171c209b72f0f736adc31fcb.jpg)
十、视差
视差的效果与叠加比较相似,都是在平面空间上产生景深的概念,但通常情况下叠加对空间的运用较为单一,包含的对象的层级可能比较少,而视差可能会产生更加错落有致的视觉效果。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=cdb71813953df8dca63d8f99fd1072bf/b6cdb2fbfbedab64be375b24fd36afc37b311ecb.jpg)
我们的大脑会告诉我们向我们移动地更快地对象距离我们更近,而移动较慢的对象距离我们更远,视差除了在层级上通过推拉叠加产生层级区分,也会在不同对象的运动速度上加以区分,让我们对距离的感知更加强烈。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=85bfbce9f2dcd100cd9cf829428a47be/593902edab64034fc688d4e2a5c3793108551dcb.jpg)
十一、维度
维度彻底打破了用户对手机界面只限于一个平面的观念,引入了三维的概念。如果说之前的叠加或是视差是希望通过“欺骗”用户大脑产生视觉上的认知,那么维度就是直接告诉用户,在平坦的手机屏幕中存在着三维空间。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=2045db08db00baa1ba2c47b37711b9b1/e92f5264034f78f0484e8c1773310a55b1191ccb.jpg)
维度的表现方式通常包括折纸,浮动和对象三种,著名的新闻聚合应用 Flipboard 即是采用折纸的方式,将普通的卡片翻折产生近似于现实中报纸展开折叠的效果,更加强化了真实感。而浮动的案例更是举不胜举,例如在风靡全球的社交应用 Tinder 中,每一个用户的个人信息一卡片的形式浮动排列,滑动后还会继续依照次序前后排列就是采用了这种表现方式。而对象这种表现方式通常被用在延迟交互当中,特别是转场上,切换的动作由平面转向立体,视觉冲击更强烈,大名鼎鼎的锤子科技的 Smartisan OS 在桌面主题更换动画上采用的就是这种方式。
十二、多莉和缩放
多莉和变焦是指涉及到相机相关的物体运动的电影概念。如果对象在 3D 空间中向相机运动或者相机向 3D 空间中的对象移动,我们可以知道发生了缩放,但是是不能判断是否有变焦发生的,而多莉这一概念则是指那些偏离主视觉的相机运动,因此在动效设计中将偏移主视觉的相机运动与缩放结合,就会产生特别的效果。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=38a4f2d4b0a1cd1105b672288913c8b0/b9a6fa4f78f0f7366fbb5ae50055b319e9c413cb.jpg)
多莉和缩放不仅包含了景深的变化,也包含缩放,而缩放效果中每个对象的属性,例如位置,尺寸,甚至颜色,透明度等等也都可能在这一过程中发生变化,这种由整体到局部,由局部到整体的展示方式非常适用于那些内容规律排布,即可总览又可以放大观察细节的地方去使用。 iOS 的相册就是一个非常好的例子。无缝转换让用户在浏览相册内容时即可以获得时间地点等信息又可以观察每一张相片的具体细节进行更多操作。
好了,动效设计常见的一些形式也介绍给大家了,当然这绝不是全部的交互方式,事实上,本文中介绍的绝大多数交互方式在十年前 iPhone 尚未问世之前也并没有太多应用在交互当中,是大屏幕触屏手机的全面推广让大家知道了在这块不大不小的屏幕上还可以做出更多新颖且能帮助提升用户体验的事情。随着科技的发展,虚拟现实和现实增强的时代也离我们越来越近,当这些新的交互方式如同浪潮一样涌向我们的生活,交互乃至设计上,定会发生更加翻天覆地的变化。而能够有幸生在这个时代去见证这一改变的发生,是我们最大的幸运。
欢迎关注像素范儿相关公众号:
优阁视觉
设计前沿
石家庄像素范儿