CSS3在改善網(wǎng)站用戶體驗(yàn)中的應(yīng)用

陳梅++高斐++張景峰

摘要：在互聯(lián)網(wǎng)技術(shù)快速發(fā)展的背景下，不斷改善與提高網(wǎng)站用戶體驗(yàn)成為Web應(yīng)用的趨勢(shì)，CSS3在CSS2.1的基礎(chǔ)上拓展了很多強(qiáng)大的功能，在改善用戶體驗(yàn)方面提供了更多實(shí)現(xiàn)方法，文章從響應(yīng)式網(wǎng)站、圖片展示和導(dǎo)航三個(gè)方面闡述了CSS3技術(shù)在提高網(wǎng)站用戶體驗(yàn)中的應(yīng)用。

關(guān)鍵詞：CSS3；網(wǎng)站用戶體驗(yàn)；Web應(yīng)用

中圖分類號(hào)：TP37 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）23-0011-01

在互聯(lián)網(wǎng)成為人們生活一部分的時(shí)代，伴隨著技術(shù)的快速更新，網(wǎng)絡(luò)技術(shù)的應(yīng)用也在滿足著用戶的更高體驗(yàn)需求，用戶在瀏覽網(wǎng)站時(shí)從視覺(jué)體驗(yàn)到交互體驗(yàn)都顯示出了更高更豐富的要求。CSS3作為CSS（層疊樣式表）的第三個(gè)版本，是對(duì)CSS規(guī)范的一個(gè)很大改善和增強(qiáng)，既為網(wǎng)站前端開(kāi)發(fā)者提供了易于開(kāi)發(fā)的網(wǎng)站瀏覽功能，也為使用者提供了更好的用戶體驗(yàn)，CSS3中的媒體查詢技術(shù)、動(dòng)畫(huà)技術(shù)等在改善網(wǎng)站用戶體驗(yàn)方面已經(jīng)得到了很好的應(yīng)用。

1 CSS3媒體查詢?cè)陧憫?yīng)式網(wǎng)站中的應(yīng)用

隨著移動(dòng)互聯(lián)網(wǎng)的迅猛發(fā)展，用戶瀏覽網(wǎng)站的設(shè)備也在不斷豐富，能夠針對(duì)不同大小的屏幕進(jìn)行網(wǎng)站瀏覽成為現(xiàn)代web應(yīng)用的趨勢(shì)，響應(yīng)式設(shè)計(jì)在網(wǎng)站中的應(yīng)用越來(lái)越多，響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，目前很多商業(yè)類網(wǎng)站都提供的是響應(yīng)式網(wǎng)站，為用戶的購(gòu)物行為提供便利。CSS3提供的媒體查詢功能，其語(yǔ)法結(jié)構(gòu)及用法：

@media 設(shè)備名 only （選取條件） not （選取條件） and（設(shè)備選取條件），設(shè)備二{sRules}

以此可以判斷設(shè)備橫豎屏、設(shè)備類型、設(shè)備寬高以及設(shè)備像素比，例如判斷設(shè)備寬高的代碼：

@media screen and （max-width：320px）{

.logo{height：40px}

.header{height：40px}

}

在使用CSS3進(jìn)行響應(yīng)式網(wǎng)站設(shè)計(jì)中，網(wǎng)站內(nèi)容方面的原則是在較小屏幕的設(shè)備上，從上向下根據(jù)內(nèi)容優(yōu)先級(jí)依次顯示，網(wǎng)站視覺(jué)與交互體驗(yàn)的原則是設(shè)備不同體驗(yàn)一致，保證用戶在瀏覽網(wǎng)站時(shí)的熟識(shí)感受。

2 CSS3的2D動(dòng)畫(huà)和3D變換在圖片相冊(cè)中的應(yīng)用

在網(wǎng)站中進(jìn)行圖片展示的應(yīng)用實(shí)例非常多，例如企業(yè)產(chǎn)品宣傳展示、營(yíng)銷類網(wǎng)站的商品圖片展示，用戶在瀏覽圖片的過(guò)程中如果能夠在全部平鋪出來(lái)的縮略圖中，通過(guò)鼠標(biāo)懸浮在某一張圖片獲取較大尺寸的圖片來(lái)了解更多的信息，將會(huì)給用戶帶來(lái)更良好的用戶體驗(yàn)，如www.booking.com網(wǎng)站，CSS3的2D動(dòng)畫(huà)功能就能夠?qū)崿F(xiàn)，它的優(yōu)勢(shì)在于不需要編寫(xiě)事件接口，直接使用瀏覽器提供的事件接口（TransitionEnd，AnimationStart，AnimationIteration，AnimationEnd）即可，目前這些事件接口需要針對(duì)瀏覽器添加前綴，例如webkit內(nèi)核的瀏覽器，提供的事件接口為webkitTransitionEnd，webkitAnimationStart，webkitAnimationIteration，webkitAnimationEnd。CSS3的2D動(dòng)畫(huà)應(yīng)用的技術(shù)有translate（）、rotate（）、scale（）等方法，以及transition過(guò)渡屬性。上面提到的圖片展示實(shí)例的相關(guān)實(shí)現(xiàn)代碼：

img{

width： 150px；

height： 150px；

-moz-transition： width 1s，height 1s，transform 1s；

-webkit-transition： width 1s，height 1s，transform 1s；}

#pic：hover{

width： 800px；

height： 800px；

z-index： 10；

-moz-transform： translate（0px，-170px）；

-webkit-transform： translate（0px，170px）；}

CSS3中的3D transform變換效果更是將圖片的展示置于模擬三維空間，為用戶的瀏覽體驗(yàn)提供了更加真實(shí)的環(huán)境，主要涉及rotateX（）、rotateY（）、rotateZ（）三個(gè)方法和perspective屬性，相關(guān)代碼如下：

perspective：**px；

transform-style： preserve-3d；

transition： transform 1s；

img： transform： rotateY（***deg） translateZ（***px）

3 CSS3在網(wǎng)站導(dǎo)航設(shè)計(jì)中的應(yīng)用

網(wǎng)站導(dǎo)航是用戶瀏覽網(wǎng)站的重要交互區(qū)域，因此對(duì)導(dǎo)航進(jìn) （下轉(zhuǎn)第14頁(yè)）

（上接第11頁(yè)）

行一些微小的交互動(dòng)畫(huà)能有效提升一定的用戶體驗(yàn)，CSS3在網(wǎng)站導(dǎo)航方面的應(yīng)用一方面是僅使用CSS3來(lái)實(shí)現(xiàn)，配合border-radius、transition、transition-delay等主要的技術(shù)可以制作出過(guò)渡效果非常好的下拉式導(dǎo)航，相關(guān)代碼如下：

transition：0.5s

transition-delay：0.5s；

background-image： -moz-linear-gradient（-90deg， rgba（255， 255， 255， 0.5）， rgba（255， 255， 255， 0））；

另一方面是將CSS3與JQuery技術(shù)兩者結(jié)合制作的導(dǎo)航，可以實(shí)現(xiàn)側(cè)欄折疊展開(kāi)式導(dǎo)航、垂直固定式導(dǎo)航等效果，在形式和交互方面都能夠給用戶帶來(lái)更多的用戶體驗(yàn)，例如汽車網(wǎng)站http：//www.lexus.eu/car-models/nx/nx-house/#side-menu中的側(cè)欄導(dǎo)航，對(duì)頁(yè)面的充分利用使得用戶能夠有更多的空間瀏覽汽車方面的信息。

總之，CSS3在CSS2.1的基礎(chǔ)上拓展了很多強(qiáng)大的功能，為現(xiàn)代網(wǎng)站設(shè)計(jì)應(yīng)用提供了更多方法，滿足網(wǎng)站前端的設(shè)計(jì)開(kāi)發(fā)需求，設(shè)計(jì)者通過(guò)應(yīng)用CSS3的圓角、陰影、漸變、變換、動(dòng)畫(huà)以及媒體查詢等技術(shù)，為用戶提供了更加美觀、更加良好的用戶體驗(yàn)界面，CSS3的新特性降低了網(wǎng)站開(kāi)發(fā)的復(fù)雜度，網(wǎng)站在性能上得到了很大進(jìn)步，用戶瀏覽網(wǎng)站的速度以及交互等多方面的體驗(yàn)都有很多改善，隨著CSS3技術(shù)的進(jìn)一步發(fā)展完善，網(wǎng)站用戶體驗(yàn)將得到更多的提高與實(shí)現(xiàn)。

參考文獻(xiàn)：

[1] 大漠.圖解CSS3核心技術(shù)與案例實(shí)戰(zhàn)[M].北京：機(jī)械工業(yè)出版社，2014.

[2] 趙建保.響應(yīng)式Web設(shè)計(jì)關(guān)鍵技術(shù)及設(shè)計(jì)流程[J].電腦知識(shí)與技術(shù)，2014（5）.

[3] 張曉軍.基于HTML5+CSS3.0+jQuery 在移動(dòng)電商APP開(kāi)發(fā)中的應(yīng)用[J].通訊世界，2015（6）.