填寫互聯網表單幾乎是每個用戶每天的經(jīng)曆，如用戶進(jìn)行網站注冊和登錄、購物等，都(dōu)需要填寫各種(zhǒng)表單。用戶爲了獲得想要的東西，表單成(chéng)了用戶完成(chéng)需求和網站系統需要數據之間的互動形式。那麼(me)表單設計的首要目标也更清晰：讓用戶迅速高效快捷并且輕松地完成(chéng)填寫。
設計目标已清晰，那麼(me)如何設計表單呢，以下從表單的内容、組織方式、流程、表單元素控件及交互等方面(miàn)詳細闡述。
    
表單的元素

研究如何提高表格可用性之前，先誠科技先簡要了解下一般表單的元素，這(zhè)裡(lǐ)先誠科技暫且這(zhè)麼(me)總結：

    标簽：告訴用戶表單問題是什麼(me)；
    輸入框：供給用戶填寫答案信息；
    動作：用戶提交表單，即用戶點擊一個按鈕或鏈接，執行一個操作；
    幫助文字：爲如何填寫表單提供幫助；
    輸入反饋：針對(duì)用戶輸入給出反饋，輸入正确還(hái)是錯誤；

一 信息内容的合理組織

　　考慮用戶填寫表單的目的，哪些表單需要填寫，去掉沒(méi)必要的表單項，确定完表單内容。如何組織起(qǐ)來呢？表單項并不是一個個從上到下無序羅列，而是根據表單内容，按照一定的邏輯，經(jīng)過(guò)組織，分成(chéng)不同的内容組，不同的主題。同時各個邏輯組和同一個主題的表單項，也是按照邏輯順序或者用戶熟悉的模式順序，使用戶浏覽和填寫自如。如果表單過(guò)長(cháng)時，也可拆解成(chéng)不同網頁，類似于任務拆解，讓用戶一步步填寫。

　　品牌1.0系統，新建訂單時，將(jiāng)表單内容，進(jìn)行邏輯劃分爲兩(liǎng)個内容組：基本信息（重要/必填）和附加信息 （次要/選填），通過(guò)分割線區分内容組，結構清晰，易于浏覽。考慮區分内容組時，應當考慮采用較少的視覺信息，過(guò)多的視覺信息可能(néng)會導緻注意力分散，給表單帶來大量視覺噪音。

　　新建百度Union賬戶，表單内容較長(cháng)，同時有若幹主題，一個網頁信息量太大，所以采用多個網頁來組織表單，分步驟給用戶，提供清晰的路徑步驟，即清晰又簡單。用戶在填寫時，提供進(jìn)程指示，避免緊張和疑惑。
   
二 簡化表單 突出重點

　　根據用戶使用數據，适當將(jiāng)使用頻次不高、或者提供給專業用戶的高級表單項隐藏起(qǐ)來。比如品牌1.0的新建創意表單，90%的人不進(jìn)行曝光監控鏈接的填寫，那麼(me)默認收起(qǐ)，保持表單的簡潔，讓絕大多數用戶快速完成(chéng)，避免大量的表單給用戶的焦慮，而又滿足了小衆用戶的需求。
    
三 清晰的浏覽線

　　思考如何設計表單結構和路徑時，需要有個基本原則：由始至終提供清晰的浏覽線。采用眼動儀實驗即可檢驗用戶的浏覽線。如标簽的對(duì)齊方式、輸入框的布局等都(dōu)影響著(zhe)用戶的浏覽線。當提供了垂直單一路徑，使用戶減少注意力分散，可以迅速對(duì)問題作出回答，完成(chéng)任務所花時間最少。

　　如下面(miàn)Etre(www.nmgxc.net)提供的眼動跟蹤數據圖，表單各個元素構成(chéng)垂直軸，提供了單一路徑，用戶有清晰的浏覽線，可以迅速對(duì)問題做出答複。而另一張圖，完成(chéng)過(guò)程變成(chéng)了彎曲的眼球運動，采用單一路徑更容易處理表單問題。
    
四 考慮用戶場景 保證主流程順暢

　　先誠科技在設計表單時，定義了清晰的線性步驟，但很少真正實現。考慮用戶場景，保證主流程不要中斷，將(jiāng)導緻人們放棄填寫的元素解決。例如，招商銀行卡号密碼的付款流程，分爲三項表單步驟：填寫銀行卡号、填寫其他驗證信息、支付成(chéng)功。但在用戶填完卡号和其他驗證信息後(hòu)，經(jīng)常會發(fā)現付款額超出每日限額，以前的流程是，用戶中斷付款流程，不得不新打開(kāi)一個網頁，招行主頁 → 網上個人銀行登錄 → 選擇一卡通（輸一卡通卡号、查詢密碼、附加碼）登錄後(hòu)→ 網上支付 → 網上支付額度管理調整額度，然後(hòu)再次重新支付，使用戶在兩(liǎng)個操作流程中切換，讓用戶各種(zhǒng)折騰。而改版後(hòu)的設計，可謂十分貼心，給予信息提示的同時，用戶可在當前流程設置限額，避免了付款流程的中斷，同時大大節省了用戶的操作成(chéng)本。 

　　還(hái)有新建廣告位時，選擇所屬頻道(dào)，如果沒(méi)有想要的頻道(dào)，就需要新建頻道(dào)，增加額外的頁面(miàn)來添加新頻道(dào)，而在設計時，考慮到用戶的此場景，在下拉選擇框旁邊，增加“新建頻道(dào)”按鈕，爲用戶提供便捷，減少了新建廣告位流程的打斷。
    
五 選擇合适的标簽對(duì)齊方式

　　“輸入框标簽應該是頂對(duì)齊、右對(duì)齊、左對(duì)齊還(hái)是輸入框内标簽？”是先誠科技在設計表單時最常見的問題。其實業界有很多針對(duì)此問題的實驗和研究（Matteo Penzo的眼動實驗、Luke Wroblewski的Luke Wroblewski’s findings、Vitaly Friedman的web表單設計之注冊表單），都(dōu)表明每種(zhǒng)方式有不同的優缺點，根據具體目标等因素具體考慮。

　　Matteo Penzo的眼動實驗發(fā)現，頂部标簽方式，标簽移動到輸入框需50毫秒，比左對(duì)齊标簽方式（500毫秒）快了10倍，比右對(duì)齊标簽方式（240毫秒）快了5倍左右。

　　總之，頂部标簽方式，填表時間最短。但如果盡量減少垂直面(miàn)積，可以考慮右對(duì)齊方式。如果希望用戶填表時認真浏覽标簽，了解仔細考慮表單的每個輸入框時，可以采用左對(duì)齊方式。
    
六 提供幫助

　　爲了用戶快地填寫表單，一般在難以理解的表單項增加幫助信息，引導用戶成(chéng)功填表。幫助信息，提示用戶應該如何填寫，常見的幫助，一般在标簽或者輸入框旁提供幫助文字，交互方式也有一直展現（即一直出現在輸入框右側、下方或輸入框内）、即時幫助（即激活輸入框時，幫助文字自動出現）、用戶激活的即時幫助（即幫助信息默認不顯示、用戶鼠标懸浮觸發(fā)幫助圖标來顯示幫助）、用戶激活的區域幫助（將(jiāng)表單所有的幫助信息統一放在一個位置）等多種(zhǒng)方式。其實可以考慮更多的方式來更好(hǎo)地幫助用戶，例如經(jīng)常見到的信用卡有效期填寫，當用戶激活輸入框時，右側出現可視化的幫助信息，更簡潔直觀，更好(hǎo)理解。
  
七 智能(néng)默認

　　網絡表單中有很多地方能(néng)利用智能(néng)默認減少必要的選擇和輸入次數，加速表單完成(chéng)過(guò)程。一般通過(guò)恰當設置滿足大多數人需要的默認選擇和數值，推送默認每個人都(dōu)相同。還(hái)有個性化默認方式，它與表單對(duì)象相關。如京東購買的訂單信息，智能(néng)默認與個人相關，不需要表單輸入，默認之前的收貨地址信息、支付配送方式、發(fā)票信息等，符合用戶的需求習慣，同時避免了重複輸入的成(chéng)本。品牌1.0的新建廣告設置，96%的用戶折扣率爲所屬訂單的折扣率，但又要滿足KA用戶修改廣告折扣率的需求，所以輸入框預置默認爲訂單折扣率，加速絕大多數用戶的表單填寫。
   
八 即時反饋驗證

　　雖然設計表單時，保證表單的内容結構清晰，提供有意義的輸入幫助，但總有些答案不止一個。此時，直接反饋有助于再次确保人們的回答有效，提供即時校驗。即時驗證分爲多類反饋：确認輸入合适、建議有效回答、核對(duì)輸入信息，通過(guò)實時更新設計以幫助用戶控制在必要的限制範圍内。這(zhè)類反饋通常發(fā)生在用戶在輸入框開(kāi)始、繼續輸入或者停止輸入的時候。

　　如在設置密碼時，要求用戶輸入字符數有限制、字符類型有限制的密碼，利用即時驗證，不僅告訴用戶輸入的密碼是否有效，是否合格，而不是填完所有表單，提交之後(hòu)，才告我密碼需要修改，同時還(hái)能(néng)說明密碼的安全程度，采用高度可視化方式讓用戶衡量密碼質量。
直接反饋不僅限于确認所提供的答案，還(hái)能(néng)提供輸入建議。用戶在搜索時，搜索框能(néng)夠在輸入過(guò)程中自動補全、提供相關聯的搜索建議，既可以避免用戶輸入出錯，又可以節約用戶的拼寫時間（這(zhè)一點在手機端更加需要）。

九 額外輸入

　　額外輸入可以提供更多選項或者高級選項，滿足有需要的用戶，同時不妨礙許需要的用戶。如圖不到10%的用戶會填寫一個以上的曝光監控鏈接，這(zhè)類用戶可以選擇點擊“添加”按鈕來進(jìn)行更多的輸入，即時增加并不阻礙完成(chéng)任務。
  
十 其它方法

　　如果用戶填寫的表單與已有表單的表單項大多數相同，爲避免用戶重複的輸入，提供複制導入表單數據功能(néng)，用戶隻需修改少量數據即可。
將(jiāng)重點信息或者難以理解的信息可視化，清晰有效地傳達與溝通信息，形成(chéng)高效的功能(néng)、使用映射，使用戶高效完成(chéng)任務目标。如將(jiāng)廣告管家1.0選擇創意模版，表格列表形式清晰，但用戶理解成(chéng)本和選擇判斷成(chéng)本較大；新方案默認縮略圖形式，強調對(duì)創意的直觀，一圖勝千言，用戶選擇較高效。

　　除以上方法，還(hái)有一些主動作和次動作的差異、采用垂直或水平選項卡、采用疊層等方法。當用戶在填寫表單時，他們希望盡可能(néng)快的完成(chéng)任務。因此十分有必要將(jiāng)表單設計得清晰和整齊。

　　随著(zhe)科技的發(fā)展，語音智能(néng)、拍照及傳感器等新技術的出現，這(zhè)些必定會對(duì)表單設計打開(kāi)新的思路。也可能(néng)以後(hòu)人們不通過(guò)表單形式，直接通過(guò)聲音、眼神等完成(chéng)與系統互動，表單或許更加弱化或消失