WEB表單設(shè)計(jì)學(xué)習(xí)總結(jié)

1、WEB表單設(shè)計(jì)學(xué)習(xí)總結(jié)1 前言多數(shù)人不喜歡表單，因?yàn)樘顚?xiě)表單是件麻煩的事。我們想做的是投票、申請(qǐng)或者購(gòu)買(mǎi)打折的商品。表單是電子商務(wù)、社交互動(dòng)和大多數(shù)基于生產(chǎn)力應(yīng)用類型網(wǎng)站（例如銀行）的關(guān)鍵。在我們的系統(tǒng)中，有著各式表單，我們的日常工作也和表單分不開(kāi)WEB表單對(duì)于關(guān)鍵互動(dòng)（比如注冊(cè)和支付）起著至關(guān)重要的中介作用。據(jù)統(tǒng)計(jì)，經(jīng)過(guò)重新設(shè)計(jì)的表單，完成率往往能提高10%40%。這意味著完成新銷(xiāo)售或者獲得新客戶。eBay是個(gè)成功的案例，其用戶體驗(yàn)和設(shè)計(jì)團(tuán)隊(duì)通過(guò)搜集可用性數(shù)據(jù)、客戶支持記錄、網(wǎng)站日志和網(wǎng)絡(luò)習(xí)慣，重新設(shè)計(jì)了表單，產(chǎn)生了非常積極的影響，帶來(lái)了巨大的效益。在一家大型電子商務(wù)網(wǎng)站，設(shè)計(jì)師只更改了一個(gè)

2、按鈕，便給公司帶來(lái)了3億美元的年收入。我們的系統(tǒng)雖然不可能出現(xiàn)用戶因?yàn)闊o(wú)法忍受繁雜的表單而拒絕填寫(xiě)的情況，但如果將表單精心設(shè)計(jì)，會(huì)使用戶更快的完成工作，減少出錯(cuò)率，并擁有良好的心情。可見(jiàn)表單還是值得學(xué)習(xí)研究一下的，于是我就從網(wǎng)上看了些資料，和大家分享下學(xué)習(xí)體會(huì)。2 輸入框輸入框是表單的關(guān)鍵元素之一，是系統(tǒng)獲得用戶信息的重要途徑。2.1 輸入框長(zhǎng)度輸入框的長(zhǎng)度可以給用戶進(jìn)行暗示而不需要文字提示。圖2.1 通過(guò)輸入框長(zhǎng)度暗示用戶填寫(xiě)信息如果輸入框長(zhǎng)度不同，用戶思考如何填寫(xiě)輸入框時(shí)自然會(huì)考慮為什么會(huì)這樣。如果長(zhǎng)度合適，就可以避免使用文字說(shuō)明填寫(xiě)要求。比如上例的工作證號(hào)比身份證號(hào)的輸入框短，用戶就會(huì)考

3、慮“是不是工作證號(hào)要比身份證號(hào)的位數(shù)少？”當(dāng)輸入框很長(zhǎng)時(shí)，用戶的回答卻很短，這時(shí)用戶就會(huì)考慮是否自己誤解了問(wèn)題。如果輸入框無(wú)法受益于暗示，就應(yīng)當(dāng)采用一致的長(zhǎng)度。2.2 必填項(xiàng)標(biāo)明必填項(xiàng)可以引導(dǎo)用戶填寫(xiě)表單，特別是有很多輸入框，但只有一部分是必填的時(shí)候。表明必須回答的問(wèn)題有助于用戶判斷，減少出錯(cuò)的可能。圖2.2 標(biāo)明必填項(xiàng)但當(dāng)必填項(xiàng)很多時(shí)，可以只標(biāo)識(shí)可選項(xiàng)，因?yàn)闃?biāo)明主要情況會(huì)增加表單的信息量。圖2.3 必填項(xiàng)相比選填項(xiàng)過(guò)多，可只標(biāo)明選填項(xiàng)如果想通過(guò)視覺(jué)系統(tǒng)來(lái)標(biāo)明必填項(xiàng)，應(yīng)當(dāng)考慮表單中的標(biāo)識(shí)位置。標(biāo)簽旁的標(biāo)識(shí)能指引用戶迅速瀏覽表格，并判斷出必填項(xiàng)。而標(biāo)識(shí)與輸入框?qū)R會(huì)導(dǎo)致難以判斷。2.3 輸入組當(dāng)

4、輸入表單太多時(shí)或者較復(fù)雜，可以考慮將表單分組或分布到多個(gè)頁(yè)面中。圖2.4 將填寫(xiě)信息分為兩部分采用這種方式，人們可以輕松瀏覽必填部分，了解需要提供哪些信息。如果把表單看成對(duì)話，適當(dāng)?shù)匕粗黝}分成若干個(gè)部分，這樣的對(duì)話更容易讓人接受。但是內(nèi)容組之間不要設(shè)置大量的視覺(jué)差異（比如背景色、分割線、字體等），否則會(huì)造成過(guò)多視覺(jué)污染，阻礙瀏覽。2.4 輸入狀態(tài)當(dāng)用戶焦點(diǎn)落在輸入框時(shí)，可以通過(guò)更改背景色、邊框顏色的方式提示用戶當(dāng)前所填寫(xiě)的位置，當(dāng)焦點(diǎn)失去時(shí)，回復(fù)樣式。圖2.5 用戶輸入焦點(diǎn)在“密碼”一項(xiàng)中如上圖，用戶可以清楚識(shí)別自己正在填寫(xiě)“密碼”一項(xiàng)，當(dāng)因事中斷填寫(xiě)表單時(shí)，不用擔(dān)心無(wú)法確認(rèn)目前的進(jìn)度。而且用

5、戶可以確定當(dāng)前是否處于輸入狀態(tài)。3 標(biāo)簽不同的表單對(duì)齊方式給用戶帶來(lái)的感覺(jué)是不一樣的。大多數(shù)時(shí)候，可能希望人們盡快填完表單。但有時(shí)會(huì)希望降低人們的速度，使用戶有時(shí)間進(jìn)行深思熟慮。也可能會(huì)受到屏幕顯示的限制。也可能由于本地化需要，表單要適應(yīng)不同長(zhǎng)度的多種語(yǔ)言。置于哪種對(duì)齊方式好，只能說(shuō)依情況而定。馬泰奧·彭佐在2006年進(jìn)行的眼部研究發(fā)現(xiàn)，頂對(duì)齊方式注意力從標(biāo)簽移動(dòng)到輸入框只要50毫秒，比左對(duì)齊方式快了10倍，比右對(duì)齊方式快了兩倍。3.1 頂對(duì)齊標(biāo)簽頂對(duì)齊方式可以加快瀏覽速度。由于標(biāo)簽和輸入框的位置非常接近，瀏覽起來(lái)毫不費(fèi)力。填寫(xiě)表單很快，因?yàn)橛脩舻囊暰€只需向下運(yùn)動(dòng)，向用戶提供了清晰的

6、完成路徑。頂對(duì)齊方式提供了很大的橫向空間，頁(yè)面較窄時(shí)適合使用。而且對(duì)于需要多種語(yǔ)言時(shí)，也不會(huì)因?yàn)槲谋咀冮L(zhǎng)而影響了布局（法語(yǔ)、德語(yǔ)要比英語(yǔ)長(zhǎng)兩倍，英語(yǔ)又比中文長(zhǎng)）。圖3.1 頂對(duì)齊標(biāo)簽上面的表單由上到下一目了然，瀏覽速度較快。但是這種方式占用了較多的垂直空間。表單輸入框之間的垂直空間太少或太多都會(huì)阻礙移動(dòng)，一般使用輸入框50%75%的高度作為間距。3.2 左對(duì)齊標(biāo)簽如果人們不熟悉表單要收集的數(shù)據(jù)，左對(duì)齊表單會(huì)更合適。人們往往只是上上下下閱讀標(biāo)簽欄，而不會(huì)被輸入框打斷（在我們的系統(tǒng)中，用戶往往是熟悉表單的，不會(huì)特別注意文字，所以感覺(jué)左對(duì)齊方式不是非常適合使用）。圖3.2 左對(duì)齊標(biāo)簽與頂對(duì)齊方式相比

7、，左對(duì)齊較少地占用垂直空間。但是當(dāng)文字過(guò)長(zhǎng)時(shí)，用戶水平移動(dòng)視線，對(duì)齊輸入框會(huì)花費(fèi)更多的時(shí)間。3.3 右對(duì)齊標(biāo)簽右對(duì)齊方式同樣具有輸入框與標(biāo)簽相鄰的優(yōu)點(diǎn)，因此也能快速完成，但右對(duì)齊布局造成左側(cè)不齊，會(huì)降低快速瀏覽表單問(wèn)題的效率（人們習(xí)慣由左往右閱讀）。圖3.3 右對(duì)齊標(biāo)簽上面示例采用了右對(duì)齊方式，熟悉表單的用戶和新手掃視右對(duì)齊標(biāo)簽和輸入框的平均時(shí)間分別為170毫秒和240毫秒。但是如果文字過(guò)長(zhǎng)或者需要兩行文字，會(huì)給表單增加很多困難。4 按鈕完成表單的最后一步就是提交，這個(gè)關(guān)鍵動(dòng)作由按鈕來(lái)完成。4.1 主次關(guān)系WEB表單通常包括若干動(dòng)作，例如提交、保存、繼續(xù)或者取消、重置、返回等。這些動(dòng)作存在著主

8、次關(guān)系。對(duì)于完成表單的重要?jiǎng)幼骺梢暈橹鲃?dòng)做。差異化的按鈕就是為了讓用戶區(qū)分主次關(guān)系，減少次動(dòng)作的視覺(jué)展現(xiàn)，避免誤操作。比如用戶在填寫(xiě)了十幾項(xiàng)表單之后，不小心點(diǎn)擊了取消按鈕，或者不小心點(diǎn)了上一步，就會(huì)導(dǎo)致用戶需要重新填寫(xiě)表單，用戶會(huì)感到十分不爽。圖4.1 三組按鈕上面的三組按鈕中，第一組比較容易出現(xiàn)誤操作，第二、第三組使用了差異化的視覺(jué)元素，不容易誤操作。第三組突出了主動(dòng)做（確定），這可以使用戶較順利地將表單進(jìn)行下去。第二組用紅色標(biāo)識(shí)了取消按鈕，警示用戶小心點(diǎn)擊該按鈕。所以如果想讓用戶快速填完表單，可以使用第三組按鈕；如果想提醒用戶點(diǎn)擊取消會(huì)造成損失（比如表單清空），可以使用第二組按鈕。4.2

9、動(dòng)作順序按鈕的順序也很重要，一般我們習(xí)慣確定按鈕出現(xiàn)在取消前面。圖4.3 確定按鈕在取消前面圖4.4 確定按鈕在取消后面有一項(xiàng)測(cè)試顯示，26%的測(cè)試者完成第二個(gè)表單時(shí)，錯(cuò)誤的點(diǎn)擊了取消按鈕，而更多的人會(huì)猶豫不決。這是由于第二組按鈕違反了常規(guī)，并且將次要?jiǎng)幼鞣旁诹饲懊妗?.3 按鈕位置用戶都希望盡快完成表單，所以為了加快速度，按鈕應(yīng)盡量與上方輸入框和標(biāo)簽對(duì)齊。圖4.5 按鈕與上部標(biāo)簽左對(duì)齊圖4.6 按鈕未和上部標(biāo)簽左對(duì)齊在上面第一個(gè)表單中，用戶填寫(xiě)完密碼之后，視線下移很容易就發(fā)現(xiàn)了確定按鈕，并且鼠標(biāo)移動(dòng)位移??；上面第二個(gè)表單的按鈕由于未和上面的輸入框?qū)R，用戶不得不四處尋找確定按鈕，減慢了完成速

10、度。5 幫助文字用戶填寫(xiě)表單是可能無(wú)法理解表單的問(wèn)題，特別對(duì)于較復(fù)雜的表單，這時(shí)就需要幫助提示。通過(guò)幫助來(lái)引導(dǎo)用戶正確填寫(xiě)，這樣來(lái)提高表單填寫(xiě)速度和準(zhǔn)確性。5.1 直接顯示幫助文字可以指導(dǎo)用戶填寫(xiě)表單，提高準(zhǔn)確性，減少用戶修改的次數(shù)，但同時(shí)也會(huì)帶來(lái)一些問(wèn)題。圖5.1 較簡(jiǎn)潔的幫助文字圖5.2 較復(fù)雜的幫助文字上面兩個(gè)表單都使用了幫助文字，但第二個(gè)由于文字過(guò)多，會(huì)給用戶帶來(lái)不舒服的感覺(jué)，認(rèn)為填寫(xiě)表單很麻煩。所以，幫助文字盡量簡(jiǎn)單。5.2 自動(dòng)顯示自動(dòng)幫助可以在用戶最需要的時(shí)候顯示幫助信息。比如當(dāng)輸入光標(biāo)移到輸入框時(shí)，才顯示幫助信息。這樣就可以屏蔽其他信息，使頁(yè)面的信息量減小。圖5.3 淘寶網(wǎng)注冊(cè)

11、頁(yè)面淘寶網(wǎng)的注冊(cè)頁(yè)面就采用了這種方式，只顯示當(dāng)前輸入框的幫助信息，而且在輸入框右邊顯示，這樣稍長(zhǎng)的文字也能不引起用戶的反感。5.3 自助顯示有時(shí)候并不是所有的用戶都需要幫助，比如有些熟練的用戶知道每個(gè)輸入項(xiàng)應(yīng)輸入什么內(nèi)容。這時(shí)可以通過(guò)一個(gè)“問(wèn)號(hào)”標(biāo)識(shí)放在文字旁邊，只有鼠標(biāo)懸?；蛘唿c(diǎn)擊時(shí)才顯示幫助文字。圖5.4 themeforest自助幫助信息上面是themeforest網(wǎng)站上的截圖，經(jīng)常訪問(wèn)該網(wǎng)站的用戶不需要該幫助，只有新用戶才可能需要幫助，所以將其隱藏是合適的。6 錯(cuò)誤與成功錯(cuò)誤與成功的提示消息比幫助文字重要的多，因?yàn)殄e(cuò)誤消息告訴用戶無(wú)法繼續(xù)進(jìn)行，成功消息告訴用戶表單終于填寫(xiě)完了。6.1

12、錯(cuò)誤消息即便通過(guò)幫助文字或者輸入框長(zhǎng)度等手段告訴用戶如何填寫(xiě)表單，仍然可能出現(xiàn)錯(cuò)誤的情況。錯(cuò)誤是阻礙表單完成的重要信息，所以需要直觀地提示用戶哪里出現(xiàn)了錯(cuò)誤。單獨(dú)或者組合使用不同的尺寸、形狀、位置、質(zhì)地或顏色（比如紅色）都能產(chǎn)生強(qiáng)調(diào)的效果。圖6.1 輸入框旁顯示錯(cuò)誤信息通過(guò)上面這種方式，錯(cuò)誤信息顯示在出錯(cuò)的輸入框旁邊，可以讓用戶明確知道自己哪里填寫(xiě)錯(cuò)誤，以便改正。如果認(rèn)為紅色的字體不足以引起用戶的注意，可以將輸入框的背景色改變或者將輸入框的邊框也置為紅色。圖6.2 采用錯(cuò)誤框的方式顯示錯(cuò)誤信息在系統(tǒng)出錯(cuò)或者出錯(cuò)信息比較復(fù)雜時(shí)，不便于在輸入框旁邊顯示，這時(shí)可以采用錯(cuò)誤提示框的形式。特別對(duì)于系統(tǒng)出

13、錯(cuò)的提示，這樣會(huì)比較友好。圖6.3 某網(wǎng)站的錯(cuò)誤提示上圖采用了以上兩種方式提示錯(cuò)誤信息，錯(cuò)誤信息很突出，但稍顯復(fù)雜（用戶需要從上邊的錯(cuò)誤提示與下邊的錯(cuò)誤的輸入框?qū)?yīng)）。圖6.4 彈出式錯(cuò)誤提示還有一些網(wǎng)站采用彈出窗口的方式提示用戶填寫(xiě)錯(cuò)誤，但這種方式用戶需要多一次點(diǎn)擊確定才能繼續(xù)修改表單，而且用戶很難知道自己哪里填寫(xiě)出錯(cuò)。這種方式目前已經(jīng)越來(lái)越少的使用了。6.2 成功消息表單終于填寫(xiě)完了，應(yīng)該慶祝一下。如果說(shuō)錯(cuò)誤消息讓用戶解決錯(cuò)誤，繼續(xù)完成表單，那么成功消息就是讓用戶知道已完成表單，并鼓勵(lì)用戶采取更多的行動(dòng)。圖6.5 網(wǎng)易注冊(cè)成功頁(yè)面網(wǎng)易的用戶注冊(cè)成功之后，左側(cè)顯示了注冊(cè)信息，在右側(cè)鼓勵(lì)用戶將

14、郵箱與手機(jī)綁定。同樣，在淘寶網(wǎng)上完成訂單之后會(huì)給用戶推薦其他商品。6.3 驗(yàn)證消息出現(xiàn)的時(shí)機(jī)表單驗(yàn)證出現(xiàn)的時(shí)機(jī)也很重要。有的網(wǎng)站是在用戶將所有表單都填寫(xiě)完點(diǎn)擊提交之后才做驗(yàn)證，有的是只要用戶更改內(nèi)容就會(huì)做驗(yàn)證。對(duì)于第一種情況，用戶可能會(huì)重復(fù)多次填寫(xiě)提交才能完成表單，使用戶不愿繼續(xù)填寫(xiě)；而第二種方式，用戶可能剛開(kāi)始輸入第一個(gè)字符時(shí)就出現(xiàn)了提示信息，打斷了思路。比較合適的做法是在輸入框失去焦點(diǎn)時(shí)（表示已經(jīng)填寫(xiě)完該輸入框）進(jìn)行驗(yàn)證。7 其他細(xì)節(jié)一些細(xì)節(jié)也會(huì)影響用戶的感受，或者說(shuō)用戶體驗(yàn)設(shè)計(jì)中大多都是細(xì)節(jié)的設(shè)計(jì)。讓用戶感受舒服的網(wǎng)站都會(huì)花費(fèi)心思在這些細(xì)節(jié)當(dāng)中。而且這些細(xì)節(jié)會(huì)給系統(tǒng)增光添彩。7.1 當(dāng)前

15、位置提示用戶當(dāng)前位置，可以幫助用戶確定目前所進(jìn)行的工作。比如工行網(wǎng)銀頁(yè)面上的提示，可以幫助用戶區(qū)分相似頁(yè)面（確實(shí)很多頁(yè)面看上去很像）。如果沒(méi)有提示，用戶會(huì)很難確定當(dāng)前處于哪個(gè)功能模塊中，不知道填寫(xiě)的是什么表單。圖7.2 工行網(wǎng)銀的當(dāng)前位置提示7.2 當(dāng)前進(jìn)度當(dāng)步驟比較多時(shí)，或者表單問(wèn)題分散在多個(gè)網(wǎng)頁(yè)時(shí)，可以考慮使用進(jìn)度條提示用戶當(dāng)前進(jìn)展情況。用戶對(duì)于自己如何完成表單有了大體了解，更容易完成表單。圖7.3 進(jìn)度條提示如果表單較長(zhǎng)，提供保存功能或者系統(tǒng)自動(dòng)保存是保證人們填寫(xiě)表單的好方法。圖7.4 工行網(wǎng)銀中在線申請(qǐng)信用卡的繼續(xù)填寫(xiě)功能工行網(wǎng)銀在線申請(qǐng)信用卡提供了保存表單功能。由于表單內(nèi)容較多，用戶

16、可能無(wú)法一次填寫(xiě)完成，該功能可以使用戶通過(guò)多次補(bǔ)充完成申請(qǐng)。圖7.5 淘寶網(wǎng)購(gòu)買(mǎi)商品的流程從淘寶網(wǎng)購(gòu)買(mǎi)商品的進(jìn)度條提示中可以看出，購(gòu)買(mǎi)一件商品需要四個(gè)步驟。但其實(shí)每個(gè)步驟都可能是1個(gè)或者2個(gè)頁(yè)面才能完成。比如“付款到支付寶”步驟，如果選擇網(wǎng)銀付款，頁(yè)面將跳轉(zhuǎn)到銀行頁(yè)面，輸入賬號(hào)、密碼（或U盾）等信息才能支付成功，期間可能跳轉(zhuǎn)了3、4次頁(yè)面。但如果進(jìn)度條將這些都顯示的話，用戶會(huì)覺(jué)得支付步驟過(guò)于繁瑣而不愿繼續(xù)進(jìn)行。所以進(jìn)度條可以對(duì)步驟進(jìn)行抽象和提取，只顯示比較重要的步驟或者將類似的步驟進(jìn)行匯總。7.3 提供邀請(qǐng)易發(fā)現(xiàn)性也是WEB交互中需要考慮的問(wèn)題。再好的功能，如果用戶發(fā)現(xiàn)不了，結(jié)果仍然等于零。所

17、以就需要向用戶提供邀請(qǐng)。7.4 考慮Tab鍵利用Tab鍵移動(dòng)輸入光標(biāo)是個(gè)很方便的填寫(xiě)表單方式，因?yàn)樘顚?xiě)表單時(shí)無(wú)需在鍵盤(pán)和鼠標(biāo)之間切換，速度得到了提升。一份對(duì)于每日都要填寫(xiě)表單的人的調(diào)查顯示，一半以上的人都會(huì)使用Tab鍵。圖7.8 通過(guò)HTML的tabindex屬性設(shè)置Tab鍵順序其實(shí)現(xiàn)只要在HTML中input的標(biāo)簽中加入tabindex屬性（HTML標(biāo)準(zhǔn)屬性）并設(shè)置順序即可。當(dāng)不輸入tabindex屬性時(shí)，會(huì)按照頁(yè)面代碼中出現(xiàn)的前后順序由前到后跳轉(zhuǎn)。如果考慮用戶使用Tab鍵，就要考慮表單橫向不要過(guò)于分散，避免Tab跳轉(zhuǎn)時(shí)頁(yè)面橫向大幅移動(dòng)給用戶帶來(lái)的不適。7.5 盡量少的使用視覺(jué)元素過(guò)多的使用

18、視覺(jué)元素會(huì)分散用戶的注意力。“任何無(wú)助于布局的視覺(jué)元素都會(huì)損害布局”。圖7.9 某網(wǎng)站的登錄頁(yè)面上面的表單出現(xiàn)了過(guò)多的廣告，用戶會(huì)覺(jué)得很不舒服，并且不愿填寫(xiě)表單。在淘寶網(wǎng)中，商品頁(yè)面中充斥著大量廣告，但交易頁(yè)面卻沒(méi)有任何廣告，頁(yè)面很簡(jiǎn)單?？梢?jiàn)，在關(guān)鍵表單頁(yè)面要盡量少的使用視覺(jué)元素。7.6 默認(rèn)值提供默認(rèn)值有三種作用。第一種是作為填寫(xiě)說(shuō)明，不用在輸入框外邊再出現(xiàn)幫助文字，使頁(yè)面更加簡(jiǎn)潔；第二種是由于某輸入項(xiàng)很大的幾率都會(huì)出現(xiàn)某個(gè)值，將該值作為默認(rèn)值，用戶一般無(wú)需更改，提高填寫(xiě)速度；第三種是出于商業(yè)或其它利益，將有利于利益的選項(xiàng)或內(nèi)容作為默認(rèn)值（用戶不知該）。圖7.10 通過(guò)默認(rèn)值提示用戶輸入上圖

19、在輸入框顯示了填寫(xiě)示例，提示用戶完成表單。圖7.11 通過(guò)默認(rèn)值減少用戶操作上圖將出現(xiàn)幾率比較大的選項(xiàng)作為了默認(rèn)值，提高表單填寫(xiě)速度。圖7.12 通過(guò)默認(rèn)值達(dá)到某種目的上圖將EMS方式置為默認(rèn)值，有商業(yè)利益元素在里面。7.7 開(kāi)關(guān)在iphone中較為流行的開(kāi)關(guān)很受用戶歡迎，以至于在一些網(wǎng)站已經(jīng)開(kāi)始使用（其實(shí)就是兩個(gè)單選框）。目前JQuery已經(jīng)有了這種開(kāi)關(guān)的插件。圖7.13 某網(wǎng)站使用了開(kāi)關(guān)7.8 去除無(wú)用表單2002年，eBay重新設(shè)計(jì)了注冊(cè)表單，仔細(xì)考慮了每一個(gè)問(wèn)題，找出了可有可無(wú)、無(wú)關(guān)緊要的問(wèn)題。效果非常好，因?yàn)橛懈嗟娜俗?cè)并開(kāi)始使用eBay，而且居然有很多用戶在注冊(cè)完之后又回答了那些

20、可選題?？赡苁怯捎诳蛇x問(wèn)題相比必填問(wèn)題不具侵略性。8 拓展學(xué)習(xí)8.1 CSS框架這部分內(nèi)容是我在學(xué)習(xí)WEB表單時(shí)，偶然看到的，覺(jué)得還是有必要了解一下的?，F(xiàn)在什么都往框架上整，連CSS也有框架了。目前流行的JQuery、Prototype這些javascript框架在開(kāi)發(fā)網(wǎng)站時(shí)，確實(shí)成為前端開(kāi)發(fā)工程師的手中利器。為什么呢？因?yàn)榭蚣苁前ぞ?、函?shù)庫(kù)、約定，以及嘗試從常用任務(wù)中抽象出可以復(fù)用的通用模塊，讓程序員避免重復(fù)開(kāi)發(fā)。通俗地講便是把大多數(shù)重復(fù)工作的時(shí)間給節(jié)約了。css也是一樣，從最初只是定義文字顏色、內(nèi)容排版，到現(xiàn)在定義所有的表現(xiàn)。css框架也漸漸被重視了，因?yàn)榇蠹叶颊J(rèn)識(shí)到：從具象的表現(xiàn)中抽

21、出抽象的模塊來(lái)重復(fù)使用，是減少用戶下載、統(tǒng)一界面、方便團(tuán)隊(duì)及個(gè)人開(kāi)發(fā)最重要的手段。下面是幾款目前較流行的CSS框架：Elements CSS FrameworksYUI Grids CSS YAML CSS Framework Blueprint CSSJQuery UI一般CSS框架包含如下幾部分：l 格式化 reset.css格式化css的真正好處是能夠快速啟動(dòng)工作，你可以在新的HTML文件里引入框架，不用再處理重置padding 和 margins，實(shí)現(xiàn)統(tǒng)一的排版、瀏覽器下的相同表現(xiàn)。l 布局 layout.css定義頁(yè)面是二欄還是三欄，是全屏還是1024×768一個(gè)網(wǎng)站的設(shè)計(jì)可能有很多種布局，但是大多數(shù)都是由幾個(gè)具有復(fù)用性的布局組成，選擇性的引入所需要的布局，可以很快地應(yīng)用所期望的頁(yè)面布局。l 基本樣式 t