是不是很path?当然这只是一个示范,不代表我们UDC的品味。
利用按钮多态效果提升直观感觉
我们设计的时候都会考虑按钮的三态(即使没有active,至少也要保证有link和hover吧)。按钮的三态用来模拟用户的点击过程,一个好的按钮设计可以大幅增加用户的点击欲,特别是一些电商网站上,一个button制作的是否精良,是否吸引人点击,甚至可以直接影响到电商网站的最终成交量。
而CSS3的到来,通过动画,渐变再加上按钮过渡效果,阴影等属性的使用,则可以更加细致的模拟整个用户点击的过程,使得用户在整个操作的交互过程都变得愉悦且舒服。比如下图我做的这个结合CSS3 3D所模拟的立体键盘效果。大家可以看到Z、X、N、M键是被按下的效果,其余是没有被按下的效果,如果用户在长按住按钮的时候,还会出现按键模拟被按下的过程动画。被按下后光线投影不变,而文字的凹凸感改变。这样便比较精细的模拟了用户点击过程
看到这,各位看官可能笑了,你这都是纸上谈兵啊,都是还没上线的设想。当然路是一步步走的,饭是一口口吃的,我们不可能一下子就把这么多优化设想一步上线,但其实我们在线上也有一些细节是用到了css3的些许特性。
比如在刚上线的微公益中多处鼠标划过都运用了过渡属性,使得鼠标滑过效果柔和且优雅。
还有投票项目,用户鼠标滑过参与者小头像,有0.2秒的过渡变化和2像素的绿色阴影扩散效果,这样可以良好的提示用户当前所划过的用户。
其实许多交互细节效果是无法体现在设计稿上的,这就需要我们工程师有一定的敏锐和直觉,最好能够在UE稿出来后就跟交互设计师商榷一些具体可行的交互方案,进而提高我们的产品使用体验。
而且css3受累于国内浏览器占比的现状,无法大面积使用。但我想,作为行业内的一分子,从细节入手,逐步提高自己网站在高版本浏览器下的细节品质,多少也会影响到高版本浏览器的推进。如果您因为看了这遍文章,而去升级了自己的浏览器,开始尝试使用firefox和chrome