這篇文章來自資深設(shè)計師 Taras Bakusevych，長期從事金融和企業(yè)類數(shù)字產(chǎn)品的設(shè)計，在表單設(shè)計領(lǐng)域造詣精深。這篇文章梳理了他總結(jié)的 20 條表單和輸入框的設(shè)計經(jīng)驗，實用性極強(qiáng)。
表單是 UI 界面中最為常見的元素，它通常是用來搜集和呈現(xiàn)一些數(shù)據(jù)、信息和特定的字段。在現(xiàn)實世界中，印刷的表格存在的時間更為久遠(yuǎn)，它們身上有很多設(shè)計可以作為重要的參考，幫助我們優(yōu)化 UI 中的表單元素。
文本輸入框是 UI 表單的基本組成部分，無論是表單還是對話框中，它都非常常見。文本字段是提供內(nèi)容輸入交互的核心組件，在進(jìn)行布局和交互設(shè)計的時候，它其實有著不低的設(shè)計要求：它需要高效、顯著且有良好的可訪問性。
這些是文本輸入框的關(guān)鍵元素：
- 1、文本容器——可交互的輸入?yún)^(qū)域
- 2、輸入文本——所輸入的文本內(nèi)容
- 3、標(biāo)簽文本——告訴用戶這個表單字段中要輸入的內(nèi)容屬性
- 4、占位符文本——輸入信息的范例，用戶后續(xù)需要用自己的內(nèi)容替代它
- 5、幫助和驗證（可選）——提供上下文信息和驗證信息
- 6、前導(dǎo)圖標(biāo)（可選）——描述文本字段所需的輸入類型和特征
- 7、后綴圖標(biāo)（可選）——對輸入內(nèi)容進(jìn)行控制，比如現(xiàn)實和隱藏
文本輸入框確實是用來輸入文本內(nèi)容的，但是不同類型的文本差別很大，特定類型的文本輸入框都應(yīng)該進(jìn)行合理的優(yōu)化，比如銀行卡號。下面列舉出了我們在 UI 設(shè)計的時候，最常用到的一些輸入框：
（這里暫時不具體展開文本輸入框的具體類型，因為在系列文章后面會單獨(dú)列舉的）
不同的文本輸入的格式和類型是不一樣的，通過合理的格式約束，能夠方便系統(tǒng)更好地搜集數(shù)據(jù)，而避免錯誤出現(xiàn)。
通過不同的外觀樣式來呈現(xiàn)當(dāng)前所處的狀態(tài)，是輸入框在 UI 界面中的必須做到的事情。非激活狀態(tài)，光標(biāo)懸停狀態(tài)，禁用狀態(tài)、選定輸入狀態(tài)、驗證識別狀態(tài)、出錯狀態(tài)等等。所有的輸入框設(shè)計當(dāng)中都應(yīng)該保持一致，盡量不要進(jìn)行反常規(guī)設(shè)計，避免和用戶思維模型發(fā)生沖突。
選擇最佳的文本框樣式
絕大多數(shù)情況下，表單中用來說明的文本標(biāo)簽可以放在頂部，可以左對齊，也可以右對齊。但是最佳的樣式通常取決于輸入框的大小、位置和整個表單的樣式，以及組件庫和平臺。每種設(shè)計都各有優(yōu)劣。
在最初的 Material Design 的設(shè)計規(guī)范當(dāng)中，使用下劃線作為輸入框并不是最佳的設(shè)計樣式，有趣的是，有研究表明，用戶更喜歡帶有圓角的輸入框。
當(dāng)用戶不太熟悉你所提供的表單之時，左對齊是一個不錯的選擇：
- 優(yōu)點(diǎn)：易于擴(kuò)展，可以充分利用垂直空間
- 缺點(diǎn)：標(biāo)簽和輸入框之間的距離可能會過長，顯得參差不齊，并且完成表單填寫會耗費(fèi)更多時間。
和左對齊的標(biāo)簽相比，右對齊的標(biāo)簽在測算數(shù)據(jù)當(dāng)中，用戶填寫速讀快了近2倍：
- 優(yōu)點(diǎn)：文本標(biāo)簽和輸入框之間的距離固定，用戶瀏覽掃視速度更快，完成時間更短文本標(biāo)簽和輸入框之間的距離固定，用戶瀏覽掃視速度更快，完成時間更短
- 缺點(diǎn)：因為左側(cè)參差不齊，整體掃讀表單的時候不容易了解全部信息
在多數(shù)情況下，這是最佳的選擇，在移動端設(shè)備上效果更好，因為不需要太多水平空間。
- 優(yōu)點(diǎn)：用戶上下掃讀即可快速捕獲信息，并填寫表單，更快完成
- 缺點(diǎn)：縱向上需要更多空間
表單那中文本字段可能的輸入長度，和輸入框本身長度應(yīng)該一致，這樣不僅在體驗上一致，而且在視覺體驗上更加愉悅。
在輸入框中用作示意和說明的占位符，在輸入之前可以給用戶一個指引性的短期記憶。它本身應(yīng)該是標(biāo)簽的補(bǔ)充。但是如果沒有標(biāo)簽，占位符又消失了，用戶可能會因為快速遺忘而不知道要輸入啥。如果你需要極簡的輸入框設(shè)計，可以采用 Material Design 中所推薦的浮動式標(biāo)簽設(shè)計。
占位符有時候會讓用戶感到迷惑，標(biāo)簽是必不可少的。
- 借助自動填寫功能，幫助用戶填寫表單。用戶在填寫過程在自動查詢匹配，提供建議，用戶可以使用回車和方向鍵快速選擇。
- 使用自動建議功能，基于關(guān)鍵詞查詢相關(guān)短語，以下拉框形式呈現(xiàn)。
- 使用預(yù)填充字段作為默認(rèn)值，比如基于IP地址幫用戶填寫好國家和地區(qū)。這類解決方案很靈活多樣，根據(jù)填寫字段屬性、功能，可以靈活處理。
- 提供上下文信息。比如用戶在轉(zhuǎn)賬的時候，提供余額相關(guān)的信息。
「實時在線驗證」可以解決用戶輸入信息的有效性的問題，而不是等到用戶最后提交的時候再驗證，使用這一技術(shù)并不會造成太大問題：
- 可以將驗證結(jié)果和錯誤提示靠近輸入框呈現(xiàn)
- 不用做的過于醒目，錯誤信息主要告訴用戶如何解決問題，而不是讓用戶感到緊張挫敗
- 避免過早進(jìn)行驗證，在用戶完成當(dāng)前字段填寫之后再進(jìn)行，避免一直報錯
- 考慮使用更加令人愉悅的「積極驗證」模式，增加愉悅感
太多的填寫內(nèi)容會增加認(rèn)知負(fù)荷，盡量讓表單顯得更加簡單。
- 不要將名字和日期分成多個字段
- 不要多次詢問相同信息
- 重復(fù)輸入的內(nèi)容盡量減少
不要一次性將所有的信息和步驟都呈現(xiàn)出來，而是要在用戶需要的時候再呈現(xiàn)，合理控制復(fù)雜性。
基于用戶的不同選擇，將表單字段中不相關(guān)的部分隱藏掉，或者新增，這種靈活的機(jī)制就是條件邏輯。這種方式可以幫用戶規(guī)避掉很多不必要的填寫內(nèi)容，并且讓填寫過程更加個性化。
簡化表單的最簡單方法之一，就是將相關(guān)的字段條目分組，這一點(diǎn)非常符合格式塔原理，無論是接近性、先慣性、連續(xù)性還是閉合性，這種設(shè)計都很貼合，且有效。這種方式可以讓表單更加富有組織性。
單列布局能夠給用戶呈現(xiàn)一條清晰的視覺路徑，但是多列表單則會讓用戶來回掃視，整體的效率和工作量都更大。
有時候，即時你刪除了所有不必要的內(nèi)容，表單依然會很大。大型的表單和任務(wù)分割成為小任務(wù)和類別明晰的表單，會讓執(zhí)行過程更加舒適。
- 顯示步驟，并且以視覺化的形式來呈現(xiàn)進(jìn)度，這可以提高滿意度，并且激勵用戶
- 不要太過細(xì)化，太多步驟無濟(jì)于事，可能會惹惱用戶
- 對關(guān)鍵信息進(jìn)行總結(jié)，減輕焦慮，最后需要復(fù)查
如果需要填寫的表單內(nèi)容非常多，可以分成多個步驟，但是需要注意的是，讓分布的導(dǎo)航和表單始終作為焦點(diǎn)來處理，無關(guān)的側(cè)邊欄和其他組件都隱藏起來，不要影響表單填寫。
iOS 和 Android 提供多種不同的鍵盤，這是為了應(yīng)對不同的輸入需求。想要簡化數(shù)據(jù)輸入，當(dāng)用戶輸入不同類型的字段的時候，調(diào)用對應(yīng)類型的鍵盤，同時需要注意鍵盤出現(xiàn)的位置，不要遮擋住關(guān)鍵信息。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。