樣式輸入框輸入框和表單設計

輸入框允許使用者在 ui 中輸入文字。它們通常出現在表單和對話方塊中。輸入框元件設計應該為互動提供清晰的啟示，使輸入框在布局中易於發現、高效地填充和可訪問。

以下是輸入框的基本元素：

容器ー可互動輸入區

輸入文字ー輸入文字字段

標題ー告訴使用者這個輸入框該輸入什麼內容

佔位符文字ー為使用者提供輸入文字前所需資訊的描述或示例

提示或驗證文字(可選)ー提供額外的上下文或驗證訊息

前導圖示(可選)ー表達輸入框的型別

尾隨圖示(可選)ー輸入文字的附加控制項，如展示/隱藏，清除。

其中大多數都是基於基本的文字字段，然後這些字段經過修改以更好地處理特定型別的資訊，如信用卡號碼。下面是我們建立的介面中最常用的輸入型別的幾個例子：

為請求的資料提供正確的輸入框型別將有助於使用者以正確的格式輸入資訊並避免錯誤，使處理過程盡可能簡單和高效。

這可以通過提供視覺化的線索來實現，這些線索將傳達輸入框的狀態。可以有以下狀態之一: 不活動、懸停、禁用、聚焦、驗證、錯誤。所有的狀態都應該明確地彼此區分，並且在整個形式和應用中保持一致。最好遵循最佳實踐，不要挑戰形成的使用者心智模型。

通常，標籤定位有三個主要選項: 頂部、左部和右部對齊。最適合您的樣式取決於表單、元件庫和設計平台的關鍵目標和大小。它們都有一些優點和缺點。

當使用者不熟悉請求的資料時，這是乙個很好的選擇。

比左對齊標籤快近兩倍的完成時間

最快的完成時間和全面的最佳選擇，為大多數情況下。在移動裝置上執行良好，因為它們不需要很多水平空間。

對表單中的所有文字字段使用相同的輸入長度將使它們在視覺上令人滿意是更難完成的。

消失的佔位符文字會讓使用者的短期記憶變得緊張。沒有標籤，使用者無法在提交表單之前檢查他們提供的所有資訊。如果你想要乙個非常簡約的表單設計，你可以使用material設計浮動標籤的方法。表單內的佔位符文字有時會讓使用者感到困惑，最好在字段外使用提示文字。

它將消除視覺和認知的負擔，看起來更簡單。

通過逐步公開資訊，我們只揭示要點，幫助使用者在需要的時候管理複雜性。

條件邏輯允許根據訪問者的答案自動顯示或隱藏字段，並跳過表單中的頁面。這種方法不僅可以減少欄位的數量，而且可以使填寫過程更加個性化，更具有對話性。

簡化複雜表單的最簡單方法之一是開始對相關字段進行分組。在格式塔學派中有多種原則可以幫助條目感覺相關：接近，相似，連續性，封閉性和連通性。將幾十個非結構化欄位分組成幾個可管理的集合將顯著提高表單的可用性。

單列布局為使用者創造了乙個清晰的完成路徑。使用多欄式布局的後果包括使用者跳過他們實際需要輸入資料的字段，將資料輸入到錯誤的字段，或者乾脆停止，從而導致放棄。

有時候，即使刪除了所有不必要的東西，一些表單也會變得非常龐大。把巨大的任務分解成一系列小任務看起來更容易，並且激勵他們完成整個過程直到最後。

如果表單足夠大，可以分成多個步驟，那麼它就應該有乙個單獨的明確的重點空間來處理它。暴露一般的導航或任何會打亂流程的鏈結只會造成混亂。我也建議不要在小型pop-ups中使用多步驟表單。

android或ios提供了幾種不同的鍵盤型別，每種鍵盤都是為了方便不同型別的輸入而設計的。為了簡化資料輸入，編輯文字欄位時顯示的鍵盤應適合欄位中的內容型別。要意識到鍵盤會出現在**。為了不引入不必要的滾動，請將你的文字字段放置在上部區域。

保持學習，保持新鮮。

樣式 輸入框 輸入框和表單設計