一取劫、表單結(jié)構(gòu)

標(biāo)簽：告訴用戶表單問題是什么蒲每；

輸入框或者下拉框：供給用戶填寫或選擇答案信息往湿；

動(dòng)作：用戶提交表單妖异，即用戶點(diǎn)擊一個(gè)按鈕或鏈接，執(zhí)行一個(gè)操作煌茴；

幫助文字：為如何填寫表單提供幫助随闺；

輸入反饋：針對用戶輸入給出反饋，輸入正確還是錯(cuò)誤蔓腐；

二、表單設(shè)計(jì)原則

1.信息內(nèi)容的合理組織

表單項(xiàng)并不是一個(gè)個(gè)從上到下無序羅列龄句，而是根據(jù)表單內(nèi)容回论，按照一定的邏輯，經(jīng)過組織分歇，分成不同的內(nèi)容組傀蓉，不同的主題。同時(shí)各個(gè)邏輯組和同一個(gè)主題的表單項(xiàng)职抡，也是按照邏輯順序或者用戶熟悉的模式順序葬燎，使用戶瀏覽和填寫自如。如果表單過長時(shí)缚甩，也可拆解成不同網(wǎng)頁谱净，類似于任務(wù)拆解，讓用戶一步步填寫擅威。

2.清晰的瀏覽線?

思考如何設(shè)計(jì)表單結(jié)構(gòu)和路徑時(shí)壕探，需要有個(gè)基本原則：由始至終提供清晰的瀏覽線。采用眼動(dòng)儀實(shí)驗(yàn)即可檢驗(yàn)用戶的瀏覽線郊丛。如標(biāo)簽的對齊方式李请、輸入框的布局等都影響著用戶的瀏覽線瞧筛。當(dāng)提供了垂直單一路徑，使用戶減少注意力分散导盅，可以迅速對問題作出回答较幌，完成任務(wù)所花時(shí)間最少。

3.簡化表單突出重點(diǎn)

根據(jù)用戶使用數(shù)據(jù)白翻，適當(dāng)將使用頻次不高绅络、或者提供給專業(yè)用戶的高級表單項(xiàng)隱藏起來。

4.只填寫一定要填的

只讓用戶填寫必須要填寫的數(shù)據(jù)嘁字，對于流程最終目標(biāo)或者后臺(tái)其他功能無關(guān)的數(shù)據(jù)剔除掉恩急，對大多數(shù)用戶同一答案的數(shù)據(jù)設(shè)置默認(rèn)，對用戶已經(jīng)被系統(tǒng)獲取的數(shù)據(jù)進(jìn)行預(yù)填纪蜒。

5.考慮用戶場景保證主流程順暢

我們在設(shè)計(jì)表單時(shí)衷恭，定義了清晰的線性步驟，但很少真正實(shí)現(xiàn)纯续∷嬷椋考慮用戶場景，保證主流程不要中斷猬错，將導(dǎo)致人們放棄填寫的元素解決窗看。

例如，招商銀行卡號密碼的付款流程倦炒，分為三項(xiàng)表單步驟：填寫銀行卡號显沈、填寫其他驗(yàn)證信息、支付成功逢唤。但在用戶填完卡號和其他驗(yàn)證信息后拉讯，經(jīng)常會(huì)發(fā)現(xiàn)付款額超出每日限額，以前的流程是鳖藕，用戶中斷付款流程魔慷，不得不新打開一個(gè)網(wǎng)頁，招行主頁→網(wǎng)上個(gè)人銀行登錄→選擇一卡通（輸一卡通卡號著恩、查詢密碼院尔、附加碼）登錄后→網(wǎng)上支付→網(wǎng)上支付額度管理調(diào)整額度，然后再次重新支付喉誊，使用戶在兩個(gè)操作流程中切換邀摆，讓用戶各種折騰。而改版后的設(shè)計(jì)裹驰，可謂十分貼心隧熙，給予信息提示的同時(shí)，用戶可在當(dāng)前流程設(shè)置限額幻林，避免了付款流程的中斷贞盯，同時(shí)大大節(jié)省了用戶的操作成本音念。

6.提供幫助

為了用戶快地填寫表單，一般在難以理解的表單項(xiàng)增加幫助信息躏敢，引導(dǎo)用戶成功填表闷愤。幫助信息，提示用戶應(yīng)該如何填寫件余，常見的幫助讥脐，一般在標(biāo)簽或者輸入框旁提供幫助文字，交互方式也有一直展現(xiàn)（即一直出現(xiàn)在輸入框右側(cè)啼器、下方或輸入框內(nèi)）旬渠、即時(shí)幫助（即激活輸入框時(shí)，幫助文字自動(dòng)出現(xiàn)）端壳、用戶激活的即時(shí)幫助（即幫助信息默認(rèn)不顯示告丢、用戶鼠標(biāo)懸浮觸發(fā)幫助圖標(biāo)來顯示幫助）、用戶激活的區(qū)域幫助（將表單所有的幫助信息統(tǒng)一放在一個(gè)位置）等多種方式损谦。其實(shí)可以考慮更多的方式來更好地幫助用戶岖免，例如經(jīng)常見到的信用卡有效期填寫，當(dāng)用戶激活輸入框時(shí)照捡，右側(cè)出現(xiàn)可視化的幫助信息颅湘，更簡潔直觀，更好理解栗精。

7.智能默認(rèn)

網(wǎng)絡(luò)表單中有很多地方能利用智能默認(rèn)減少必要的選擇和輸入次數(shù)闯参，加速表單完成過程。一般通過恰當(dāng)設(shè)置滿足大多數(shù)人需要的默認(rèn)選擇和數(shù)值术羔，推送默認(rèn)每個(gè)人都相同赢赊。還有個(gè)性化默認(rèn)方式，它與表單對象相關(guān)级历。

如京東購買的訂單信息，智能默認(rèn)與個(gè)人相關(guān)叭披，不需要表單輸入寥殖，默認(rèn)之前的收貨地址信息、支付配送方式涩蜘、發(fā)票信息等嚼贡，符合用戶的需求習(xí)慣，同時(shí)避免了重復(fù)輸入的成本同诫。

8.即時(shí)反饋驗(yàn)證

雖然設(shè)計(jì)表單時(shí)粤策，保證表單的內(nèi)容結(jié)構(gòu)清晰大猛，提供有意義的輸入幫助亡脑，但總有些答案不止一個(gè)猴伶。此時(shí)灰殴，直接反饋有助于再次確保人們的回答有效，提供即時(shí)校驗(yàn)柔吼。即時(shí)驗(yàn)證分為多類反饋：確認(rèn)輸入合適毒费、建議有效回答、核對輸入信息愈魏，通過實(shí)時(shí)更新設(shè)計(jì)以幫助用戶控制在必要的限制范圍內(nèi)觅玻。這類反饋通常發(fā)生在用戶在輸入框開始、繼續(xù)輸入或者停止輸入的時(shí)候培漏。

如在設(shè)置密碼時(shí)溪厘，要求用戶輸入字符數(shù)有限制、字符類型有限制的密碼牌柄，利用即時(shí)驗(yàn)證畸悬，不僅告訴用戶輸入的密碼是否有效，是否合格友鼻，而不是填完所有表單傻昙，提交之后，才告我密碼需要修改彩扔，同時(shí)還能說明密碼的安全程度妆档，采用高度可視化方式讓用戶衡量密碼質(zhì)量。

直接反饋不僅限于確認(rèn)所提供的答案虫碉，還能提供輸入建議贾惦。用戶在搜索時(shí)，搜索框能夠在輸入過程中自動(dòng)補(bǔ)全敦捧、提供相關(guān)聯(lián)的搜索建議须板，既可以避免用戶輸入出錯(cuò)，又可以節(jié)約用戶的拼寫時(shí)間（這一點(diǎn)在手機(jī)端更加需要）兢卵。

9.專注當(dāng)下任務(wù)

如前所述习瑰，讓用戶專注于一件任務(wù)。表單填寫是一件負(fù)擔(dān)很重的事秽荤，因此在填寫表單的時(shí)候盡可能去除不必要的干擾甜奄。要推廣告，比如淘寶的相關(guān)購買推薦也是在付款結(jié)束的完成頁面出現(xiàn)的窃款。

三课兄、表單設(shè)計(jì)技巧

1.標(biāo)簽&字段的對齊

Matteo Penzo的眼動(dòng)實(shí)驗(yàn)發(fā)現(xiàn)，頂部標(biāo)簽方式晨继，標(biāo)簽移動(dòng)到輸入框需50毫秒烟阐，比左對齊標(biāo)簽方式（500毫秒）快了10倍，比右對齊標(biāo)簽方式（240毫秒）快了5倍左右。

總之蜒茄，頂部標(biāo)簽方式唉擂，填表時(shí)間最短。但如果盡量減少垂直面積扩淀，可以考慮右對齊方式楔敌。如果希望用戶填表時(shí)認(rèn)真瀏覽標(biāo)簽，了解仔細(xì)考慮表單的每個(gè)輸入框時(shí)驻谆，可以采用左對齊方式卵凑。

雖然新的設(shè)計(jì)會(huì)在垂直方向上占用更多的空間，但是標(biāo)簽和字段的匹配會(huì)讓整個(gè)界面在視覺上更加易用清晰胜臊。為了讓用戶在輸入的時(shí)候看得更清楚勺卢，成對的字段和標(biāo)簽會(huì)更加靠近，兩個(gè)不同的組之間的間隙會(huì)更大象对。無需左右掃視之后黑忱，用戶可以更加順暢地填寫表單。

2.設(shè)置默認(rèn)值

3.預(yù)填寫相關(guān)字段

許多記錄的相關(guān)頁面會(huì)根據(jù)“發(fā)布者”來執(zhí)行一些預(yù)制的操作勒魔，比如創(chuàng)建新的任務(wù)和事件（我們在淘寶下單的時(shí)候甫煞，系統(tǒng)會(huì)幫你填寫預(yù)制的默認(rèn)收件地址、收件人和聯(lián)系電話冠绢，這種機(jī)制與之類似）抚吠。

4.步驟化

當(dāng)表單所需信息較多或者所填信息有前后依賴性時(shí)，合理地拆分步驟重新組織內(nèi)容會(huì)減輕用戶填寫的心理壓力并專注于當(dāng)下表單弟胀，與之相對應(yīng)的是需要設(shè)計(jì)清晰的引導(dǎo)線讓用戶明白自己目前所處的步驟楷力。