編者按：這篇文章來自資深設計師 Taras Bakusevych，長期從事金融和企業類数字產品的設計，在表單設計領域造詣精深。這篇文章梳理了他總結的 20 條表單和輸入框的設計經驗，實用性極強。

表單是 UI 界面中最為常見的元素，它通常是用來搜集和呈現一些數據、信息和特定的字段。在現實世界中，印刷的表格存在的時間更為久遠，它們身上有很多設計可以作為重要的參考，幫助我們優化 UI 中的表單元素。

1、充分了解文本輸入框的構成

文本輸入框是 UI 表單的基本組成部分，無論是表單還是對話框中，它都非常常見。文本字段是提供內容輸入交互的核心組件，在進行布局和交互設計的時候，它其實有着不低的設計要求：它需要高效、顯著且有良好的可訪問性。

這些是文本輸入框的關鍵元素：

• 1、文本容器——可交互的輸入區域
• 2、輸入文本——所輸入的文本內容
• 3、標籤文本——告訴用戶這個表單字段中要輸入的內容屬性
• 4、佔位符文本——輸入信息的範例，用戶後續需要用自己的內容替代它
• 5、幫助和驗證（可選）——提供上下文信息和驗證信息
• 6、前導圖標（可選）——描述文本字段所需的輸入類型和特徵
• 7、後綴圖標（可選）——對輸入內容進行控制，比如現實和隱藏

2、明確文本輸入框的類型

文本輸入框確實是用來輸入文本內容的，但是不同類型的文本差別很大，特定類型的文本輸入框都應該進行合理的優化，比如銀行卡號。下面列舉出了我們在 UI 設計的時候，最常用到的一些輸入框：

（這裏暫時不具體展開文本輸入框的具體類型，因為在系列文章後面會單獨列舉的）

3、選擇合理的輸入格式

不同的文本輸入的格式和類型是不一樣的，通過合理的格式約束，能夠方便系統更好地搜集數據，而避免錯誤出現。

4、根據狀態和用戶交互來改變輸入框樣式

通過不同的外觀樣式來呈現當前所處的狀態，是輸入框在 UI 界面中的必須做到的事情。非激活狀態，光標懸停狀態，禁用狀態、選定輸入狀態、驗證識別狀態、出錯狀態等等。所有的輸入框設計當中都應該保持一致，盡量不要進行反常規設計，避免和用戶思維模型發生衝突。

5、選擇最佳的文本框樣式

絕大多數情況下，表單中用來說明的文本標籤可以放在頂部，可以左對齊，也可以右對齊。但是最佳的樣式通常取決於輸入框的大小、位置和整個表單的樣式，以及組件庫和平台。每種設計都各有優劣。

在最初的 Material Design 的設計規範當中，使用下劃線作為輸入框並不是最佳的設計樣式，有趣的是，有研究表明，用戶更喜歡帶有圓角的輸入框。

6、輸入框標籤左對齊

當用戶不太熟悉你所提供的表單之時，左對齊是一個不錯的選擇：

• 優點：易於擴展，可以充分利用垂直空間
• 缺點：標籤和輸入框之間的距離可能會過長，顯得參差不齊，並且完成表單填寫會耗費更多時間。

7、輸入框標籤右對齊

和左對齊的標籤相比，右對齊的標籤在測算數據當中，用戶填寫速讀快了近2倍：

• 優點：文本標籤和輸入框之間的距離固定，用戶瀏覽掃視速度更快，完成時間更短文本標籤和輸入框之間的距離固定，用戶瀏覽掃視速度更快，完成時間更短
• 缺點：因為左側參差不齊，整體掃讀表單的時候不容易了解全部信息

8、輸入框標籤頂部對齊

在多數情況下，這是最佳的選擇，在移動端設備上效果更好，因為不需要太多水平空間。

• 優點：用戶上下掃讀即可快速捕獲信息，並填寫表單，更快完成
• 缺點：縱向上需要更多空間

9、輸入框長度應符合用戶預期

表單那中文本字段可能的輸入長度，和輸入框本身長度應該一致，這樣不僅在體驗上一致，而且在視覺體驗上更加愉悅。

10、佔位符不能替代標籤

在輸入框中用作示意和說明的佔位符，在輸入之前可以給用戶一個指引性的短期記憶。它本身應該是標籤的補充。但是如果沒有標籤，佔位符又消失了，用戶可能會因為快速遺忘而不知道要輸入啥。如果你需要極簡的輸入框設計，可以採用 Material Design 中所推薦的浮動式標籤設計。

佔位符有時候會讓用戶感到迷惑，標籤是必不可少的。

10、幫助用戶填寫表格

• 藉助自動填寫功能，幫助用戶填寫表單。用戶在填寫過程在自動查詢匹配，提供建議，用戶可以使用回車和方向鍵快速選擇。
• 使用自動建議功能，基於關鍵詞查詢相關短語，以下拉框形式呈現。
• 使用預填充字段作為默認值，比如基於IP地址幫用戶填寫好國家和地區。這類解決方案很靈活多樣，根據填寫字段屬性、功能，可以靈活處理。
• 提供上下文信息。比如用戶在轉賬的時候，提供餘額相關的信息。

11、使用內聯驗證

「實時在線驗證」可以解決用戶輸入信息的有效性的問題，而不是等到用戶最後提交的時候再驗證，使用這一技術並不會造成太大問題：

• 可以將驗證結果和錯誤提示靠近輸入框呈現
• 不用做的過於醒目，錯誤信息主要告訴用戶如何解決問題，而不是讓用戶感到緊張挫敗
• 避免過早進行驗證，在用戶完成當前字段填寫之後再進行，避免一直報錯
• 考慮使用更加令人愉悅的「积極驗證」模式，增加愉悅感

12、盡量減少填寫字段數量

太多的填寫內容會增加認知負荷，盡量讓表單顯得更加簡單。

• 不要將名字和日期分成多個字段
• 不要多次詢問相同信息
• 重複輸入的內容盡量減少

13、隱藏不相關的字段

不要一次性將所有的信息和步驟都呈現出來，而是要在用戶需要的時候再呈現，合理控制複雜性。

14、使用條件邏輯

基於用戶的不同選擇，將表單字段中不相關的部分隱藏掉，或者新增，這種靈活的機制就是條件邏輯。這種方式可以幫用戶規避掉很多不必要的填寫內容，並且讓填寫過程更加個性化。

15、內容分組

簡化表單的最簡單方法之一，就是將相關的字段條目分組，這一點非常符合格式塔原理，無論是接近性、先慣性、連續性還是閉合性，這種設計都很貼合，且有效。這種方式可以讓表單更加富有組織性。

16、避免多列布局

單列布局能夠給用戶呈現一條清晰的視覺路徑，但是多列表單則會讓用戶來回掃視，整體的效率和工作量都更大。

17、將複雜的表單分割為簡單的步驟

有時候，即時你刪除了所有不必要的內容，表單依然會很大。大型的表單和任務分割成為小任務和類別明晰的表單，會讓執行過程更加舒適。

• 显示步驟，並且以視覺化的形式來呈現進度，這可以提高滿意度，並且激勵用戶
• 不要太過細化，太多步驟無濟於事，可能會惹惱用戶
• 對關鍵信息進行總結，減輕焦慮，最後需要複查

18、集中呈現導航和表單本身

如果需要填寫的表單內容非常多，可以分成多個步驟，但是需要注意的是，讓分佈的導航和表單始終作為焦點來處理，無關的側邊欄和其他組件都隱藏起來，不要影響表單填寫。

19、使用合理的鍵盤類型

iOS 和 Android 提供多種不同的鍵盤，這是為了應對不同的輸入需求。想要簡化數據輸入，當用戶輸入不同類型的字段的時候，調用對應類型的鍵盤，同時需要注意鍵盤出現的位置，不要遮擋住關鍵信息。

20、別再用荒謬且令人難受的密碼設計了

• 允許用戶显示和隱藏所設置的密碼，而不是讓用戶輸入2次來進行驗證，這對於生成有效的密碼更重要
• 始終显示對於密碼的要求，並提供相應的指引，並現實強度。嘗試簡化對用戶的要求i。

原文作者：Taras Bakusevych

原文鏈接：https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0

相關文章推薦：

閱讀文章 >>

閱讀文章 >>

閱讀文章 >>

閱讀文章 >>

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極登錄平台_資深UI設計師搞定輸入框和表單的20個秘訣