導讀：用戶很可能在填寫表單時會猶豫不決。其實，這也是我們作為設計師為什么要讓用戶填寫表單的過程盡可能簡單容易的主要原因和目的。Nick為我們分享了一些可以真正幫助到大家設計出更好的表單用戶體驗的技巧和經驗。

表單是所有移動端產品交互的關鍵，是人們和產品之間的樞紐。

每天，我們都可能需要使用到表單。

回想一下，你上次買票、預定酒店房間或者在網上購物的場景——很可能你與這些產品之間的每一個互動場景都包含了填寫表單這一過程。

表單是我們實現目的的一種方式。用戶應該能夠快速地填寫完表單，用戶在填寫表單時，盡可能地不要給用戶增添困惑。

通過本文，你將會學習到一些實用的移動端表單設計技巧，幫助大家設計出體驗更好的移動端表單。

一、什么是表單的可用性

每個表單設計的主要目標是提升表單的完成率。

而影響表單完成率的因素主要體現在兩方面：

1. 復雜性的感知

用戶在看到新表單時，首先感知到要做的第一件事情是預估一下完成這個表單填寫大概需要多長時間。

用戶通常通過整體掃描表單的方式來預估有多少表單要填寫，大概需要花費自己多長時間；這種感知在用戶評估填寫表單的時間時起到了至關重要的作用。

如果表單看起來越復雜，那么，用戶就越有可能會選擇放棄填寫當前的表單。

2. 交互成本

交互成本指的是用戶為了達到其目標而與界面發生交互行為所付出努力的成本總和。

交互成本直接關系到表單的可用性。用戶為了完成表單所付出的努力越多，表單的可用性就越低，高交互成本可能由于表單填寫困難、無法理解某些字段的意思或者是由錯誤信息提示的混淆而造成的。

二、表單的組成部分

一個典型的表單由以下五個部分組成：

1. 輸入字段
2. 字段標簽
3. 表單布局結構
4. 操作按鈕
5. 反饋

本文涵蓋了與表單結構、輸入字段、標簽、操作按鈕和驗證反饋相關的內容。

本文中提到的大多數要點都有相應的“正確用法”和“錯誤用法”的示例；所有的這些示例都是使用Adobe XD創建的。

1. 輸入字段

input字段包括文本字段、密碼字段、復選框、單選按鈕、滑塊和任何為用戶輸入而設計的其他字段。

當涉及到表單設計時，設計師能做的最重要的事情通常就是最小化用戶填寫表單的需求。結合業務需求和用戶需求，減少一些對用戶來說是非必填的輸入字段，從而減少用戶填寫表單的成本，以提升用戶填寫表單的效率，這是很有必要的。

設計師是可以通過表單設計來實現這一目標的：

2.1.1 盡量減少字段的數量

你要求用戶填寫的每個字段都需要用戶為此付出成本。填寫表單的工作量越大，用戶完成表單的可能性就越小。這就是為什么表單設計的基本原則是更短更好——去掉所有不必要的字段。

Baymard研究所對用戶付款方式展開研究分析，發現付款流程太長或太復雜是用戶在付款過程中放棄付款的主要原因之一。該研究還發現，用戶平均一次付款需要填寫近15個字段。大多數在線服務可以將默認顯示的字段數量減少20%到60%。

結賬時被放棄付款的主要原因。(圖片:Baymard研究所)

其實，很多設計師都知道“少即是多”的設計原則，但是，他們還是會增加額外的字段，試圖收集更多關于用戶的信息。在用戶剛開始注冊的過程中，就收集用戶更多的信息可能會有一定的誘惑力。

但是要抵制這種誘惑，需要考慮到：表單每額外添加一個字段，都會有可能增加丟失潛在用戶的風險。

你從新用戶填寫的注冊表單中多獲取的信息，真的值得失去一位新用戶嗎？

請記?。褐灰阋呀浭占擞脩舻穆撓敌畔?，你就可以跟增并請求獲得更多關于用戶的信息。

2.1.2 清楚地區分出所有可填字段

在優化可選字段之前，問一下自己在你的表單中是否真的需要這些字段。仔細思考你真正需要的信息是什么，而不是你自己想要的信息。在理想情況下，表單中可選字段的數量應該為零，表單中理應留下必填的重要字段。

如果在你頭腦風暴之后，仍然想在你的表單中添加一些可選的問題字段，那你需要讓用戶清楚地知道這些字段是可選填的，而不是必填。

2.1.3 標記可選填字段而不是必填字段

如果你要獲取用戶的信息比較少，那么你的表單中大多數的字段將會是必填的。因此，只標記少數的那些字段。

例如，如果6個字段中有5個必填的，那么只將一個字段標記為可選字段是非常有用的。使用“可選填”標簽表示可選填字段。

避免使用星號（*）表示“可選填”。并不是所有用戶都會將星號（*）與可選信息相關聯，有一些用戶會對星號的含義感到困惑（星號通常用于表示強制字段）。

清楚區分所有的可選填字段

2.1.4 字段大小

如果可能的話，使用字段長度作為字段內容輸入的提示。輸入字段的長度應該與字段中預期要填寫的信息量成正比例。字段的大小將作為一個視覺約束限制——用戶僅通過查看字段長度就可以知道需要輸入多少文本。一般來說，地區代碼和住宅號碼等字段應該要比街道地址字段短。

字段的大小用作視覺約束

2.1.5 提供表單域字段焦點

光標自動聚焦到表單中的第一個輸入字段。

自動對焦字段能夠為用戶提供指示作用，告知用戶從哪一個字段開始填寫，以幫助用戶能夠快速地開始填寫表單——這樣可以在一定程度上減少用戶的交互操作成本和時間成本——節省用戶一個不必要的點擊操作（觸發輸入字段操作步驟）。

確保突出并聚焦處于點擊狀態的字段。

輸入字段的焦點本身理應是非常清晰可見的——用戶應該能一眼就知道焦點在哪里。強調處于點擊活躍狀態的字段可以是帶有高亮展示的邊框顏色，也可以是在文本框內添加淡淡發亮的顏色。

Amazon聚焦的輸入字段設置了非常明顯的視覺效果

2.1.6 不要讓用戶重復輸入他們的電子郵箱地址

電子郵箱地址作為額外的字段在產品設計中頗受歡迎。每一家公司都希望最小化硬反彈風險（指的是由無效的電子郵箱地址導致用戶不可交付內容）。

很不幸，遵循這種方法并不能保證你會得到一個有效的地址。

用戶經常將郵箱地址從一個字段直接復制粘貼到另外一個字段，而不是重新輸入一遍電子郵箱地址；對用戶來說，要求用戶重復輸入相同的電子郵箱地址是無法百分百地保證你得到一個有效的地址的（譯者建議：郵箱鏈接驗證或郵箱驗證碼驗證）。

請求用戶重新輸入他們的電子郵件地址是無效的

2.1.7 提供“顯示密碼”選項

重復輸入密碼字段是產品設計人員比較容易犯的另外一個錯誤。設計師采用這種方法是因為他們相信這樣可以防止用戶輸入錯誤的密碼。

然而實際上，重復輸入密碼字段不僅是增加了用戶的交互成本，而且還不能夠保證用戶不會出錯。因為用戶看不到他們在密碼字段中究竟輸入了什么，所以他們很有可能會犯兩次相同的錯誤（在兩個相同的密碼字段中），并且在嘗試使用密碼登錄時會遇到問題。

Jakob Nielsen 總結：

當用戶輸入密碼時，他們得到的唯一反饋就是一排黑色的實心圓點，可用性會受到很大的影響。一般而言，隱藏密碼并不會提高用戶信息的安全性。但是，當登錄失敗時，它確實會讓你為此而付出一定的代價。

提供一個選項，允許用戶查看他們自己設置的密碼，而不是復制密碼字段?？梢蕴峁┮粋€圖標或者復選框，當用戶點擊圖標或復選框時，可以查看密碼。顯示密碼可以讓用戶在提交表單之前檢查他們輸入的密碼。

不能看到你在輸入什么是一個巨大的問題。在密碼字段旁邊提供“顯示密碼”選項將有助于解決這個問題。

2.1.8 不要拆分一條完整的字段

在詢問全名、電話號碼或出生日期時，不要拆分字段。拆分一條完整的字段會迫使用戶通過點擊來移動到下一個字段。對于需要某種格式設置的字段（如電話號碼或出生日期），最好有一個單獨的字段，并用非常清楚的格式展示，提供默認格式的占位符，告知用戶。

避免拆分輸入字段;不要讓人們在不同的領域之間跳躍。不要在兩個不同的字段中要求名和姓，而要有一個“全名”字段。

2.1.9 避免下拉菜單

Luke Wroblewski有句名言說過：

下拉列表應該是最后的選擇。下拉菜單的交互體驗對移動端設備來說十分糟糕，因為折疊后的元素會使在小屏幕上輸入數據的過程變得更加困難：下拉菜單中里的選項需要用戶點擊兩下并隱藏選項。如果你在表單設計中使用了下拉菜單作為選項，請考慮用單選按鈕替代它。他們將使得所有選項都具有可瀏覽性，與此同時，也降低了用戶的交互成本——用戶可以直接點擊選項并可立即選擇。

2.1.10 使用占位符和遮罩輸入

格式不確定是表單設計中最重要的問題之一。用戶放棄填寫表單與格式不確定有著直接關系——當用戶不確定應該按照什么格式要求來填寫表單時會很困惑糾結，很快就會放棄填寫表單。

有一些方法可以使得表單字段的格式更加清晰：

占位符文本

輸入字段中的默認文本可以有效提示用戶具體應該如何填寫。對于“全名”之類的簡單字段不需要占位符文本內容的提示，但是對于需要特定格式的數據字段，占位符的存在具有非常大的價值。

例如，如果你設計了跟蹤包裹的搜索功能，那么最好在搜索文本框內提供一個搜索跟蹤號的示例，作為跟蹤包裹號的占位符，引導并告訴用戶該如何快速高效地搜索。

占位符文本和用戶實際輸入的內容在視覺上要有明顯的區別，這一點十分重要。換句話說，占位符文本不應該看起來像是一個預設好的數值（譯者：占位符的作用在于提示用戶如何填寫當前表單字段，絕不是默認的預設值，預設值是幫助用戶選擇或填寫的初始值，用戶可以修改也可以不修改）。

如果，這兩者之間沒有非常明顯的視覺上的區分，用戶可能會認為占位符的字段已經有了數值，不需要填寫，極容易誤導用戶填寫表單時犯錯。

遮罩輸入

字段遮罩是一種幫助用戶格式化輸入文本的一門技術。許多設計師將字段遮罩與占位符文本相混淆——它們兩者是不同的。與占位符（基本上是靜態文本）不同，遮罩輸入會自動統一格式化用戶輸入的數據信息。在下面的示例中，當用戶輸入電話號碼時，括號、空格和破折號將自動出現在界面上。

這種輸入方式也使得用戶更容易驗證填寫的數據信息。當電話號碼以塊的形式顯示時，查找和糾正錯別字變得容易了許多。

遮罩輸入電話號碼。(圖片:Josh Morony)

為不同的表單字段類型提供相匹配的鍵盤面板

移動端用戶更喜歡那些能夠為特定表單類型提供匹配鍵盤的應用程序和網站。這樣的鍵盤特性設置可以有效規避用戶執行其他操作。例如，當用戶需要輸入信用卡號碼時，應用程序應該只顯示撥號鍵盤。在整個應用程序中匹配相對應的鍵盤是非常重要的（應用程序中的所有表單都應該具備此功能）。

通過設置HTML輸入類型來顯示正確的鍵盤面板。

與表單設計相關的七種輸入類型：

• input type=”text” 輸入類型為“文本”時，顯示移動設備的默認鍵盤模式。
• input type=”email”輸入類型為“郵箱”時，顯示默認標準鍵盤和“@”、“.com”
• input type=”tel”輸入類型為“tel”，顯示數字0到9的鍵盤。
• input type=”number”輸入類型為“number”時，顯示帶有數字和符號的鍵盤。
• input type=”date”輸入類型為“date”時，顯示移動設備的日期選擇器。
• input type=”datetime”輸入類型為“datetime”時，顯示移動設備的日期和時間選擇器。
• input type=”month”輸入類型為“month”時，顯示移動設備的月份和年份選擇器。

當用戶用信用卡號碼輸入一個字段時，他們應該看到一個數字撥號板——全是數字，沒有字母。

輸入特定范圍時，使用滑塊

許多表單要求用戶提供一系列數值（例如，價格范圍、距離范圍等）。因此，不要使用兩個單獨的字段“from”和“to”，而要使用滑塊允許用戶通過手指滑動的交互方式來指定范圍。

滑動器很適合于觸摸界面，因為它們允許用戶無需輸入就可以指定一個范圍。

2.1.11 清楚地向用戶解釋你為什么要問一些隱私的信息

人們越來越關注隱私和信息的安全。當用戶看到應用程序要求獲取他們個人隱私信息的請求時，他們很可能會想“嗯？為什么需要獲取我的這些個人信息？”。

如果你設計的表單有要求用戶提供個人隱私信息，一定要向用戶解釋你為什么需要獲取用戶這些隱私信息；同時，還要向用戶保證不會泄露用戶的隱私信息，保證用戶個人隱私信心的安全性。

你可以通過在相關字段下面添加一行文本來向用戶解釋要求填寫個人隱私信息的的具體原因。通常解釋性文本不應該超過100個字符。

在預訂表單中請求一個電話號碼可能會讓用戶感到困惑。向用戶解釋你這樣做的原因。

2.1.12 注意靜態默認值

與智能默認值不同（智能默認值是由系統根據用戶的數據信息計算得出。譯者：即利用大數據技術獲取每個用戶的數據信息，通過一定的算法計算出默認數值，每個用戶對應的智能默認數值是不同的），靜態默認值是預先設置好的數值，其默認數值對所有的用戶而言都是相同的。避免靜態默認值，除非你認為很大一部分的用戶（比如95%的用戶）會選擇這些數值——尤其是對于那些必填的字段。

為什么呢？

因為在填寫表單時，你可能會誤導用戶犯錯誤——通常人們會快速瀏覽表單，不會多花時間去思考所有的字段；相反，他們會跳過已經有了數值的那些字段。

2.1.13 保護用戶數據

Jef Raskin曾經說過：

“系統應該將所有用戶的輸入行為視為是神圣的行為。對于表單而言，這無疑是絕對正確的。當你開始填寫web表單時，然后不小心地刷新了頁面，但是數據仍然保存在字段中，這是非常好的體驗?！?/p>

像Garlic.js自動保存表單這樣的工具可以幫助用戶將填寫的表單數據保存在本地，直到提交表單為止。

這樣一來，如果用戶真的是不小心關閉了瀏覽器窗口，用戶也不會丟失任何寶貴的數據。

2.1.14 自動化操作

如果你希望用戶在填寫表單時盡可能地順暢，只減少用戶填寫表單字段的數量是不夠的——你還應該注意用戶在填寫表單時需要為此付出的成本。

填寫表單本身有很高的交互成本——哪怕是用戶使用物理鍵盤，也很容易出錯，也需要花費用戶不少的時間來填寫表單內容。

所以，用戶在移動端界面上填寫表單時，用戶填寫表單的行為就變得更加重要了。要求用戶輸入的字段越多，就越會增加用戶出錯的幾率。因此，一定要防止出現不必要的字段，這樣方能提高用戶滿意度，降低出錯率。

下面是可以幫助你實現這樣目標的幾條建議：

自動完成

大多數用戶在谷歌的搜索框內輸入問題時都會自動關聯信息，幫助用戶自動完成內容輸入。谷歌向用戶提供了與用戶在搜索文本框內輸入內容關鍵詞相關的建議，且以列表的形式展示。同理，這樣的關鍵詞智能聯想機制也可以應用到表單設計中來。例如表單可以自動完成電子郵件地址的輸入。

（譯者；網易郵箱登錄表單設計中使用了此方法，當用戶水潤郵箱前綴會關聯相似度很高的郵箱，同時展示常用的郵箱后綴。此外，用戶已經輸入的郵箱賬號會保存為歷史記錄，如果用戶下回再次輸入時，會優先展示用戶之前已經輸入過的內容。百度搜索也是同樣的邏輯。所以，通過這些案例可以幫助我們了解其設計背后的目標和動因）。

此表單設計旨在說明當用戶輸入電子郵件時，避免用戶不需要輸入完整的地址。(圖片:GitHub)

首字母自動大寫

使用戶輸入的第一個字母自動切換為大寫字母。此特性非常適合應用在需要填寫名稱和街道地址等字段的使用場景，但是不可用在密碼字段。

自動更正

自動更正和修改那些看上去拼寫錯誤的詞。這種特性不適合應用在名稱、地址等唯一性字段的場景。

自動填充個人信息

對于用戶而言，在任何在線注冊頁面的表單中，輸入地址通常是最為麻煩的事情。通過技術手段讓瀏覽器記住用戶之前已輸入過的信息，有助于用戶更容易完成表單的填寫。

據谷歌的研究表明：當用戶填寫表單時，通過自動填充個人信息的方式，用戶填寫表單的速度提升了30%。

自動填充地址信息。圖片來源：谷歌

用移動設備自身特性簡化表單輸入

現代化的移動設備是一種擁有很多功能的復雜設備。設計師可以使用移動設備的自身特性來簡化用戶填寫表單時的操作任務，例如移動設備自身具備的相機功能、地理定位LBS服務等。

下面是一些使用移動設備傳感器和設備硬件的技巧：

地理位置服務

可以根據用戶的地理位置數據預先選擇用戶所在的國家（或可以精確到當前用戶所在的城市）。

但是需要注意的是：移動設備的地理位置服務會存在定位不準確的情況，所以，移動設備預先選擇的地址可能存在問題。

谷歌的Place API可以解決這個問題。它是使用地理定位，預先設置好用戶默認的地址，根據用戶的確切位置再提供精準的建議。

使用谷歌Places API進行地址查找。(圖片:彩色HQ)

使用地理位置服務，還可以為用戶提供智能默認值。例如，查找航班的表單，可以根據用戶的地理位置，默認為用戶選擇最近的機場。

生物識別授權

今天用戶使用密碼遇到的最大問題是大多數人會忘記密碼。82%的人會忘記自己注冊時設置的密碼，其中，5%～10%的用戶需要重置密碼。找到用戶的登錄密碼是電子商務產品設計中最重要的事情之一。當用戶在辦理退房手續時，如果他們忘記了銀行卡密碼，則無法完成付款。

未來將不再需要文本密碼。即使在今天，移動開發者也可以利用生物識別技術。用戶不需要輸入密碼，他們應該能夠使用生物識別技術進行個人的身份驗證——比如，使用指紋或面部掃描進行登錄。

eBay利用智能手機的生物識別功能。用戶可以使用他們的拇指指紋登錄到他們的eBay帳戶。

相機

如果您的表單要求用戶提供信用卡或駕照詳細信息，那么可以使用攝像頭作為掃描儀來簡化用戶輸入卡片信息的成本?？商峁┮粋€按鈕選項，能自動給卡片拍照并填寫所需信息。

讓用戶掃描他們的身份證，而不是手動填寫他們信用卡片上的信息。（圖：blinked）

但是，請記住無論你的應用程序已經填寫了多少個字段，都必須讓他們可以編輯。用戶應該能夠隨時修改已經填寫的字段。

語音

蘋果(Apple)的HomePod、谷歌Home和亞馬遜(Amazon)的Echo等聲控設備，正積極進軍這個市場。喜歡使用語音進行操作的人數在顯著增加。據ComScore的數據，到2020年，語音搜索將占所有搜索的50%。

美國人如何使用智能揚聲器（數據來源：comScore）

隨著用戶越來越習慣使用語音，語音交互將成為移動端用戶喜歡的功能。語音輸入為移動用戶提供了更多的便捷性——尤其是當用戶不能集中注意力在手持設備屏幕上的場景，比如用戶正在開車的場景。

在設計表單時，你可以通過提供語音輸入作為數據輸入的另一種方式。

谷歌翻譯為用戶提供一個語音操作按鈕，以便用戶可通過語音的方式輸入文本快速進行翻譯

2. 字段標簽

label字段標簽用來告知用戶相應字段的含義。

2.2.1 標簽需清晰明了

lable標簽是告知用戶每一個字段應該填寫什么信息的文本。

編寫清晰的標簽可以使用戶更清楚地明白要填寫什么信息，標簽命名應該能讓用戶一眼就知道需要填寫什么信息。

避免用完整的句子來解釋。

標簽不是幫助性的文本。需要簡潔明了的標簽文案(可以是一兩個單詞)，以便用戶可以快速瀏覽你的表單。

2.2.2 將標簽和字段放在一起

把每個標簽放在輸入框附近，因為眼睛會從視覺上知道它們是被綁在一起的。

標簽和其對應的字段應該分組可視，以便用戶能夠理解哪個標簽屬于哪個字段

2.2.3 不要使用占位符作為標簽文本

雖然內聯標簽看起來不錯，節省了移動端寶貴的屏幕空間，但是容易引起表單其他的可用性問題，其中，最為嚴重的問題是模糊了字段本身要求用戶填寫的是什么信息。

當用戶開始在字段中輸入文本時，占位符文本會消失，會迫使用戶去回憶文本字段中消失的信息，增加用戶記憶成本，返回想一下字段要填寫什么內容。

雖然，對于簡單的兩條字段的表單來說這可能不是什么問題，但是對于具有很多字段的表單(比如7到10個字段)來說，這可能是一個非常大的可用性問題。

用戶填寫表單輸入字符后，用戶很難記住所有字段的標簽。由此可見，用戶嘗試不斷顯示表單字段中的占位符再繼續輸入新字符，用戶通過反復撤銷文本框內已輸入的字符，來查看字段名稱，其暴露出嚴重的可用性問題就不足為奇了，可用性問題遠大于其提供的幫助。

不要使用占位符作為字段名稱

對于消失的占位符問題，有一個簡單的解決方案是使用浮動(或自適應)標簽的方式。

顧名思義，當用戶點擊字段后，標簽占位符不會消失，它會移動到字段的頂部，為用戶輸入字符內容留出空間。

浮動標簽可以確保用戶正確輸入字符。（圖片：馬特·d·史密斯）

2.2.4 標簽和字段頂部對齊

在表單中將字段標簽放在字段上方更便用戶快速掃視表單。谷歌使用眼球追蹤技術，結果表明：用戶在提交表單前需要更少的注視、更少的注視時間和更少的掃視。

此外，標簽和字段頂部對齊還有另一個重要的好處，可以為標簽留出更多的展示空間，特別適用于小型移動屏幕，能夠展示長標簽，可以讓表單文本字段橫向擴展至屏幕的寬度，由足夠大的區域給用戶輸入輸入更為完整的字符。

2.2.5 句子和標題的大小寫比較

有兩種常用的大寫方式：

標題：每個字母都大寫?！癟his Is Title Case?！?/p>

句子：“首字母大寫”?！癟his is sentence case?！?/p>

在標簽中不用標題而使用句子有一個優勢：首字母大寫的句子比全都是大寫的標題文本更容易閱讀。雖然短標簽的大小寫區別可以忽略不計(“全名”和“全名”之間沒有太大區別)，但對于長標簽文本，只是首字母大寫的句子更易讀?，F在你應該知道在標題大小寫中讀長文本該有多么困難了吧。

2.2.6 避免全部使用大寫的標簽文本

文本全部是大寫，這意味著文本的所有字母都是大寫，在不涉及實質性閱讀(縮寫和標志等)的上下文語境中是可讀的,但我們要避免全部大寫。

正如Miles Tinker在他的著作《印刷易讀性》中提到的，全大寫印刷與小寫文本相比，大大降低了掃描和閱讀的速度，影響文本的易讀性。

全部為大寫字母難以掃視和閱讀

3. 表單布局結構

表單結構包括字段的順序、表單在頁面上顯示的位置，以及不同字段之間的邏輯關系。

現在你已經了解到用戶是瀏覽網頁，而不是閱讀網頁的行為習慣。同樣，用戶填寫表單也是瀏覽而不是閱讀。這就是為什么設計師應該設計一個易于瀏覽的表單的原因了。因此，更加易用且有助于用戶更快掃視的表單才是設計的關鍵。

2.3.1 使用單列布局

CXL研究所的一項研究發現：單列表單比多列表單完成得更快一些。在這項研究中，參與測試的人完成單列表單的平均速度比多欄表單快15.4秒。

多列表單會打斷用戶的垂直瀏覽的順序，用戶瀏覽多列表單時，眼睛呈“之”字形狀移動，大大增加了眼睛注視界面的移動次數，從而增加了完成表單填寫的時間。此外，多列表單可能會給用戶帶來一些不必要的問題，比如“我應該從哪里開始?”、“右邊的問題與左邊的問題同等重要嗎?”

在單列表單設計中，眼睛會沿著自然垂直的方向開始移動，從上到下，每次一行。用戶的瀏覽路徑非常清晰。單列表單非常適合在移動設備終端展示，因為垂直屏幕更長，垂直滾動是移動端用戶瀏覽信息的默認方式。

當然，這個布局規則還有個例外，就是可以在同一行中放置與邏輯相關的簡短字段(如城市和區號，以及省、城市和地區)。

如果表單在水平方向有相鄰的字段時，用戶必須按照Z模式掃描表單。當眼睛開始曲折移動時，它會減慢用戶瀏覽表單的速度，增加完成表單填寫的時間。

2.3.2 注意表單字段的順序

用戶填寫表單字段的先后順序也很重要。你需要按照用戶的思維邏輯去設計表單字段的先后順序，而不是根據應用程序或者數據庫的邏輯去設計——因為這樣將有助于創建更好的人機互動體驗感受。

例如，如果你現在正設計一個結賬表單，需要用戶填寫詳細的信息，如用戶的全名、電話號碼和信用卡，那么第一個問題應該是填寫用戶的全名才符合用戶的正常思維邏輯，若改變字段的順序，則會導致用戶填寫表單很不舒服。

試想一下：讓你先填寫電話號碼而不是姓名，你會舒服嗎？

我們可以想象一下：在現實生活中，你在詢問別人名字之前先問對方要電話號碼正常嗎？

很顯然，這樣并不符合人的正常邏輯。

2.3.3 將關聯性密切的字段分組在一起

格式塔心理學中有一個設計原則，叫做鄰近性原則。具體而言，指的是空間中距離相近的元素會將他們視為一組。在表單字段順序的設計上，可以應用格式塔心理學中的鄰近性原則。

如果表單字段之間的相關性越密切，那么它們就越應該分組在一起（譯者：不僅在表單設計方面，就產品而言，組織的交互設計策略運用更加廣泛，感興趣的設計師可以閱讀《簡約至上·交互式設計四策略》，此書提到的交互式設計四策略，其中之一就是組織/分塊的設計方法，可以深入理解交互式組織策略）。

所以，設計師在設計具體的表單時，需要仔細分析表單字段之間的邏輯關系和相關性，按照表單字段的相關性，將大表單拆分成幾個部分。如果你的表單字段超過6個字段，就可以把相關的字段按照其邏輯關系分成多個部分。

不要忘記在每個部分之間多留一些空白，以便用戶可以通過視覺直觀地區分它們。

一般而言，如果你的表單有超過6個字段，可以把相關的字段按照其邏輯關系分成多個部分。把關系最為密切的字段分組放在一起。

2.3.4 讓長表單看起來更加簡單

如何設計一個長表單呢？

當然了，你可以把所有的表單字段都放在一個屏幕里，但是，這樣無疑會降低你的表單完成率。如果，用戶沒有足夠的動力填寫表單，首先表單的復雜性就會嚇跑你的用戶。

因此，表單給用戶留下的第一印象很重要。一般來說，表單越長或者是越復雜，用戶就越不愿意填寫。

所以，一次只給用戶呈現最少的表單字段。這樣一來，就會給用戶產生一種感覺，即表單看上去要比其實際的表單字段要少許多。

有兩種方法可以做到這一點。

漸進式展示

漸進式展示指的是在用戶需要的時候再給用戶展示對應的信息。我們的目標是在合適的時候為用戶展示所需的信息。

• 剛開始時，只向用戶顯示一些最重要的選項或表單字段。
• 當用戶與表單交互時，再漸進展示用戶與當前表單字段互動的其他內容。

使用漸進式方式展示內容，來減少用戶認知負荷，并讓用戶專注于具體的一項任務。(圖片來源:Ramotion)

分塊

分塊需要將一個長表單拆分成幾個步驟。通常是將表單拆分成幾個步驟，可以提高表單的完成率。分組還可以幫助用戶處理、理解和記住信息。在設計多步驟的表單時，一定要知用戶當前填寫表單字段的進度。

這是一個關于電子商務的表單。(圖片:Murat Mutlu)

設計人員可以使用進度指示器（如上例所示）或者“當前步驟/所有步驟數”的指示器形式，來告知用戶填寫表單一共需要多少步驟，當前處于第幾步，還有多少可以完成。后一種方法更適合移動端表單，因為步驟指示器不會占用太多的界面空間。

4. 操作按鈕

表單至少會有一個動作按鈕（用于提交表單數據的按鈕），按鈕是指示用戶采取行動的交互式元素；按鈕使用具有描述性的動作文案

按鈕文案應該能夠說明按鈕的功能作用是什么；用戶只要看一下按鈕的文案，就能立刻明白點擊之后會發生什么（譯者：按鈕文案不可過長，需簡潔明了，不可有歧義）。

避免使用“提交”和“發送”這樣的通用按鈕文案，而要使用具有描述性的動作文案。

按鈕文案應該幫助用戶完成當前任務的一句話，具體描述是“我想……”，例如，如果它是一個創建帳戶的表單，那么調用行動可以是“創建帳戶”。

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

清除或重置按鈕允許用戶刪除已經填寫好的表單數據。這些按鈕幾乎從來沒有真正地幫助過用戶，反而經常在傷害用戶。如果用戶填寫表單時不小心按錯了按鈕，它們很可能不會或非常不愿意重新開始填寫表單。

2.4.2 主按鈕和輔助按鈕使用不同的視覺樣式

如果可能的話，請避免同時出現兩個或兩個以上的操作按鈕。但是，如果你的表單同時有兩個操作按鈕（例如，電子商務表單中有“使用折扣”和“提交訂單”按鈕），請確保主要操作和輔助操作之間在視覺上有非常明顯的區分。在視覺上優先突出主要操作的那個按鈕，這將有效防止用戶點錯按鈕。

確保主按鈕和輔助按鈕之間有清晰的視覺區別。

2.4.3 設計便于移動端用戶手指觸摸的目標對象

對移動端用戶而言，界面中的可觸摸對象點擊區域非常小，這種是一種非常糟糕的體驗，如此一來，用戶很難能用手指精準地點擊對象。因此，設計出便于移動端用戶手指觸摸的目標對象非常重要：提供更大的文本字段和按鈕。

下圖顯示的是成人手指的平均寬度為11毫米。

人們常常為自己的“胖手指”而自責。但即使是嬰兒的手指也比大多數觸摸目標要寬。(圖片來源:微軟)

根據material design的設計指南，移動端觸摸對象的大小至少為48×48dp。這種尺寸的觸摸對象目標的物理尺寸大約是9毫米，且與屏幕的尺寸沒有關系。為移動端用戶提供更大的觸摸對象可能是最合適的。

觸摸對象的大小尺寸不僅很重要，觸摸對象之間的間距同樣重要。保持觸摸對象之間安全距離的主要原因是防止用戶觸摸到錯誤的按鈕或者是誤操作。當諸如“同意”和“不同意”這樣的二選一按鈕同時展示在一起時，按鈕之間的間距就變得非常重要。

material design的設計指南將觸摸對象之間的間距設定為8dp或者留下更多的空白以分開，展示出了更加清晰的信息，提升了按鈕操作的可用性。

2.4.4 點擊按鈕后禁用按鈕

提交表單通常需要一定的時間來處理。例如，提交表單可能需要進行數據計算，不僅需要在操作時提供反饋，還要禁用提交按鈕，以防止用戶在不確定系統是否在響應自己提交數據信息的情況下反復點擊此按鈕。這對于電子商務網站和應用程序尤其重要。

通過禁用按鈕，不僅可以防止用戶重復點擊，還可以向用戶提供系統正在響應用戶提交表單的請求（用戶將知道系統已經在接收它們提交的數據信息）。

此表單在提交后禁用按鈕。(圖片:邁克爾·維拉爾)

5. 反饋

通過反饋來告知用戶填寫表單的結果。反饋可以是正面積極的內容（例如，表示表單提交成功），也可以是負面的（例如，“您輸入的信息不正確”）。

2.5.1 提供成功的狀態

在用戶提交表單后，，給用戶積極性的反饋非常重要?？梢栽诂F有的表單上下文提供即時反饋信息（例如，在表單上方顯示綠色的成功標記），也可以將用戶引導至新頁面，此頁面主要高速用戶提交表單已經成功。

2.5.2 錯誤和表單驗證

用戶會犯錯。這是不可避免的。設計一個支持用戶在填寫表單出錯的情景下的用戶界面非常重要。雖然，關于錯誤和表單驗證的主體可以用單獨的一篇文章來闡釋，但是仍然有必要提到一些應該做的事情來改善移動表單的用戶體驗。

2.5.3 為每一個表單字段增加限制條件

預防勝于治療。如果你是一位資深的用戶界面設計師，你應該熟悉最常見的可能會導致錯誤狀態（容易出錯的情況）的情況。

例如，通常用戶很難在第一次就能正確地填寫表單，或者在移動設備網絡連接不佳的情況下成功同步數據?？紤]到這些可能出現的場景，將用戶出錯的可能性降到最低。

換句話說：最好為每一個表單字段增加約束條件和提供建議，以防止用戶在第一次填寫表單字段時犯錯誤。

例如，如果你設計了一個用戶預定酒店的表單，你應該限制用戶選擇過去的入住日期。如下面的Booking.com網站所示，你可以使用日期選擇器，它只允許用戶選擇今天的日期或者將來的日期。這樣的日期選擇器將迫使用戶選擇適合且有效的日期范圍，避免出錯。

通過對字段中可以輸入的內容設置約束條件，可以有效減少用戶填寫表單時因不正確輸入數據的錯誤。Booking.com應用程序中的日期選擇器顯示一個完整的月歷，但無法選擇過去的日期。

2.5.4 不要讓數據驗證規則太嚴苛

雖然在某一些場景下使用嚴苛的驗證規則是必要的，但是，大多數情況下，過于嚴苛的驗證規則會導致系統響應很慢（譯者：可以理解為程序需要解析驗證邏輯，邏輯過多或過于復雜），當用戶以稍微不同于預期的格式填寫表單時，表單界面則會顯示錯誤會造成不必要的麻煩。這樣會影響表單的轉化率。

一個問題會有很多個不同的答案是很常見的；例如，當表單要求用戶提供有關其所在州的信息時，用戶會輸入州的縮寫而不是全稱（例如，CA而不是California）。表單應該支持這兩種格式，而將用戶輸入的這兩種不同的格式轉換為一致的格式，這是開發人員的工作。

2.5.5 設計明確的錯誤提示信息

當你設計表單錯誤信息文案時，重點是要盡量減少用戶在填寫表單遇到問題時的挫敗感。

以下是一些關于有效設計錯誤提示的規則：

永遠不要責怪用戶

向用戶發送錯誤提示信息時，會對用戶的心理造成一定的影響。像“您水潤了一個錯誤的號碼”這樣的錯誤信息會把所有的責任都推給用戶；因此，用戶會感到更加沮喪和挫敗，會放棄當前表單填寫任務甚至以后再也不用這個軟件產品了。

一句中立的信息提示像這樣：“那個數字是不正確的?！保ㄗg者：向用戶展示錯誤提示信息時，盡量不要使用第二人稱，可以直接不用人稱，防止使用第二人稱，帶給用戶更多負面的挫敗感）

避免含糊不清或一般性的錯誤提示信息

比如“出問題了，請稍后再試”的消息提示，不要對用戶說這些沒用的。用戶會想知道到底是出了什么問題。用戶總是會試圖思考問題的本質。所以，請確保當用戶遇到這樣的問題時，要讓用戶知道究竟該如何操作，要給出具體可行的解決方案，而不是提供一些沒用的信息。

錯誤提示信息要具有可讀性

向用戶提供類似“用戶輸入錯誤:0x100999”之類的錯誤消息太糟糕了。錯誤提示信息要用人能夠聽看懂的描述，而不是展示這些代碼數字的錯誤提示信息，大多數的普通用戶時無法理解的。所以，請使用人類語言，解釋用戶或系統到底做錯了什么，用戶應該怎么做才能解決當前的問題，不要使用用戶看不懂的機器語言。

2.5.6 在表單字段內聯顯示錯誤信息

當顯示錯誤信息時，設計師會選擇兩種方式：在頁面頂部或者在表單內聯顯示。前者消息提示方式的體驗很糟糕。

Javier Bargas-Avila和Glenn Oberholzer對在線表單驗證進行了研究，發現：在表單頂部顯示所有錯誤信息，會給用戶的記憶帶來很大的認知負擔——用戶需要花費額外的時間將錯誤消息與需要注意的表單字段一對一地去匹配。

避免在頁面頂部顯示錯誤。(圖片:John Lewis)

最好在表單字段行內顯示錯誤信息。首先，這種布局符合用戶自上而下的閱讀順序。其次，錯誤消息提示會出現在用戶正在填寫表單的字段下，便于精準查看填寫出錯的字段是哪一個，從而有效提升成功填寫表單的效率。

eBay應用程序使用了表單行內驗證。

2.5.7 使用動態驗證

選擇顯示錯誤提示信息的時間非常關鍵。在用戶按下提交按鈕后看到錯誤消息可能會讓用戶感到非常沮喪。

不要等到用戶填寫完所有的表單信息后再一次性給用戶展示錯誤信息提示，這樣用戶需要花更多的時間去核實每一個填寫不正確的字段，同時心里會更加沮喪，所以，在用戶輸入字段內容時就即時提供反饋。

使用表單字段內聯驗證和實時反饋。這種驗證方式可以立馬告訴用戶輸入的信息是否符合表單填寫的要求。

2009年，Luke Wroblewski針對提交后驗證測試了表單字段內聯驗證，發現內聯版本的結果如下:

• 成功率增加22%
• 錯誤率減少了22%
• 滿意度提高了31%
• 完成時間減少了42%
• 眼光停留率減少了47%

但是，使用表單內聯驗證方式還需要注意：

避免在表單字段處于焦點狀態時顯示內聯驗證提示信息

在這種場景下，用戶點擊字段后，它們會看到一條錯誤信息提示。即使字段完全為空，也會出現錯誤提示。當表單字段焦點上顯示錯誤消息時，看起來就像是用戶在還沒有填寫之前就已經出錯，這種體驗很顯然并不友好。不要在用戶在每個字段內輸入內容后驗證（譯者補充：前提是當前表單字段還處于焦點狀態）。

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

這種方法不僅增加了不必要的驗證消息提示數量，而且還會讓用戶感到十分沮喪（因為用戶可能會在完成字段之前看到錯誤消息）。理想的情況應該是，內聯驗證消息應該在用戶停止輸入當前字段內容或移動到下一個字段后500到1000毫秒出現。

這個規則還是有一些例外的場景存在：當用戶創建密碼（檢查密碼是否滿足復雜性要求）、創建用戶名（檢查名稱是否可用）時，使用內聯驗證的方式實時顯示字符限制的消息提示是非常有用的。

先提供積極性的提示信息，后提示負面的錯誤提示是一種比較可靠的驗證方法。(圖片:Mihael Konjevi?)

可訪問性

所有具備一定行為能力的用戶應該能比較容易的使用數字產品甚至是在享受數字產品給用戶帶來的便捷。設計師應該在設計產品時盡可能地考慮產品的可訪問性需求。下面是一些可以讓表單更容易訪問的方法：

確保表單有一定的對比性

你的用戶可能會在戶外與你的表單交互。確保在強光和弱光的環境下，用戶都能夠很容易地使用你的產品。檢查頁面中字段和標簽的對比度。

W3C對正文的文本推薦了下面的對比度：

• 小字號文本與背景的對比度至少為5:1
• 大字號文本（14點粗體、18點 常規及以上）的對比度至少為3:1。

測量顏色對比度似乎會讓人很困難。但是，有一些工具可以幫助我們測量對比度。例如，Web AIM Color對比度檢查器，它可以幫助設計師測量顏色的對比度。

不只用顏色來顯示狀態

全球約有1/12的男性（8%）和1/200的女性患有色盲（或色覺缺失）。雖然色盲有很多種，但是常見的兩種是先天異常，一種是對紅光的敏感度降低，一種是對綠光的敏感度降低。

在顯示驗證錯誤或成功的消息提示時，不要只用顏色來傳達信息（即輸入字段為綠色或者紅色）。

正如W3C官方指南所說的那樣，顏色不應該被用作傳遞信息、指示操作、界面響應反饋或區分視覺元素的唯一視覺手段。設計師應該用顏色來突出或補充那些可見的部分。需要通過提供額外的視覺提示來幫助色盲用戶群體更好地理解用戶界面。

使用圖標和文本顯示無效或填寫出錯的字段。有助于解決色盲患者因色盲而無法獲取有效信息的問題。

允許用戶控制字體大小

允許用戶自由控制字體大小以提升可讀性。移動設備和瀏覽器會有一些功能可以使用戶能夠在系統范圍內調整字體大?。ㄗg者：尤其是對于一些與閱讀類的產品，能夠允許用戶自由調整頁面字體大小。目前主流的瀏覽器是可以支持訪客自主調整頁面字體大小的）。此外，作為設計師，你需要確保表單字段為字體大小提供了足夠的顯示空間。

WhatsApp提供了允許用戶在應用程序種更改字體大小的選項。

驗證你的設計

以上提到的所有要點都可以看成是行業內最好的實踐要點。但是，所謂“最好的實踐”并不意味著這是你的表單的最佳設計解決方案。應用程序和網站在很大程度上取決于它們各自的真實使用場景。

因此，需要驗證你的設計決策是非常有必要的。要確保用戶順利填寫表單，操作流程不會被中斷，用戶可以解決他們在填寫表單過程中遇到的任何問題。

定期進行可用性測試，去收集用戶反饋的相關數據。

結論

用戶在填寫表單時可能會猶豫不決。所以，作為設計師，我們的設計目標就是要幫助用戶填寫表單盡可能地簡單。在設計表單時，盡可能創建可以幫助用戶快速填寫表單又不會或很少填寫出錯的交互方式。有的時候，一個小小的改變就可以有效提高表單的可用性，比如，正確地描述一條錯誤提示信息。

本文為筆者原創翻譯，僅供學習交流使用，本文版權歸原作者所有，轉載請注明出處

 

作者：Nick Babich

原文地址：https://www.smashingmagazine.com/2018/05/how-do-you-know-website-success/#

本文由 @沉一 翻譯發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash ，基于 CC0 協議