让网站和APP更具动感的几点建议

【编者按】本文来自Smashing Magazine，作者为Brolik的联合创始人、首席创意官Drew Thomas。文中介绍了Web中增加动感设计可带来的好处及进行动感设计的几点建议，如采用图层技术、运用前后过渡及开发单页面应用。他还通过CSS3代码演示，进一步说明了动感设计的实现方式。下面为文章的简译内容。 

数字体验越来越注重对现实的模拟，每天都在进步。特别是对物理世界的模拟，使用得越来越广泛，把人与机器之间的距离进一步缩短。 

Web动感的过去 

Flash曾经有过一段光辉的历史，那是网络视频刚兴起的年代。但是过后人们发现很多内容其实是无效、速度慢、冗余的，Flash渐渐走了下坡路。随后JS和jQuery的出现，实现了较大的突破，但是使用起来还不十分方便。随着CSS3动画功能的出现，硬件设备性能的进一步提升，设计师们现在能随心所欲地透过层叠样式表来编写有趣的互动页面或App了。 

Web动感的未来 

动感页面和动感App为人们的生活带来了无限乐趣，那么有哪些技术值得关注呢? 
Layers（图层） 

图层技术可以说是应用得最为广泛的一项技术，这在iOS7中体现得淋漓尽致。比方说控制中心，从屏幕底部滑上来后，会覆盖当前部分屏幕。（可参见该网站上的视频演示） 

图层的重要之处是方便设计师隐藏相关信息，在需要显示的场合快速显示，从而避免低效的整画面渲染，同时能够使用户有前后过渡进行缓冲而不会觉得太突兀。 

Context（前后过渡） 

这里不妨以Instacart iOS App来举例说明前后过渡的重要性。可参见该网站上的GIF演示，里面的物品图片从当前位置移动到一个新位置，下方再显示具体信息。这样的显示方式符合自然规律， 让人觉得过渡自然。 

另外一个例子是下拉式菜单，点击某个层叠图片后再显示出整个菜单列表。否则如果点击后整个画面突然被菜单项填满，那样的用户体验是十分糟糕的。GMail和Facebook App在下拉技术应用上可谓是佼佼者，大家不妨进去看看。 

SPA（单页面应用） 

当我们把动感和场景过渡加入到用户界面后，下一步应该会想如何控制它们使之构成一个整体。为了更好的实现页面到页面的过渡，单页面应用随之应运而生了。 

例如我正在编写的一个网站：http://app.danceityourself.com，里面的登入和登出操作便使用到了SPA。里面使用JS为登入页面添加了一个动作类，触发了CSS过渡动画。 

SPA的好处是过渡自然，高效，符合逻辑；让用户感觉正在访问的不像是一般的网站，而更像一个本地应用。 

如何使用CSS动作 

万事开头难，我的建议是先从最基本的开始入手，而不建议一下子就编写过于复杂和花俏的页面。 

CSS过渡 

在现实世界中，事物间的转化都是存在一定过渡的。反之，没有过渡的转化会让人觉得太突然。 

我们先看下面这段代码： 

button {
   margin-left:0;
}
button:hover {
   margin-left:10px;
}

它的意思是，当光标划过按钮时，该按钮会向右移动10像素。但是这是没有过渡的，给人感觉是瞬移式的，不太符合自然规律。完整的演示请点击这里查看，浏览器前缀等内容是必须的但下面例子里只含核心动作代码，以下不再累述。 

接着请看添加过渡动画后的效果，演示链接： 

button {
   margin-left:0;
   transition: margin-left 1s;
}
button:hover {
   margin-left:10px;
}

添加ease-out关键字，开启慢移功能后，这样看上去就舒服多了，因为大脑对于移动物体会有一定的延迟(残像效应)，添加延迟过渡动画后能够使大脑与移动物体的运动同步，从而感觉这就是真实的。更关CSS过渡动画的相关属性介绍，请点击这里进行查阅。 

CSS动画 

相比于场景过渡，CSS动画相对来说会稍微复杂些。什么时候会应用到呢？一般是为那些希望引起用户注意的页面元素添加动画效果。 

请看以下的CSS动画例子，实现的效果是动态显示一个不断变大缩小的圆形。 

div.circle {
   background:#000;
   border-radius:50%;
   animation:circleGrow 800ms ease-in-out infinite alternate both;
}
@keyframes circleGrow {
   0% {
      height:2px;
      width:2px;
   }
   50% {
      height:40px;
      width:40px;
   }
   100% {
      height:34px;
      width:34px;
   }
}

里面使用了CSS关键帧技术，把关键帧动画添加到该圆形对象上。 

实现过程包含了两个步骤。 

第一，使用了animation属性，这有点类似于transition属性，但是能实现更多操作，Animation的详细描述请点击这里进行查阅。为circleGrow指定animation属性，每隔800ms执行一次循环动画。 

第二，关键帧。透过设置百分比值0到100，控制了动画变化的速度。示例中分别在0%，50%，100%时对物体进行关键帧大小设定，结合步骤一的设置形成一个动态变换效果。 

具体效果和完整示例代码请点击这里进行查看。 

animation的包含的可选参数如下所示： 

animation: [animation name (from keyframe block)] [duration] [timing function] [delay] [number of times the animation repeats] [animation direction] [fill mode]

相关的详细介绍请点击这里进行查阅。 
使用CSS动画的关键点 

过渡自然 

以开车来说，现实中总不会启动瞬间就能达到100码吧？所以过渡是很有必要的。 

建议多动手尝试ease参数，比照添加前后的异同。如果想观看更多过渡(时间)动画的示例，请点击这里进行查看。 

参照物与比重 

通常来说，大型物品比小型物品体重要大、速度要慢，所以要对页面元素进行评估，然后再设定相关的动作值和时间值。一如前述的按钮移动例子，一个小按钮在1s内移动10像素的确是太慢了，四分之一秒或更小的值会让人觉得更加自然。 

写在最后 

如果想实现更加复杂的效果，应该多动手操作，这样才能更加体会到个中的奥妙。只有站在用户的角度思考问题，不断减少现实和机器间的距离，那样才能做出更好的用户体验。