關(guān)于表單設(shè)計(jì)的知識(shí)點(diǎn)，這篇總結(jié)相稱周全！

王M爭(zhēng)：表單是我們比較常見的一個(gè)信息錄入工具。糟糕的表單設(shè)計(jì)會(huì)帶來(lái)令用戶抓狂的交互體驗(yàn)，極大的影響用戶信息錄入的服從。這篇文章我就來(lái)和大家梳理一下關(guān)于表單設(shè)計(jì)的知識(shí)點(diǎn)。

表單的構(gòu)成

常見表單是由多個(gè)列表項(xiàng)構(gòu)成的。而每一個(gè)列表項(xiàng)都有最基本的標(biāo)簽（題目）和輸入框。顧名思義，標(biāo)簽是用來(lái)告訴用戶這個(gè)列表項(xiàng)是什么；輸入框是供用戶輸入用的。

標(biāo)簽根據(jù)所處的位置可以分為

• 左標(biāo)簽
• 頂部標(biāo)簽
• 行內(nèi)標(biāo)簽

1. 左標(biāo)簽

左標(biāo)簽?zāi)壳皝?lái)說(shuō)是最常見的一種標(biāo)簽樣式，但是這并不意味著我們可以無(wú)所顧慮的去使用。以手機(jī)端為例，手機(jī)端屏幕尺寸有限，左標(biāo)簽會(huì)占有屏幕較大的空間，那么右邊的輸入框就可能無(wú)法展示完備的信息。

例如，假如你的郵箱地址過長(zhǎng)就會(huì)造成信息的不完全展示，這對(duì)用戶體驗(yàn)來(lái)說(shuō)是致命的。由于用戶一旦輸入的信息很長(zhǎng)，他們?cè)诖_認(rèn)提交之前一定會(huì)對(duì)所輸入的內(nèi)容進(jìn)行審核確認(rèn)，假如連完備的內(nèi)容都無(wú)法獲知，用戶根本不會(huì)進(jìn)行下一步操作，這就造成來(lái)操作流程的停止。所以我們?cè)谑褂米髽?biāo)簽的時(shí)候肯定要考慮輸入內(nèi)容的長(zhǎng)短。

2. 頂部標(biāo)簽

頂部標(biāo)簽就是指標(biāo)簽位于輸入框上方，如許輸入框就可以獨(dú)占整個(gè)網(wǎng)頁(yè)，信息可以得到更完全的展示。與左標(biāo)簽相比，頂部標(biāo)簽可以給輸入框騰出充足的空間。

但是這種的布局體例也有自身的瑕玷，那就是之前一屏就可以展示的內(nèi)容，用戶如今必要滾屏才可以看完。

3. 行內(nèi)標(biāo)簽

行內(nèi)標(biāo)簽的樣式看起來(lái)很適合手機(jī)端的表單設(shè)計(jì)，由于它可以極大的節(jié)省網(wǎng)頁(yè)空間。

但是一旦用戶點(diǎn)擊切換到輸入狀況以后，用戶就會(huì)看不到這些標(biāo)簽了。假如統(tǒng)一網(wǎng)頁(yè)中表單項(xiàng)目許多（超過5個(gè)），用戶填寫過程中可能會(huì)忘掉之前的填寫的項(xiàng)目是什么。此外列表項(xiàng)過多，用戶在填寫的時(shí)候中很容易出現(xiàn)串行，把家庭住址填到卒業(yè)院校也是可能出現(xiàn)的情況。更緊張的是，用戶由于無(wú)法看到標(biāo)簽，這類的錯(cuò)誤是無(wú)法檢查出來(lái)的。

為了解決這個(gè)題目，我們可以在行內(nèi)標(biāo)簽前加一個(gè)圖標(biāo)來(lái)標(biāo)識(shí)這個(gè)列表項(xiàng)，圖標(biāo)所占有的空間不會(huì)太大，而且會(huì)增長(zhǎng)網(wǎng)頁(yè)的美觀性。

當(dāng)表單項(xiàng)目過多時(shí)我們要進(jìn)行整合分組來(lái)提拔內(nèi)容的可讀性。下圖中右表格將15個(gè)字段分成3組。同樣數(shù)量的內(nèi)容，但用戶的印象卻大不雷同。

提拔用戶信息錄入服從

好的用戶體驗(yàn)應(yīng)該盡可能的簡(jiǎn)化操作步驟，傳統(tǒng)的手動(dòng)輸入模式費(fèi)時(shí)辛苦，對(duì)用戶來(lái)說(shuō)不是一種友愛的體驗(yàn)。我們應(yīng)該思考如何給用戶減負(fù)。

控件的應(yīng)用可以很好的幫助用戶進(jìn)行信息的快速錄入。一樣平常來(lái)說(shuō)，表單中的控件一樣平常有下拉列表，switch開關(guān)，單選按鈕，多選按鈕，滑塊等。

1. 滑塊

這里我們重要來(lái)說(shuō)經(jīng)常被忽視的滑塊，滑塊適用于正確度不是很高的數(shù)據(jù)錄入，例如你要去預(yù)定一個(gè)房間，其中必要你輸入你所期望的最低價(jià)格和最高價(jià)格。這個(gè)時(shí)候我們可以使用滑塊來(lái)代替?zhèn)鹘y(tǒng)的手動(dòng)打字輸入，我們都知道滑塊無(wú)法做到對(duì)信息的正確錄入，所以在這里滑塊默認(rèn)最小單位是50，你假如要求最低180，最高720這里是無(wú)法實(shí)現(xiàn)的。

控件的使用的確可以極大提拔了用戶的錄入服從，但是用戶畢竟照舊必要本身去「輸入」。其實(shí)我們也可以給用戶提供一些默認(rèn)值，和主動(dòng)完成讓用戶連輸入這一步都免了。

2. 默認(rèn)值

假如你確定對(duì)用戶充足的了解，在用戶進(jìn)行信息錄入的時(shí)候我們可以提供合理的默認(rèn)值。由于對(duì)于用戶來(lái)說(shuō)，填寫信息永久都不是一件風(fēng)趣的事情，合理的默認(rèn)值可以節(jié)省用戶的操作時(shí)間。

接下來(lái)說(shuō)一個(gè)反面案例。

這是我們公司的報(bào)銷表單，其中有一項(xiàng)是項(xiàng)目號(hào)，這里體系沒有給提供默認(rèn)值。其實(shí)體系可以根據(jù)你所在的項(xiàng)目組回顯出項(xiàng)目編號(hào)，但是這里并沒有。這在我看來(lái)是特別很是反人類的，由于項(xiàng)目號(hào)是一串漢字和數(shù)字組合，一樣平常我們很少會(huì)記。我們碰到這種情況一樣平常是返回上一步，查看項(xiàng)目編號(hào)，拿手機(jī)拍下項(xiàng)目編號(hào)再回來(lái)填寫，費(fèi)時(shí)辛苦。

3. 主動(dòng)完成

主動(dòng)完成功能也可以來(lái)降低用戶的操作負(fù)擔(dān)。當(dāng)用戶在文本框里輸入時(shí)，體系猜測(cè)可能的答案，表現(xiàn)可選列表。

用戶也會(huì)犯錯(cuò)

理想狀況下，用戶填寫完表單，然后點(diǎn)擊提交按鈕，體系表現(xiàn)提交成功。但是實(shí)際情況卻是我們?cè)谔顚戇^程中經(jīng)常會(huì)發(fā)生錯(cuò)誤，那么如何給用戶報(bào)告錯(cuò)誤是必要我們細(xì)心研究的。

目前來(lái)說(shuō)，我們經(jīng)?？吹降囊粋€(gè)報(bào)錯(cuò)提醒的樣式是彈出框。在我看來(lái)，彈出框并不是一個(gè)好的選擇。由于用戶假如要進(jìn)行修改，就必須關(guān)閉彈出框，那么錯(cuò)誤信息用戶就看不到了。假如用戶錯(cuò)誤的項(xiàng)目比較多，那么用戶就必要花肯定的時(shí)間去記住這些錯(cuò)誤，然后再來(lái)改，這會(huì)增長(zhǎng)用戶的記憶負(fù)擔(dān)。

所以在我看來(lái)，逐行報(bào)錯(cuò)比籠統(tǒng)的使用彈出框給用戶報(bào)錯(cuò)要友愛的多。而且錯(cuò)誤提醒就位于你填寫錯(cuò)誤項(xiàng)目的旁邊，用戶一眼就能曉暢哪里錯(cuò)誤了，不用辛苦去找。 此外逐行報(bào)錯(cuò)會(huì)一向出現(xiàn)直到用戶修改完成，用戶可以進(jìn)行有針對(duì)性的修改。

逐行報(bào)錯(cuò)瑕玷就是移動(dòng)端受限于屏幕尺寸，錯(cuò)誤緣故原由不肯定可以得到充分的展示。

以上說(shuō)的是表單設(shè)計(jì)中如何給用戶錯(cuò)誤提醒，當(dāng)然與其亡羊補(bǔ)牢，我們不如嘗試著來(lái)幫助用戶來(lái)避免犯錯(cuò)。

表單錄入用戶經(jīng)常發(fā)生錯(cuò)誤的地方就是輸入格式，以日期為例。不同的地區(qū)對(duì)于日期錄入的格式也不一樣，2017-08-15、08.15.2017、08-15-2017等等。目前來(lái)說(shuō)一些表單實(shí)現(xiàn)了容錯(cuò)模式，許可用戶輸入不同格式或者不同類型的數(shù)字。這也降低了用戶犯錯(cuò)的幾率。

總結(jié)

表單是重要的信息錄入工具之一，也是一款產(chǎn)品用戶體驗(yàn)的重中之重。不存在完善且百搭的表單樣式，不同的產(chǎn)品在進(jìn)行表單設(shè)計(jì)時(shí)有不同的出發(fā)點(diǎn)和思路。以上就是我的一些總結(jié)，盼望這篇文章可以給你帶來(lái)幫助。

迎接關(guān)注作者的微信公眾號(hào)：「王M爭(zhēng)」

「專業(yè)干貨！如何設(shè)計(jì)高效好用的表單」

• 《表單經(jīng)典原則是錯(cuò)的？來(lái)看這5個(gè)表單設(shè)計(jì)新規(guī)則》
• 《手機(jī)端表格設(shè)計(jì)：我整頓了一套循規(guī)蹈矩的處理方法》
• 《用3個(gè)案例，讓你學(xué)會(huì)移動(dòng)端的長(zhǎng)表單設(shè)計(jì)》
• 《更好的表單設(shè)計(jì)，從這6個(gè)設(shè)計(jì)策略開始》
• 《16個(gè)好處告訴你，為什么表單設(shè)計(jì)應(yīng)該用這個(gè)方法？》