表單是一種常見(jiàn)的信息輸入工具。糟糕的表單設(shè)計(jì)帶來(lái)了令用戶瘋狂的交互式體驗(yàn)，極大地影響了用戶信息輸入的效率。我將在本文中闡述有關(guān)表單設(shè)計(jì)的知識(shí)。

表格構(gòu)成

常見(jiàn)表單由多個(gè)列表項(xiàng)組成。每個(gè)列表項(xiàng)都有最基本的標(biāo)簽（標(biāo)題）和輸入框。顧名思義，標(biāo)簽用于告訴用戶列表項(xiàng)是什么;輸入框用于用戶輸入。

標(biāo)簽可以根據(jù)其位置進(jìn)行劃分。

左標(biāo)簽

頂級(jí)標(biāo)簽

內(nèi)聯(lián)標(biāo)簽

1.左標(biāo)簽

左側(cè)標(biāo)簽是目前最常見(jiàn)的標(biāo)簽類型，但這并不意味著我們可以毫無(wú)顧慮地使用它。以手機(jī)為例，手機(jī)屏幕尺寸有限，左側(cè)標(biāo)簽占據(jù)屏幕空間較大，右側(cè)輸入框可能無(wú)法顯示完整信息。

例如，如果您的電子郵件地址太長(zhǎng)，則會(huì)導(dǎo)致信息顯示不完整，這對(duì)用戶體驗(yàn)來(lái)說(shuō)是致命的。由于用戶輸入的信息很長(zhǎng)，他們肯定會(huì)在確認(rèn)提交之前檢查并確認(rèn)輸入。如果未知完整內(nèi)容，則用戶將不會(huì)繼續(xù)執(zhí)行下一步驟，這將導(dǎo)致操作過(guò)程。中斷。因此，在使用左側(cè)選項(xiàng)卡時(shí)，我們必須考慮輸入的長(zhǎng)度。

2.頂級(jí)標(biāo)簽

頂部標(biāo)簽表示標(biāo)簽位于輸入框上方，因此輸入框可以獨(dú)占整個(gè)頁(yè)面，并且可以更全面地顯示信息。與左側(cè)標(biāo)簽相比，頂部標(biāo)簽為輸入框騰出空間。

但是，這種布局方法也有其自身的缺點(diǎn)，即可以在前一個(gè)屏幕上顯示的內(nèi)容，用戶現(xiàn)在需要滾動(dòng)才能完成閱讀。

3.內(nèi)聯(lián)標(biāo)簽

內(nèi)聯(lián)標(biāo)簽的樣式看起來(lái)非常適合移動(dòng)表單設(shè)計(jì)，因?yàn)樗梢怨?jié)省大量頁(yè)面空間。

但是，一旦用戶單擊以切換到輸入狀態(tài)，用戶將看不到這些標(biāo)記。如果在同一頁(yè)面上有許多表單項(xiàng)（超過(guò)5個(gè)），則用戶可能忘記在用戶填寫之前填寫的內(nèi)容。此外，列表項(xiàng)太多，用戶在填寫時(shí)容易序列化。也可以填寫研究生院的家庭住址。更重要的是，由于用戶無(wú)法看到標(biāo)簽，因此無(wú)法檢查此類錯(cuò)誤。

為了解決這個(gè)問(wèn)題，我們可以在內(nèi)聯(lián)標(biāo)簽前面添加一個(gè)圖標(biāo)來(lái)標(biāo)識(shí)列表項(xiàng)。圖標(biāo)占用的空間不是太大，它會(huì)增加頁(yè)面的美感。

當(dāng)表單項(xiàng)太多時(shí)，我們需要集成組以提高內(nèi)容的可讀性。下圖中的右表將15個(gè)字段分為3組。相同數(shù)量的內(nèi)容，但用戶的印象是非常不同的。

提高用戶信息輸入效率

良好的用戶體驗(yàn)應(yīng)盡可能簡(jiǎn)化步驟。傳統(tǒng)的手動(dòng)輸入模式耗時(shí)且勞動(dòng)強(qiáng)度大，并且對(duì)用戶來(lái)說(shuō)不是友好的體驗(yàn)。我們應(yīng)該考慮如何減輕用戶的負(fù)擔(dān)。

控件的應(yīng)用可以幫助用戶快速輸入信息。通常，表單中的控件通常具有下拉列表，開關(guān)開關(guān)，單選按鈕，多選按鈕，滑塊等。

1.滑塊

在這里，我們主要討論經(jīng)常被忽視的滑塊?；瑝K適用于精度非常低的數(shù)據(jù)輸入。例如，您必須預(yù)訂房間，這需要您輸入最低價(jià)格和最高價(jià)格。這時(shí)我們可以使用滑塊代替?zhèn)鹘y(tǒng)的手動(dòng)輸入輸入。我們都知道滑塊無(wú)法準(zhǔn)確輸入信息，因此此處滑塊的默認(rèn)最小單位為50.如果要求最小值為180，則最高720為此處。無(wú)法實(shí)現(xiàn)。

控件的使用可以極大地提高用戶的輸入效率，但用戶仍然需要自己“輸入”。實(shí)際上，我們還可以為用戶提供一些默認(rèn)值，并自動(dòng)完成用戶輸入此步驟是免費(fèi)的。

2.默認(rèn)值

如果您確定您對(duì)用戶有足夠的了解，我們可以在用戶輸入信息時(shí)提供合理的默認(rèn)值。因?yàn)閷?duì)于用戶而言，填寫信息絕不是一件有趣的事情，合理的默認(rèn)值可以節(jié)省用戶的操作時(shí)間。

接下來(lái)，我將討論一個(gè)否定的案例。

這是我們公司的報(bào)銷表格，其中一個(gè)是項(xiàng)目編號(hào)，系統(tǒng)不提供默認(rèn)值。實(shí)際上，系統(tǒng)可以根據(jù)您所在的項(xiàng)目團(tuán)隊(duì)顯示項(xiàng)目編號(hào)，但不在此處。在我看來(lái)，這是非常反人類的，因?yàn)轫?xiàng)目編號(hào)是一串漢字和數(shù)字，我們很少記住它。當(dāng)我們遇到這種情況時(shí)，我們通常會(huì)回到上一步，檢查項(xiàng)目編號(hào)，拿走電話號(hào)碼然后再回來(lái)填寫，這既耗時(shí)又費(fèi)力。

3.自動(dòng)填充

自動(dòng)完成功能還可以減少用戶的操作負(fù)擔(dān)。當(dāng)用戶在文本框中輸入時(shí)，系統(tǒng)會(huì)猜出可能的答案并顯示可選列表。

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

理想情況下，用戶填寫表單并單擊“提交”按鈕。系統(tǒng)成功顯示提交。但實(shí)際情況是，我們經(jīng)常在填寫過(guò)程中犯錯(cuò)誤，因此如何向用戶報(bào)告錯(cuò)誤是一個(gè)需要仔細(xì)研究的問(wèn)題。

現(xiàn)在，我們經(jīng)常看到的錯(cuò)誤消息的樣式是彈出窗口。在我看來(lái)，彈出窗口不是一個(gè)好選擇。因?yàn)槿绻脩粝胍M(jìn)行更改，則必須關(guān)閉彈出框，否則用戶將無(wú)法看到錯(cuò)誤消息。如果用戶有更多錯(cuò)誤的項(xiàng)目，那么用戶將需要花一些時(shí)間來(lái)記住這些錯(cuò)誤，然后更改它們，這將增加用戶的內(nèi)存負(fù)擔(dān)。

因此，在我看來(lái)，逐行錯(cuò)誤比一般使用彈出窗口向用戶報(bào)告錯(cuò)誤要友好得多。并且錯(cuò)誤消息位于您填寫的錯(cuò)誤項(xiàng)目旁邊，用戶可以一目了然地了解錯(cuò)誤，無(wú)需找到它。此外，逐行錯(cuò)誤將繼續(xù)出現(xiàn)，直到用戶的修改完成，并且用戶可以進(jìn)行有針對(duì)性的修改。

漸進(jìn)式錯(cuò)誤報(bào)告的缺點(diǎn)是移動(dòng)終端受到屏幕尺寸的限制，并且可能無(wú)法完全顯示錯(cuò)誤的原因。

以上是如何在表單設(shè)計(jì)中給用戶一個(gè)錯(cuò)誤的提示。當(dāng)然，我們應(yīng)該盡力幫助用戶避免犯錯(cuò)，而不是彌補(bǔ)它。

表單輸入用戶經(jīng)常出錯(cuò)的地方是輸入格式，以日期為例。不同的區(qū)域具有不同的日期條目格式，2017-08-15,08.15.2017,08-15-2017等。目前，一些表單實(shí)現(xiàn)了容錯(cuò)模式，允許用戶輸入不同的格式或不同類型的數(shù)字。這也減少了用戶犯錯(cuò)誤的可能性。

總結(jié)

表單是主要的信息輸入工具之一，也是產(chǎn)品用戶體驗(yàn)的首要任務(wù)。沒(méi)有完美和多樣化的形式風(fēng)格，不同的產(chǎn)品在設(shè)計(jì)形式時(shí)有不同的起點(diǎn)和想法。以上是我的一些總結(jié)，希望本文能為您提供幫助。

« 企業(yè)網(wǎng)站維護(hù)的主要工作 | 微博客測(cè)試?yán)谛鹿δ?。黑的雙方的微博客互相看不見(jiàn) »