UI界面中的22種表單設(shè)計和應(yīng)用方法

表單無處不在，每次您登錄網(wǎng)站、注冊時，您都在使用表單。 形式對于設(shè)計的成功至關(guān)重要，無論是視覺還是商業(yè)目的。 從用戶界面 (UI) 設(shè)計的角度來看，表單是允許用戶向服務(wù)器發(fā)送信息的元素，表單是網(wǎng)站功能的基本組成部分之一，因此對 UX/UI 設(shè)計師來說，正確使用它們至關(guān)重要。構(gòu)建有效的表單可以幫助您創(chuàng)建更令人愉悅、可用和包容的用戶界面設(shè)計——最終使您的用戶體驗和項目目標都受益。 下面讓我們來看看創(chuàng)建有影響力的表單 UI 設(shè)計需要什么。

1.最小化字段數(shù)量通常
表單中的字段越多，用戶完成它的可能性就越小。請盡量減少使用的字段數(shù)量。明顯要刪除的字段是那些標記為“可選”的字段：如果它們是可選的，你真的需要這些信息嗎？


2. 明確標記可選字段
如果您決定使用可選字段，請確保用戶清楚哪些是可選字段。雖然用星號標記可選字段已成為界面設(shè)計人員的常見設(shè)計模式，但最終用戶可能無法很好地理解星號的含義。相反，簡單地用文本（可選）標記一些字段通常不會在視覺上造成威脅。

3. 使用單列布局
盡管單列布局在視覺上可能不太優(yōu)雅，但它已被證明可以顯著提高用戶理解、減少用戶錯誤和提高整體轉(zhuǎn)化率。其原因可能是，在單列布局中，用戶“錯過”輸入字段的機會較少；眼睛只需要在一個簡單的垂直旅程中移動，而不是在一個 Z 形旅程中。 當(dāng)用戶錯過某個字段時，這會對用戶完成表單所花費的時間以及他們所經(jīng)歷的挫敗感產(chǎn)生顯著的負面影響。這也破壞了他們通過表格取得進展的任何感覺，因為他們被迫倒退并填寫更早的字段。發(fā)生這種情況時，用戶更有可能完全放棄表單。


4. 將標簽放在表單元素上方
而不是左側(cè) 即使在單列布局中，也經(jīng)常會看到表單標簽放置在輸入?yún)^(qū)域的左側(cè)。然而，這意味著用戶的眼睛仍然必須繼續(xù)那個 Z 形的旅程，而不是簡單的垂直旅程，這可能會增加復(fù)雜性、疲勞和緩慢的感知。


5. 垂直排列列表、復(fù)選框和單選按鈕
這加強了用戶眼睛的垂直旅程，并支持持續(xù)進步的感覺。再一次，它降低了用戶錯過列表中選項的可能性。


6. 可視化地對標簽和字段進行分組
除了在部分級別使用視覺分組外，還要確保表單字段、與其相關(guān)的標簽以及任何幫助文本也進行視覺分組，并與周圍元素充分分離。


7.不要將數(shù)字拆分為多個輸入字段
電話號碼和信用卡號碼應(yīng)該只需要是一個輸入字段。多個輸入字段可能會導(dǎo)致在打字時看著鍵盤的用戶感到沮喪和錯誤。



8. 在移動設(shè)備上，使用本地操作系統(tǒng)功能進行日期選擇器和其他特殊輸入
Google 的 Android 和 Apple 的 iOS 都具有用于特定類型數(shù)據(jù)輸入的內(nèi)置界面，例如日期選擇器。盡可能使用這些原生元素，而不是自己編寫。用戶會更熟悉原生選項，而且它很可能表現(xiàn)得更好。


9. 清晰簡潔地標注字段
使用正確的語氣，清晰簡潔地傳達標簽和說明，不僅可以顯著增加用戶對形式的信任，還可以對您的整體品牌產(chǎn)生信任。 在為每個表單域編寫標簽時，目標是最少的字數(shù)和最大的清晰度。如果您預(yù)計用戶有任何歧義或不確定性，請包含一些簡短的幫助文本，明確說明如何填寫該字段。 在設(shè)計表單時，為每個字段的標記方式生成多個選項也很有幫助。這使您能夠測試不同的標簽選項，或者至少在可用的選項之間做出明智的選擇。


10. 就地解決用戶的擔(dān)憂
每當(dāng)您在您的網(wǎng)站上為您的用戶填寫表單時，無論是簡單的訂閱表單還是注冊表單，您都是在要求用戶信任您提交的任何和所有信息。 詢問某些信息可能會導(dǎo)致用戶想知道為什么要收集這些信息。例如，如果您要詢問某人的電話號碼，請考慮包含說明您需要它的原因的幫助文本。


11.在按鈕上使用描述性的、基于動作的詞
按鈕應(yīng)描述通過單擊該按鈕將啟動的操作。有時，特別是在技術(shù)含量更高的應(yīng)用程序中，“提交”和“取消”是可以的，但通常它們太干了，感覺太籠統(tǒng)了。相反，請考慮使用“注冊”、“發(fā)送信息”、“創(chuàng)建帳戶”等單詞或短語。


12.考慮在按鈕上使用第一人稱
這取決于您品牌的風(fēng)格指南，以及您想要打造的整體基調(diào)。但是，已顯示包含第一人稱語音（“I”、“me”、“my”）的按鈕往往具有更高的轉(zhuǎn)化率。因此，您可以考慮“創(chuàng)建我的帳戶”，而不是“創(chuàng)建帳戶”。一個經(jīng)驗法則是，任何按鈕文本都可以在“我想要”之前加上語法意義，以及在上下文中產(chǎn)生情感意義。


13. 不要使用占位符文本作為標簽
占位符文本是在您選擇之前顯示在文本輸入字段中的文本。使用占位符文本作為標簽存在許多問題，包括： 占位符文本往往是灰色的，因此具有較少的包容性和可訪問性。 屏幕閱讀器通常不會讀出占位符文本，從而使您的表單無法供視障用戶使用。 一旦您選擇該字段并開始輸入，占位符文本就會消失，這意味著用戶可能會忘記他們應(yīng)該做什么。 占位符文本應(yīng)該有助于數(shù)據(jù)輸入格式，如果它被用作標簽則不能。 相反，使用標簽和占位符文本為用戶提供最好和最有用的指導(dǎo)。


14. 不要在標簽或占位符文本中使用全大寫
大寫文本通常更難讀，也更慢，所以不要將它用于表單的正文（包括標簽、占位符文本和幫助文本）。一般來說，如果少用大寫文本是可以的——例如，在章節(jié)標題、按鈕和圖標中。


15. 不要隱藏幫助文本
幫助文本是除標簽之外的說明或額外指導(dǎo)，例如“密碼應(yīng)為 8 個或更多字符”。如果您正在使用它，請顯示它而不是將其隱藏在問號圖標或工具提示后面。


16. 越短越好，只要沒有遺漏任何重要的東西
我們已經(jīng)提到過這一點，但值得重申：更少的表單字段比更多的表單字段更可取。但是，使您的表單如此簡短以至于它實際上并沒有收集您需要的信息會適得其反。


17. 使用成功狀態(tài)
用戶提交表單后，顯示提交成功的確認信息很重要。充其量，不這樣做意味著用戶沒有完成感。在最壞的情況下，這可能意味著用戶再次提交表單，可能會重復(fù)下訂單。


18.使用 x 高度較高的無襯線字體
盡管精心挑選的襯線字體可以很好地用于表單，但通常無襯線字體是更安全的選擇。許多現(xiàn)代無襯線字體（如 Roboto、San Francisco 或 Proxima Nova）專為在屏幕上使用而設(shè)計。這些字體的一個重要特點是它們具有較大的 x 高度，這意味著小寫字母相對較大。

19.優(yōu)先使用內(nèi)聯(lián)驗證提交驗證
最好在用戶數(shù)據(jù)輸入發(fā)生時驗證它，而不是在他們嘗試提交表單或移動到下一個屏幕時進行所有驗證。這部分是因為在用戶已經(jīng)在考慮信息時解決錯誤是有意義的，部分是因為在用戶提交表單時顯示錯誤會破壞用戶進度，并使他們更有可能放棄而不是修復(fù)錯誤。在適當(dāng)?shù)那闆r下，系統(tǒng)還應(yīng)提供信息，幫助用戶識別錯誤的確切性質(zhì)——例如，“看起來數(shù)字不夠”或“您的意思是……？”


20.使用內(nèi)聯(lián)驗證來確認用戶進度
使用內(nèi)聯(lián)驗證來確認用戶正在取得進展。這可能意味著一旦正確填寫了字段，就會在字段旁邊出現(xiàn)一個“勾號”圖標。


21.禁用“下一步”或“提交”按鈕直到通過驗證
這為用戶提供了一個清晰的視覺指示，表明他們的數(shù)據(jù)輸入已準備好提交。


22. 啟動后對表單進行 A/B 測試
測試不必僅僅因為您啟動了設(shè)計而結(jié)束。您可以繼續(xù)進行試驗——例如使用不同的輸入字段、標簽、布局和副本——即使您的表單處于活動狀態(tài)。您可以使用A/B 測試方法來比較不同設(shè)計的相對性能，無論是在轉(zhuǎn)換、流放棄、完成時間還是其他重要指標方面。

最后，有效的表單UI設(shè)計不僅停留在視覺美學(xué)上，其核心是表單的體驗感，每個表單必須包括深思熟慮的用戶體驗思維、交互設(shè)計以及對用戶如何與表單交互的整體理解。