好久不見，由于懶惰好久沒有翻譯文章了，這次翻譯一篇關(guān)于表單的很基礎(chǔ)的文章。有些例子較牽強(qiáng)，大家可以有選擇性地看哦~
表單對(duì)于企業(yè)和個(gè)人同樣至關(guān)重要，當(dāng)涉及到數(shù)據(jù)收集時(shí)，我們大多數(shù)情況下會(huì)采用表單(或許是因?yàn)樵诨ヂ?lián)網(wǎng)繁榮之前我們就已經(jīng)在線下使用了很久的表單)。因此，創(chuàng)建一個(gè)用戶友好型表單對(duì)表單的填寫效率至關(guān)重要。
表單解析
表單的目的、內(nèi)容、大小雖然各不相同，但是有一些基本的元素助我們輕松地填寫。
Amazon創(chuàng)建賬戶表單解析
(1)標(biāo)題
這個(gè)元素幫助用戶引導(dǎo)完成表單填寫的整個(gè)過程，尤其當(dāng)你收集的數(shù)據(jù)不止有一個(gè)標(biāo)題的時(shí)候，它特別有用。例如：個(gè)人資料、職業(yè)詳情、財(cái)務(wù)明細(xì)。
(2)標(biāo)簽
標(biāo)簽告訴用戶在任何特定的輸入?yún)^(qū)域期望他們填寫什么內(nèi)容。
(3)占位符
占位符是對(duì)標(biāo)簽進(jìn)行額外的信息描述。
(4)錯(cuò)誤信息提示
錯(cuò)誤信息提示給予用戶錯(cuò)誤反饋，提醒用戶為什么填錯(cuò)了。
(5)動(dòng)作按鈕
動(dòng)作按鈕是在表單的結(jié)尾，有個(gè)確認(rèn)提交的動(dòng)作控件。
表單狀態(tài)
基本上，表單在用戶的交互過程中需要經(jīng)歷三個(gè)階段：
(1)默認(rèn)狀態(tài)
用戶在未進(jìn)行任何操作前表單的狀態(tài)。
(2)聚焦?fàn)顟B(tài)
這個(gè)狀態(tài)強(qiáng)調(diào)用戶正在填寫的區(qū)域，幫助用戶聚焦和減少反復(fù)掃描屏幕的時(shí)間。
(3)反饋狀態(tài)
反饋狀態(tài)是指用戶收到的反饋時(shí)的頁面狀態(tài)(大多數(shù)是指錯(cuò)誤信息反饋)。有時(shí)候，這個(gè)狀態(tài)出現(xiàn)在用戶在完成了一個(gè)輸入框的錄入后把焦點(diǎn)移動(dòng)到下個(gè)輸入框。當(dāng)然了，如果數(shù)據(jù)不能得到立即驗(yàn)證的話，就要等到用戶點(diǎn)擊提交按鈕后再給予反饋提示。
Amazon創(chuàng)建賬戶表單的“默認(rèn)、聚焦、反饋”頁面狀態(tài)
實(shí)踐
(1)保持簡(jiǎn)潔
讓你的表單保持簡(jiǎn)短精煉，只保留最有必要的數(shù)據(jù)，避免以驗(yàn)證的名義讓用戶重復(fù)輸入，例如不要重復(fù)密碼字段，取而代之的是要讓用戶直接看到他們輸入的密碼。
(2)使用及時(shí)驗(yàn)證
當(dāng)給予用戶輸入進(jìn)行報(bào)錯(cuò)時(shí)，最好將反饋定位到具體位置。
Facebook和Amazon采用了兩種不同的驗(yàn)證反饋方式
(3)將相近的字段打組
將相近的字段打組和按標(biāo)準(zhǔn)序列排序是非常重要的。這樣的話可以幫助用戶減少認(rèn)知負(fù)荷和注意力消耗。
付款頁面相近的功能區(qū)域被適當(dāng)?shù)胤纸M
(3)將標(biāo)簽左對(duì)齊
要將標(biāo)簽放置到輸入框上面(像上面所解析的Amazon的表單一樣)。不要把占位符文字作為輸入框的標(biāo)簽，那樣的話用戶輸入完成后將看不到標(biāo)簽，用戶將很難對(duì)已輸入的內(nèi)容做最終的核對(duì)，會(huì)讓他們思考很多。
始終將標(biāo)簽放置在輸入框上面并左對(duì)齊，有一個(gè)很全面的研究報(bào)告來說明這是高效率的做法：https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Flutterwave’sRave的登錄頁面，輸入?yún)^(qū)域的尺寸與預(yù)期的輸入字段的長(zhǎng)度比例一致。
payporte的輸入?yún)^(qū)域與預(yù)期的輸入字段的長(zhǎng)度比例不匹配
(6)CTA(calltoaction)按鈕
在表單的末尾通常會(huì)有個(gè)確認(rèn)按鈕或者下一步按鈕，在有些場(chǎng)景下，必須有一個(gè)以上的按鈕。要強(qiáng)調(diào)主要的按鈕，弱化次要按鈕。
Amazon的主要次要按鈕處理的很好
當(dāng)運(yùn)用模態(tài)彈窗進(jìn)行信息收集時(shí)(表單在模態(tài)彈窗上)，那么次要按鈕有時(shí)候就是關(guān)閉按鈕，另一種弱化它的方法就是使用Xicon代替關(guān)閉按鈕，如下所示。
Medium的登錄模態(tài)彈窗使用Xicon來代表關(guān)閉按鈕
(7)搜索區(qū)域
不要隱藏你的搜索框，特別是你的網(wǎng)站內(nèi)有大量?jī)?nèi)容時(shí)，搜索或許是最好的選擇。
Amazon的的搜索框特別的顯眼
當(dāng)用戶執(zhí)行了搜索操作后并顯示了搜索結(jié)果，不要立即清除搜索框內(nèi)的內(nèi)容，以便讓可以用戶很容易地去回顧他起初所搜索的內(nèi)容。
Medium沒有清除搜索后的輸入內(nèi)容
(8)清晰
給用戶傳達(dá)清楚的信息，給予他們所預(yù)期的，不要模棱兩可。沒有人喜歡填寫表單，沒有人愿意填寫兩遍。
Cowrywise的標(biāo)簽內(nèi)容非常的清晰，甚至按鈕的文字都描述的很好。
這里所有的例子既不是為了打廣告，也不是為了鄙視某個(gè)產(chǎn)品的設(shè)計(jì)。這僅用于學(xué)習(xí)。
原文作者：MomohSilm
譯者：孫夢(mèng)超，交互設(shè)計(jì)師
本文由@孫夢(mèng)超授權(quán)發(fā)布，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Pexels，基于CC0協(xié)議
重慶分公司
重慶分公司
