瀏覽器，作為一神器，幫我們打開了繽紛萬千的收集世界窗口。而她成長(zhǎng)到今天，也降生了一個(gè)又一個(gè)的懷神版本，可能有人鐘情于她的花哨，有人癡迷于她的速度……我們，作為重構(gòu)工程師，必然要更關(guān)注他背后的手藝刷新，那就是css3的撐持了!上次，加菲貓已經(jīng)給我們演示了磕張的css3動(dòng)畫。而此次，我們年夜細(xì)節(jié)入手，看看css3碰著weibo，會(huì)給人什么等候 。
當(dāng)然在這之前，得先體味下拜訪weibo.com的列位年夜俠的神器占比：
PS:(數(shù)據(jù)來悔改浪微博“產(chǎn)物數(shù)據(jù)剖析后臺(tái)”的2012年1月份瀏覽器占比)
停筆中可以看出，IE6占比逐漸降低，而撐持css3的瀏覽器，也據(jù)有了相當(dāng)?shù)姆蓊~，也就意味著，我們一方面可以更多有選擇的拋卻IE6的兼容，此外，也可以在撐持CSS3的高版本瀏覽器上做更多的考慮。
而具體在哪些細(xì)節(jié)上可以考慮錦上添花呢?此文僅做拋磚引玉，切磋下哪些css3的效不美觀可以在產(chǎn)物細(xì)節(jié)上有所呈現(xiàn)，而我們也會(huì)在此文之后，盡快在微博的優(yōu)化中，把提到的這些慢慢上線!
操作偽類晉升用戶體驗(yàn)
好比說文本，巨匠在瀏覽網(wǎng)頁(yè)的時(shí)辰，經(jīng)常會(huì)用鼠標(biāo)反選一些文字內(nèi)容，用來便利閱讀。這時(shí)辰網(wǎng)頁(yè)文字凡是呈現(xiàn)高亮白色文字+藍(lán)底布景色顯示。如下圖：
可是微博主站有分歧的皮膚，深深淺淺。當(dāng)碰著一個(gè)暗色皮膚布景，依然顯示藍(lán)底兒白字，那效不美觀就不是出格帥氣了。這時(shí)辰，其實(shí)可以考慮用偽類selection為網(wǎng)頁(yè)文字的高亮供給了設(shè)計(jì)方案，來改變反選展示效不美觀。鼠標(biāo)選中文字后可設(shè)置響應(yīng)的布景色和文字色，甚至是透明。簡(jiǎn)單一個(gè)屬性就浮現(xiàn)了產(chǎn)物對(duì)用戶操作的關(guān)切，年夜而晉升用戶使用感應(yīng)感染。
操作漸變字色晉升視覺沖擊
跟著css3的普遍使用，文字色漸變效不美觀也越來越受到設(shè)計(jì)師和前端工程師的青睞。一個(gè)精采的漸變可以使文字看起濫暌剮質(zhì)感，仿佛刻在紙面上一樣，年夜而給用戶一個(gè)精采的視覺感應(yīng)感染。我們可以操作CSS3撐持的文字透明，顯示布景漸變的體例來模擬文字漸變。再加上一些過渡動(dòng)畫效不美觀，我們甚至可以模穆矣閩簡(jiǎn)單的賽馬燈的效不美觀了。如下圖：
哈哈。不外別對(duì)這個(gè)設(shè)計(jì)當(dāng)真。這只是一個(gè)示范，不代表我們UDC的品味。
操作鼠標(biāo)交互晉升快感
鼠標(biāo)點(diǎn)擊(click)、滑過(hover)、激活(active)操作仍是當(dāng)今webPC端上最主要的幾個(gè)交互體例。新浪微博上年夜部門的互動(dòng)操作也來自于此。以V4寬版為例當(dāng)前微博主站可以有鼠標(biāo)交互操作的模塊年夜致搜羅：頂導(dǎo)，左側(cè)欄導(dǎo)航，勛章列表，feed區(qū)，右側(cè)欄皮膚選擇按鈕，皮膚選擇彈層……
好比微博左側(cè)導(dǎo)航的勛章欄，那兒那里的向下睜開操作區(qū)，在鼠標(biāo)滑過時(shí)雖然有布景色變換，但略顯生硬。侍舊嗣了，也許用戶會(huì)對(duì)這種變換感受厭倦了。不妨，此刻我們可以經(jīng)由過程CSS3可以把這里玩兒活。CSS3過渡屬性(transition)的呈現(xiàn)，可以很好的解決這個(gè)問題。經(jīng)由過程設(shè)定過渡時(shí)刻，可以讓這種效不美觀有一個(gè)過程化的轉(zhuǎn)變效不美觀，讓鼠標(biāo)滑過的轉(zhuǎn)變效不美觀，用柔和的漸顯漸隱來措置。這樣便改善了突兀的視覺轉(zhuǎn)變，同時(shí)給人一種優(yōu)雅的操作感應(yīng)感染。
那么延長(zhǎng)想象，當(dāng)點(diǎn)擊了勛章睜開操作區(qū)之后，勛章模塊由原本的一行，釀成全數(shù)睜開。嘭的一下，幾十枚勛章特出來，那這個(gè)睜開效不美觀是不是也可以采用剛剛阿誰柔和的體例睜開呢?在CSS3降生之前，這種效不美觀只能經(jīng)由過程js輔佐實(shí)現(xiàn)。而此刻，這種效不美觀交給CSS動(dòng)畫措置再合適不外了。CSS3不僅能夠節(jié)制睜開的速度函數(shù)，而且可以設(shè)置睜開內(nèi)容的透明度。當(dāng)然，只有高級(jí)瀏覽器可享用哦，親～
操作動(dòng)畫效不美觀吸引眼球
在攝影作品中，講究結(jié)構(gòu)不要太死，要給照片“留口吻”。借鑒到網(wǎng)頁(yè)設(shè)計(jì)中，這個(gè)說法同樣有它的存在意義。先看看我們的微博首頁(yè)，各個(gè)模塊之間擠在一路，看上去結(jié)構(gòu)有點(diǎn)悶，這時(shí)辰，右上角阿誰彩虹按鈕就成了點(diǎn)睛之筆。
其拭魅這個(gè)設(shè)計(jì)是延續(xù)了之前新浪博客的設(shè)計(jì)。如圖
可能那時(shí)因?yàn)閷?shí)現(xiàn)成本的原因，新浪博客這里使用flash設(shè)計(jì)了鼠標(biāo)滑過的動(dòng)畫。我們?cè)賮砜创丝趟押⒉┑睦樱髽?biāo)劃過，柔和睜開：
他首要經(jīng)由過程js時(shí)刻來節(jié)制按鈕外層的class名123的切換，在持續(xù)切換三次后模擬了這種柔和的睜開效不美觀。
推薦閱讀
<b>解析Pinterest模式 “興趣圖譜”讓Pinterest這么火嗎？</b>
Pinterest年夜火的時(shí)辰，樂趣圖譜這個(gè)辭書曝光率也直線上升。Pinterest被稱為樂趣圖譜(interest graph)+社交圖譜(social gragh)的典型。這瑯縵沔的巧妙是，社交的直接對(duì)象，是人以及人之間的聯(lián)系。而樂趣的直接對(duì)象，>>>詳細(xì)閱讀
本文標(biāo)題：<b>網(wǎng)站交互設(shè)計(jì)分析：依然枝繁葉茂 何處錦上添花</b>
地址：http://www.sh-jijian.com/a/22/20120312/39536.html
網(wǎng)友點(diǎn)評(píng)
精彩導(dǎo)讀
科技快報(bào)
品牌展示