你知道如何設計出用戶友好型表單嗎？你知道其中需要掌握什么技巧嗎？筆者將為你仔細介紹其中的要點。

在開始這篇譯文之前，先普及下什么是表單。表單在網(wǎng)頁或 app 中主要負責數(shù)據(jù)采集的功能。也就是說，大部分起到了數(shù)據(jù)采集功能的模塊，我們都可以稱其為表單。

表單作為平臺與用戶聯(lián)系最為緊密的一環(huán)，也是影響商業(yè)交易成功與否的重要分水嶺。那么在設計過程中，需要怎樣規(guī)避風險，提升表單頁面的產(chǎn)品體驗呢？作者會從幾個案例具體分析，歸納了11個表單設計中的常見注意事項。當然，這些規(guī)則都是在表單設計中的一般準則，每條準則都有例外。

表單的構(gòu)成要件：標題、標簽、輸入字段、幫助提示、占位符、反饋、操作。

亞馬遜的注冊頁面

1 保持簡短

沒有用戶會喜歡填寫很長的表單，我知道花一些時間來詢問每個字段是否對于用戶實現(xiàn)其目標是必要的，這需要很多時間，但是相信我，減少用戶填寫的工作量將會使更多用戶填寫表單。

譯者注：必要而不是全部，簡化表單，或許是優(yōu)化表單的最大建議。簡化的辦法之一就是追溯每個字段為什么需要，是否是當前最相關(guān)的信息，如果它是可選的，最好不要顯示。

ASOS的注冊步驟沒有必要這么長，它包括了很多多余的字段

2 可視化組字段及其標簽

標簽需要緊密挨著輸入框，利用空白分割上下的距離，尤其是標簽的位置在輸入框的上邊。

一定要緊密將標簽與輸入框組合在一起，因為人們潛意識中會認為緊密聯(lián)系的組合是一個整體—格式塔原理。

譯者注：標簽告訴用戶需要輸入什么。這里作者強調(diào)了位于輸入字段頂部的標簽要緊密挨著輸入字段，牢記設計中的格式塔原理。

亞馬遜注冊頁面，充分利用了空白讓上下的輸入框分割從而更容易瀏覽

3 清楚地顯示你的要求

告訴用戶你們需要什么，不要等到用戶填完表單之后才反饋錯誤信息，這是一種非常不友好的負面強化形式。如果不明確提示用戶怎么填，用戶將不知道他填寫的內(nèi)容是否正確，這尤其適用于“密碼”字段，因為不同的產(chǎn)品有不同的要求。

譯者注：幫助提示在表單中是必不可少的組成部分。作用在于說明要求，解釋原因。根據(jù)產(chǎn)品的不同需求，存在的形式有2種：

1. 常駐（比如密碼要求可以一直顯示在頁面中）
2. 按需提供（針對部分用戶的低頻需求，比如對字段的解釋，鼠標懸停在幫助圖標上才顯示說明）

這種提示不僅降低了用戶填錯密碼格式的概率，而且為用戶創(chuàng)建新賬戶提供了積極的動力

4 避免使用占位符文本作為字段標簽

占位符，標簽的額外描述，幫助用戶了解可輸入的數(shù)據(jù)類型和格式提示，但是有一些設計師卻用占位符替代了字段標簽，從而使得整體看起來更簡約。

這樣做的問題是，一旦用戶輸入字段交互，占位符文本就會消失，如果用戶忘記了字段的用途，必須在其外部單擊以再次查看占位符，這可能會很煩人。

谷歌使用智能微交互來克服這個問題，當用戶點擊輸入框的時候，占位符文本會縮小到左上角變成小標簽。

譯者注：以上谷歌的注冊頁面的標簽形式即“內(nèi)聯(lián)標簽”，多數(shù)情況下謹慎使用內(nèi)聯(lián)標簽，在用戶輸入后，內(nèi)聯(lián)標簽會消失，用戶無法判斷輸入的內(nèi)容是否符合。不過在用戶熟悉且簡單的字段下可采用，比如登錄表單只有賬號和密碼。針對以上問題，可以采用內(nèi)聯(lián)浮動標簽。即作者列舉的谷歌注冊頁面的例子。

5 使用自動對焦

當進入表單頁面，自動對焦第一個輸入字段可以引導用戶開始進行輸入，我非常喜歡它，因為我只需鍵入，制表，鍵入，制表和完成。雖然它只為我節(jié)省了一次額外的點擊，但它確實以一種微妙的方式增強了整體體驗。

當允許表單自動對焦時，還要突出顯示活動的字段以通知用戶第一個字段已被選中，并且可以填寫它。

6 突出顯示活動字段

這通常通過改變邊框顏色和大小來完成，以提供更強的視覺提示。確保所選字段的顏色從表單的其余部分突出，下意識地幫助用戶專注于活動字段。同樣的概念也可用于錯誤反饋，如果出現(xiàn)錯誤，通常文本字段將以紅色突出顯示。

通過突出顯示活動字段，讓用戶更容易聚焦它

7 告知用戶大寫鎖定已開啟

這是一個非常簡單的功能，但很多產(chǎn)品沒有實現(xiàn)它。有時我沒有意識到大寫鎖定已經(jīng)開啟，并且在我不斷被提示輸入錯誤時感到沮喪。最糟糕的是，錯誤消息甚至沒有提示我大寫鎖定已打開，它只是一直說我的密碼錯誤。這對用戶來說真的很煩人。

蘋果系統(tǒng)很好地通過告知用戶大寫鎖定已開啟

8 使用字段視覺約束

字段視覺約束有助于強化用戶所需的信息。例如，如果“日期/月”字段只需要兩個字符，則不需要它與“名稱”字段的輸入框一樣長，否則可能會導致用戶混淆。

Invision根據(jù)所需信息提供不同的字段長度

9 不要隱藏你的錯誤信息

一些設計將錯誤信息隱藏起來。通過在輸入框末端顯示警報圖標，讓用戶將鼠標懸停在圖標上時，才會顯示錯誤消息。這是非常糟糕的用戶體驗，因為它需要用戶更多一步的操作才知道他錯在哪里。有些用戶可能甚至不知道他們需要采取額外步驟（將鼠標懸停在圖標上）以查看錯誤消息。

譯者注：我們不僅僅需要視覺上的區(qū)別（請考慮色盲用戶），還需要文字說明并告知原因和解決辦法，而不是簡單的「輸入錯誤」。

在輸入框的底部顯示錯誤消息不是更好嗎？

10 明確區(qū)分可選填字段

如果您忽略了第一個提示（保持表單簡短），并使用了可選填字段，請確保它們明確標記為可選填。它將提供更強的視覺提示，在標簽后邊標明（可選填），而不是僅使用星號。有些用戶可能也不理解星號的含義，因為它有時用于表示驗證錯誤。

譯者注：如上所述，盡量避免可填字段。如果不可避免，應該做明確區(qū)分。根據(jù)經(jīng)驗，可填和必填的數(shù)量少的做標記說明。

常規(guī)做法：必填，使用「*」星號符；可填，使用「選填」

11 使用圖片來增加用戶參與度

如果有意義，請使用圖像作為選項，改善用戶體驗。利用圖標或者圖像和文本進行組合，有時候可以更好地解釋每個選項。

谷歌廣告使用圖片來描繪廣告系列類型

12 盡可能使用預測搜索

這主要適用于要求用戶輸入具有許多預定義選項的信息，例如他們的假日目的地。允許用戶只輸入幾個字母來查找他們的目的地城市，而不是輸入整個名稱。

它還降低了搜索失敗的幾率，因為用戶不太可能拼錯他們的搜索詞。

愛彼迎用了搜索預測幫助用戶更快捷地尋找到他們的假期目的地

總結(jié)

我知道設計一個表單可能是一個無聊的過程，大多數(shù)用戶總是不喜歡填寫他們。但是遵循上述指南，可以很好地提升用戶的體驗。

這樣做無疑可以提高用戶填寫的完成率。作為UX設計師，這也是你的目標之一。

原文作者：JeremiahLam

原文地址：https://uxdesign.cc/11-form-design-guidelines-4b2f1c659414

編譯作者：許忙忙，公眾號：許忙忙

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

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