《
新浪微博产品设计细节 CSS3效果的运用》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302342b2013.htm
在摄影作品中，讲求布局不要太逝世，要给照片“留口吻”。鉴戒到网页设计中,新手站长：你为什么没有成功？，这个说法同样有它的存在意思。先看看我们的微博首页，各个模块之间挤在一起，看上去布局有点闷，这时候，右上角那个彩虹按钮就成了点睛之笔。
他重要通过js时间来节制按钮外层的class名123的切换，在持续切换三次后模拟了这种柔和的展开效果。
看到这，各位看官可能笑了，你这都是夸夸其谈啊，都是还没上线的设想。当然路是一步步走的，饭是一口口吃的，我们不可能一下子就把这么多优化假想一步上线，但其实我们在线上也有一些细节是用到了css3的些许特征。
利用鼠标交互提升快感
我们设计的时候都会考虑按钮的三态（即便没有active，至少也要保障有link和hover吧）。按钮的三态用来模拟用户的点击过程，一个好的按钮设计可以大幅增添用户的点击欲，特别是一些电商网站上，一个button制造的是否优良，是否吸惹人点击，甚至可以直接影响到电商网站的终极成交量。
哈哈。不外别对这个设计认真。这只是一个示范，不代表我们UDC的咀嚼。
--> [
网站建设之]新浪微博产品设计细节:CSS3效果的运用
浏览器，作为一神器，帮我们翻开了缤纷万千的网络世界窗口。而她发展到今天，也出生了一个又一个的怀神版本，可能有人钟情于她的花哨，有人痴迷于她的速度&hellip,
新手站长运营之网站BUG提交处理准则;…我们，作为重构工程师，必定要更关注他背地的技巧改革，那就是css3的支撑了！上次，加菲猫已经给我们演示了夸大的css3动画。而这次，我们从细节入手，看看css3碰到weibo，会给人什么等待 。
当然在这之前，得先懂得下访问weibo.com的各位大侠的神器占比：
PS：（数据来自新浪微博“产品数据剖析后盾”的2012年1月份浏览器占比）
比如在刚上线的微公益中多处鼠标划过都应用了过渡属性，使得鼠标滑过效果柔和且优雅。
应用按钮多态效果晋升直观感到
好比说文本，大家在阅读网页的时候，常常会用鼠标反选一些文字内容，用来便利浏览。这时候网页文字通常出现高亮白色文字+蓝底背景色显示。如下图：
实在这个设计是连续了之前新浪博客的设计。如图
利用css3简略加上一些五角星欢乐的旋转飞出，而后淡出的效果。这样给人一种欢快活跃的感觉，好像点击里会有一些惊喜。这样既满意了当今诸多互联网产品盼望给页面增加生动感的请求，又使得我们的页面不至于太闷，同时更能勾起用户的点击愿望。顺次为五角星飞出的4个霎时状况，如下图：
然而微博主站有不同的皮肤，深深浅浅。当遇到一个暗色皮肤背景，仍然显示蓝底儿白字，那效果就不是特殊帅气了。这时候，其实可以考虑用伪类selection为网页文字的高亮供给了设计方案，来改变反选展现效果。鼠标选中文字后可设置相应的背景色和文字色，甚至是透明。简单一个属性就体现了产品对用户操作的关心，从而提升用户使用感触。
可能当时因为实现本钱的起因，新浪博客这里使用flash设计了鼠标滑过的动画。我们再来看现在搜狐微博的例子，鼠标划过，柔和展开：
利用伪类提升用户休会
而且css3受累于海内浏览器占比的现状，无奈大面积使用。但我想，作为行业内的一分子，从细节入手，逐步进步自己网站在高版本浏览器下的细节品德，多少也会影响到高版本浏览器的推动。如果你由于看了这遍文章，而去进级了本人的浏览器，开端尝试使用firefox和chrome，那这篇文章就胜利啦。第一次在UDC博客发博文，让各位大牛见笑了。
鼠标点击（click）、滑过（hover）、激活（active）操作还是当今webPC端上最主要的多少个交互方法。新浪微博上大局部的互动操作也来自于此。以V4宽版为例当前微博主站能够有鼠标交互操作的模块大抵包含：顶导,新手站长要怎么做长尾关键词，左侧栏导航，勋章列表,新手站长必须养成的五大习惯，feed区，右侧栏皮肤抉择按钮，皮肤取舍弹层……
而详细在哪些细节上可以斟酌精益求精呢？此文仅做抛砖引玉，探讨下哪些css3的后果可以在产品细节上有所浮现，而咱们也会在此文之后，尽快在微博的优化中，把提到的这些逐渐上线！
是不是很path？当然这只是一个示范，不代表我们UDC的品尝。
Tag：效果 运用 细节 产品设计 新浪 效果 运用 细节 产品设计 新浪
比方微博左侧导航的勋章栏，那里的向下开展操作区，在鼠标滑过期固然有背风景变换，但略显僵硬。时间久了，兴许用户会对这种变换感觉厌倦了。不要紧，当初我们可以通过CSS3可以把这里玩儿活。CSS3过渡属性（transition）的呈现，可以很好的解决这个问题。通过设定过渡时光，可以让这种效果有一个进程化的变化效果，让鼠标滑过的变更效果，用柔跟的渐显渐隐来处置。这样便改良了突兀的视觉变化，同时给人一种优雅的操作感触。
那么延长设想，当点击了勋章展开操作区之后,新手站长如何选择广告联盟，勋章模块由本来的一行，变玉成部展开。嘭的一下，几十枚勋章跳出来，那这个展开效果是不是也可以采取刚那个柔和的方式展开呢？在CSS3诞生之前，这种效果只能通过js帮忙实现。而现在，这种效果交给CSS动画处理再适合不过了。CSS3不仅可能把持展开的速度函数，而且可以设置展开内容的透明度。当然，只有高等浏览器可享受哦，亲～
而现在的新浪微博的情形是用户鼠标滑过，彩虹简单跳一下，如果感到“灵气”少了点，那么好，我们可以想法加上一些效果看看。
还有投票名目，用户鼠标滑过参加者小头像，有0.2秒的过渡变化和2像素的绿色阴影扩散效果，这样可以良好的提醒用户当前所划过的用户。
而CSS3的到来，通过动画，渐变再加上按钮过渡效果，暗影等属性的应用，则可以更加过细的模拟全部用户点击的过程，使得用户在整个操作的交互过程都变得愉悦且舒畅。比如下图我做的这个联合CSS3 3D所模拟的破体键盘效果。大家可以看到Z、X、N、M键是被按下的效果，其余是不被按下的效果，假如用户在长按住按钮的时候，还会涌现按键模拟被按下的过程动画。被按下后光芒投影不变，而文字的凹凸感转变。这样便比拟精致的模仿了用户点击过程
其实很多交互细节效果是无法体现在设计稿上的，这就须要我们工程师有必定的灵敏和直觉，最好可以在UE稿出来后就跟交互设计师商议一些详细可行的交互计划，进而提高我们的产品使用体验。
图标中可以看出，IE6占比逐步下降，而支持css3的浏览器，也占领了相称的份额，也就象征着，我们一方面可以更多有挑选的废弃IE6的兼容，另外，也可以在支持CSS3的高版本浏览器上做更多的考虑。
利用动画效果吸引眼球
跟着css3的普遍使用，文字色渐变效果也越来越受到设计师和前端工程师的青眼。一个良好的渐变可以使文字看起来有质感，恍如刻在纸面上一样，从而给用户一个良好的视觉感想。我们可以利用CSS3支持的文字透明，显示背景渐变的方式来模拟文字渐变。再加上一些过渡动画效果，我们甚至可以模拟一个简单的跑马灯的效果了。如下图：
利用渐变字色提升视觉冲击
(责任编辑：网站建设)
新浪微博产品设计细节 CSS3效果的运用相关文章