新浪微博CSS3適用細(xì)節(jié)初探
瀏覽器，作為一神器，幫我們打開了繽紛萬千的網(wǎng)絡(luò)世界窗口。而她發(fā)展到今天，也誕生了一個又一個的懷神版本，可能有人鐘情于她的花哨，有人癡迷于她的速度……我們，作為重構(gòu)工程師，必然要更關(guān)注他背后的技術(shù)革新，那就是css3的支持了!上次，加菲貓已經(jīng)給我們演示了夸張的css3動畫。而這次，我們從細(xì)節(jié)入手，看看css3遇到weibo，會給人什么期待 。
當(dāng)然在這之前，得先了解下拜訪weibo.com的各位大俠的神器占比：
PS:(數(shù)據(jù)來自新浪微博“產(chǎn)品數(shù)據(jù)分析后臺”的2012年1月份瀏覽器占比)
圖標(biāo)中可以看出，IE6占比逐漸降低，而支持css3的瀏覽器，也占有了相當(dāng)?shù)姆蓊~，也就意味著，我們一方面可以更多有選擇的放棄IE6的兼容，另外，也可以在支持CSS3的高版本瀏覽器上做更多的考慮。
而具體在哪些細(xì)節(jié)上可以考慮錦上添花呢?此文僅做拋磚引玉，探討下哪些css3的效果可以在產(chǎn)品細(xì)節(jié)上有所呈現(xiàn)，而我們也會在此文之后，盡快在微博的優(yōu)化中，把提到的這些逐步上線!
利用偽類提升用戶體驗
比如說文本，大家在瀏覽網(wǎng)頁的時候，經(jīng)常會用鼠標(biāo)反選一些文字內(nèi)容，用來方便閱讀。這時候網(wǎng)頁文字通常呈現(xiàn)高亮白色文字+藍底背景色顯示。如下圖：
但是微博主站有不同的皮膚，深深淺淺。當(dāng)遇到一個暗色皮膚背景，依然顯示藍底兒白字，那效果就不是特別帥氣了。這時候，其實可以考慮用偽類selection為網(wǎng)頁文字的高亮提供了設(shè)計方案，來改變反選展示效果。鼠標(biāo)選中文字后可設(shè)置相應(yīng)的背景色和文字色，甚至是透明。簡單一個屬性就體現(xiàn)了產(chǎn)品對用戶操作的關(guān)懷，從而提升用戶使用感受。
利用漸變字色提升視覺沖擊
隨著css3的廣泛使用，文字色漸變效果也越來越受到設(shè)計師和前端工程師的青睞。一個良好的漸變可以使文字看起來有質(zhì)感，仿佛刻在紙面上一樣，從而給用戶一個良好的視覺感受。我們可以利用CSS3支持的文字透明，顯示背景漸變的方式來模擬文字漸變。再加上一些過渡動畫效果，我們甚至可以模擬一個簡單的跑馬燈的效果了。如下圖：
哈哈。不過別對這個設(shè)計當(dāng)真。這只是一個示范，不代表我們UDC的品味。
利用鼠標(biāo)交互提升快感
鼠標(biāo)點擊(click)、滑過(hover)、激活(active)操作仍是當(dāng)今webPC端上最重要的幾個交互方式。新浪微博上大部分的互動操作也來自于此。以V4寬版為例當(dāng)前微博主站可以有鼠標(biāo)交互操作的模塊大致包括：頂導(dǎo)，左側(cè)欄導(dǎo)航，勛章列表，feed區(qū)，右側(cè)欄皮膚選擇按鈕，皮膚選擇彈層……
比如微博左側(cè)導(dǎo)航的勛章欄，那里的向下展開操作區(qū)，在鼠標(biāo)滑過時雖然有背景色變換，但略顯生硬。時間久了，也許用戶會對這種變換感覺厭倦了。沒關(guān)系，現(xiàn)在我們可以通過CSS3可以把這里玩兒活。CSS3過渡屬性(transition)的出現(xiàn)，可以很好的解決這個問題。通過設(shè)定過渡時間，可以讓這種效果有一個過程化的變化效果，讓鼠標(biāo)滑過的變化效果，用柔和的漸顯漸隱來處理。這樣便改善了突兀的視覺變化，同時給人一種優(yōu)雅的操作感受。
那么延伸想象，當(dāng)點擊了勛章展開操作區(qū)之后，勛章模塊由原來的一行，變成全部展開。嘭的一下，幾十枚勛章跳出來，那這個展開效果是不是也可以采用剛剛那個柔和的方式展開呢?在CSS3誕生之前，這種效果只能通過js幫忙實現(xiàn)。而現(xiàn)在，這種效果交給CSS動畫處理再合適不過了。CSS3不僅能夠控制展開的速度函數(shù)，而且可以設(shè)置展開內(nèi)容的透明度。當(dāng)然，只有高級瀏覽器可享用哦，親～
利用動畫效果吸引眼球
在攝影作品中，講究布局不要太死，要給照片“留口氣”。借鑒到網(wǎng)頁設(shè)計中，這個說法同樣有它的存在意義。先看看我們的微博首頁，各個模塊之間擠在一起，看上去布局有點悶，這時候，右上角那個彩虹按鈕就成了點睛之筆。
其實這個設(shè)計是延續(xù)了之前新浪博客的設(shè)計。如圖
可能當(dāng)時因為實現(xiàn)成本的原因，新浪博客這里使用flash設(shè)計了鼠標(biāo)滑過的動畫。我們再來看現(xiàn)在搜狐微博的例子，鼠標(biāo)劃過，柔和展開：
他主要通過js時間來控制按鈕外層的class名123的切換，在連續(xù)切換三次后模擬了這種柔和的展開效果。
而現(xiàn)在的新浪微博的情況是用戶鼠標(biāo)滑過，彩虹簡單跳一下，如果覺得“靈氣”少了點，那么好，我們可以設(shè)法加上一些效果看看。
利用css3簡單加上一些五角星歡快的旋轉(zhuǎn)飛出，然后淡出的效果。這樣給人一種歡快活潑的感覺，仿佛點擊里會有一些驚喜。這樣既滿足了當(dāng)今諸多互聯(lián)網(wǎng)產(chǎn)品希望給頁面添加活潑感的要求，又使得我們的頁面不至于太悶，同時更能勾起用戶的點擊欲望。依次為五角星飛出的4個瞬間狀態(tài)，如下圖：
是不是很path?當(dāng)然這只是一個示范，不代表我們UDC的品味。
利用按鈕多態(tài)效果提升直觀感覺
我們設(shè)計的時候都會考慮按鈕的三態(tài)(即使沒有active，至少也要保證有l(wèi)ink和hover吧)。按鈕的三態(tài)用來模擬用戶的點擊過程，一個好的按鈕設(shè)計可以大幅增加用戶的點擊欲，特別是一些電商網(wǎng)站上，一個button制作的是否精良，是否吸引人點擊，甚至可以直接影響到電商網(wǎng)站的最終成交量。
而CSS3的到來，通過動畫，漸變再加上按鈕過渡效果，陰影等屬性的使用，則可以更加細(xì)致的模擬整個用戶點擊的過程，使得用戶在整個操作的交互過程都變得愉悅且舒服。比如下圖我做的這個結(jié)合CSS3 3D所模擬的立體鍵盤效果。大家可以看到Z、X、N、M鍵是被按下的效果，其余是沒有被按下的效果，如果用戶在長按住按鈕的時候，還會出現(xiàn)按鍵模擬被按下的過程動畫。被按下后光線投影不變，而文字的凹凸感改變。這樣便比較精細(xì)的模擬了用戶點擊過程
看到這，各位看官可能笑了，你這都是紙上談兵啊，都是還沒上線的設(shè)想。當(dāng)然路是一步步走的，飯是一口口吃的，我們不可能一下子就把這么多優(yōu)化設(shè)想一步上線，但其實我們在線上也有一些細(xì)節(jié)是用到了css3的些許特性。
比如在剛上線的微公益中多處鼠標(biāo)劃過都運用了過渡屬性，使得鼠標(biāo)滑過效果柔和且優(yōu)雅。
還有投票項目，用戶鼠標(biāo)滑過參與者小頭像，有0.2秒的過渡變化和2像素的綠色陰影擴散效果，這樣可以良好的提示用戶當(dāng)前所劃過的用戶。
其實許多交互細(xì)節(jié)效果是無法體現(xiàn)在設(shè)計稿上的，這就需要我們工程師有一定的敏銳和直覺，最好能夠在UE稿出來后就跟交互設(shè)計師商榷一些具體可行的交互方案，進而提高我們的產(chǎn)品使用體驗。
而且css3受累于國內(nèi)瀏覽器占比的現(xiàn)狀，無法大面積使用。但我想，作為行業(yè)內(nèi)的一分子，從細(xì)節(jié)入手，逐步提高自己網(wǎng)站在高版本瀏覽器下的細(xì)節(jié)品質(zhì)，多少也會影響到高版本瀏覽器的推進。如果您因為看了這遍文章，而去升級了自己的瀏覽器，開始嘗試使用firefox和chrome，那這篇文章就成功啦。第一次在UDC博客發(fā)博文，讓各位大牛見笑了。
原文：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/
【編輯推薦】
