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

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

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

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

一、什么是有效的形式

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

有兩個因素對完成率有重大影響：

1. 復(fù)雜性感知

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

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

2. 交互成本

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

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

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

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

典型的表格由以下五個要素組成：

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

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

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

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

1. 輸入域

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

自動對焦表單中的第一個輸入字段，自動對焦字段給用戶一個指示和一個起點，以便他們能夠快速開始填寫表單。

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

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

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

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

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

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

1.6 提供“顯示密碼”選項

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

設(shè)計人員采用這種方法是因為：他們認(rèn)為這樣可以防止用戶錯誤輸入密碼。

實際上，第二個密碼字段不僅會增加交互成本，而且也不能保證用戶不會出錯。因為用戶看不到他們在字段中輸入了什么，他們可能會犯兩次相同的錯誤（在這兩個字段中），并且當(dāng)他們嘗試使用密碼登錄時會遇到問題。

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

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

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

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

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

1.8避免下拉菜單

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

下拉列表對于移動設(shè)備尤其不利，因為折疊元素會使數(shù)據(jù)輸入過程更難在一個小屏幕上進行：將選項放置在下拉列表中需要兩次點擊并隱藏選項。

如果您使用下拉列表來選擇選項，請考慮用單選按鈕替換它。他們將使所有選項都可以瀏覽，同時也降低了交互成本——用戶可以點擊該項目并立即進行選擇。

1.9 使用占位符和蒙面輸入

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

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

1.9.1 占位文本

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

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

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

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

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

1.9.2 遮擋輸入

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

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

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

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

1.10 提供匹配鍵盤

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

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

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

有七種輸入類型與表單設(shè)計相關(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 請求特定范圍時使用滑塊

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

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

人們越來越關(guān)注隱私和信息安全。

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

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

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

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

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

為什么？

因為您可能會引入錯誤——人們會很快地掃描表單，并且不會花費額外的時間來解析所有的問題；相反，他們只會跳過這個字段，假設(shè)它已經(jīng)有了一個值。

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

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

對于表格來說，這是絕對正確的。

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

1.15 自動動作

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

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

盡量避免不必要的打字，因為這樣會提高用戶的滿意度，降低錯誤率。

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

自動完成：

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

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

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

自動大寫：

自動大寫使第一個字母自動成為大寫字母。

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

自動糾錯：

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

自動填寫個人資料：

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

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

1.16 使用移動設(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的PlaceAPI可以幫助解決這個問題，它使用地理定位和地址預(yù)填充，根據(jù)用戶的準(zhǔn)確位置提供準(zhǔn)確的建議。

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

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

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

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

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

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

相機：

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

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

聲音：

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

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

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

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

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

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

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

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