瀏覽器，作為一神器，幫我們打開了繽紛萬千的收集世界窗口。而她成長到今天，也降生了一個又一個的懷神版本，可能有人鐘情于她的花哨，有人癡迷于她的速度……我們，作為重構工程師，必然要更關注他背后的手藝刷新，那就是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.xglongwei.com/a/22/20120312/39536.html
網友點評
精彩導讀
科技快報
品牌展示