移動表單的最佳實(shí)踐

此文翻譯自smshingmagazine,作者：Nick Babich，翻譯：揚(yáng)揚(yáng)離?點(diǎn)擊查看原文

特此聲明，如有侵權(quán)，請聯(lián)系刪除

快速摘要：用戶在填表單的時候很猶豫，所以我們作為設(shè)計師的目的就是使填表單的流程盡可能簡潔。Nick分享了一些能讓你有效設(shè)計表單的技巧。

表單是所有移動交互的關(guān)鍵，它處于用戶和用戶所需要達(dá)到目的之間。每天我們使用表單進(jìn)行基礎(chǔ)的在線活動?；貞浺幌履阕詈笠淮尉W(wǎng)上買票，訂酒店房間或者網(wǎng)購，大部分這些交互都包括一步填寫表單步驟。

表單只是達(dá)到目的的一種手段。用戶應(yīng)該能夠快速完成它們而不會產(chǎn)生混淆。在本文，你將學(xué)到一些幫助你有效設(shè)計表單的技巧。

什么構(gòu)成有效表單

每個表單最優(yōu)先的目標(biāo)是完成。兩個因素對完成率有主要影響：

1、對復(fù)雜度的感知

用戶看到表單第一件事兒就是評估需要花多少時間去完成它。用戶通過掃描的方式評估。感知在評估過程中起到一個至關(guān)重要的作用。一個表單看起來越復(fù)雜，用戶放棄填寫的可能性就越大。

2、交互成本

交互成本是用戶為了達(dá)到目標(biāo)而與界面交互的努力（包括認(rèn)知和物理）的總和。交互成本與表單可用性直接相關(guān)。用戶完成表單所需的工作量越多，表單的可用性就越低。高交互成本可能是難以輸入的數(shù)據(jù)的結(jié)果，可能是無法理解某些問題的含義，或者對錯誤信息的混淆。

表單的組成部分

一個典型的表單包括一下五個部分。

1、輸入字段

這包括文字字段，密碼字段，復(fù)選框，單選按鈕，滑塊以及用戶輸入的任何其他字段。

2、字段標(biāo)簽

這告訴用戶相應(yīng)輸入字段的含義。

3、結(jié)構(gòu)

這包括字段的順序，表單在頁面上的外觀以及不同字段之間的邏輯連接。

4、操作按鈕

表單至少有一個操作按鈕（觸發(fā)數(shù)據(jù)提交的按鈕）。

5、反饋

反饋通知用戶操作的結(jié)果。反饋可以是積極的（例如，表明表單已經(jīng)成功提交）或者是消極的（例如，您提供的數(shù)字不正確）。

本文介紹了與結(jié)構(gòu)、輸入字段、標(biāo)簽、操作按鈕和驗證相關(guān)的許多方面。本文中提到的大多數(shù)觀點(diǎn)都有正反案例，所有這些案例都是使用Adobe XD設(shè)計的。

輸入字段

在表單設(shè)計方面，設(shè)計師最重要的是盡量減少打字的需要。減少投入努力至關(guān)重要。設(shè)計師可以通過專注于表單字段設(shè)計來實(shí)現(xiàn)這一目標(biāo)。

最小化輸入字段總數(shù)

您要求用戶填寫的每一個表單都需要付出一些努力。填寫表單付出的努力越多，用戶完成表單填寫的可能性就越小。所以，表單設(shè)計的基本原則就是越短越好—去掉所有不必要的字段填寫。

Baymard Institute分析了結(jié)賬表格，發(fā)現(xiàn)結(jié)賬過程太長或太復(fù)雜是結(jié)賬時放棄填寫的主要原因之一。該研究發(fā)現(xiàn)結(jié)賬平均包含近15個表單字段。大多數(shù)在線服務(wù)可以將默認(rèn)顯示的字段數(shù)減少20%到60%。

很多設(shè)計師很熟悉“少即是多”原則，但是，他們?nèi)匀粫岢銎渌麊栴}，試圖收集有關(guān)用戶的更多數(shù)據(jù)。在初始注冊期間收集有關(guān)用戶的更多數(shù)據(jù)可能很誘人，但是請拒絕這種誘惑。試著從這方面考慮，隨著您添加的每一個額外字段，您將增加失去潛在用戶的機(jī)會，那您所獲的信息值得失去新的用戶嗎？請記住，只要您收集到用戶的聯(lián)系方式，您就可以隨時跟進(jìn)，收集更多數(shù)據(jù)。

清楚的區(qū)分所有可選字段

在優(yōu)化可選字段之前，請先問問自己是否確實(shí)需要表單中包含它們。想想你真正需要什么信息，而不是你想要什么。理想情況下，表單中可選字段的數(shù)量應(yīng)為零。

如果在頭腦風(fēng)暴會議之后，您仍希望在表單中包含一些可選問題，請向用戶明確說明這些字段是可選的：

標(biāo)記可選字段而不是強(qiáng)制字段

如果您盡可能少地詢問，那么您表單中的絕大多數(shù)字段都是強(qiáng)制性的。所以，只需標(biāo)記少數(shù)輸入字段。例如，如果6個輸入字段中5個都是強(qiáng)制性的，那么將一個字段標(biāo)記為可選字段是比較合理的。

使用可選標(biāo)簽表示可選字段

避免使用星號表示可選字段，并非所有用戶都會將星號與可選字段相關(guān)聯(lián)，并且某些用戶會對其含義感到困惑（星號通常用于表示必填字段）。

尺寸合適

如果可能，使用字段長度作為提示。輸入字段的長度應(yīng)按照字段中預(yù)期的信息量的長度設(shè)計。該字段的大小將充當(dāng)視覺約束—用戶只需查看該字段長度即可知道需要輸入多少文本。通常，諸如區(qū)號和門牌號應(yīng)短于街道地址的字段。

激活正在輸入的字段

自動聚焦在表單的第一個輸入字段，自動聚焦字段位用戶提供指示和起點(diǎn)，一邊它們能快速開始填寫表單。通過這樣做，你可以減少交互成本—為用戶節(jié)省一個不必要的點(diǎn)擊。

突出聚焦激活的輸入字段。聚焦字段本身應(yīng)該是非常清晰的—用戶應(yīng)該能夠一目了然地了解重點(diǎn)?？梢允敲柽呥吙蚧蛘呤菫檩斎肟蛱砑雨幱?。

不要要求用戶重復(fù)輸入他們的郵箱地址

電子郵件地址的額外字段在產(chǎn)品開發(fā)人員中如此受歡迎的原因顯而易見：每個公司都希望盡量減少硬彈跳的風(fēng)險（無效電子郵件導(dǎo)致的無法交付）。很遺憾，遵循此方法并不能保證您獲得有效的地址。用戶通常從一個字段復(fù)制粘貼他們的地址到另一個字段。?

提供“顯示密碼”選項

復(fù)制密碼輸入字段是產(chǎn)品設(shè)計的另一個常見錯誤。設(shè)計師遵循此方法因為他們認(rèn)為這樣做可以防止用戶輸入錯誤密碼。實(shí)際上，重復(fù)輸入密碼字段不僅會增加交互成本，還不能保證用戶不出錯。因為用戶沒有看到他們在該字段輸入的內(nèi)容，他們可能會犯同樣的錯誤兩次（在兩個字段中），并且當(dāng)它們嘗試使用密碼登錄時會遇到問題。就如?Jakob Nielsen總結(jié)：

當(dāng)用戶輸入密碼時，可用性會受到影響，他們獲得的唯一反饋就是一排符號。通常，屏蔽密碼甚至不會增加安全性，但由于登錄失敗，它確實(shí)會使您的業(yè)務(wù)付出代價。?

不要分割數(shù)據(jù)字段

在詢問全名、電話號碼或出生日期時，不要分割字段。分割字段迫使用戶額外點(diǎn)擊以移動到下一個字段。對于需要格式化的字段（例如電話號碼或出生日期），最好有一個單獨(dú)的字段和清晰的格式規(guī)則作為它的占位符。?

避免下拉菜單

Luke Wroblewski有句名言：下拉菜單應(yīng)該是用戶界面的最后一招。下拉框?qū)σ苿釉O(shè)備尤其不利，因為折疊的元素使得在小屏幕輸入數(shù)據(jù)的過程更加困難：在下拉框中放置選項需要兩次點(diǎn)擊并隱藏選項。

如果使用下拉框選擇選項，考慮用單選按鈕替換它。這樣使所有選項都可見，并降低交互成本—用戶可以點(diǎn)擊該項目并立即選擇。?

使用占位符和字段屏蔽

格式不確定性是表單設(shè)計中最重要的問題之一。這個問題與表單廢棄直接相關(guān)—當(dāng)用戶不確定應(yīng)該以何種格式提供數(shù)據(jù)時，他們可能快速地放棄表單。您可以做一些事情來使格式更清晰。

占位符文本

字段里的文本可以告訴用戶需要什么內(nèi)容。占位符文本對于“全名”之類的簡單字段不是必需的，但是對于需要特定格式數(shù)據(jù)的字段，它可能非常有用。例如，如果您設(shè)計了跟蹤包裹的搜索功能，那么最好提供一個實(shí)例跟蹤編號作為跟蹤編號字段的占位符。?

表單必須在占位符文本和用戶輸入的實(shí)際值之間有清晰的視覺區(qū)別，這一點(diǎn)非常重要。換句話說，占位符文本不應(yīng)該看起來像一個預(yù)設(shè)值。如果沒有清晰的視覺區(qū)別，用戶可能會認(rèn)為具有占位符的字段已經(jīng)具有值了。

字段屏蔽

字段屏蔽是一種幫助用戶格式化文本的技術(shù)。很多設(shè)計師混淆了字段屏蔽和占位符文本—它們不是一回事兒。與占位符不同（占位符基本上是靜態(tài)文本），掩碼自動格式化用戶提供的數(shù)據(jù)。在下方示例中，當(dāng)輸入電話號碼時，圓括號、空格和破折號會自動出現(xiàn)在屏幕上。屏蔽輸入還使用戶更容易驗證信息。當(dāng)一個電話號碼以塊的形式顯示時，查找和糾正一個輸入錯誤就變得更容易了。

使用配套鍵盤

移動用戶喜歡為輸入字段提供合適鍵盤的應(yīng)用程序和網(wǎng)站。這個特性使它們減少不必要的點(diǎn)擊。例如，當(dāng)用戶需要輸入信用卡卡號時，您的應(yīng)用程序應(yīng)該只展示撥號鍵盤。在整個應(yīng)用程序中一致地實(shí)現(xiàn)鍵盤匹配是非常重要的（應(yīng)用程序中所有表單都應(yīng)該具有此功能）。

設(shè)置HTML輸入類型以顯示匹配的鍵盤。七種與表單設(shè)計相關(guān)的輸入類型：

input type="text"?顯示移動設(shè)備的普通鍵盤

input type="email"?顯示移動設(shè)備的普通鍵盤和“@”“.com”

input type="tel"?顯示0到9的小鍵盤

input type="number"?顯示帶有數(shù)字和符號的鍵盤

input type="date"?顯示移動設(shè)備的日期選擇器

input type="datetime"?顯示移動設(shè)備的日期和時間選擇器

input type="month"?顯示移動設(shè)備的月份和年份選擇器?

詢問特定范圍時使用滑塊

許多表單要求用戶給出特定范圍的值（例如，價格范圍、距離范圍等）。為了達(dá)到這個目的，不要使用兩個單獨(dú)的字段從“”到“”，而是使用一個滑塊，用戶通過拇指交互即可指定范圍。?

清晰解釋為什么要詢問敏感信息

人們越來越關(guān)注隱私和信息安全。當(dāng)用戶看到他們認(rèn)為私有的信息請求時，他們可能會想“嗯？他們?yōu)槭裁葱枰@個？”如果表單要求用戶提供敏感信息，一定要解釋為什么需要它。您可以通過在相關(guān)字段下面添加解釋文本來實(shí)現(xiàn)這一點(diǎn)。根據(jù)經(jīng)驗，解釋文本不應(yīng)該超過100個字符（此處字符是英文字符）。?

注意靜態(tài)默認(rèn)值

智能默認(rèn)值是根據(jù)系統(tǒng)擁有的關(guān)于用戶的信息計算出來的，與智能默認(rèn)值不同，靜態(tài)默認(rèn)值是對所有用戶都相同的預(yù)置值。避免靜態(tài)值除非您相信您用戶中有很大一部分，比如95%會選擇這些值，特別是對于必填字段。為什么？因為這很可能引起錯誤—用戶瀏覽很快速，他們不會花額外時間來分析所有的問題；相反，他們將直接跳過字段，以為它已經(jīng)有一個值。

保護(hù)用戶數(shù)據(jù)

Jef Raskin曾經(jīng)說過“系統(tǒng)應(yīng)該將所有用戶輸入視為神圣的”，表單也是如此。當(dāng)你在填寫網(wǎng)絡(luò)表單時，不小心刷新頁面但是數(shù)據(jù)仍然保留在字段中，這種體驗非常好。Garlic.js等工具可以幫助您在提交表單之前在本地保存表單的值。這樣，如果用戶不小心關(guān)閉了選項卡或瀏覽器，就不會丟失任何寶貴的數(shù)據(jù)。

自動化操作

如果您想讓數(shù)據(jù)輸入的過程盡可能地順暢，僅僅最小化輸入字段的數(shù)量是不夠的，您還應(yīng)該注意用戶在數(shù)據(jù)輸入方面所付出的努力。打字輸入有很高的交互成本，即使使用物理鍵盤，也很容易出錯，而且很耗時。但當(dāng)涉及到移動屏幕時，更容易出錯更耗時。更多的輸入增加了用戶出錯的幾率。盡量避免不必要的輸入，因為這會提高用戶滿意度，降低錯誤率。

通過以下幾種方式你可以達(dá)到自動化操作目的

自動完成

許多用戶在谷歌的搜索框中輸入問題時都有自動完成。谷歌向用戶提供與用戶輸入的內(nèi)容相關(guān)的建議列表。同樣的機(jī)制也可以應(yīng)用在表單設(shè)計中。例如，表單自動完成電子郵件地址。?

自動大寫

自動大寫使第一個字母自動大些。這個特點(diǎn)對于名字、街道等字段來說是極好的，但是請避免在輸入密碼時使用它。

自動更正

自動更正修改那些拼寫錯誤的單詞。對特殊的字段，如名稱、地址等關(guān)閉此功能。

自動填寫個人資料

在任何在線注冊表單中，輸入地址通常是最麻煩的部分。通過瀏覽器根據(jù)以前輸入的值填充字段，使此任務(wù)更容易。根據(jù)谷歌的研究，自動填寫幫助人們填寫表格節(jié)省了30%的的時間。

使用移動設(shè)備的本地特性來簡化數(shù)據(jù)輸入

現(xiàn)代移動設(shè)備是具有許多驚人功能的復(fù)雜設(shè)備。設(shè)計人員可以使用設(shè)備的本地特性，如攝像頭或地理位置，來簡化數(shù)據(jù)輸入的任務(wù)。

下面是一些關(guān)于如何使用傳感器和設(shè)備硬件的提示。

定位服務(wù)

可以根據(jù)用戶的地理位置數(shù)據(jù)預(yù)先選擇用戶的國家。但是由于準(zhǔn)確性問題，預(yù)填完整地址可能會有問題。Google’s Places API可以幫助解決這個問題。它同時使用地理定位和地址預(yù)填充，根據(jù)用戶的確切位置提供準(zhǔn)確的建議。

使用定位服務(wù)，可以提供智能默認(rèn)值。例如，在“查找航班”表單中，可以根據(jù)用戶地理定位將“出發(fā)地”字段預(yù)填為距離用戶最近的機(jī)場。

生物識別授權(quán)

現(xiàn)今使用文字密碼最大的問題就是大多數(shù)用戶容易忘記密碼。82%的用戶記不住密碼，5%到10%的會要求用戶重置密碼。恢復(fù)密碼是電子商務(wù)中的一個大問題。75%的用戶如果在結(jié)賬時遇到恢復(fù)密碼等問題就不會完成購買。

未來的密碼就是沒有密碼。甚至今天，移動開發(fā)者可以利用生物識別技術(shù)，用戶不需要輸入密碼，他們就能使用生物識別閱讀器進(jìn)行身份驗證—使用指紋或人臉掃描。

相機(jī)

如果表單要求用戶提供信用卡或者駕駛證詳細(xì)信息，可以通過把相機(jī)作為掃描儀簡化數(shù)據(jù)輸入過程。提供一個選項，以采取的照片卡自動填寫所有細(xì)節(jié)。

但是請記住，無論您的應(yīng)用程序填充字段有多好，都必須讓它們可供編輯。用戶應(yīng)該能夠隨時修改字段。

聲音

聲控設(shè)備，比如蘋果的HomePod、谷歌Home和亞馬遜(Amazon)的Echo等語音控制設(shè)備正在積極蠶食市場。更愿意使用語音進(jìn)行普通操作的人數(shù)顯著增加。根據(jù)ComScore的數(shù)據(jù)，到2020年，50%的搜索將是語音搜索。?

隨著用戶使用語音命令變得更加舒適和自信，語音命令將成為移動交互的一個預(yù)期功能。聲控輸入為移動端用戶提供很多優(yōu)勢，尤其是在用戶不能集中注意力在屏幕的情況下，例如，開車時。

在設(shè)計表單是，您可以提供聲控作為數(shù)據(jù)的替代方法。?

字段標(biāo)簽

編寫清晰準(zhǔn)確的標(biāo)簽

標(biāo)簽是文本，它告訴用戶在特定的輸入字段中期望從他們那里得到什么數(shù)據(jù)。編寫清晰的標(biāo)簽是使表單更容易訪問的最佳方法之一。標(biāo)簽應(yīng)該幫助用戶了解需要什么信息。

避免使用完整的句子來解釋。標(biāo)簽不是幫助文本。寫簡潔明了的標(biāo)簽（一兩句話），這樣用戶可以快速瀏覽你的表單。

將標(biāo)簽和輸入放在一起

把每個標(biāo)簽靠近輸入字段，因為眼睛會直觀地知道它們是綁定在一起的。?

不要使用漸隱的占位符文本作為標(biāo)簽?

雖然內(nèi)聯(lián)標(biāo)簽看起來不錯，并且節(jié)省了寶貴的屏幕資源，但是這些好處遠(yuǎn)遠(yuǎn)比不上顯著的可用性缺點(diǎn)，其中最關(guān)鍵的就是上下文的丟失。當(dāng)用戶開始輸入時，占位符文本消失，迫使用戶回憶相關(guān)信息。雖然對于字段少的表單來說可能不是問題，但是對于很多字段的表單，比如7到10個字段的表單，這可能是一個大問題。用戶在輸入數(shù)據(jù)后很難回憶起所有字段標(biāo)簽。毫不奇怪，用戶測試不斷顯示，表單字段中的占位符對可用性的損害常常大于幫助。

對于占位符消失的問題，有一個簡單解決方案，浮動或自適應(yīng)標(biāo)簽。?

頂部對齊標(biāo)簽

將字段標(biāo)簽放在表單的字段之上可以改進(jìn)用戶掃描表單的方式。使用眼球追蹤技術(shù)，谷歌顯示用戶在提交表單前需要更少的注視、更少的注視時間和更少的掃視。

另一個頂端對齊標(biāo)簽的優(yōu)勢是它為標(biāo)簽提供更多的空間。長標(biāo)簽和本地化版本將更容易適應(yīng)布局。后者尤其適用于小屏幕移動端。您可以讓表單字段擴(kuò)展整個屏幕的寬度，使其足夠大，以顯示用戶的整個輸入。

句子VS標(biāo)題?

大寫單詞有兩種常用方法：

標(biāo)題大小寫：大寫每一個單詞首字母，“This Is Title Case.”

句子大小寫：大寫句子首字母，“This is sentence case.”

相比標(biāo)題大小寫，標(biāo)簽使用句子大小寫有一個優(yōu)點(diǎn)：稍微更易讀，更快速。雖然短標(biāo)簽的區(qū)別可以忽略不計（“Full Name” 和 “Full name”之間就沒有太大區(qū)別），但是對于較長的標(biāo)簽，句子大小寫更好。

避免標(biāo)簽使用大寫字母

所有字母都大寫，在不涉及實(shí)質(zhì)性閱讀的上下文中（如，首字母縮寫和logo）是可以的，其他情況就要避免所有字母大寫。正如Miles Tinker在他的著作《打印的易讀性》中提到的，與小寫字體相比，全大寫字體大大降低了掃描和閱讀的速度。

布局

您現(xiàn)在知道，用戶是掃描網(wǎng)絡(luò)頁面，而不是閱讀它們。對于填寫表單也是如此，所以設(shè)計人員需要設(shè)計易于掃描的表單。允許高效地掃描對于加快表單填寫流程是至關(guān)重要的。

使用單列布局

CXL研究所的一項研究發(fā)現(xiàn)，單列表單比多列表單完成得更快。在這項研究中，測試參與者完成單列表單的平均速度比多列表單快15.4秒。

多列表單打亂了用戶的垂直動量，多列表單使視線來回曲折移動。這大大增加了眼睛注視次數(shù)，因此也增加了完成時間。此外，多列表單可能會給用戶單來不必要的問題，比如“我應(yīng)該從哪里開始？”以及“右列中的問題和左列的問題同等重要？”

在單列設(shè)計中，眼睛沿自然方向移動，從上到下，一次一行。這有助于用戶設(shè)置一個清晰的路徑。單列非常適合移動設(shè)備，因為垂直屏幕更長，垂直滾動也是移動用戶的一種自然手勢操作。

這條規(guī)則有一些例外?？梢詫⒑喍糖疫壿嬒嚓P(guān)的字段放在同一行（例如，城市和地區(qū)代碼）。?

用你的問題創(chuàng)造一個流程

提問的方式也很重要。應(yīng)該從用戶的角度邏輯地提出問題，而不是根據(jù)應(yīng)用程序或數(shù)據(jù)庫的邏輯，因為這將有助于創(chuàng)造與用戶對話的感覺。例如，如果你設(shè)計一個結(jié)賬表單并詢問諸如全名、電話號碼和信用卡等細(xì)節(jié)，那么第一個問題應(yīng)該是關(guān)于全名的。改變順序，例如，先問電話號碼而不是姓名會導(dǎo)致不適。在真實(shí)世界對話中，在問別人的名字之前問他們的電話號碼是不尋常的。

把深入的問題放到最后

當(dāng)涉及到為你想問的問題設(shè)計流程時，考慮一下優(yōu)先級。遵循先易后難原則，將深入的和個人問題放在最后。這讓用戶更容易進(jìn)入這個過程。一旦它們建立了融洽的關(guān)系，他們就更有可能回答復(fù)雜和侵入性更強(qiáng)的問題。這是有科學(xué)依據(jù)的:羅伯特?恰爾迪尼(Robert Cialdini)的一致性原則規(guī)定，當(dāng)一個人朝著某件事邁出一小步或邁出一小步時，他們會覺得更有必要完成它。

將相關(guān)字段分組在一起

格式塔原理其中一條，接近原則指出相關(guān)的元素應(yīng)該彼此接近。這個原則可以應(yīng)用于表單中的問題順序。相關(guān)性越強(qiáng)的問題，它們之間的距離就應(yīng)該越近。

設(shè)計人員可以將相關(guān)子都分組為多個部分。如果表單多于六個問題，則將相關(guān)問題按照邏輯分組。不要忘記在各個部分之間提供大量的空白，以便在視覺上區(qū)分它們。

讓長表單看起來更簡單?

如何設(shè)計一個向用戶提出大量問題的表單？當(dāng)然，你可以把所有問題放在一個屏幕里。但這降低了用戶的完成率。如果用戶沒有足夠的動力完成一個表單，那么表單的復(fù)雜度可能嚇跑他們。第一印象起著至關(guān)重要的作用。通常，表單越長或越復(fù)雜，用戶開始填充空白的可能性就越小。最小化字段的數(shù)量，這就造成了一種感覺，表單比實(shí)際短。

有兩種方法可以做到

漸進(jìn)式披露

漸進(jìn)式披露就是在適當(dāng)?shù)臅r間為用戶提供正確的信息。目標(biāo)是在適當(dāng)?shù)臅r間把合適的東西放在屏幕上

最初，只向用戶顯示幾個最重要的選項。

在用戶與表單交互時顯示表單的某些部分。

組塊

分塊需要把一個長表單拆分成幾個步驟?？梢酝ㄟ^將表單拆分成幾個步驟的方式來提高完成率。分塊還可以幫助用戶處理、理解和記憶信息。當(dāng)涉及多步驟表單時，始終使用完整性度量工具通知他們的進(jìn)度。

設(shè)計人員可以使用進(jìn)度跟蹤器（如示例所示）或者“Step # out of #”指示器來指示總共有多少步驟，并顯示用戶目前的進(jìn)度。后者對于移動表單非常有用，一問步驟指示不會占用太多空間。

操作按鈕

按鈕是一個交互元素，它引導(dǎo)用戶采取行動。

使操作按鈕具有描述性

按鈕的標(biāo)簽應(yīng)當(dāng)解釋這個標(biāo)簽的功能，用戶應(yīng)該能夠通過看到按鈕就能知道點(diǎn)擊后會發(fā)生什么。避免使用“提交”和“發(fā)送”之類的通用標(biāo)簽，而是使用描述操作的標(biāo)簽。

不要使用清除或者重置按鈕

清除或重置按鈕允許用戶清除他們表單中的數(shù)據(jù)。這些按鈕從不幫助用戶，而且經(jīng)常傷害他們。刪除用戶輸入的所有信息的風(fēng)險超過了重新開始的好處。如果用戶填寫表單時不小心按錯了按鈕，他們很可能不會重新開始。

對主按鈕和輔助按鈕使用不同的樣式

如果可能，避免輔助按鈕。但是，如果表單有兩個按鈕調(diào)用，例如，電子商務(wù)表單中的“使用優(yōu)惠券”和“提交訂單”，則確保主操作和輔助操作之間有清晰的視覺區(qū)別。通過在按鈕上添加更多的視覺權(quán)重來對主要操作進(jìn)行視覺優(yōu)先級排序。這將防止用戶點(diǎn)擊錯誤的按鈕。?

設(shè)計對手指友好的觸摸目標(biāo)

微小的觸摸目標(biāo)創(chuàng)建了一個可怕的用戶體驗，因為他們使用戶與交互對象交互變得具有挑戰(zhàn)性。設(shè)計對手指友好的觸摸目標(biāo)非常重要—更大的輸入空間和按鈕。

下圖顯示承認(rèn)手指的平均寬度約為11毫米。

根據(jù)Material Design設(shè)計原則，觸摸目標(biāo)應(yīng)至少為48*48dp。無論屏幕大小如何，這種尺寸的觸摸目標(biāo)的物理尺寸都在9毫米左右。使用更大的觸摸目標(biāo)來適應(yīng)更廣泛的用戶可能是合適的。

不止觸摸目標(biāo)尺寸重要，觸摸目標(biāo)之間的足夠空間也很重要。在觸目目標(biāo)之間保持安全空間的主要原因是防止用戶觸摸錯誤的按鈕和調(diào)用錯誤的操作。當(dāng)諸如“同意”和“不同意”這樣的兩個選擇彼此相鄰時，按鈕之間的空間變得極其重要。Material Design設(shè)計原則建議使用8個或者更多dp的空間來分離觸摸目標(biāo)。這將創(chuàng)建平衡的信息密度和可用性。?

點(diǎn)擊后禁用按鈕

表單操作按鈕通常需要一些時間來處理。例如，提交后可能需要計算數(shù)據(jù)。重要的是，不僅要在操作時提供反饋，還要禁用提交按鈕，以防止用戶意外地在此點(diǎn)擊按鈕。這點(diǎn)在電商網(wǎng)站和移動應(yīng)用程序尤其重要。通過禁用操作按鈕，不僅能防止用戶意外重復(fù)點(diǎn)擊提交，還能向用戶提供了確認(rèn)（用戶將知道系統(tǒng)已經(jīng)收到了他們的提交）。

幫助和支持

成功完成填寫表單后，通知用戶這一點(diǎn)非常重要?？梢栽诂F(xiàn)有表單的上下文中提供此信息（例如，在刷新表單上方顯示一個綠色成功標(biāo)記），或者將用戶引導(dǎo)到一個新頁面，該頁面表示他們的提交已經(jīng)成功。?

錯誤和驗證

用戶會犯錯誤，這是不可避免的，設(shè)計一個支持用戶在失敗時刻使用的用戶界面是非常重要的。

雖然關(guān)于錯誤和驗證的主題值得單獨(dú)撰寫一篇文章，但是仍然有必要提到一些改進(jìn)移動表單用戶體驗的建議。

約束每個字段輸入

預(yù)防勝于治療。如果您是一位經(jīng)驗豐富的設(shè)計人員，您應(yīng)該熟悉可能導(dǎo)致錯誤狀態(tài)的最常見的情況。例如，通常很難在第一次正確地填寫表單，或者在移動設(shè)備網(wǎng)絡(luò)連接不好時正確地同步數(shù)據(jù)?？紤]這些情況，以盡量減少錯誤的可能性。換句話說，通過約束和提供建議的方式可以更好地防止用戶犯錯誤。

例如，如果您設(shè)計及了一個允許人們搜索酒店預(yù)訂的表單，則應(yīng)該防止用戶選擇已經(jīng)過去的入住日期。如下圖Booking.com所示，你可以簡單的通過日期選擇器來控制用戶只能選擇今天或者將來的日期。這樣的選擇器將迫使用戶選擇一個合適的日期范圍。?

不要把數(shù)據(jù)驗證規(guī)則設(shè)置太嚴(yán)格

雖然有的情景設(shè)置嚴(yán)格驗證信息是必要的，但是大多數(shù)情況下，嚴(yán)格的驗證信息會延遲編程。當(dāng)用戶以與預(yù)期稍微不同的格式提供數(shù)據(jù)時，在屏幕上顯示錯誤會造成不必要的摩擦。這將對轉(zhuǎn)換產(chǎn)生負(fù)面影響。

一個問題有幾個變體答案是很常見的，例如，當(dāng)一個表單要求用戶提供有關(guān)其所在州的信息，而用戶的響應(yīng)時輸入州的縮寫而不是全稱（例如，CA而不是California）。表單應(yīng)該接受這兩種格式，開發(fā)人員將數(shù)據(jù)轉(zhuǎn)換為一致的格式。

清除錯誤信息

當(dāng)你編寫錯誤信息時，請將重點(diǎn)放在最小化用戶在與表單交互式遇到問題的挫折感上。下面是一些寫有效錯誤信息的規(guī)則：

永遠(yuǎn)不要責(zé)怪用戶

您傳遞錯誤消息的方式可能會對用戶如何看待它產(chǎn)生巨大的影響?！澳斎肓艘粋€錯誤的數(shù)字”這樣的錯誤信息將所有的責(zé)任推給用戶，結(jié)果，用戶可能會感到沮喪進(jìn)而放棄使用應(yīng)用程序。寫一些聽起來中立或者積極的內(nèi)容?！澳莻€數(shù)字不正確”就是一個聽起來比較中性的信息。

避免模糊或者籠統(tǒng)的錯誤消息

不要對用戶說太多“出錯了，請稍后再試”。用戶會想究竟是什么出錯了。總是試著解釋問題的根本原因，確保用戶知道如何修復(fù)錯誤。

使錯誤消息具有可讀性

像“用戶錯誤輸入: 0x100999”這樣的錯誤信息是神秘而可怕的。像人一樣寫，而不是像機(jī)器人一樣。使用人類語言，解釋用戶或系統(tǒng)究竟做錯了什么，用戶應(yīng)該做些什么來修復(fù)這個問題。

內(nèi)聯(lián)顯示錯誤

當(dāng)涉及到顯示錯誤信息時，設(shè)計人員會一般會選擇兩個位置，表單頂部或內(nèi)聯(lián)。放在表單頂部可能會帶來糟糕的體驗。?Javier Bargas-Avila 和 Glenn Oberholzer對在線表單驗證進(jìn)行了研究，他們發(fā)現(xiàn)在表單頂部現(xiàn)實(shí)所有錯誤消息會給用戶的記憶帶來很大的認(rèn)知負(fù)擔(dān)。用戶需要花額外的時間將錯誤消息與需要注意的字段進(jìn)行匹配。

內(nèi)聯(lián)定位錯誤消息要好得多。首先，這個和用戶自上而下的閱讀流一致。其次， 錯誤將出現(xiàn)在用戶輸入的上下文中。?

使用動態(tài)驗證

選擇顯示錯誤消息的時間非常重要。只有在按下提交按鈕后才看到錯誤消息可能會讓用戶感到沮喪。不要等到用戶完成表單后，請在輸入數(shù)據(jù)后立刻提供反饋。

使用帶有實(shí)時反饋的內(nèi)聯(lián)驗證。驗證立即告訴人們他們輸入的信息是否符合表單的要求。2009年， Luke Wroblewski測試了內(nèi)聯(lián)驗證與提交后驗證的對比，發(fā)現(xiàn)內(nèi)斂驗證的結(jié)果如下：

成功率提高22%；

錯誤率減少22%；

滿足率提升31%；

完成時間節(jié)省42%；

眼球固定次數(shù)減少了47%。

但同時內(nèi)聯(lián)驗證應(yīng)該小心實(shí)現(xiàn)：

避免在激活字段時就顯示內(nèi)聯(lián)驗證

在這種情況下，只要用戶激活一個字段，他們就會看到一個錯誤信息。甚至在表單完全為空時顯示錯誤信息。當(dāng)激活輸入字段時，可能看起來像表單在用戶開始填寫之前就對他們大喊大叫了。

不要在輸入每個字符后驗證

這種方法不僅增加了不必要的驗證嘗試次數(shù)，而且還會讓用戶感到沮喪（因為用戶可能會在完成字段之前看到錯誤消息）。理想情況下，內(nèi)聯(lián)驗證消息應(yīng)該在用戶停止輸入后500-10000毫秒或轉(zhuǎn)移到下一個字段后出現(xiàn)。這個規(guī)則有一些例外：當(dāng)用戶輸入密碼時，內(nèi)聯(lián)驗證很有幫助的（檢查密碼是否滿足復(fù)雜性要求）；創(chuàng)建用戶名（檢查名稱是否可用）和輸入帶有字符限制的消息時。

易用性

所有能力的用戶都應(yīng)該能夠訪問和享受數(shù)字產(chǎn)品。設(shè)計人員在構(gòu)建產(chǎn)品時應(yīng)該盡可能地考慮易訪問性需求。以下幾種方式可以使您的表單更易于使用。

確保表單有適當(dāng)?shù)膶Ρ?/b>

用戶很可能在戶外操作表單，確保表單在強(qiáng)光和低光環(huán)境下都易于使用。檢查表單中字段和標(biāo)簽的對比度。W3C推薦的正文對比度如下：

小文本與背景的對比度至少為4.5:1；

大型文本（14點(diǎn)粗體，18點(diǎn)常規(guī)或者以上）的對比度應(yīng)該至少為3:1。

測量顏色對比有點(diǎn)難度，幸運(yùn)的是，有一些工具能簡化此過程。其中之一是Web AIM顏色對比度檢查起，它幫助設(shè)計師測量對比度級別。

不要僅僅依靠顏色來傳達(dá)狀態(tài)

全球大約有1/12的男性（8%）和1/200的女性患有色盲（或色覺缺陷）。雖然色盲有很多種類型，但最常見的兩種是紅色色盲，即對紅光的敏感度降低，和 綠色色盲，即對綠光的敏感度降低。當(dāng)驗證錯誤或成功消息時，不要僅僅依賴顏色來傳達(dá)狀態(tài)（例如，將輸入字段設(shè)置為綠色或紅色）。正如W3C準(zhǔn)則所屬，顏色不應(yīng)該用做傳遞消息、只是操作、提示響應(yīng)或區(qū)分視覺元素的唯一視覺手段。設(shè)計人員應(yīng)該使用顏色來突出或者補(bǔ)充已經(jīng)可見的東西。通過提供額外的視覺提示來幫助色盲人士理解用戶界面，從而為他們提供支持。

允許用戶設(shè)置字體大小

允許用戶增大字體尺寸以提高可讀性。移動設(shè)備和瀏覽器包括一些功能，使用戶能夠在系統(tǒng)范圍內(nèi)調(diào)整字體大小。此外，請確保表單為大字體大小分配了足夠的空間。

測試您的設(shè)計決策

上面提到的所有要點(diǎn)都可以視為行業(yè)最佳實(shí)踐。但是僅僅因為所謂的“最佳實(shí)踐”并不意味著它總是表單的最佳解決方案。應(yīng)用程序和網(wǎng)站在很大程度上取決于它們的使用環(huán)境。因此，測試您的設(shè)計決策總是必不可少的。確保填寫表單的過程很順利，流程不會中斷，并且用戶可以解決他們在填寫過程中遇到的任何問題。定期進(jìn)行可用性測試，收集關(guān)于用戶交互的所有有價值的數(shù)據(jù)，并從中學(xué)習(xí)。

結(jié)論

用戶填寫表單時會比較猶豫。所以，作為設(shè)計師，我們的目標(biāo)就是盡可能簡化填寫表單的過程。在設(shè)計表單時，要努力穿件快速、無摩擦的交互。有時一個微小的改變—比如正確的編寫錯誤消息可以顯著提高表單可用性。