如(rú)果網站(zhàn)是(shì)一(yī)座小(xi ♦≥‍ǎo)院兒(ér)，注冊登錄頁就(jiù)π≠← 是(shì)那(nà)扇大(dà)門(mén)，用(yòng)戶是(shì)走是(shì♦♥₹↔)留很(hěn)大(dà)程度就(jiù)取決于那(nà)道(dào)門(mén)檻的 $φ"(de)設計(jì)，今天騰訊的(de)同學總結了(le)7個(gè)實用(yòn&$g)的(de)方法，能(néng)有(yǒu)效幫

　　助用(yòng)戶提升表單填寫的(de)整✔π體(tǐ)體(tǐ)驗，賓客臨門(mén)還(hái)是(shì)↓'₽門(mén)可(kě)羅雀？就(jiù)看(λ≠€kàn)這(zhè)篇了(le)。

　　我們幾乎每天都(dōu)會(huì)接觸形形色→ε色的(de)表單，登錄賬号、填寫信息以獲取服務、發布α§ £內(nèi)容等。然而填寫表單的(de)過程往往不(bùφ§)是(shì)特别愉悅的(de)，我們需要(yào)消耗​γ©時(shí)間(jiān)

　　輸入信息，點擊提交，可(kě)能(néng)還(hái)×£‍€需要(yào)等待審核；尤其是(shì)碰到(dào)較為(wèi)複雜(zá)、流程長(ch∑ ♠αáng)的(de)表單，如(rú)果用(yòng)戶體(tǐ)驗較差，很(hěn)容易讓人(rén✘≠)産生(shēng)挫敗感，在中途選擇放(fàng)棄。

　　那(nà)麽，如(rú)何提高(gāo)用(yò↓₽ng)戶填寫表單的(de)效率，防止他(׶‌πtā)們出錯(cuò)或中途流失，提升愉悅度及轉化(huà)率呢(ne)？本文(wén)就(ji↓€ù)Web表單設計(jì)，總結了(le)↑×±以下(xià)的(de)一(yī)些(xiē)方法：

　　內(nèi)蒙古網站(zhàn)制(zhì)作(z★"δuò)，內(nèi)蒙古網站(zhàn)設計(jì)，內(nèi)蒙古網站₽∑(zhàn)建設，呼和(hé)浩特網站(zhà λ♥>n)建設，呼和(hé)浩特網站(zhàn)制(zhì)作(zuò)、呼和(hé‍€")浩特網站(zhàn)設計(jì)首選 ♦≤內(nèi)蒙古呼和(hé)浩特先誠網絡科(kē)技(jì)公司、、、先誠官網：/ 

　　有(yǒu)效的(de)說(shuō)服用(yòng)戶進行(xíng)填寫

　　首先，告知(zhī)用(yòng)戶為(wèi)什(shén)麽要(yào)填寫表單，他¥←(tā)能(néng)獲得(de)什(shén)麽，讓用(yòng γ•←)戶看(kàn)到(dào)把信息給你(nǐ)的(de)好(hǎo)處。舉個(↔<←gè)例子(zǐ)，GitHub在其注冊表單的(↕¥de)右側清晰的(de)告訴你(nǐ)注冊使用(yòng)它會(huì)

　　得(de)到(dào)的(de)幫助：

　　除了(le)告訴用(yòng)戶填完整個(gè)表單可(kě£™£λ)以得(de)到(dào)什(shén)麽₹©☆好(hǎo)處，你(nǐ)還(hái)可(kě)以更具體(tǐ)一(yī)點，≤​告訴用(yòng)戶你(nǐ)讓他(tā)填寫某一(yī)項信息是(shì)出于怎樣的λ©(de)考慮。

　　有(yǒu)效的(de)說(shuō)服用(yòng)φ→★戶填寫表單，還(hái)需要(yào)剔除負面幹擾，獲取他(t←σ≈‍ā)們的(de)信任。大(dà)多(duō)數(shù)情況下(xi∑÷à)，用(yòng)戶對(duì)于填寫表單的(de)最大(≠'★•dà)顧慮是(shì)信息被網站(zhàn)收集之後≈γλ≤的(de)用(yòng)途。用(yòng)戶

　　不(bù)希望源源不(bù)斷的(de)收到(dào)垃σ✘ 圾推銷郵件(jiàn)，更不(bù)希望自(zì)己的(de)隐私信息被公之于衆。此時(shí)♠™γ ，你(nǐ)可(kě)以通(tōng)過引用(yòng)一(yī)些(xiē)具有(yǒu)影(y÷↔✔πǐng)響力的(de)權威人(rén)士的(de)承諾，或者展示一∑"☆(yī)些(xiē)

　　具有(yǒu)公共效應的(de)證據，如(rú)相(xiàng)關媒體(tǐ)•∑'↓報(bào)道(dào)、來(lái)自(zì)現(xiàn™✔÷​)有(yǒu)用(yòng)戶的(de)贊許等任何能(néng)使₹ ‌∏人(rén)産生(shēng)積極态度的(de)元素。

　　你(nǐ)還(hái)可(kě)以做(zuò)的​®(de)更貼心一(yī)些(xiē)，告訴用(∞☆↕‍yòng)戶填寫表單預計(jì)需要(yào)花(huā)費(÷₽←©fèi)的(de)時(shí)間(jiān)。

　　合理(lǐ)組織信息

　　對(duì)于較為(wèi)複雜(zá)、填寫項多(duō)的(de)表單，如(rú)果不Ω©© (bù)對(duì)信息進行(xíng)組織，≥α∞÷很(hěn)容易顯得(de)繁雜(zá)混亂，讓用(yòng)戶在一(yīΩ≤)開(kāi)始就(jiù)産生(shēng)抵觸的(de)情緒，甚至選擇放(fà←δ☆ng)棄。合理(lǐ)有(yǒu)層次的Ω∏ ¶(de)組

　　織信息，可(kě)以利用(yòng)框線、空(kō☆α>↑ng)間(jiān)間(jiān)隔、顔色的(de)不(bù)同，按照(z &₹hào)不(bù)同信息的(de)類别、屬性和(hé)相(xiàng)關♠'™性進行(xíng)區(qū)塊的(de)劃分(fēn)，用(yòng)步驟條指示當前的(→•±​de)進程。

　　一(yī)般來(lái)說(shuō)，通(tōnσφg)知(zhī)為(wèi)藍(lán)色，警告為(wèi)黃(♠®huáng)色，錯(cuò)誤為(wèi)'↔↑₽紅(hóng)色，成功确認為(wèi)綠(lǜ)色。清晰的(de)浏覽線，合理(lǐ)的(d&↓¶e)标簽、提示文(wén)字及按鈕的(de)排布，避ε↕Ω免不(bù)必要(yào)的(de)信息重複出現(xi ∑àn)，能(néng)夠降低(dī)用(yòng)戶的(de)視(shì)覺負擔✘δ>和(hé)物(wù)理(lǐ)負擔。恰當的(de)隐藏信息能(néng)夠使>÷表單看(kàn)起來(lái)更加清爽怡人(rén)，有(yǒu)些(xiē)信息可  ✘¥(kě)以設置在需要(yào)進行(xíng)相(xiàng)關操作(zu‍×βò)時(shí)才出現(xiàn)。區(qū)分(fēn)一(yī)級動作(zuò)和(hé)二→≤​級動作(zuò)。用(yòng)按鈕定義一≈×(yī)級動作(zuò)，用(yòng)鏈接定義二級動作(zuò)，或者相(xiàng)對(du™☆£ì)于二級動作(zuò)按鈕來(lái)說(shuō)，賦予一(y®€→ī)級動作(zuò)按鈕更為(wèi)明σ✔​(míng)顯的(de)風(fēng)格。

　　為(wèi)用(yòng)戶節省時(shí)間(jiān)

　　需要(yào)花(huā)大(dà)量時(shí)間(jiān)填寫的(de)表單容易讓人(r₽™×♣én)失去(qù)耐心，用(yòng)戶是(shì)懶惰而繁忙的(de)，試著(zhe)↑'♦删去(qù)所有(yǒu)不(bù)必要(yào)的(de)♦≠≥填寫項，考慮除了(le)讓用(yòng)戶機(jī)械的(de)通(tōn™λ‍g)過鍵盤在表單上(shàng)輸入數(shù)

　　據外(wài)，還(hái)有(yǒu)沒有(yǒu)别的(d÷©↔±e)更優方式（如(rú)後續進行(xíng)用(yòng)β¥研調查）收集所需信息。

　　驗證碼永遠(yuǎn)是(shì)表單上(shàng)×'讓用(yòng)戶頭疼的(de)填寫項之一(yī)，他(t↓‌₩ā)需要(yào)等待驗證碼的(de)生(shēng)成、确認驗證碼的(de)內(±δφnèi)容、确保驗證碼輸入正确，才能(néng)點擊提交，而這(zhè)整個Ω £(gè)過程對(duì)

　　他(tā)來(lái)說(shuō)并無實際價值，用(yòng)戶不(bù)會(huì)因為© ≈↓(wèi)多(duō)填寫一(yī)次驗證碼而得(de)到(₩ dào)額外(wài)的(de)獎勵。我們可(kě)以通(tōng)過↓∑•改變輸入驗證碼的(de)體(tǐ)驗，使其變得(de)更簡單有(yǒu)趣，或者通(tōng)÷‍過新的(de)

　　後台邏輯限制(zhì)用(yòng)戶每日(rì)提交次數(sh✔§'ù)等行(xíng)為(wèi)來(lái)取締驗證碼。

　　安全平台部打擊惡意組的(de)同事(shì)就(jiù)發明(míng)了(l>★e)一(yī)種有(yǒu)趣的(de)圖片驗證碼的(de)方式：

　　除了(le)驗證碼以外(wài)，注冊填寫表單中經常存在的(de)二次确認密碼也(yě) Ω←同樣費(fèi)時(shí)。目前，很(hěn)多(duō)國(guó)外(wài)的(de)主流∑↔網站(zhàn)，如(rú)Facebook、T✘  witter、LinkedIn、Friendster等

　　在填寫注冊表單時(shí)都(dōu)不(bù)要(yào)求用(yòng)戶确認↓β密碼。WordPress甚至連都(dōu)不(bù)需要(yào)用♣£↓(yòng)戶填寫，而是(shì)将密碼直接發送至用(yòng)戶♠¶<♠的(de)郵箱。除了(le)上(shàng)≈β面這(zhè)種簡單粗暴的(de)方式以外(wài)，首次輸入密碼時(shí)±β使用(yòng)明(míng)文(wén)确認同樣可(kě)以節省二次輸入π✘→σ密碼的(de)時(shí)間(jiān)，出于↓♠'信息安全的(de)考慮，需支持有(yǒu)需要(yào)的(de)用(yòng)←$₩戶随時(shí)切換成暗(àn)文(wén)♥∏₩λ顯示。以下(xià)是(shì)筆(bǐ)≥β者收集的(de)幾種明(míng)文(wén₹≈)确認密碼的(de)方式，可(kě)供參考：鼠标點擊、拖拽操作(zuò)£÷'π相(xiàng)對(duì)于鍵盤輸入來(lái)說(shuō)是(shì)更加€≥≤有(yǒu)效率的(de)方式。通(tōng)過添加選取器(qì)、快(kuài)捷選項、♦'智能(néng)聯想、range滑塊、number微(wē≈☆®i)調等方式讓用(yòng)戶可(kě)以更快(kuài)速的(de)完成表單>Ω$λ。

　　慎用(yòng)下(xià)拉框。由于下(xià)拉框會(huì)對(duì)用✘δ&(yòng)戶造成信息的(de)隐藏，需要(yào)₹©而外(wài)的(de)操作(zuò)才能(néng)顯示，≥≤更适合用(yòng)在選擇日(rì)期、省份等可(kě)選範圍較大(dà)的(de∏×")地(dì)方。對(duì)于數(shù)目有(yǒu)限且重要(yào"♦ )的(de)選項來(lái)說(shuō)，使用(yòng•‍Ω)更明(míng)顯的(de)選擇方式更合适。放(fàng)寬對(duì)用(yòng)戶≤¶‍♣輸入的(de)要(yào)求，包括格式、大(dà)小(xiǎo)寫等。讓你(nǐ)的(de)系統×λ更靈活而非讓用(yòng)戶為(wèi)了(le)你(nǐ)改變他(t&→♥ā)們的(de)輸入習(xí)慣。錯(cuò)誤預防。進行(xíng)有(yǒu)效的(de)即時♣₽₹(shí)校(xiào)驗，讓用(yòng∏λ)戶能(néng)及時(shí)修改、補充缺漏的(de)信息；另外(wài)，我們還λγ(hái)可(kě)以通(tōng)過限制(zh•σ☆ì)用(yòng)戶的(de)行(xíng)為(wèi)（¶σ★如(rú)在預定機(jī)票(piào)時(shí)返ε÷™回時(shí)間(jiān)無法選擇出發時(shí)間(jiān)之前的(de★←×)日(rì)期，出發城(chéng)市(♦→shì)不(bù)能(néng)跟到(dào)達城(chéng)市(shì)一(yīσα¥β)樣等），或提供自(zì)動修正的(de)方式來(lái)預防用¶ (yòng)戶犯錯(cuò)。通(tōng)過提供更加積極的(de)交互反饋、預置文(wén)字、←↕βα自(zì)動獲取信息、自(zì)動修改格式•±α✔、補全小(xiǎo)數(shù)點等方式，使你(nǐ)的(de)表單變得(d&♠​e)更聰明(míng)。如(rú)當用(yòng)戶輸入信用(yòng)卡号碼時(shí)¥β♠，能(néng)夠自(zì)動判斷用(yòng)戶使用(yòng)的(de"<≠)是(shì)哪種信用(yòng)卡。

　　當用(yòng)戶輸入手機(jī)号碼時(shí)，能(néng)夠判斷出其歸屬地(≈¶dì)。此時(shí)如(rú)果用(yòng)戶輸錯(cuò≠ ")号碼，會(huì)更容易被發現(xiàn)。

　　當用(yòng)戶選擇了(le)所在地(dì)₹ <∑區(qū)後，自(zì)動填充郵政編碼。

　　當用(yòng)戶輸入銀(yín)行(xíng)賬号時(shí)，自(zì)動空(kōn αg)格間(jiān)斷。

　　當用(yòng)戶輸入金(jīn)額時(shí)，自(zì)動≤σ≠補充小(xiǎo)數(shù)。

　　幫助用(yòng)戶進行(xíng)決策。當面臨的(d→αe)選擇越多(duō)時(shí)，用(yòng)戶<'就(jiù)越難做(zuò)出決定。這(zhè)個(gè)時(shí)候可(kě)以适當的(d≠"©e)劃分(fēn)每個(gè)選項的(de)優先級，高(gāo)亮(liàng)其中₩↓↕♥的(de)一(yī)個(gè)，告訴用(yòng)戶你(nǐ)的(de&↔•γ)推薦理(lǐ)由，讓用(yòng)戶更容易比較并做(₹↑zuò)出選擇。

　　支持常用(yòng)的(de)快(kuài)捷操作(zuò)，如(rú)T"×☆ab切換等，讓用(yòng)戶在不(bù≠↔)使用(yòng)鼠标的(de)情況下(xià)也♣↑(yě)能(néng)完成整個(gè)表格的(de)填寫。

　　提供友(yǒu)好(hǎo)的(de)引導

　　清理(lǐ)晦澀的(de)專業(yè)術(shù♠≥)語（如(rú)數(shù)據庫錯(cuòσφ♥™)誤），試著(zhe)使用(yòng)更加親切的(de)語×♥♦言來(lái)引導用(yòng)戶填寫、告±&★訴用(yòng)戶錯(cuò)誤的(de)原因。當問(wèn)題出現(xiàn)時(shí)，↓φ清楚的(de)說(shuō)明(míng)問(wèn)題出現(xiàn)的(de)原因并提•<供有(yǒu)效的(de)解決方案。必要(yào)時(shí)，除了(le)指導文(w♠₹€én)案以外(wài)，還(hái)可(kě)以添加更加生(shēng)動的(de)' φ照(zhào)片或可(kě)視(shì)化(huà)圖形作(zuò)為(wσβèi)引導。

　　一(yī)條龍服務

　　表單的(de)終點并不(bù)是(shì)提交，我們需要(yào)為(wλ≤↔èi)用(yòng)戶提供一(yī)條龍服務，≥↑±形成流程閉環，避免用(yòng)戶在中途跳(tiào)出。

　　舉個(gè)例子(zǐ)，用(yòng)戶在某網®↕✘站(zhàn)選好(hǎo)商品點擊付款時(shí)發現(xiàn)賬戶餘額不(b"→ ♠ù)足，此時(shí)用(yòng)戶隻能×★φλ(néng)先進行(xíng)充值才能(néng)進行(xíng)後續操作(zuò)，但(©•★¥dàn)當用(yòng)戶充值完畢後，發現(xiàn)₹↔已經找不(bù)回原來(lái)選擇的(de)商品和(hé)π₽δ✘付款頁面了(le)。這(zhè)就(jiù)是(shì∏®)典型的(de)流程不(bù)閉環的(de)情況‌<↔≠。類似的(de)還(hái)有(yǒu)當用(→®"yòng)戶需要(yào)在論壇下(xià)載資源時(shí)，系統提示回複才能(nδ↕éng)下(xià)載，而用(yòng)戶沒有(yǒu)注冊，需要(yào)在$‌¶此之前先提交注冊表單，當用(yòng)戶填寫完畢後，卻直接跳(tiào)轉到(dào)了(l≈"×e)論壇首頁。

　　一(yī)個(gè)好(hǎo)的(de)表單設計(jì)，不(bù)僅需要(yào ¶₽§)考慮用(yòng)戶填寫前的(de)引導、填寫時(shí↑§↔")的(de)及時(shí)校(xiào)驗與幫助、還(hái)需要(y ∑∞ào)考慮填寫後的(de)整個(gè)流程體(tǐ)驗。∏₩>思考用(yòng)戶填寫表單的(de)初衷是(shì)什(shén)麽，讓他(tā)≥♠在填寫完表單後能(néng)夠最快(ku ↓ ài)得(de)到(dào)他(tā)最想要(yào)‌↓¥的(de)東(dōng)西(xī)。即便是(shì)他(tā)暫時↕☆±(shí)無法得(de)到(dào)的(de)，也(yě)需要(yào)≥♥告訴他(tā)相(xiàng)應的(de)原因和(hé)✔♠‌♣能(néng)夠進行(xíng)的(de)替代操作(✔♥εzuò)。

　　提供設計(jì)關懷

　　據統計(jì)，大(dà)約有(yǒu)12%的(de)人(rén)口具§★≠有(yǒu)或輕或重的(de)色覺障礙。如(rú)果将色彩作(zuò)為(wèi)區(qū)分(f±≠ εēn)不(bù)可(kě)點擊文(wén)本和(hé)可→λ✔✔(kě)點擊鏈接的(de)唯一(yī)元素，可(kě)能(néng)會( ₩★→huì)讓這(zhè)部分(fēn)的(de)人(rén)使用(yòng)時(shí)≈₹≠出現(xiàn)困難。我們可(kě)以通(tōng)過給鏈接文(wén)字加下(xià)劃©≥φ↔虛線、使用(yòng)按鈕或其他(tā)形狀做(zuò)區(qū)分(fēn)，讓這™≥​(zhè)類用(yòng)戶能(néng)更加清楚的(de)知(zhī)道(dào)哪些(xiē↑±λσ)是(shì)可(kě)點擊的(de)區(qū)域。

　　最後，再增加一(yī)點愉悅度吧(ba)

　　研究表明(míng)，更大(dà)的(de)文(wén↓¶<✔)字輸入框、适度的(de)留白(bái)空(kōng)間(jiān)會(huì)讓人(rén)更有☆✘λ(yǒu)填寫的(de)欲望，優雅的(de)動畫(huà∏↓)效果也(yě)能(néng)增加填寫的(de)趣味。以下(xià∞©)的(de)案例可(kě)供參考：