利用动画效果吸引眼球

在摄影作品中，讲究布局不要太死，要给照片“留口气”。借鉴到网页设计中，这个说法同样有它的存在意义。先看看我们的微博首页，各个模块之间挤在一起，看上去布局有点闷，这时候，右上角那个彩虹按钮就成了点睛之笔。

其实这个设计是延续了之前新浪博客的设计。如图

可能当时因为实现成本的原因，新浪博客这里使用flash设计了鼠标滑过的动画。我们再来看现在搜狐微博的例子，鼠标划过，柔和展开：

他主要通过js时间来控制按钮外层的class名123的切换，在连续切换三次后模拟了这种柔和的展开效果。

而现在的新浪微博的情况是用户鼠标滑过，彩虹简单跳一下，如果觉得“灵气”少了点，那么好，我们可以设法加上一些效果看看。

利用css3简单加上一些五角星欢快的旋转飞出，然后淡出的效果。这样给人一种欢快活泼的感觉，仿佛点击里会有一些惊喜。这样既满足了当今诸多互联网产品希望给页面添加活泼感的要求，又使得我们的页面不至于太闷，同时更能勾起用户的点击欲望。依次为五角星飞出的4个瞬间状态，如下图：

是不是很path?当然这只是一个示范，不代表我们UDC的品味。

利用按钮多态效果提升直观感觉

我们设计的时候都会考虑按钮的三态(即使没有active，至少也要保证有link和hover吧)。按钮的三态用来模拟用户的点击过程，一个好的按钮设计可以大幅增加用户的点击欲，特别是一些电商网站上，一个button制作的是否精良，是否吸引人点击，甚至可以直接影响到电商网站的最终成交量。

而CSS3的到来，通过动画，渐变再加上按钮过渡效果，阴影等属性的使用，则可以更加细致的模拟整个用户点击的过程，使得用户在整个操作的交互过程都变得愉悦且舒服。比如下图我做的这个结合CSS3 3D所模拟的立体键盘效果。大家可以看到Z、X、N、M键是被按下的效果，其余是没有被按下的效果，如果用户在长按住按钮的时候，还会出现按键模拟被按下的过程动画。被按下后光线投影不变，而文字的凹凸感改变。这样便比较精细的模拟了用户点击过程

看到这，各位看官可能笑了，你这都是纸上谈兵啊，都是还没上线的设想。当然路是一步步走的，饭是一口口吃的，我们不可能一下子就把这么多优化设想一步上线，但其实我们在线上也有一些细节是用到了css3的些许特性。

比如在刚上线的微公益中多处鼠标划过都运用了过渡属性，使得鼠标滑过效果柔和且优雅。

还有投票项目，用户鼠标滑过参与者小头像，有0.2秒的过渡变化和2像素的绿色阴影扩散效果，这样可以良好的提示用户当前所划过的用户。

其实许多交互细节效果是无法体现在设计稿上的，这就需要我们工程师有一定的敏锐和直觉，最好能够在UE稿出来后就跟交互设计师商榷一些具体可行的交互方案，进而提高我们的产品使用体验。

而且css3受累于国内浏览器占比的现状，无法大面积使用。但我想，作为行业内的一分子，从细节入手，逐步提高自己网站在高版本浏览器下的细节品质，多少也会影响到高版本浏览器的推进。如果您因为看了这遍文章，而去升级了自己的浏览器，开始尝试使用firefox和chrome，那这篇文章就成功啦。第一次在UDC博客发博文，让各位大牛见笑了。

原文：http://udc.weibo.com/2012/02/%E4%BE%9D%E7%84%B6%E6%9E%9D%E7%B9%81%E5%8F%B6%E8%8C%82-%E4%BD%95%E5%A4%84%E9%94%A6%E4%B8%8A%E6%B7%BB%E8%8A%B1%EF%BC%81/