用戶在填寫表格時可能會因為填寫流程過於複雜放棄填寫表格，所以，作為app表單設計師，就應當把儘可能簡化填寫表格的過程作為設計的目標。本文中，筆者將與大家分享一些可以幫助大家設計有效表格的技巧。
表格是所有移動互動的關鍵，它站在人和他們正在尋找的東西之間的橋梁。我們每天都使用表單來進行必要的在線活動。回想上一次你買了一張機票，預定了一個酒店房間或者網上購物，最可能是這些互動包含了一個填表的步驟。
表格只是達到目的一種手段。最終的目的應該是要讓用戶能夠快速、無混淆地完成這些任務。
在本文中，您將學習幫助您設計有效表單的實用技術。
一、什麼是有效的形式
每個表單的主要目標都是填寫完成。
有兩個因素對完成率有重大影響：
1. 複雜性感知
當用戶看到一個新表單時，首先要做的就是估計完成它所需的時間，用戶可通過掃描表單來做到這一點。
感知在評估過程中起著至關重要的作用。表單看起來越複雜，用戶就越有可能放棄這個過程。
2. 交互成本
交互成本是用戶為了達到他們的目標，而與界面交互的努力的總和——包括認知的和物理的。
交互成本與表單可用性有著直接的關係——用戶完成表單的努力越多，表單的可用性就越低。
高的交互成本可能是由於難以輸入的數據、無法理解某些問題的含義，或對錯誤消息的混淆造成的。
二、表單的構成要素
典型的表格由以下五個要素組成：
輸入欄位：這些欄位包括：文本欄位、密碼欄位、複選框、單選按鈕、滑塊和任何其他為用戶輸入而設計的欄位。欄位標籤：這些標籤告訴用戶：相應的輸入欄位意味著什麼。結構：包括欄位的順序、窗體在頁面上的外觀，以及不同欄位之間的邏輯連接。操作按鈕：表單將至少有一個操作調用（觸發數據提交的按鈕）。反饋：反饋是用戶操作的結果反應。反饋可以是正面的（例如：表示表單提交成功），也可以是否定的（比如：「您提供的數字不正確」)。本文涵蓋了與結構、輸入欄位、標籤、操作按鈕和驗證相關的許多方面。
本文中提到的大多數要點，都具有可視化的要做的示例，和不要做的示例，所有這些示例都是使用AdobeXD創建的。
接下來分別從這八個方面進行展開細講：輸入域、欄位標籤、布局、操作按鈕、幫助與支持、易接近、測試設計決策、結論。
1. 輸入域
當涉及到表單設計時，設計師所能做的最重要的事情就是將打字的需求降到最低，減少投入是必不可少的。設計師可以通過關注表單領域的設計來實現這一目標。
1.1 最小化欄位總數
您要求用戶填寫的每個欄位都需要付出一定的努力。填寫表單所需的工作越多，用戶完成表單的可能性就越小。這就是為什麼形式設計的基本規則更短更好的原因——擺脫所有不必要的領域。
Baymard研究所對結帳表格進行了分析，發現：結帳過程太長或太複雜是結帳過程中放棄的主要原因之一。
研究發現：平均籤出包含近15個表單欄位，大多數在線服務可以將默認顯示的欄位數量減少20%到60%。
許多設計師都熟悉「越少越多」的規則。不過，他們還是會問更多的問題，試圖收集更多關於他們的用戶的數據。在初始註冊期間收集更多關於用戶的數據可能很有誘惑力，但要抵制這種誘惑，可以這樣想：添加到表單中的每一個附加欄位，都會增加失去潛在用戶的可能性。
您從某個領域獲得的信息是否值得失去新用戶？
請記住，只要您已經收集了用戶的聯繫信息，您就可以隨時跟蹤請求獲得更多的數據。
1.2 <明確區分所有可選欄位
在優化可選欄位之前，問問自己是否真的需要將它們包含在表單中。想想你真正需要什麼信息，而不是你想要什麼。理想情況下，表單中的可選欄位數應為零。
如果在頭腦風暴會議之後，您仍然希望在您的表單中包含一些可選的問題，請向用戶明確這些欄位是可選的：
標記可選欄位而不是強制欄位：如果您要求儘可能少，那麼您形式中的絕大多數欄位將是強制性的。因此，只在少數人中標記那些欄位。例如：如果六個欄位中有五個是強制性的，那麼只將一個欄位標記為可選欄位是有意義的。使用「可選」標籤表示可選欄位：避免使用星號(*)來表示「可選」。並不是所有的用戶都會將星號與可選信息相關聯，一些用戶也會對此含義感到困惑（星號通常用於表示強制欄位）。
1.3 相應的大小欄位
在可能的情況下，使用欄位長度作為支持，輸入欄位的長度應與該欄位所期望的信息量成比例。欄位的大小將起到視覺約束的作用——用戶將通過查看欄位就知道需要輸入多少文本。
一般來說，諸如區號和房號之類的欄位應該比街道地址的欄位短。
1.4 提供領域焦點
自動對焦表單中的第一個輸入欄位，自動對焦欄位給用戶一個指示和一個起點，以便他們能夠快速開始填寫表單。
通過這樣做，您可以降低交互成本——為用戶節省了一個不必要的點擊。
使主動輸入欄位突出和集中，該領域的焦點本身應該是晶瑩剔透的——用戶應該能夠理解一目了然的焦點在哪裡。
它可能是帶有口音的邊框顏色，也可能是框的淡入。
1.5 提不要要求用戶重複他們的電子郵件地址
電子郵件地址的額外欄位在產品開發人員中如此流行的原因是顯而易見的：每一家公司都希望將硬反彈（無效的電子郵件地址導致的無法交付）的風險降到最低。
不幸的是，遵循這種方法並不能保證您將得到一個有效的地址。用戶經常從一個欄位複製和粘貼他們的地址到另一個欄位。
1.6 提供「顯示密碼」選項
複製密碼輸入欄位是產品設計人員中另一個常見的錯誤。
設計人員採用這種方法是因為：他們認為這樣可以防止用戶錯誤輸入密碼。
實際上，第二個密碼欄位不僅會增加交互成本，而且也不能保證用戶不會出錯。因為用戶看不到他們在欄位中輸入了什麼，他們可能會犯兩次相同的錯誤（在這兩個欄位中），並且當他們嘗試使用密碼登錄時會遇到問題。
正如Jakob Nielsen總結的那樣：「當用戶輸入密碼而得到的唯一反饋是一行子彈時，可用性就會受到影響。通常情況下，屏蔽密碼甚至不會增加安全性，但由於登錄失敗，它確實會使您的業務損失。」
提供一個選項，允許用戶查看他們選擇創建的密碼，而不是重複密碼欄位。有一個圖標或複選框，當單擊密碼時，該圖標或複選框將解除密碼掩碼。密碼預覽可以為用戶在發送之前檢查其數據提供一個機會。
1.7 不要分割數據欄位
當詢問全名、電話號碼或出生日期時，不要分割欄位。切片欄位會迫使用戶進行額外的點擊以移動到下一個欄位。對於需要某些格式（例如電話號碼或出生日期）的欄位，最好讓單個欄位與明確的格式規則匹配作為佔位符。
1.8避免下拉菜單
盧克·沃羅博列斯基(LukeWroblewski)曾說過：跌落應該是萬不得已的UI。
下拉列表對於行動裝置尤其不利，因為摺疊元素會使數據輸入過程更難在一個小屏幕上進行：將選項放置在下拉列表中需要兩次點擊並隱藏選項。
如果您使用下拉列表來選擇選項，請考慮用單選按鈕替換它。他們將使所有選項都可以瀏覽，同時也降低了交互成本——用戶可以點擊該項目並立即進行選擇。
1.9 使用佔位符和蒙面輸入
格式不確定性是表單設計中最重要的問題之一。
這個問題與放棄表單有直接關係——當用戶不確定他們應該提供數據的格式時，他們可以迅速放棄表單。有幾件事你可以做，使格式清楚。
1.9.1 佔位文本
輸入欄位中的文本可以告訴用戶所期望的內容。佔位符文本對於諸如「全名」這樣的簡單欄位並不是必需的，但是對於需要特定格式的數據的欄位來說，佔位符文本是非常有價值的。
例如：如果您設計用於跟蹤包裹的搜索功能，最好提供一個示例跟蹤編號作為跟蹤號欄位的佔位符。
重要的是，您的表單應該在佔位符文本和用戶輸入的實際值之間，有一個清晰的視覺區別。
換句話說：佔位符文本不應該像預設的值。
如果沒有清晰的視覺區分，用戶可能會認為帶有佔位符的欄位已經有了值。
1.9.2 遮擋輸入
欄位掩蔽是一種幫助用戶格式化輸入文本的技術。許多設計師把欄位掩蔽和佔位符文本混為一談，但它們不是一回事。
與佔位符不同，佔位符基本上是靜態文本，掩碼會自動格式化用戶提供的數據。
在下面的示例中，當輸入電話號碼時，括號、空格和破折號會自動出現在屏幕上。
屏蔽輸入也使用戶更容易驗證信息——當一個電話號碼是塊顯示，它使它更容易找到和糾正一個錯誤。
1.10 提供匹配鍵盤
移動用戶喜歡為該領域提供合適鍵盤的應用程式和網站。此功能阻止它們執行其他操作。
例如：當用戶需要輸入信用卡號碼時，應用程式應該只顯示撥號盤。這在整個應用程式中始終實現鍵盤匹配是非常重要的（應用程式中的所有表單都應該具有此功能）。
設置HTML輸入類型以顯示正確的鍵盤。
有七種輸入類型與表單設計相關：
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 清楚地解釋：你為什麼要求敏感的信息
人們越來越關注隱私和信息安全。
當用戶看到他們認為是隱私的信息請求時，他們可能會想：「嗯，為什麼他們需要這個？」
如果您的表單要求用戶提供敏感信息，請確保解釋您為什麼需要它。您可以通過在相關欄位下面添加支持文本來做到這一點。
根據經驗，解釋文本不應超過100個字符。
1.13 注意靜態默認值
與由系統根據系統擁有的有關用戶的信息計算的智能默認值不同，靜態默認值是以對所有用戶相同的形式預置值。避免靜態默認值，除非您相信有相當一部分用戶（例如，95%）會選擇這些值——特別是對於所需的欄位。
為什麼？
因為您可能會引入錯誤——人們會很快地掃描表單，並且不會花費額外的時間來解析所有的問題；相反，他們只會跳過這個欄位，假設它已經有了一個值。
1.14 保護用戶數據
JefRaskin曾經說過：「系統應該把所有用戶的輸入視為神聖的。」
對於表格來說，這是絕對正確的。
當您開始填寫Web表單，然後意外刷新頁面時，這是很棒的，但是數據仍然保留在欄位中。Garlic.js等工具會幫助您在本地持久化表單的值，直到表單提交為止。這樣，如果用戶不小心關閉選項卡或瀏覽器，就不會丟失任何寶貴的數據。
1.15 自動動作
如果您想使數據輸入過程儘可能流暢，那麼僅減少輸入欄位的數量是不夠的——您還應該注意數據輸入所需的用戶工作量。
打字的交互成本很高，即使使用物理鍵盤，也容易出錯，而且耗時。但當涉及到移動屏幕時，它變得更加關鍵。更多的輸入會增加用戶出錯的機會。
儘量避免不必要的打字，因為這樣會提高用戶的滿意度，降低錯誤率。
為了實現這個目標，您可以做以下幾件事：
自動完成：
大多數用戶在Google的搜索框中輸入問題時都會自動完成。
Google向用戶提供了與用戶在欄位中鍵入的內容相關的建議列表。
同樣的機構也適用於形狀設計，例如：表單可以自動完成電子郵件地址。
自動大寫：
自動大寫使第一個字母自動成為大寫字母。
這個特性對於像名字和街道地址這樣的欄位是很好的，但是對於密碼欄位則要避免它。
自動糾錯：
自動更正修改似乎拼寫錯誤的單詞。對於唯一的欄位，如名稱、地址等，請關閉此功能。
自動填寫個人資料：
輸入地址通常是任何在線註冊表單中最繁瑣的部分。通過使用瀏覽器函數根據以前輸入的值填充欄位，可以簡化此任務。
根據谷歌的研究，自動填充可以幫助人們更快地填寫表格。
1.16 使用行動裝置的本機功能簡化數據輸入
現代行動裝置是一種複雜的設備，擁有大量驚人的功能。設計人員可以使用設備的本機功能(如照相機或地理位置)來簡化輸入數據的任務。
下面是關於如何使用傳感器和設備硬體的一些提示。
定位服務：
可以根據用戶的地理位置數據預選用戶的國家。
但是，由於準確性問題，有時預填完整的地址可能會有問題。Google的PlaceAPI可以幫助解決這個問題，它使用地理定位和地址預填充，根據用戶的準確位置提供準確的建議。
使用位置服務，還可以提供智能默認值。
例如：對於「查找航班」表單，可以根據用戶的地理位置使用最近的機場預先填充「FROM」欄位。
生物鑑別授權：
今天使用文本密碼的最大問題是大多數人忘記密碼——82%的人不記得他們的密碼，5%到10%的會話要求用戶重置密碼。
在電子商務中，密碼恢復是一件大事——75%的用戶如果在籤出時嘗試恢復他們的密碼，他們就不會完成購買。
密碼的未來不是密碼。即使在今天，移動開發人員也可以利用生物識別技術。用戶不需要輸入密碼，應該就能夠使用生物識別閱讀器進行身份驗證——使用指紋或面部掃描進行籤名。
相機：
如果您的表單要求用戶提供其駕照上的信用卡詳細信息或信息，則可以使用相機作為掃描儀簡化數據輸入過程。提供一個選項，以拍攝一張卡片，並自動填寫所有細節。
但是請記住：無論您的應用程式填寫的欄位有多好，都必須讓它們可供編輯，用戶應該能夠隨時修改欄位。
聲音：
諸如Apple HomePod、GoogleHome和AmazonEcho等語音控制設備正在積極地蠶食市場，喜歡使用聲音進行共同操作的人數顯著增加。根
據ComScore的數據，到2020年，50%的搜索將是語音搜索。
隨著用戶使用語音命令變得更加舒適和自信，他們將成為移動交互的一個預期功能。
語音輸入為移動用戶提供了許多優勢——在用戶無法集中注意力在屏幕上的情況下，例如：開車時，語音輸入特別有價值。
在設計表單時，可以提供語音輸入作為數據輸入的替代方法。
由於此文章內容幹活較多，需要讀者細心消化。故拆分為上下兩部分。
本文由 @Johnson 原創發布於人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash ，基於 CC0 協議