分(fēn)析css3可(kě)以給我們帶來(lái)更好(hǎo)的(de)用(yòng)戶體φ≤÷÷(tǐ)驗

來(lái)源：徐州億網網絡科(kē)技(jì)有(yǒu)π​限公司 時(shí)間(jiān)：2012-03-24 作(zuòΩ±)者：

   &n∞"→'bsp;    作(zuò)為(wèi)重構工(g"∑‌♥ōng)程師(shī)，必然要(yào)更關注他(tā)背後的(de)技(jì)¥ 術(shù)革新，那(nà)就(jiù)是(shì)css3的(de)$Ω¶支持了(le)！在這(zhè)裡(lǐ)徐州網絡公司設計(jì)師(shī)從(cóng)細節入手，看(kàn)看(kàn)css3會(hu₹σì)給人(rén)什(shén)麽期待。

        我們$λ✘≠應該都(dōu)有(yǒu)所察覺，IE6占比逐漸降低(dī)，而支持cssק3的(de)浏覽器(qì)，也(yě)占有(yǒu)了(le)相(xiàng​&×✘)當的(de)份額，也(yě)就(jiù)意味著↓☆(zhe)，我們一(yī)方面可(kě)以更多(duō)有(yǒu♣α)選擇的(de)放(fàng)棄IE6的(de)兼容，另外(wài)，也×☆±(yě)可(kě)以在支持CSS3的(de)高(gāo)版本浏覽器(qì)上(shà ​ng)做(zuò)更多(duō)的(de₩ ≤©)考慮。

     &nbsδ₹p;  利用(yòng)僞類提升用(yòng)戶體(tǐ)驗

      &↓∏nbsp; 比如(rú)說(shuō)文(wén)本，大(dà)家(jiā)在γ✘ λ浏覽網頁的(de)時(shí)候，經常會(huì)用(yòng)鼠标反選一(yī) ‌<些(xiē)文(wén)字內(nèi)容，用(yòng)來(lái)方便閱讀(dβ©£ú)。這(zhè)時(shí)候網頁文(wén)字通(tōng)常呈現(xià>"n)高(gāo)亮(liàng)白(bái)色文(wén)字+藍(lán)底背♠±±景色顯示。

     φ™&;   當遇到(dào)一(yī)個Ω'(gè)暗(àn)色皮膚背景，依然顯示藍(£λ lán)底兒(ér)白(bái)字，那(nà)效果就(jiù)不(bù)是(sh‍λ•ì)特别帥氣了(le)。這(zhè)時(shí)候，其實可(kě)以考慮用(yòng)僞<‍≈類selection為(wèi)網頁文(wén)字的(de)高(gāo)亮(liàng™∏)提供了(le)設計(jì)方案，來(lái)改變反選展示效果。鼠标選中文(wén)字後可(k>‌ě)設置相(xiàng)應的(de)背景色和(hé)文(wén)字÷™色，甚至是(shì)透明(míng)。簡單一(yī)個(gè)屬性就(jiù)體(t‌γǐ)現(xiàn)了(le)産品對(duì)用(yòng)戶操↑>✔‍作(zuò)的(de)關懷，從(cóng)而提升用(yòng)戶使用£&£§(yòng)感受。

      &n‌$¥bsp; 利用(yòng)漸變字色提升視(shì)覺沖擊

    &☆"& nbsp;   随著(zhe)css3的(de)廣泛使用(yòng)，文γ∞✔•(wén)字色漸變效果也(yě)越來(lái)越受到(dào)設計(₽σ₩jì)師(shī)和(hé)前端工(gōng)程師(≈σ‍shī)的(de)青睐。一(yī)個(gè)良好(h↓✘>φǎo)的(de)漸變可(kě)以使文(wén)字看(kàn)起來σ₽(lái)有(yǒu)質感，仿佛刻在紙(zhǐ)面上(shàng)一(yī)樣，從(∞αΩcóng)而給用(yòng)戶一(yī)個(gè)良好(hǎo)的(de)↔₹視(shì)覺感受。我們可(kě)以利用(yòng)CSS3支持的(de)文(wéπ™n)字透明(míng)，顯示背景漸變的(de)方式π λ來(lái)模拟文(wén)字漸變。再加上(shàng)一(yī)些(xiē)過渡動畫(huβφà)效果，我們甚至可(kě)以模拟一(yī)個(gè)簡單的(de)跑馬燈的(de)效果了÷&₽®(le)。

   &nb∑γ×sp;    利用(yòng)鼠标交互提升快(kuài)感

        鼠标點♣π ♣擊（click）、滑過（hover）、激活（a•₽ctive）操作(zuò)仍是(shì)當今webPC端上(shàng)最重要(yào  ↑)的(de)幾個(gè)交互方式。新浪微(wēi)博上(shàng)大(dàγα)部分(fēn)的(de)互動操作(zuò)也(yě)來(lái)自(zì)于此。以V4寬版為↓ Ω•(wèi)例當前微(wēi)博主站(zhàn)可(kě)以有(yǒu)鼠标交互操作(zuò)的€¥≥(de)模塊大(dà)緻包括：頂導，左側欄導λδ★≈航，勳章(zhāng)列表，feed區(qū)，右側欄皮膚選擇按鈕，皮膚選擇彈層&hell✔δip;…

       > ♣✔ 利用(yòng)動畫(huà)效果吸引眼球

     &n‍♦δ≈bsp;  在攝影(yǐng)作(zu÷©ò)品中，講究布局不(bù)要(yào)太死，要(yào)給照(zhào)片÷λ“留口氣”。借鑒到(dào)網頁設計(jì)中，這(zhè)個¥™↔(gè)說(shuō)法同樣有(yǒu)它的(de)存在意義。先看(™ε•kàn)看(kàn)我們的(de)微(wēi)博首頁，各個(gè)模塊之間(jiān)擠在一 ♦♠ (yī)起，看(kàn)上(shàng)去(qù)布局有(yǒu)點悶，這(z>∑hè)時(shí)候，右上(shàng)角那(nà)個(gè)彩虹按鈕就(jiù)成了(le) '★點睛之筆(bǐ)。

      &>γ÷nbsp; 利用(yòng)按鈕多(duō)态效果提升直觀感覺

        我們設計'α'‌(jì)的(de)時(shí)候都(dōu)會(huì)考慮按鈕‍♥®的(de)三态（即使沒有(yǒu)active‌•$​，至少(shǎo)也(yě)要(yào)保證有(yǒu)link和 ✘✔(hé)hover吧(ba)）。按鈕的(de)三态​ ₹用(yòng)來(lái)模拟用(yòng)戶的(de)點擊過程，一(yī)個(gè)好(h©>β‍ǎo)的(de)按鈕設計(jì)可(kě)以大(dà)幅增加用(yòng)戶的&Ω(de)點擊欲，特别是(shì)一(yī)些(xiē)電(diàn)☆↑♥商網站(zhàn)上(shàng)，一(yī)個(gè)button制(zh§♣®ì)作(zuò)的(de)是(shì)否精良，是(shì)否吸引人(rén)點擊，甚至可(kě)以¥ε‌直接影(yǐng)響到(dào)電(dià₹"πn)商網站(zhàn)的(de)最終成交量。

     &nb☆≤★ sp;  而CSS3的(de)到(dào)來(lái)，通(tōng)過動畫(huà)Ω§>，漸變再加上(shàng)按鈕過渡效果，陰影(yǐεΩ≈ng)等屬性的(de)使用(yòng)，則可(kě)以更加細緻的(de)模拟 ∞ ‌整個(gè)用(yòng)戶點擊的(de)過程÷€$，使得(de)用(yòng)戶在整個(gè)操作(zuò)的(de)交互過程都(dō☆​  u)變得(de)愉悅且舒服。比如(rú)下(xiβ&à)圖我做(zuò)的(de)這(zhè)個(±↕gè)結合CSS3 3D所模拟的(de)立體(tǐ)鍵盤效果。大(dà)家(jiā)♣♠可(kě)以看(kàn)到(dào)Z、X、N、M鍵是&×∞γ(shì)被按下(xià)的(de)效果，其餘是(shì)沒有(yǒ ÷§δu)被按下(xià)的(de)效果，如(rú)果用(yòng)戶在長(∑✔cháng)按住按鈕的(de)時(shí)候，還(h☆✔φ♥ái)會(huì)出現(xiàn)按鍵模拟被按下(xià)™≠≈φ的(de)過程動畫(huà)。被按下(xià)後光(guāng)線投影(yǐng)不(b≠ ¶×ù)變，而文(wén)字的(de)凹凸感改變。

     &nb‌™sp;  其實許多(duō)交互細節效果₹♣↕✘是(shì)無法體(tǐ)現(xiàn)在設計(jì)稿上(shàng)的(de)，這(zhè)就"≈∞(jiù)需要(yào)我們工(gōng)程師(shī)有(yǒu)•'一(yī)定的(de)敏銳和(hé)直覺，最好∑​(hǎo)能(néng)夠在UE稿出來(lái)後就(ji ↑ù)跟交互設計(jì)師(shī)商榷一♦♠∏(yī)些(xiē)具體(tǐ)可(kě)行®∑★∏(xíng)的(de)交互方案，進而提高(gāo)我們的(de)産品使用(yòng×&)體(tǐ)驗。

       &nb&±sp;以上(shàng)是(shì)由徐州億網網絡公司（http://www.exz.cn）提供！ 

• 上(shàng)一(yī)篇: 徐州億網分(fēn)享CSS工©¥(gōng)作(zuò)心得(de)
• 下(xià)一(yī)篇: 利用(yòng)網頁技(jì)術(shù)緩解浏覽器(qì)讀♥"(dú)取網頁壓力