提高用戶體驗(yàn)的CSS3技術(shù)應(yīng)用研究

陳梅

摘要：隨著計(jì)算機(jī)軟件和互聯(lián)網(wǎng)的飛速發(fā)展，用戶對(duì)視覺(jué)用戶體驗(yàn)提出了更高的要求，而CSS3的產(chǎn)生不僅僅對(duì)已有功能進(jìn)行了擴(kuò)展和延伸，而且對(duì)Web設(shè)計(jì)理念和方法也進(jìn)行了革新。CSS3使得Web應(yīng)用有更好的用戶體驗(yàn)。文章論述了CSS3技術(shù)在提高用戶體驗(yàn)過(guò)程中的各種應(yīng)用。

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

中圖分類號(hào)：G712 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）13-0033-02

Abstracts： With the rapid development of computer software and the Internet， users put forward higher requirements on the visual user experience. CSS3 has not only the expansion and extension of the function， but also has carried on the reform to the concept and design method of Web. CSS3 makes the Web application having a better user experience. This article discusses the process of the application on CSS3 technology in improving the user experience.

Key words： user experience； CSS3； web application

CSS （Cascading Style Sheet） ，稱為層疊樣式表，CSS3指的是CSS第三個(gè)版本。1997 年W3C 頒布關(guān)于樣式的第一個(gè)標(biāo)準(zhǔn) CSS1.0，1998年CSS2的發(fā)布，包含了CSS1所有的功能，并擴(kuò)充和改進(jìn)了很多，使CSS有了更強(qiáng)大的屬性，該標(biāo)準(zhǔn)至今仍在廣泛流行，而且主流瀏覽器都在使用。但隨著計(jì)算機(jī)軟件的更新、互聯(lián)網(wǎng)的飛速發(fā)展，使用者在視覺(jué)用戶體驗(yàn)方面有了更高的要求。面對(duì)更高的用戶體驗(yàn)需求，CSS2顯得有些力不從心。而CSS3的產(chǎn)生，不僅是對(duì)已有功能的擴(kuò)展和延伸，而更多的是對(duì)Web設(shè)計(jì)理念和方法的革新。CSS3使得 Web 應(yīng)用可以提供更強(qiáng)大的功能，并且有更好的用戶體驗(yàn)，因此對(duì)CSS3新技術(shù)的應(yīng)用，是更好掌握互聯(lián)網(wǎng)技術(shù)的一個(gè)有效途徑。

由于CSS3在提高用戶體驗(yàn)方面有了很大改觀，下面就用戶體驗(yàn)方面的內(nèi)容分別進(jìn)行闡述。

1 CSS3利用鼠標(biāo)交互和偽類提升用戶體驗(yàn)

用戶在瀏覽網(wǎng)頁(yè)的時(shí)候，對(duì)鼠標(biāo)的操作仍然是Web頁(yè)面的最重要的一個(gè)方式，鼠標(biāo)操作包括鏈接（link）、滑過(guò)（hover）、激活（active）操作等。在CSS2版本中，偽類選擇器就已經(jīng)存在，比如超級(jí)鏈接的四個(gè)狀態(tài)選擇器：a：link、a：visited、a：hover、a：active。比如可以通過(guò)CSS3制作按鈕過(guò)渡效果、陰影等屬性，能更加細(xì)致的模擬整個(gè)用戶點(diǎn)擊的過(guò)程，使得用戶在整個(gè)操作的交互過(guò)程都變得愉悅且舒服。

由于CSS3增加了非常多的選擇器，所以在CSS3選擇器中，偽類選擇器的種類非常多。其中包括： first-line偽元素選擇器， first-letter偽元素選擇器，root選擇器，empty選擇器等等。這些偽類選擇器是CSS3新增的選擇器，它們都能得到在Android和iOS平臺(tái)下Web瀏覽器的支持。有的用戶在瀏覽網(wǎng)頁(yè)的時(shí)候，會(huì)使用鼠標(biāo)選中一些文字內(nèi)容，方便進(jìn)行閱讀，如果使用偽類selection，可以設(shè)置相應(yīng)的屬性來(lái)設(shè)置相應(yīng)的背景顏色和文字顏色，這樣能對(duì)文字的閱讀更加方便，文字的顯示效果更加明顯，從而增強(qiáng)了用戶的使用感受。

2 CSS3利用文字漸變提升用戶體驗(yàn)

隨著CSS3的廣泛使用，文字的漸變效果也越來(lái)越受到用戶和網(wǎng)頁(yè)開(kāi)發(fā)設(shè)計(jì)者的重視。一個(gè)良好的漸變可以使文字看起來(lái)更加有質(zhì)感，給用戶提供一個(gè)更加良好的視覺(jué)感受。我們可以利用CSS3對(duì)文字透明的支持，通過(guò)顯示背景漸變的方式來(lái)模擬文字漸變。如果再加上一些過(guò)渡動(dòng)畫(huà)效果，甚至可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的跑馬燈效果。因此通過(guò)漸變文字，也可以提高用戶的體驗(yàn)。

3 利用過(guò)渡效果提升用戶體驗(yàn)

CSS3可以使用過(guò)渡效果來(lái)增強(qiáng)用戶體驗(yàn)，比如以下代碼是實(shí)現(xiàn)當(dāng)光標(biāo)劃過(guò)按鈕時(shí)，該按鈕會(huì)向右移動(dòng)15像素。但是這個(gè)沒(méi)有過(guò)渡效果，在視覺(jué)效果上感覺(jué)比較突兀。主要的相關(guān)代碼如下：

button { margin-left：0； }

button：hover { margin-left：15px；}

如果將代碼進(jìn)行改寫(xiě)，添加ease-out關(guān)鍵字，開(kāi)啟慢移功能后，就添加了延遲過(guò)渡動(dòng)畫(huà)效果，這樣在視覺(jué)效果方面看上去使人感覺(jué)更真實(shí)。相關(guān)代碼如下：

button {

margin-left：0；

transition： margin-left .25s ease-out； }

button.moveRight {

margin-left：15px； }

4 利用動(dòng)畫(huà)提升用戶體驗(yàn)

與場(chǎng)景過(guò)渡相比，CSS動(dòng)畫(huà)相對(duì)來(lái)說(shuō)會(huì)稍微復(fù)雜些。 如果Web頁(yè)面希望引起用戶注意，可以在頁(yè)面元素中添加動(dòng)畫(huà)效果，利用動(dòng)畫(huà)效果吸引用戶的眼球。隨著瀏覽器對(duì)CSS3支持的不斷完善，之前使用JavaScript能實(shí)現(xiàn)的動(dòng)畫(huà)效果，現(xiàn)在使用CSS3代碼就可以很容易的實(shí)現(xiàn)，這也顯示了CSS3新特性的強(qiáng)大。CSS3動(dòng)畫(huà)的屬性主要分為三類：transform、transition以及animation。比如在下列代碼中是使用的animation屬性，但是需要將 "myfirst" 動(dòng)畫(huà)捆綁到 div 元素，動(dòng)畫(huà)的時(shí)長(zhǎng)為10秒。在這里應(yīng)用動(dòng)畫(huà)的時(shí)候，必須注意一點(diǎn)，那就是要定義動(dòng)畫(huà)的名稱和時(shí)長(zhǎng)。因?yàn)槟J(rèn)值是0，所以如果要忽略時(shí)長(zhǎng)的話，動(dòng)畫(huà)是不會(huì)允許的。相關(guān)代碼如下：

div

{animation： myfirst 10s；

-moz-animation： myfirst 10s； /* Firefox */

-webkit-animation： myfirst 10s； /* Safari 和 Chrome */

-o-animation： myfirst 10s； /* Opera */}

綜上所述，由于CSS3擔(dān)任在Web頁(yè)面進(jìn)行布局和頁(yè)面裝飾的技術(shù)，它可以更加有效地對(duì)頁(yè)面的布局、字體和顏色、背景或其他動(dòng)畫(huà)效果方面實(shí)現(xiàn)精確的控制。由于CSS3 是 CSS 的升級(jí)版本，CSS3新標(biāo)準(zhǔn)提供了更全面的規(guī)范，并且更加實(shí)用。比如有：盒子模型、列表模塊、超鏈接方式、語(yǔ)言模塊、背景和邊框、文字特效、多欄布局等等，隨著越來(lái)越多的瀏覽器已經(jīng)相繼支持CSS3的規(guī)范，CSS3在Web頁(yè)面中的應(yīng)用也會(huì)越來(lái)越廣泛。在 Web頁(yè)面效果的開(kāi)發(fā)中，使用 CSS3 技術(shù)將會(huì)更好的優(yōu)化我們的應(yīng)用程序，極大的提高程序的性能，同時(shí)也能更好地提高用戶體驗(yàn)，使用戶能在Web頁(yè)面的應(yīng)用中有更好的體會(huì)。

參考文獻(xiàn)：

[1] 毛沖. 淺談CSS3在網(wǎng)頁(yè)開(kāi)發(fā)中的特性[J].江西廣播電視大學(xué)學(xué)報(bào)，2014（1）：152.

[2] 胡江匯. 下一代Web標(biāo)準(zhǔn)之CSS3核心技術(shù)研究[J]. 黑龍江科技信息，2012（12）.

[3] 何麗. 基于CSS3.0技術(shù)的網(wǎng)頁(yè)元素效果[J].軟件導(dǎo)刊，2011（8）.

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