填寫互聯網表單幾乎是(shì)每個(gè& ")用(yòng)戶每天的(de)經曆，如(rú)用(yòng)戶進行(x↔€íng)網站(zhàn)注冊和(hé)登錄、購(γ↔gòu)物(wù)等，都(dōu)需要(yào)填寫各種表單。用(yòng)戶為(w↔λèi)了(le)獲得(de)想要(yào)的(de)東(dōng)西₽×∑(xī)，表單成了(le)用(yòng)戶完成需求和(hé)πβ™♠網站(zhàn)系統需要(yào)數(shù)據之間(jiān)的(de)互動形式。那(nà)≠ ε麽表單設計(jì)的(de)首要(yào)目↓&标也(yě)更清晰：讓用(yòng)戶迅速高(gāo)效快(kuài)捷并且輕松地(dì)↔←₽<完成填寫。
設計(jì)目标已清晰，那(nà)麽如(rú)λ₽λ何設計(jì)表單呢(ne)，以下(xià)從(cóng)表單的(de)內(nèi)容、組織↕≈方式、流程、表單元素控件(jiàn)及交互等方面詳細闡述。
    
表單的(de)元素

研究如(rú)何提高(gāo)表格可(kě)用(yòn±¥g)性之前，先誠科(kē)技(jì)先簡要(yào)了(le)解δα下(xià)一(yī)般表單的(de)元素，這(zhè)裡(lǐ)先誠科(kē)♥∏↕≥技(jì)暫且這(zhè)麽總結：

    标簽：告訴用(yòng)戶表單問(wèn)題是(shì)ασ>什(shén)麽；
    輸入框：供給用(yòng)戶填寫答(dá)案信息；₹☆α
    動作(zu≥λò)：用(yòng)戶提交表單，即用(yòng)戶點擊一(yī)個(gè)按鈕或鏈±∞₩γ接，執行(xíng)一(yī)個(gè)操作(zuò)；
    幫助文(wén)字：為(wèi)如(₹↓rú)何填寫表單提供幫助；
    輸入反饋：針對(duì)用(yòng)戶輸入給出反饋× ，輸入正确還(hái)是(shì)錯(cuò)誤；

一(yī) 信息內(nèi)容的(de)合理(lǐ)組•™織

　　考慮用(yòng)戶填寫表單的(de)目的(de)，哪些(xiē)表單需要(yào)填寫，去(♦±←qù)掉沒必要(yào)的(de)表單項，β'β确定完表單內(nèi)容。如(rú)何組織起來(l®&§™ái)呢(ne)？表單項并不(bù)是(shì)≈♥÷±一(yī)個(gè)個(gè)從(cóng)上(shàng)到♥₩(dào)下(xià)無序羅列，而是(shì)根據表單內(nèi)容，按照(zhào)一(yī)♥★φ£定的(de)邏輯，經過組織，分(fēn)成不(bù)同的(de)內(nèi)容組♥φ∑♥，不(bù)同的(de)主題。同時(shí)各個¶≤‌(gè)邏輯組和(hé)同一(yī)個(gè)主題的(de)表單項，也(yě)是(shì)按照♥§(zhào)邏輯順序或者用(yòng)戶熟悉的(de)模式順序，←®使用(yòng)戶浏覽和(hé)填寫自(zì)如(rú)§€∞ 。如(rú)果表單過長(cháng)時(shí)，也(yě)可(kě)拆解成不(bù) ®↕同網頁，類似于任務拆解，讓用(yòng)戶一(yī)步步填寫。

　　品牌1.0系統，新建訂單時(shí)，将表單內π •<(nèi)容，進行(xíng)邏輯劃分(fēn)為(wèi•ε®)兩個(gè)內(nèi)容組：基本信息（重要(yào)/必填）和(hé)附加信息 （次™÷>♦要(yào)/選填），通(tōng)過分(fēn)割線↔£λ區(qū)分(fēn)內(nèi)容組，結構清晰，易于浏覽。考慮區(qū≥←±→)分(fēn)內(nèi)容組時(shí)，應當考慮采用(yòng)較少(shǎo)的♠‍≠(de)視(shì)覺信息，過多(duō)的(de)視(shì)覺信息可(kě)能(n>¥éng)會(huì)導緻注意力分(fēn)散，給表單帶來(lái)大(dà)量視(sh₩γ>☆ì)覺噪音(yīn)。

　　新建百度Union賬戶，表單內(nèi)容較長(cháng)，同時(s₹₽hí)有(yǒu)若幹主題，一(yī)個(gè)網頁信息量太大(dà)，所以采用(y×♠←<òng)多(duō)個(gè)網頁來(lái)組織表單，分(f¥™↔ēn)步驟給用(yòng)戶，提供清晰的(de)路(lù)徑步驟，即清晰又↕ε↔(yòu)簡單。用(yòng)戶在填寫時(shí)，提供進程指示，避免緊張和(hé)疑惑。€•&±
   
二 簡化(huà)表單 突出重點

　　根據用(yòng)戶使用(yòng)數(shù)據，适☆€當将使用(yòng)頻(pín)次不(bù)高(gāo)、或者提供給專業(yè)用(yòng® )戶的(de)高(gāo)級表單項隐藏起來(lái)✘>。比如(rú)品牌1.0的(de)新建創意表↕÷₹γ單，90%的(de)人(rén)不(bù)進行(xíng)曝光(guāng)監控™£鏈接的(de)填寫，那(nà)麽默認收起，保持表單的(de)簡潔，讓絕大(dà)多(du​​ō)數(shù)用(yòng)戶快(kuài)速完成，避免大(dà)量的(de)♦ ₩$表單給用(yòng)戶的(de)焦慮，而又↑≠(yòu)滿足了(le)小(xiǎo)衆用(≈$yòng)戶的(de)需求。
    
三 清晰的(de)浏覽線

　　思考如(rú)何設計(jì)表單結構和(hé)路(lù)徑時(shí)γ∏φ§，需要(yào)有(yǒu)個(gè)基本原則：由始至終提供清晰的(de)浏覽線。采用(yò​γ≠©ng)眼動儀實驗即可(kě)檢驗用(yòng)戶的(de)浏覽線。如(rú)标簽的(de)對(d✔'uì)齊方式、輸入框的(de)布局等都(dōu)影(yǐng)響著(zhe)£ <用(yòng)戶的(de)浏覽線。當提供了(le)垂直單一(yī)路(lù)♦φ£徑，使用(yòng)戶減少(shǎo)注意力分(f¥ ₹ēn)散，可(kě)以迅速對(duì)問(wèn)& ​≤題作(zuò)出回答(dá)，完成任務所花(huā)時(shí)間(jiān)最←®₽™少(shǎo)。

　　如(rú)下(xià)面Etre(www.nmgxc.net)提供的(de)眼動跟蹤數(shù)據圖，表單各個(gè)元素構成垂直軸，提供了 ♥(le)單一(yī)路(lù)徑，用(yòng)戶有(yǒu)清晰的(de)浏覽線，可(kě↓ ¥♠)以迅速對(duì)問(wèn)題做(zuò)出答(δ≠♠≈dá)複。而另一(yī)張圖，完成過程變成了(le)彎曲的(de)¥‍眼球運動，采用(yòng)單一(yī)路(lù)徑更容易處理(l'→∞♠ǐ)表單問(wèn)題。
    
四 考慮用(yòng)戶場(chǎng)景 保≈♦±證主流程順暢

　　先誠科(kē)技(jì)在設計(jì)表單時(shí)，定義了(le)清晰的¶£(de)線性步驟，但(dàn)很(hěn)少(shǎo)真正≥×↓實現(xiàn)。考慮用(yòng)戶場(chǎng)景λ★，保證主流程不(bù)要(yào)中斷，将導緻人(rén)們←♣®放(fàng)棄填寫的(de)元素解決。例如(rú)βγ，招商銀(yín)行(xíng)卡号密碼的(d₽♠₽e)付款流程，分(fēn)為(wèi)三項表單步驟：填寫銀(yín)行(xíng)卡号、填寫γ×其他(tā)驗證信息、支付成功。但(dàn)在用(y"πòng)戶填完卡号和(hé)其他(tā)驗證信息後，經常會(huì)發現(xiàn)付款額超出'↕☆每日(rì)限額，以前的(de)流程是(shì)，用(yòng)戶中斷付款流程，不(‌ε∏δbù)得(de)不(bù)新打開(kāi™≈)一(yī)個(gè)網頁，招行(xíng)主頁 → 網上(shàng)個(gε§♦è)人(rén)銀(yín)行(xíng)登錄 → 選擇一(yī)卡通(tōng)（輸一(yī∑♠₩&)卡通(tōng)卡号、查詢密碼、附加碼）登錄後→ 網上(shàng)支付 →☆Ωπ 網上(shàng)支付額度管理(lǐ)調整額度，然後再次重新支付，≥β​✔使用(yòng)戶在兩個(gè)操作(zuò)流程中切換，讓用(≥γyòng)戶各種折騰。而改版後的(de)設計(jì)，可(kě)謂&↔十分(fēn)貼心，給予信息提示的(de)同時(shí)，用(yòng)戶可(kě)在當前流程δ∏設置限額，避免了(le)付款流程的(de)中÷¶斷，同時(shí)大(dà)大(dà)節省了&ε™‍(le)用(yòng)戶的(de)操作(zuò)成本。 

　　還(hái)有(yǒu)新建廣告位時(s£☆λhí)，選擇所屬頻(pín)道(dào)，如(rú)果沒↓₩有(yǒu)想要(yào)的(de)頻(pín)道(d♣×→ ào)，就(jiù)需要(yào)新建頻(pín)道(dào)，增加∑‍≈額外(wài)的(de)頁面來(lái)添加新頻(pín)道(dào)，而在設計(jìεφπ€)時(shí)，考慮到(dào)用(yòng)戶的(de)↓β≈γ此場(chǎng)景，在下(xià)拉選擇框旁邊±™'，增加“新建頻(pín)道(dào)”按鈕，為(wèi)用(yò₹γng)戶提供便捷，減少(shǎo)了(le)新建廣告位流程的(de)打斷。¥‌©
   &nσ₩₽bsp;
五 選擇合适的(de)标簽對(duì)齊方式

　　“輸入框标簽應該是(shì)頂對(duì)齊、右對(duì)齊、左對(duì)齊還 Ω(hái)是(shì)輸入框內(nèi)标簽？”是(shì)先誠科(k÷♥ē)技(jì)在設計(jì)表單時(shí)最常見(jiàn)↕γ的(de)問(wèn)題。其實業(yè)界"•®₩有(yǒu)很(hěn)多(duō)針對(duì)★δ 此問(wèn)題的(de)實驗和(hé)研究（Matteo Penzo的∞α$(de)眼動實驗、Luke Wroblewski的(de)Luke Wroblews ‌‌✘ki’s findings、Vitaly Friedman的( ‍de)web表單設計(jì)之注冊表單），都(dōu)表明(míng)每δ₩種方式有(yǒu)不(bù)同的(de)優缺點，根據具體(t↔→​ǐ)目标等因素具體(tǐ)考慮。

　　Matteo Penzo的(de)眼動實驗發現(xiàn)，頂部标簽方式，标簽移動到(dàoβ& )輸入框需50毫秒(miǎo)，比左對(duì)齊标簽方式（500毫秒(miǎo)）快(k<♠↔×uài)了(le)10倍，比右對(duì)齊标簽方式（240毫秒(miǎo)）快(kuài)了(l§ ₽e)5倍左右。

　　總之，頂部标簽方式，填表時(shí)間(jiān)最短(d§±σuǎn)。但(dàn)如(rú)果盡量減少(shǎo)垂直面積，可(kě)以考慮右對(duì)齊φ✘←≤方式。如(rú)果希望用(yòng)戶填表時(shí)認真浏覽Ωλ‍标簽，了(le)解仔細考慮表單的(de)每個(gè)輸入框時(s₹  hí)，可(kě)以采用(yòng)左對(d♣¥‌uì)齊方式。
    
六 提供幫助

　　為(wèi)了(le)用(yòng)戶快(kuài)地(dì)填寫表單，一(yī)般在難•♣λ以理(lǐ)解的(de)表單項增加幫助信息，引導用(yò™φng)戶成功填表。幫助信息，提示用(yòng)✘¶¥戶應該如(rú)何填寫，常見(jiàn)的(de)幫助→$π，一(yī)般在标簽或者輸入框旁提供幫助文(wén)字，交互方式也(yě)有(♥εφ¶yǒu)一(yī)直展現(xiàn)（即一(yī)直出現(xiàn)在♦•輸入框右側、下(xià)方或輸入框內(nèi₹♦‍)）、即時(shí)幫助（即激活輸入框時¥×Ω∑(shí)，幫助文(wén)字自(zì)動出現(xiàn)）、用(yòng)∏ 戶激活的(de)即時(shí)幫助（即幫助信息默認不(bù)顯示、用(yòng)戶鼠标懸浮觸發幫'β 助圖标來(lái)顯示幫助）、用(yòng)戶激活的(de)區(qū)域♦δ Ω幫助（将表單所有(yǒu)的(de)幫助信息統一(yī)放(fàng)在一(yī)個(gè)€λ​♦位置）等多(duō)種方式。其實可(kě)以考慮更δ←>✘多(duō)的(de)方式來(lái)更好(hǎo)地(dì)幫助用(yòng)戶，例如(r 'ú)經常見(jiàn)到(dào)的(de)信用( <∞yòng)卡有(yǒu)效期填寫，當用(yòng)戶激活輸入框時✘λ×(shí)，右側出現(xiàn)可(kě)視(shì)化(huà)的(de↑¥≥↑)幫助信息，更簡潔直觀，更好(hǎo)理(lǐ)解。
  
七 智能(néng)默認

　　網絡表單中有(yǒu)很(hěn)多(duō↓∏)地(dì)方能(néng)利用(yòng)智能(néng)默認減少(sh σ↓ǎo)必要(yào)的(de)選擇和(hé)輸入次數(shù)，加速表單完成過程。一(yī)般 ₩♥通(tōng)過恰當設置滿足大(dà)多(duō)數(shù)人(≥≈¶rén)需要(yào)的(de)默認選擇和(hé)數(sh€×&ù)值，推送默認每個(gè)人(rén)都(dōu)相(xiàng)同。還(hái)有(₽$₽yǒu)個(gè)性化(huà)默認方式，©÷ 它與表單對(duì)象相(xiàng)關。如≥✔(rú)京東(dōng)購(gòu)買的(de)訂單信息，智能(néng)默認與£∏Ω個(gè)人(rén)相(xiàng)關，不(bù)需要(yào)表單輸入，默認之前的(de)收貨 •地(dì)址信息、支付配送方式、發票(piào)信息等，符合用(yòng)戶的(de)π&需求習(xí)慣，同時(shí)避免了(le)重®→σ複輸入的(de)成本。品牌1.0的(de)新建廣告設置，96%的(de)ε•&用(yòng)戶折扣率為(wèi)所屬訂單的(de)折扣率，但(dàn)又(yòu)要(yà←≤₹o)滿足KA用(yòng)戶修改廣告折扣率的(de)需求，所以輸入框預置默認為(wè✘₹i)訂單折扣率，加速絕大(dà)多(duσ∞♠ō)數(shù)用(yòng)戶的(de)表單填寫。
   
八 即時(shí)反饋驗證

　　雖然設計(jì)表單時(shí)，保證表單的(de)內(nèi)容結構清晰， ↑™提供有(yǒu)意義的(de)輸入幫助，但(dàn)總有(yǒu)些(xiē ×)答(dá)案不(bù)止一(yī)個(gè)。此時(shí​≈✔)，直接反饋有(yǒu)助于再次确保人(ré←÷•n)們的(de)回答(dá)有(yǒu)效，提供即時(☆≈♦shí)校(xiào)驗。即時(shí)驗證分(fēn)為(wèi)多(duō)類反饋：确認ε¥€©輸入合适、建議(yì)有(yǒu)效回答(dá)、¥©♣ 核對(duì)輸入信息，通(tōng)過實時(shí)更新設計(jì)以幫助用(yòng)戶控制δπ∞(zhì)在必要(yào)的(de)限制(zhì)範圍內₩←→✔(nèi)。這(zhè)類反饋通(tōng)常發$♣≠生(shēng)在用(yòng)戶在輸入框開(kāi)始、繼續輸入或者停止輸入的(d<εe)時(shí)候。

　　如(rú)在設置密碼時(shí)，要(yào)求用€φα☆(yòng)戶輸入字符數(shù)有(yǒu)限制(zhì)✔★、字符類型有(yǒu)限制(zhì)的(de)密碼，利用(yòn✘∞ βg)即時(shí)驗證，不(bù)僅告訴用(yòng)戶輸入的•♥®₹(de)密碼是(shì)否有(yǒu)效，是(shì)否→λ&™合格，而不(bù)是(shì)填完所有(yǒu)表單，提交之後，才告我密碼需要(§'•§yào)修改，同時(shí)還(hái)能(néng)說(shuō)明(míng)₽♥φ密碼的(de)安全程度，采用(yòng)高(gāo)度可(k γβě)視(shì)化(huà)方式讓用(yòng)戶衡量密碼質量。
直接反饋不(bù)僅限于确認所提供的(de)答(dáεβδ₹)案，還(hái)能(néng)提供輸入建議(yì)。用(yòng)λ♣Ω÷戶在搜索時(shí)，搜索框能(néng)夠在輸入過程中自(zì☆★)動補全、提供相(xiàng)關聯的(de)搜索建議☆ε¥(yì)，既可(kě)以避免用(yòng)戶輸入出錯(cuò)，又(yòu)可(kěσ←‌₩)以節約用(yòng)戶的(de)拼寫時(shí)間(jiān)（這(zhè)一(yī)點在₩✘↓∞手機(jī)端更加需要(yào)）。

九 額外(wài)輸入

　　額外(wài)輸入可(kě)以提供更多(d₽♠uō)選項或者高(gāo)級選項，滿足有(yǒu)需要(yào)的(de) ₹ 用(yòng)戶，同時(shí)不(bù)妨礙許需要(yào)的(de)用(yòng)戶。♦δ如(rú)圖不(bù)到(dào)10%的(de)用(yòng)戶會(huì)填寫一(yī)個£δπ(gè)以上(shàng)的(de)曝光(guāng)監控鏈接，這(zhè)類用(yòng)戶可≠☆(kě)以選擇點擊“添加”按鈕來(lái)進行(xíng)更多(duō)的(de)輸入，即時(s÷♥hí)增加并不(bù)阻礙完成任務。
  
十 其它方法

　　如(rú)果用(yòng)戶填寫的(de★♥)表單與已有(yǒu)表單的(de)表單項大(dà)多(duō)數(shù)相(xiàn↔π≥€g)同，為(wèi)避免用(yòng)戶重複的¥∑(de)輸入，提供複制(zhì)導入表單數(shù)據功能(néng)，用(yòng)戶隻需修改少$↑♥(shǎo)量數(shù)據即可(kě)。
将重點信息或者難以理(lǐ)解的(de)φ→信息可(kě)視(shì)化(huà)，清晰有(yǒu)效 ‌‌≠地(dì)傳達與溝通(tōng)信息，形成高(gāo)效的(de)功能(né•♦ng)、使用(yòng)映射，使用(yòng) <♠戶高(gāo)效完成任務目标。如(rú)将廣∞ ≠π告管家(jiā)1.0選擇創意模版，表格¥♥列表形式清晰，但(dàn)用(yòng)戶理(lǐ)解成本和(hé)選擇判斷成本€↓較大(dà)；新方案默認縮略圖形式，強調對(duì)創意的(de)直觀，一(y♠£‌ī)圖勝千言，用(yòng)戶選擇較高(gāo)效。

　　除以上(shàng)方法，還(hái)有(yǒu)一(yī)些(xiē)主動作(zuò)和£≤"(hé)次動作(zuò)的(de)差異、采用(yòng)垂直或水(shuǐ)平選項♠£卡、采用(yòng)疊層等方法。當用(yòng)戶在填寫表單時(s ‍hí)，他(tā)們希望盡可(kě)能(néng)快(kuài)的(de)完成任←≠☆£務。因此十分(fēn)有(yǒu)必要(yào)将表單設計(jì)得(de)清晰和(héεφ)整齊。

　　随著(zhe)科(kē)技(jì)的(de)發展，語音(yīn)智能(n‍₹éng)、拍(pāi)照(zhào)及傳感器(qì)等新技(jì)術(•‍♣shù)的(de)出現(xiàn)，這(zhè)些(xiē)必÷₩定會(huì)對(duì)表單設計(jìδα)打開(kāi)新的(de)思路(lù)。★↔≠✔也(yě)可(kě)能(néng)以後人(rén)們不(bù)通(tōng)過"✘&&表單形式，直接通(tōng)過聲音(yīn)、眼神等完成與系統互動，™ε表單或許更加弱化(huà)或消失