用戶在填寫表格時(shí)可能會(huì)因?yàn)樘顚懥鞒踢^于復(fù)雜放棄填寫表格，所以，作為app表單設(shè)計(jì)師，就應(yīng)當(dāng)把盡可能簡(jiǎn)化填寫表格的過程作為設(shè)計(jì)的目標(biāo)。本文中，筆者將與大家分享一些可以幫助大家設(shè)計(jì)有效表格的技巧。

表格是所有移動(dòng)互動(dòng)的關(guān)鍵，它站在人和他們正在尋找的東西之間的橋梁。我們每天都使用表單來進(jìn)行必要的在線活動(dòng)?；叵肷弦淮文阗I了一張機(jī)票，預(yù)定了一個(gè)酒店房間或者網(wǎng)上購(gòu)物，最可能是這些互動(dòng)包含了一個(gè)填表的步驟。

表格只是達(dá)到目的一種手段。最終的目的應(yīng)該是要讓用戶能夠快速、無混淆地完成這些任務(wù)。

在本文中，您將學(xué)習(xí)幫助您設(shè)計(jì)有效表單的實(shí)用技術(shù)。

一、什么是有效的形式

每個(gè)表單的主要目標(biāo)都是填寫完成。

有兩個(gè)因素對(duì)完成率有重大影響：

1. 復(fù)雜性感知

當(dāng)用戶看到一個(gè)新表單時(shí)，首先要做的就是估計(jì)完成它所需的時(shí)間，用戶可通過掃描表單來做到這一點(diǎn)。

感知在評(píng)估過程中起著至關(guān)重要的作用。表單看起來越復(fù)雜，用戶就越有可能放棄這個(gè)過程。

2. 交互成本

交互成本是用戶為了達(dá)到他們的目標(biāo)，而與界面交互的努力的總和——包括認(rèn)知的和物理的。

交互成本與表單可用性有著直接的關(guān)系——用戶完成表單的努力越多，表單的可用性就越低。

高的交互成本可能是由于難以輸入的數(shù)據(jù)、無法理解某些問題的含義，或?qū)﹀e(cuò)誤消息的混淆造成的。

二、表單的構(gòu)成要素

典型的表格由以下五個(gè)要素組成：

1. 輸入字段：這些字段包括：文本字段、密碼字段、復(fù)選框、單選按鈕、滑塊和任何其他為用戶輸入而設(shè)計(jì)的字段。
2. 字段標(biāo)簽：這些標(biāo)簽告訴用戶：相應(yīng)的輸入字段意味著什么。
3. 結(jié)構(gòu)：包括字段的順序、窗體在頁面上的外觀，以及不同字段之間的邏輯連接。
4. 操作按鈕：表單將至少有一個(gè)操作調(diào)用（觸發(fā)數(shù)據(jù)提交的按鈕）。
5. 反饋：反饋是用戶操作的結(jié)果反應(yīng)。反饋可以是正面的（例如：表示表單提交成功），也可以是否定的（比如：“您提供的數(shù)字不正確”)。

本文涵蓋了與結(jié)構(gòu)、輸入字段、標(biāo)簽、操作按鈕和驗(yàn)證相關(guān)的許多方面。

本文中提到的大多數(shù)要點(diǎn)，都具有可視化的要做的示例，和不要做的示例，所有這些示例都是使用AdobeXD創(chuàng)建的。

接下來分別從這八個(gè)方面進(jìn)行展開細(xì)講：輸入域、字段標(biāo)簽、布局、操作按鈕、幫助與支持、易接近、測(cè)試設(shè)計(jì)決策、結(jié)論。

1. 輸入域

當(dāng)涉及到表單設(shè)計(jì)時(shí)，設(shè)計(jì)師所能做的最重要的事情就是將打字的需求降到最低，減少投入是必不可少的。設(shè)計(jì)師可以通過關(guān)注表單領(lǐng)域的設(shè)計(jì)來實(shí)現(xiàn)這一目標(biāo)。

1.1 最小化字段總數(shù)

您要求用戶填寫的每個(gè)字段都需要付出一定的努力。填寫表單所需的工作越多，用戶完成表單的可能性就越小。這就是為什么形式設(shè)計(jì)的基本規(guī)則更短更好的原因——擺脫所有不必要的領(lǐng)域。

Baymard研究所對(duì)結(jié)賬表格進(jìn)行了分析，發(fā)現(xiàn)：結(jié)賬過程太長(zhǎng)或太復(fù)雜是結(jié)賬過程中放棄的主要原因之一。

研究發(fā)現(xiàn)：平均簽出包含近15個(gè)表單字段，大多數(shù)在線服務(wù)可以將默認(rèn)顯示的字段數(shù)量減少20%到60%。

許多設(shè)計(jì)師都熟悉“越少越多”的規(guī)則。不過，他們還是會(huì)問更多的問題，試圖收集更多關(guān)于他們的用戶的數(shù)據(jù)。在初始注冊(cè)期間收集更多關(guān)于用戶的數(shù)據(jù)可能很有誘惑力，但要抵制這種誘惑，可以這樣想：添加到表單中的每一個(gè)附加字段，都會(huì)增加失去潛在用戶的可能性。

您從某個(gè)領(lǐng)域獲得的信息是否值得失去新用戶？

請(qǐng)記住，只要您已經(jīng)收集了用戶的聯(lián)系信息，您就可以隨時(shí)跟蹤請(qǐng)求獲得更多的數(shù)據(jù)。

1.2 <明確區(qū)分所有可選字段

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

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

• 標(biāo)記可選字段而不是強(qiáng)制字段：如果您要求盡可能少，那么您形式中的絕大多數(shù)字段將是強(qiáng)制性的。因此，只在少數(shù)人中標(biāo)記那些字段。例如：如果六個(gè)字段中有五個(gè)是強(qiáng)制性的，那么只將一個(gè)字段標(biāo)記為可選字段是有意義的。
• 使用“可選”標(biāo)簽表示可選字段：避免使用星號(hào)(*)來表示“可選”。并不是所有的用戶都會(huì)將星號(hào)與可選信息相關(guān)聯(lián)，一些用戶也會(huì)對(duì)此含義感到困惑（星號(hào)通常用于表示強(qiáng)制字段）。

1.3 相應(yīng)的大小字段

在可能的情況下，使用字段長(zhǎng)度作為支持，輸入字段的長(zhǎng)度應(yīng)與該字段所期望的信息量成比例。字段的大小將起到視覺約束的作用——用戶將通過查看字段就知道需要輸入多少文本。

一般來說，諸如區(qū)號(hào)和房號(hào)之類的字段應(yīng)該比街道地址的字段短。

1.4 提供領(lǐng)域焦點(diǎn)

自動(dòng)對(duì)焦表單中的第一個(gè)輸入字段，自動(dòng)對(duì)焦字段給用戶一個(gè)指示和一個(gè)起點(diǎn)，以便他們能夠快速開始填寫表單。

通過這樣做，您可以降低交互成本——為用戶節(jié)省了一個(gè)不必要的點(diǎn)擊。

使主動(dòng)輸入字段突出和集中，該領(lǐng)域的焦點(diǎn)本身應(yīng)該是晶瑩剔透的——用戶應(yīng)該能夠理解一目了然的焦點(diǎn)在哪里。

它可能是帶有口音的邊框顏色，也可能是框的淡入。

1.5 提不要要求用戶重復(fù)他們的電子郵件地址

電子郵件地址的額外字段在產(chǎn)品開發(fā)人員中如此流行的原因是顯而易見的：每一家公司都希望將硬反彈（無效的電子郵件地址導(dǎo)致的無法交付）的風(fēng)險(xiǎn)降到最低。

不幸的是，遵循這種方法并不能保證您將得到一個(gè)有效的地址。用戶經(jīng)常從一個(gè)字段復(fù)制和粘貼他們的地址到另一個(gè)字段。

1.6 提供“顯示密碼”選項(xiàng)

復(fù)制密碼輸入字段是產(chǎn)品設(shè)計(jì)人員中另一個(gè)常見的錯(cuò)誤。

設(shè)計(jì)人員采用這種方法是因?yàn)椋核麄冋J(rèn)為這樣可以防止用戶錯(cuò)誤輸入密碼。

實(shí)際上，第二個(gè)密碼字段不僅會(huì)增加交互成本，而且也不能保證用戶不會(huì)出錯(cuò)。因?yàn)橛脩艨床坏剿麄冊(cè)谧侄沃休斎肓耸裁?，他們可能?huì)犯兩次相同的錯(cuò)誤（在這兩個(gè)字段中），并且當(dāng)他們嘗試使用密碼登錄時(shí)會(huì)遇到問題。

正如Jakob Nielsen總結(jié)的那樣：

“當(dāng)用戶輸入密碼而得到的唯一反饋是一行子彈時(shí)，可用性就會(huì)受到影響。通常情況下，屏蔽密碼甚至不會(huì)增加安全性，但由于登錄失敗，它確實(shí)會(huì)使您的業(yè)務(wù)損失?！?/p>

提供一個(gè)選項(xiàng)，允許用戶查看他們選擇創(chuàng)建的密碼，而不是重復(fù)密碼字段。有一個(gè)圖標(biāo)或復(fù)選框，當(dāng)單擊密碼時(shí)，該圖標(biāo)或復(fù)選框?qū)⒔獬艽a掩碼。密碼預(yù)覽可以為用戶在發(fā)送之前檢查其數(shù)據(jù)提供一個(gè)機(jī)會(huì)。

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

當(dāng)詢問全名、電話號(hào)碼或出生日期時(shí)，不要分割字段。切片字段會(huì)迫使用戶進(jìn)行額外的點(diǎn)擊以移動(dòng)到下一個(gè)字段。對(duì)于需要某些格式（例如電話號(hào)碼或出生日期）的字段，最好讓單個(gè)字段與明確的格式規(guī)則匹配作為占位符。

1.8避免下拉菜單

盧克·沃羅博列斯基(LukeWroblewski)曾說過：跌落應(yīng)該是萬不得已的UI。

下拉列表對(duì)于移動(dòng)設(shè)備尤其不利，因?yàn)檎郫B元素會(huì)使數(shù)據(jù)輸入過程更難在一個(gè)小屏幕上進(jìn)行：將選項(xiàng)放置在下拉列表中需要兩次點(diǎn)擊并隱藏選項(xiàng)。

如果您使用下拉列表來選擇選項(xiàng)，請(qǐng)考慮用單選按鈕替換它。他們將使所有選項(xiàng)都可以瀏覽，同時(shí)也降低了交互成本——用戶可以點(diǎn)擊該項(xiàng)目并立即進(jìn)行選擇。

1.9 使用占位符和蒙面輸入

格式不確定性是表單設(shè)計(jì)中最重要的問題之一。

這個(gè)問題與放棄表單有直接關(guān)系——當(dāng)用戶不確定他們應(yīng)該提供數(shù)據(jù)的格式時(shí)，他們可以迅速放棄表單。有幾件事你可以做，使格式清楚。

1.9.1 占位文本

輸入字段中的文本可以告訴用戶所期望的內(nèi)容。占位符文本對(duì)于諸如“全名”這樣的簡(jiǎn)單字段并不是必需的，但是對(duì)于需要特定格式的數(shù)據(jù)的字段來說，占位符文本是非常有價(jià)值的。

例如：如果您設(shè)計(jì)用于跟蹤包裹的搜索功能，最好提供一個(gè)示例跟蹤編號(hào)作為跟蹤號(hào)字段的占位符。

重要的是，您的表單應(yīng)該在占位符文本和用戶輸入的實(shí)際值之間，有一個(gè)清晰的視覺區(qū)別。

換句話說：占位符文本不應(yīng)該像預(yù)設(shè)的值。

如果沒有清晰的視覺區(qū)分，用戶可能會(huì)認(rèn)為帶有占位符的字段已經(jīng)有了值。

1.9.2 遮擋輸入

字段掩蔽是一種幫助用戶格式化輸入文本的技術(shù)。許多設(shè)計(jì)師把字段掩蔽和占位符文本混為一談，但它們不是一回事。

與占位符不同，占位符基本上是靜態(tài)文本，掩碼會(huì)自動(dòng)格式化用戶提供的數(shù)據(jù)。

在下面的示例中，當(dāng)輸入電話號(hào)碼時(shí)，括號(hào)、空格和破折號(hào)會(huì)自動(dòng)出現(xiàn)在屏幕上。

屏蔽輸入也使用戶更容易驗(yàn)證信息——當(dāng)一個(gè)電話號(hào)碼是塊顯示，它使它更容易找到和糾正一個(gè)錯(cuò)誤。

1.10 提供匹配鍵盤

移動(dòng)用戶喜歡為該領(lǐng)域提供合適鍵盤的應(yīng)用程序和網(wǎng)站。此功能阻止它們執(zhí)行其他操作。

例如：當(dāng)用戶需要輸入信用卡號(hào)碼時(shí)，應(yīng)用程序應(yīng)該只顯示撥號(hào)盤。這在整個(gè)應(yīng)用程序中始終實(shí)現(xiàn)鍵盤匹配是非常重要的（應(yīng)用程序中的所有表單都應(yīng)該具有此功能）。

設(shè)置HTML輸入類型以顯示正確的鍵盤。

有七種輸入類型與表單設(shè)計(jì)相關(guān)：

• input type=”text”displays the mobile device’s normal keyboard.
• input type=”email”displays the normal keyboard and ‘@’ and ‘.com’.
• input type=”tel”displays the numeric 0 to 9 keypad.
• input type=”number”displays a keyboard with numbers and symbols.
• input type=”date”displays the mobile device’s date selector.
• input type=”datetime”displays the mobile device’s date and time selector.
• input type=”month”displays the mobile device’s month and year selector.

1.11 請(qǐng)求特定范圍時(shí)使用滑塊

許多表單要求用戶提供一系列的值（例如，價(jià)格范圍、距離范圍等）。為了達(dá)到這個(gè)目的，不要使用兩個(gè)單獨(dú)的字段——“From”和“to”，而是使用一個(gè)滑塊來允許用戶通過拇指交互來指定范圍。

1.12 清楚地解釋：你為什么要求敏感的信息

人們?cè)絹碓疥P(guān)注隱私和信息安全。

當(dāng)用戶看到他們認(rèn)為是隱私的信息請(qǐng)求時(shí)，他們可能會(huì)想：“嗯，為什么他們需要這個(gè)？”

如果您的表單要求用戶提供敏感信息，請(qǐng)確保解釋您為什么需要它。您可以通過在相關(guān)字段下面添加支持文本來做到這一點(diǎn)。

根據(jù)經(jīng)驗(yàn)，解釋文本不應(yīng)超過100個(gè)字符。

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

與由系統(tǒng)根據(jù)系統(tǒng)擁有的有關(guān)用戶的信息計(jì)算的智能默認(rèn)值不同，靜態(tài)默認(rèn)值是以對(duì)所有用戶相同的形式預(yù)置值。避免靜態(tài)默認(rèn)值，除非您相信有相當(dāng)一部分用戶（例如，95%）會(huì)選擇這些值——特別是對(duì)于所需的字段。

為什么？

因?yàn)槟赡軙?huì)引入錯(cuò)誤——人們會(huì)很快地掃描表單，并且不會(huì)花費(fèi)額外的時(shí)間來解析所有的問題；相反，他們只會(huì)跳過這個(gè)字段，假設(shè)它已經(jīng)有了一個(gè)值。

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

JefRaskin曾經(jīng)說過：“系統(tǒng)應(yīng)該把所有用戶的輸入視為神圣的?！?/p>

對(duì)于表格來說，這是絕對(duì)正確的。

當(dāng)您開始填寫Web表單，然后意外刷新頁面時(shí)，這是很棒的，但是數(shù)據(jù)仍然保留在字段中。Garlic.js等工具會(huì)幫助您在本地持久化表單的值，直到表單提交為止。這樣，如果用戶不小心關(guān)閉選項(xiàng)卡或?yàn)g覽器，就不會(huì)丟失任何寶貴的數(shù)據(jù)。

1.15 自動(dòng)動(dòng)作

如果您想使數(shù)據(jù)輸入過程盡可能流暢，那么僅減少輸入字段的數(shù)量是不夠的——您還應(yīng)該注意數(shù)據(jù)輸入所需的用戶工作量。

打字的交互成本很高，即使使用物理鍵盤，也容易出錯(cuò)，而且耗時(shí)。但當(dāng)涉及到移動(dòng)屏幕時(shí)，它變得更加關(guān)鍵。更多的輸入會(huì)增加用戶出錯(cuò)的機(jī)會(huì)。

盡量避免不必要的打字，因?yàn)檫@樣會(huì)提高用戶的滿意度，降低錯(cuò)誤率。

為了實(shí)現(xiàn)這個(gè)目標(biāo)，您可以做以下幾件事：

自動(dòng)完成：

大多數(shù)用戶在Google的搜索框中輸入問題時(shí)都會(huì)自動(dòng)完成。

Google向用戶提供了與用戶在字段中鍵入的內(nèi)容相關(guān)的建議列表。

同樣的機(jī)構(gòu)也適用于形狀設(shè)計(jì)，例如：表單可以自動(dòng)完成電子郵件地址。

自動(dòng)大寫：

自動(dòng)大寫使第一個(gè)字母自動(dòng)成為大寫字母。

這個(gè)特性對(duì)于像名字和街道地址這樣的字段是很好的，但是對(duì)于密碼字段則要避免它。

自動(dòng)糾錯(cuò)：

自動(dòng)更正修改似乎拼寫錯(cuò)誤的單詞。對(duì)于唯一的字段，如名稱、地址等，請(qǐng)關(guān)閉此功能。

自動(dòng)填寫個(gè)人資料：

輸入地址通常是任何在線注冊(cè)表單中最繁瑣的部分。通過使用瀏覽器函數(shù)根據(jù)以前輸入的值填充字段，可以簡(jiǎn)化此任務(wù)。

根據(jù)谷歌的研究，自動(dòng)填充可以幫助人們更快地填寫表格。

1.16 使用移動(dòng)設(shè)備的本機(jī)功能簡(jiǎn)化數(shù)據(jù)輸入

現(xiàn)代移動(dòng)設(shè)備是一種復(fù)雜的設(shè)備，擁有大量驚人的功能。設(shè)計(jì)人員可以使用設(shè)備的本機(jī)功能(如照相機(jī)或地理位置)來簡(jiǎn)化輸入數(shù)據(jù)的任務(wù)。

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

定位服務(wù)：

可以根據(jù)用戶的地理位置數(shù)據(jù)預(yù)選用戶的國(guó)家。

但是，由于準(zhǔn)確性問題，有時(shí)預(yù)填完整的地址可能會(huì)有問題。Google的PlaceAPI可以幫助解決這個(gè)問題，它使用地理定位和地址預(yù)填充，根據(jù)用戶的準(zhǔn)確位置提供準(zhǔn)確的建議。

使用位置服務(wù)，還可以提供智能默認(rèn)值。

例如：對(duì)于“查找航班”表單，可以根據(jù)用戶的地理位置使用最近的機(jī)場(chǎng)預(yù)先填充“FROM”字段。

生物鑒別授權(quán)：

今天使用文本密碼的最大問題是大多數(shù)人忘記密碼——82%的人不記得他們的密碼，5%到10%的會(huì)話要求用戶重置密碼。

在電子商務(wù)中，密碼恢復(fù)是一件大事——75%的用戶如果在簽出時(shí)嘗試恢復(fù)他們的密碼，他們就不會(huì)完成購(gòu)買。

密碼的未來不是密碼。即使在今天，移動(dòng)開發(fā)人員也可以利用生物識(shí)別技術(shù)。用戶不需要輸入密碼，應(yīng)該就能夠使用生物識(shí)別閱讀器進(jìn)行身份驗(yàn)證——使用指紋或面部掃描進(jìn)行簽名。

相機(jī)：

如果您的表單要求用戶提供其駕照上的信用卡詳細(xì)信息或信息，則可以使用相機(jī)作為掃描儀簡(jiǎn)化數(shù)據(jù)輸入過程。提供一個(gè)選項(xiàng)，以拍攝一張卡片，并自動(dòng)填寫所有細(xì)節(jié)。

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

聲音：

諸如Apple HomePod、GoogleHome和AmazonEcho等語音控制設(shè)備正在積極地蠶食市場(chǎng)，喜歡使用聲音進(jìn)行共同操作的人數(shù)顯著增加。根

據(jù)ComScore的數(shù)據(jù)，到2020年，50%的搜索將是語音搜索。

隨著用戶使用語音命令變得更加舒適和自信，他們將成為移動(dòng)交互的一個(gè)預(yù)期功能。

語音輸入為移動(dòng)用戶提供了許多優(yōu)勢(shì)——在用戶無法集中注意力在屏幕上的情況下，例如：開車時(shí)，語音輸入特別有價(jià)值。

在設(shè)計(jì)表單時(shí)，可以提供語音輸入作為數(shù)據(jù)輸入的替代方法。

由于此文章內(nèi)容干活較多，需要讀者細(xì)心消化。故拆分為上下兩部分。

本文由 @Johnson 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議