hovermousepointer
hovermousepointer
用户体验设计已经渗透到产品的各个部分,无论是对于产品大方向的把握,还是对产品各种细节的掌控,产品设计师能够越来越轻易地设计出好用的产品。 但是产品设计师是不会甘于现状的——字体研究完了,就去优化配色,配色已被穷尽?那就捣鼓布局去!“自强不息”的设计师总会找到更优秀的设计方法。

会呼吸的文字

在使用某些网站的过程中,发现了一个很有趣的交互:鼠标悬停(mouseover、hover 事件,以下统称 hover)于文字链接后,文字颜色是“逐渐”变亮的,虽然只有那短短的 0.x 秒,但也足以引起我思考。

etao
etao

一淘的 transition 效果。每秒33帧,录得有点偏快

这个效果有啥好?

macbook_light
macbook_light
Macbook 关上盖子的时候,呼吸灯的效果就像一个人在睡眠时候的呼吸频率,多么安逸舒适的感觉啊。 hover 加入 transition,就像一盏呼吸灯 —— 温柔不突兀的把状态反馈给用户。

实现方法

W3C标准中对css3的transition这是样描述的:

CSS 的 transition 允许 CSS 的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变 CSS 的属性值。

后来在捣鼓一个 WordPress 主题的时候,被我发现了这个效果的实现方法,代码例子如下:

a {

color: #49aca5;

text-decoration: none;

transition: all 0.4s linear;

-moz-transition: all 0.4s linear;

-webkit-transition: all 0.4s linear;

-o-transition: all 0.4s linear;

}

a:hover {

color: inherit;

transition: all 0.4s linear;

-moz-transition: all 0.4s linear;

-webkit-transition: all 0.4s linear;

-o-transition: all 0.4s linear;

}

渐变的意义

代码里面的 0.4s 是代表 transition-duration,是用来指定元素转换过程的持续时间。一般持续时间不需要太长,大概只需0.2-0.3s,为了避免出现「粘滞感」,最好不超 0.5s。 至于我博客设置的是 0.4s,则因为博客是提供阅读的媒介,需要缓和的气氛与场景,慢节奏的呼吸效果更贴合这个使用场景。

suerb.com_ahover
suerb.com_ahover
一淘没设置鼠标移移出效果,后来发现大部分使用了这效果的网站都这样,可能是因为用户 hover 链接后,都会点击,而不会专心看到鼠标移开后的效果吧。 而我就决定在自己博客代码里面加上了鼠标移开效果(代码如上),其实就是复制多一次而已。 为啥呢?我不希望只有「吸」而没有「呼」,想让这个过程更柔和,更合理;而且我本身就是一个喜欢鼠标跟随阅读视线走的人,因此鼠标在链接上游走时会有蜻蜓点水般的效果,比生硬地「闪走」不知优雅多少倍。

会跳舞的图片

了解文字链的 transition 效果后,紧接着就是 transform,因此很自然就想到了另外一个 hover 效果——上浮效果,我真不知该怎么起名,请原谅……反正很难用言语来表达,请看图

suerb.com_imghover
suerb.com_imghover
感觉如何?这样做有很好的隐喻效果:在现实世界中,当一个物体能够被凌空提起,它的下方必定会有阴影,悬停图片后就有一个上浮效果,说明这个图片可以点击并“提起来”放大观看。 当然「被提起」的幅度(阴影值)可以再优化。 代码如下:

article.post .content-inner img {

-webkit-transition: all 0.5s ease 0s;

-moz-transition: all 0.5s ease 0s;

-o-transition: all 0.5s ease 0s;

}

article.post .content-inner img:hover {

-webkit-transition: all 0.5s ease 0s;

-moz-transition: all 0.5s ease 0s;

-o-transition: all 0.5s ease 0s;

-moz-transform: translate(-2px,-2px);

-webkit-transform: translate(-2px,-2px);

-o-transform: translate(-2px,-2px);

-ms-transform: translate(-2px, -2px);

transform: translate(-2px,-2px);

-webkit-box-shadow: 5px 5px 15px rgba(67, 72, 84, 0.5);

-moz-box-shadow: 5px 5px 15px rgba(67, 72, 84, 0.5);

-o-box-shadow: 5px 5px 15px rgba(67, 72, 84, 0.5);

box-shadow: 5px 5px 15px rgba(67, 72, 84, 0.5);

}

越来越多的网站都采用了这个效果。当然也有其他有趣的效果。

tumblr
tumblr

tumblr的功能导航

总结

在CSS3越来越普及的情况下,将会出现更多有趣、贴心的交互效果,没有做不到,只有想不到啊。 就在为本文做最后修改的时候,Smashing Magazine新上了一篇强文《Designing For Emotion With Hover Effects》,本文想阐述的主旨跟对方的应该大致相同,当然对方更详细和深入,有兴趣的同学可以去看看。 题图:Dribbble 转载请注明出处: 文章来源:make it simple 作者:Suer