新浪微博CSS3適用細節初探
瀏覽器，作為一神器，幫我們打開了繽紛萬千的網絡世界窗口。而她發展到今天，也誕生了一個又一個的懷神版本，可能有人鐘情于她的花哨，有人癡迷于她的速度……我們，作為重構工程師，必然要更關注他背后的技術革新，那就是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的切換，在連續切換三次后模擬了這種柔和的展開效果。
而現在的新浪微博的情況是用戶鼠標滑過，彩虹簡單跳一下，如果覺得“靈氣”少了點，那么好，我們可以設法加上一些效果看看。
利用css3簡單加上一些五角星歡快的旋轉飛出，然后淡出的效果。這樣給人一種歡快活潑的感覺，仿佛點擊里會有一些驚喜。這樣既滿足了當今諸多互聯網產品希望給頁面添加活潑感的要求，又使得我們的頁面不至于太悶，同時更能勾起用戶的點擊欲望。依次為五角星飛出的4個瞬間狀態，如下圖：
是不是很path?當然這只是一個示范，不代表我們UDC的品味。
利用按鈕多態效果提升直觀感覺
我們設計的時候都會考慮按鈕的三態(即使沒有active，至少也要保證有link和hover吧)。按鈕的三態用來模擬用戶的點擊過程，一個好的按鈕設計可以大幅增加用戶的點擊欲，特別是一些電商網站上，一個button制作的是否精良，是否吸引人點擊，甚至可以直接影響到電商網站的最終成交量。
而CSS3的到來，通過動畫，漸變再加上按鈕過渡效果，陰影等屬性的使用，則可以更加細致的模擬整個用戶點擊的過程，使得用戶在整個操作的交互過程都變得愉悅且舒服。比如下圖我做的這個結合CSS3 3D所模擬的立體鍵盤效果。大家可以看到Z、X、N、M鍵是被按下的效果，其余是沒有被按下的效果，如果用戶在長按住按鈕的時候，還會出現按鍵模擬被按下的過程動畫。被按下后光線投影不變，而文字的凹凸感改變。這樣便比較精細的模擬了用戶點擊過程
看到這，各位看官可能笑了，你這都是紙上談兵啊，都是還沒上線的設想。當然路是一步步走的，飯是一口口吃的，我們不可能一下子就把這么多優化設想一步上線，但其實我們在線上也有一些細節是用到了css3的些許特性。
比如在剛上線的微公益中多處鼠標劃過都運用了過渡屬性，使得鼠標滑過效果柔和且優雅。
還有投票項目，用戶鼠標滑過參與者小頭像，有0.2秒的過渡變化和2像素的綠色陰影擴散效果，這樣可以良好的提示用戶當前所劃過的用戶。
其實許多交互細節效果是無法體現在設計稿上的，這就需要我們工程師有一定的敏銳和直覺，最好能夠在UE稿出來后就跟交互設計師商榷一些具體可行的交互方案，進而提高我們的產品使用體驗。
而且css3受累于國內瀏覽器占比的現狀，無法大面積使用。但我想，作為行業內的一分子，從細節入手，逐步提高自己網站在高版本瀏覽器下的細節品質，多少也會影響到高版本瀏覽器的推進。如果您因為看了這遍文章，而去升級了自己的瀏覽器，開始嘗試使用firefox和chrome，那這篇文章就成功啦。第一次在UDC博客發博文，讓各位大牛見笑了。
原文：http://udc.weibo.com/2012/02/%E4%BE%9D%E7%84%B6%E6%9E%9D%E7%B9%81%E5%8F%B6%E8%8C%82-%E4%BD%95%E5%A4%84%E9%94%A6%E4%B8%8A%E6%B7%BB%E8%8A%B1%EF%BC%81/
【編輯推薦】
