浏览器，作为一神器，帮我们打开了缤纷万千的收集世界窗口。而她成长到今天，也降生了一个又一个的怀神版本，可能有人钟情于她的花哨，有人痴迷于她的速度……我们，作为重构工程师，必然要更关注他背后的手艺刷新，那就是css3的撑持了!上次，加菲猫已经给我们演示了磕张的css3动画。而此次，我们年夜细节入手，看看css3碰着weibo，会给人什么等候 。
当然在这之前，得先体味下拜访weibo.com的列位年夜侠的神器占比：
PS:(数据来悔改浪微博“产物数据剖析后台”的2012年1月份浏览器占比)
停笔中可以看出，IE6占比逐渐降低，而撑持css3的浏览器，也据有了相当的份额，也就意味着，我们一方面可以更多有选择的抛却IE6的兼容，此外，也可以在撑持CSS3的高版本浏览器上做更多的考虑。
而具体在哪些细节上可以考虑锦上添花呢?此文仅做抛砖引玉，切磋下哪些css3的效不美观可以在产物细节上有所呈现，而我们也会在此文之后，尽快在微博的优化中，把提到的这些慢慢上线!
操作伪类晋升用户体验
好比说文本，巨匠在浏览网页的时辰，经常会用鼠标反选一些文字内容，用来便利阅读。这时辰网页文字凡是呈现高亮白色文字+蓝底布景色显示。如下图：
可是微博主站有分歧的皮肤，深深浅浅。当碰着一个暗色皮肤布景，依然显示蓝底儿白字，那效不美观就不是出格帅气了。这时辰，其实可以考虑用伪类selection为网页文字的高亮供给了设计方案，来改变反选展示效不美观。鼠标选中文字后可设置响应的布景色和文字色，甚至是透明。简单一个属性就浮现了产物对用户操作的关切，年夜而晋升用户使用感应感染。
操作渐变字色晋升视觉冲击
跟着css3的普遍使用，文字色渐变效不美观也越来越受到设计师和前端工程师的青睐。一个精采的渐变可以使文字看起滥暌剐质感，仿佛刻在纸面上一样，年夜而给用户一个精采的视觉感应感染。我们可以操作CSS3撑持的文字透明，显示布景渐变的体例来模拟文字渐变。再加上一些过渡动画效不美观，我们甚至可以模穆矣闽简单的赛马灯的效不美观了。如下图：
哈哈。不外别对这个设计当真。这只是一个示范，不代表我们UDC的品味。
操作鼠标交互晋升快感
鼠标点击(click)、滑过(hover)、激活(active)操作仍是当今webPC端上最主要的几个交互体例。新浪微博上年夜部门的互动操作也来自于此。以V4宽版为例当前微博主站可以有鼠标交互操作的模块年夜致搜罗：顶导，左侧栏导航，勋章列表，feed区，右侧栏皮肤选择按钮，皮肤选择弹层……
好比微博左侧导航的勋章栏，那儿那里的向下睁开操作区，在鼠标滑过时虽然有布景色变换，但略显生硬。侍旧嗣了，也许用户会对这种变换感受厌倦了。不妨，此刻我们可以经由过程CSS3可以把这里玩儿活。CSS3过渡属性(transition)的呈现，可以很好的解决这个问题。经由过程设定过渡时刻，可以让这种效不美观有一个过程化的转变效不美观，让鼠标滑过的转变效不美观，用柔和的渐显渐隐来措置。这样便改善了突兀的视觉转变，同时给人一种优雅的操作感应感染。
那么延长想象，当点击了勋章睁开操作区之后，勋章模块由原本的一行，酿成全数睁开。嘭的一下，几十枚勋章特出来，那这个睁开效不美观是不是也可以采用刚刚阿谁柔和的体例睁开呢?在CSS3降生之前，这种效不美观只能经由过程js辅佐实现。而此刻，这种效不美观交给CSS动画措置再合适不外了。CSS3不仅能够节制睁开的速度函数，而且可以设置睁开内容的透明度。当然，只有高级浏览器可享用哦，亲～
操作动画效不美观吸引眼球
在摄影作品中，讲究结构不要太死，要给照片“留口吻”。借鉴到网页设计中，这个说法同样有它的存在意义。先看看我们的微博首页，各个模块之间挤在一路，看上去结构有点闷，这时辰，右上角阿谁彩虹按钮就成了点睛之笔。
其拭魅这个设计是延续了之前新浪博客的设计。如图
可能那时因为实现成本的原因，新浪博客这里使用flash设计了鼠标滑过的动画。我们再来看此刻搜狐微博的例子，鼠标划过，柔和睁开：
他首要经由过程js时刻来节制按钮外层的class名123的切换，在持续切换三次后模拟了这种柔和的睁开效不美观。
推荐阅读
<b>解析Pinterest模式 “兴趣图谱”让Pinterest这么火吗？</b>
Pinterest年夜火的时辰，乐趣图谱这个辞书曝光率也直线上升。Pinterest被称为乐趣图谱(interest graph)+社交图谱(social gragh)的典型。这琅缦沔的巧妙是，社交的直接对象，是人以及人之间的联系。而乐趣的直接对象，>>>详细阅读
本文标题：<b>网站交互设计分析：依然枝繁叶茂 何处锦上添花</b>
地址：http://www.lgo100.com/a/22/20120312/39536.html
网友点评
精彩导读
科技快报
品牌展示