|
时间:2013-03-03 20:42来源:一淘UX 作者:一淘UX
 当视差滚动与视错觉结合，会发生怎样奇特的变化?视错觉是否会我们带来了新的创想?本文动静结合，详解了视错觉动画的原理，并结合视差滚动做了一些前瞻性的设计。
一、缘起
之前在广告产品钻石展位新版的首页中尝试了视差滚动(Parallax Scrolling)，对于这两年比较流行的视差滚动有了一些基本的了解。我们知道，视差滚动通过移动页面有层次地展现内容，整个过程中各视觉元素移动速度不同固得“视差”之名。一般分为背景、主内容、前景3个层次，至少也要2个层次才能体现速度差。 机缘巧合，在一次下午茶上凌征同学分享了一系列视错觉现象。其中一组动态效果吸引了我的注意：简单的两张图，一张做了特殊设计的底图，一张由规则条纹组成的栅栏，通过相互水平位移可以出现动态的效果。 具体效果可观看下面的视频：
http://v.youku.com/v_show/id_XNDYzNjEzMjQw.html
http://v.youku.com/v_show/id_XNDYzNjA3ODky.html
http://v.youku.com/v_show/id_XNDYzNjA4MDUy.html http://v.youku.com/v_show/id_XNDUxNDkzOTQ4.html
目前还有一个趣味应用名叫Stripe在App store上，里面也收录了不少趣味的视错觉图，有兴趣的同学不妨去体验下(见图1)。
 图1：Stripe截图
对于这一系列神奇的动态视觉效果为了便于下文分析不妨先给它取个名字，称之为栅栏特效吧。栅栏特效之所以能吸引我的好奇心不仅是隐藏在它背后神秘的原理，更重要的是它与视差滚动可以非常自然的结合。视差滚动离不开界面的自然移动，在滚动操作中加入栅栏特效，便赋予了其更为生动丰富的体验，而非单纯的视觉流行效果。具体设想如下：假设在前一个页面中包含一张栅栏特效的底图，而栅栏在后续的页面中，随着滚动栅栏经过底图时便产生动态效果，而实现这种效果并不需要复杂的技术，只需要准备两张静态的图像即可。那么，如何设计能够产生视错觉特效的图形呢?必须先分解其背后的原理。
二、原理详解 经过仔细的观察并结合逐帧动画的原理，下面配合插图讲解具体的原理如下：首先我们知道动画是利用了视觉暂留(Persistence of vision)现象，即用有限的帧数可以表现无限连贯的动态。由此推理可知，栅栏特效能出现动画效果必定是将一串序列的动画帧合成一张静态的图，并利用栅栏的移动逐步出现不同的帧。即先出现第一帧，随着移动出现第二帧，然后第三第四第五…完成一个动画后再回到第一帧，如此循环。 那么为什么这一系列的动画帧会依次展现而不会重叠在一起呢?这便是栅栏的功能了，栅栏部分相当于一个公共区域，它填充了每一帧的大部分内容，随着栅栏移动一个单位的空隙区域，前一帧的底图必须消失为下一帧让位。这就意味这一序列的帧必须根据相应的栅栏的位置进行镂空，再将每一帧叠在一起形成一张静态底图。为了便于直观理解，下面以行走的人为实例分解了详细的步骤图：
1、传统的动画逐帧分解，获得多张图像作为底图的原图(实例中暂定为6帧一个循环)  2、先将这些一系列的动画帧叠在一起，有待进步一处理  3、先处理第一帧，隐藏其他帧数，我们看到第一帧的图像叠在栅栏之下
 4、随着栅栏移动必须逐帧替换底图才能看到动态变化。每张底图对应一个单位的移动(一个单位等于一个空隙的间距)。下图中的深色像素条纹部分代表底图，玫瑰紫条纹部分代表栅栏。如果栅栏叠在底图之上，那么空隙部分才是人眼能够看到的底图细节。栅栏每移动一个单位，下一帧图像取而代之。依次类推制作一系列然后循环即可，下一个循环开始即第一帧经过了一条栅栏的宽度而出现下一个空隙。：)
 5、承接步骤3，我们继续处理第一帧。第一帧在栅栏移动到下一个单位时将不可见，因此需要将与对应位置的栅栏部分内容去除。(图A)为栅栏移动一个单位空隙后第一帧的底图被遮挡隐藏;(图B)为第一帧底图的实际面貌，即在完整图像的基础上需要去除一个单位移动以后的栅栏部分与其重叠的内容。 图A  图B
 6、在(图A)的基础上第二帧图像出现  7、同第一帧，第二帧的实际图像如下  8、将一二两帧的图像合并为一张底图，该底图中包含了两帧的动画内容
 9、按照这样的规律，将一系列所有的帧数(共6帧)合成一张静态底图如下 10、在此基础上添加栅栏移动效果便可以展现动画，如下图。从动图中可以发现，栅栏移动的速度影响动画的速度，栅栏移动越快人走的频率越快，反之人走的频率变慢，这也意味着屏幕滚动的速度对动画的影响。用户可以根据不同的滚动速度体会动画的频率。 三、视觉特性分析
(一)参数的权衡 在掌握了原理的基础上，不禁思考栅栏的宽度、空隙宽度、动画帧数等这些参数该如何定义，因为这些会影响最终的视觉展现。这些参数会是固定的值么?还是可以在一定的范围内调整?它们可调整的空间又有多大?首先根据之前原理可以得出相应的公式：(栅栏宽度+空隙宽度)/空隙宽度=帧数，(其中栅栏宽度必须是空隙宽度的整数倍)
(H+h)/h=N 即 H/h+1=N
其中：H代表栅栏的宽度，h代表空隙的宽度，N代表动画帧数
根据公式可知：
a、帧数越多，动画越流畅。在相同空隙宽度下，栅栏越宽，可支持的帧数越多。
b、但是同等空隙宽度下，栅栏越宽，底图的细节损失越大。底图的细节曲线被替代成了栅栏的直线，增加了符号的模糊性。
c、同等栅栏宽度下，空隙留越多，底图展现越清晰，但是相对支持的动画帧数就越少。
d、同样帧数下，较宽的栅栏空隙组合相对与较窄的组合显得更粗犷。他们需要更大的空间展现细腻的效果。综合以上，为了取得一个平衡的效果， 较佳的参数值为：栅栏宽度10px，空隙宽度2px，帧数6 ，这也是许多经典案例中的比例。这组参数在动画流畅度、图像传达的清晰性上达到了一个相对较好的平衡。 (二)横条文与竖条文的选择
单纯从栅栏本身观察，横向或竖向的选择完全是审美偏好，但是事实证明不同类型的底图有特定适合的条纹。只有在适合的场景下，才会有较好的展现。人行走的图像中，横向占比较小，竖向占比较多，并且动态的细节都集中在横向纬度，竖向基本只是些高度的微变化。因此横向的细节(上身、腿、手)容易被竖向栅栏遮挡大部分内容而丧失了大量细节。所以横向的条纹更适合横向细节较多的底图(见图2)。同理，纵向条纹适合纵向细节较多的底图(见图3)，在书本翻页的案例中书本的曲线弧度都是纵向纬度的，因此它更适合纵向的。当然，如果底图横向与竖向的细节差不多那么选择可以随意，或结合周围的视觉环境。
图2：纵向条文破坏了人物较多的细节 图3：横向条文使书本的曲线部分呈现地不够细腻
四、视觉创新
我们已经掌握了原理并且了解了设计中需要注意的细节，那么就可以在此基础上去设计一些新的视觉图像了，以下将从不同的角度提供了可发散的方向。(为了便于观看，以下的例图都做成了gif格式，因此动画的速度是均等的;而在实际应用中，动画的速度会随屏幕滚动速度的不同而变化。) (一)栅栏的符号化
如上文所见，作为遮罩的栅栏看上去比较呆板，应用在具体的场景中必须使其自然而不生硬。对此可以考虑将栅栏的视觉形象符号化，赋予其具体指代的意义。这不但意味着遮罩会变更有用途，也说明有无限种可能去创造新的视觉方案了。下图的两个设计试图将条纹与具体的指代自然结合创造出新的视觉意象。 百叶窗眼镜 条纹T
(二)个性化定制的栅栏
根据原理，需要保持每条遮挡条纹和每个留空之间的等宽。在此基础上，如果将条纹适当变形也可实现动态特效，下图的波浪折线便是一种尝试，可以还可以设计更多复杂的变化。不过值得注意的是，条纹必须是实心而非镂空的;而且复杂的栅栏会比简单的栅栏对底图有更多的干扰，不利于底图的识别。 波浪纹的演化 (三)与行为结合
我们可以单纯为品牌或信息设计图像，不过如果结合交互行为将会更有意义。下图的设计希望与滚动结合表达翻页的状态：随着页面的滚动，栅栏运动使得底图出现翻页的效果，还可以配合页码的变化。
翻页
小结
栅栏效果可以使视差滚动变得更为生动，在技术上只需要准备两张静态的图像，不过在滚动时的浏览器动画流畅度支持不同而有局限，因此具有一定的前瞻性。栅栏效果需要结合操作行为而更自然。值得注意的是，底图在栅栏未经过时也可以传达一定的符号含义，在栅栏经过时这种意味得到加强，从而获得惊喜而耐人寻味的效果。底图和栅栏需要配合设计，它们有一定的局限但也有很多发挥的空间。设计时需要注意上文提到的视觉特性。要展现其比较优质的效果，需要一定的面积(宽x高)，因此这类视觉图像更适合品牌形象的传达。 |
|
|
