淺談B端產品的表單元素設計

B端產品老是須要對各類數據進行錄入、管理和維護……其中，表單做爲承載信息的基本組件，是出現頻率最高的元素之一。看似簡單、基礎的小組件，組合在一塊兒卻有不少細節須要推敲。

最近在作和數據錄入相關的設計，經常會糾結：標籤究竟是左對齊仍是右對齊，按鈕是放在左邊仍是右邊，頁面是否是要爲了統一而採用同樣的佈局，等等。

爲了找到儘量適用的設計方案，我翻閱了許多設計師的分享，也作了一些調研。

儘管遠未「精通」，但也算有些心得，所以概括了表單元素的組成以及適用場景，寫了這篇短文，但願能對一樣正在作toB產品設計的朋友們有所助益。

表單的元素

表單主要由這四個重要元素組成：標籤、輸入域、操做按鈕、幫助信息。

標籤

標籤主要是解釋輸入項的含義，用戶會根據標籤輸入相應的內容，通常不宜太長，須要簡潔明瞭，快速讓用戶理解。

表單標籤的常見展示形式有4種，分別是頂對齊、左對齊、右對齊、表單內對齊。

頂對齊

標籤位於輸入框上方，並與輸入框保持左對齊。

優勢：當頁面字段很少時，標籤靠近輸入框，這種方式能夠保持人眼水平方向集中在一個較小的區域。

用戶目光能夠更快的從標籤移到輸入字段， 能夠快速完成並減小認知負擔。

同時標籤單獨佔一行，不受長度的影響，更適應產品國際化。

缺點：標籤加輸入框的樣式，佔用垂直空間較大。當表單數量過多時會顯得頁面很是長，讓用戶感到疲勞。屏幕利用率下降，適用於字段較少的表單。

左對齊

標籤和輸入框並排顯示，且全部標籤左對齊。

優勢：佔用較少的垂直空間，當標籤內容爲陌生內容時，左對齊易於閱讀，可讓用戶很容易感知標籤和輸入框的聯繫。

缺點：由於標籤的長度不一樣，左對齊後會致使部分標籤和輸入框距離很遠，須要更多橫向空間。標籤和輸入框之間的空白邊緣不一致，不利於用戶填寫。

右對齊

標籤和輸入框並排顯示，且全部標籤都右對齊。

優勢：佔用較少的垂直空間，標籤和輸入框的距離一致，有利於用戶填寫。

缺點：由於標籤的長度不一樣，左邊空白邊緣不一致，會下降用戶的可閱讀性。

表單內對齊

標籤顯示在輸入框內部。

優勢：節約空間，不受垂直空間、標籤長度的影響，既節省橫向空間又節省垂直空間。很是適合用在用戶熟悉的字段，方便用戶填寫。

缺點：在用戶輸入字符後，內部的標籤就會隱藏，不適合較長或較複雜的表單，不利於表單的完成。

表單域

表單域是表單的核心，是錄入信息的核心交互部分；爲了便於不一樣信息的錄入，一般會採用不一樣的交互組件。

好比：文本框、單選按鈕、複選框、下拉菜單、列表框，具體組件能夠去查看 Ant design、ElementUI 官網、Material design。

操做按鈕

一般，表單都會有一個提交動做：點擊表單按鈕，則表單信息錄入完成。而操做動做，一般又分爲主要按鈕和輔助按鈕。

常見的表單按鈕有保存、提交、肯定、登陸……這些完成表單必不可少的按鈕，稱之爲主要按鈕。

還有一些按鈕例如預覽、重置、撤銷等，不屬於完成表單的必要操做的按鈕，稱之爲輔助按鈕。

爲了讓用戶視覺聚焦和快速完成任務，一般主任務操做爲主要按鈕，次任務操做爲次要按鈕，而且一個場景中一般只有一個主按鈕。

幫助信息

幫助信息，是用來輔助用戶輸入內容的信息，幫助信息分爲：

錄入提示：在輸入框、下拉框內，幫助用戶更具象的理解須要錄入什麼信息。

幫助提示：通常不是用戶填寫表單的必須信息，所以只在用戶須要的時候出現纔有意義。不然，過多的幫助信息反而會形成干擾。

幫助信息的icon、文字連接，通常放在標籤的前/後，點擊/鼠標懸浮按鈕出現幫助信息的彈窗或者tips。

錯誤提示：用戶輸入的數據不符合要求，須要幫助用戶理解哪裏錯了和怎麼作正確。

結語

表單組件在toB產品中出現頻次之高，使得其用戶體驗對一款toB產品相當重要。

好的用戶體驗，可讓用戶輕鬆愉悅地理解表單邏輯，快速完成表單信息的錄入，也能讓產品的使用過程更流暢。

固然，上文介紹的是表單設計的一些基礎內容。在實際的表單設計中，須要用戶填寫的項目可能會不少、很複雜。找到更符合用戶認知、更容易被理解的表單設計，其難度也會更大。

根據不一樣場景，如何經過拆、合、減的方法，歸類組合以展現更豐富的信息；如何縮減非必要的字段；如何找到相關性更高的字段，進行信息歸類……這些則是更高階的設計技巧了。

關注咱們，瞭解更多表單UI/UE設計的高級玩法

閱讀到更多「toB產品設計」的經驗分享與最佳實踐…請關注 @LigaAI的掘金帳號

進一步瞭解咱們的產品，請訪問[ LigaAI - 新一代智能研發管理平臺](www.ligai.cn/?