新浪微博產品設計細節:CSS3效果的運用

來源:互聯網
上載者:User

文章描述:css3受累於國內瀏覽器佔比的現狀,無法大面積使用。但我想,作為行業內的一分子,從細節入手,逐步提高自己網站在高版本瀏覽器下的細節品質,多少也會影響到高版本瀏覽器的推進。如果您因為看了這遍文章,而去升級了自己的瀏覽器,開始嘗試使用firefox和chrome,那這篇

瀏覽器,作為一神器,幫我們開啟了繽紛萬千的網路世界視窗。而她發展到今天,也誕生了一個又一個的懷神版本,可能有人鐘情於她的花哨,有人癡迷於她的速度……我們,作為重構工程師,必然要更關注他背後的技術革新,那就是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部落格發博文,讓各位大牛見笑了。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。