在B的設計中、表單是我們最為常見的設計內容。下面我們來學習如何做好表單設計這部分內容。
我理解表單就是系統為和用戶進行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺產品中對我們數據做的增、刪、改、查、驗都可以通過表單完成。
表單是一種用于收集用戶輸入的HTML元素，通常用于創建用戶與網頁交互的表單。表單可以包含各種輸入字段，如文本框、復選框、單選按鈕、下拉列表和提交按鈕等。當用戶填寫表單并提交后，數據將被發送到服務器進行處理。在web開發中，表單是實現用戶交互和數據收集的重要手段之一。
在我們的后臺系統中、我們表單在70%的場景上都會使用到。采集錄入數據信息、編輯數據信息等。如我們SaaS管理平臺的學員錄入、檔案查詢、獎勵規則設置等。
設計原則是任何一種解決方案的指路燈。我們在表單的設計中需要遵循以下原則、
簡潔明了、清晰高效、適應業務、及時反饋。
表單的設計應該簡潔明了，避免過多的裝飾和元素干擾用戶填寫表單。
表單中的各個字段和選項應該清晰可見。用戶應該能夠快速找到需要填寫的字段和選項，并且填寫過程中不會遇到過多的困難。
在用戶填寫表單的過程中，應該提供適當的反饋，例如輸入驗證、錯誤提示等，以便用戶能夠及時了解自己的輸入是否正確。
我們通常的表單都基本都是由、標簽、域、提示、操作按鈕這四個部分構成的。
標簽文本主要是解釋輸入項的含義，一般不宜太長，需要簡明扼要，快速讓用戶理解。輸入框標簽在布局上可以分為
左標簽、頂標簽、行內標簽
。這三種設計在許多情況下可以提高可讀性和用戶友好性，但也有一些潛在的缺點。
優點
：可讀性強、減少用戶的認知負擔。布局直觀、提高填寫速度。
優點
：節省空間、減少表單的長度和寬度。視覺層次清晰。
缺點
：可讀性有限、對于長標簽或復雜內容可讀性降低、不適合大部分的場景。
表單的域表示的是一個空間。這個空間里可以是
輸入內容、選擇內容、選則時間、選擇數值、觸發交互按鈕（上傳資料）
等
一般出現在頁面頂部、跟隨表單里的內容、表單內容底部、頁面底部。
在我們系統設計里。我是更愿意把按鈕放在頁面的底部。至于為什么可以看一下、我之前的《按鈕的基礎設計知識的文章》
除了上面表單的基礎知識外，為了我們表單設計的更好我們就需要在細節上下功夫了。畢竟優秀的設計師注重細節的表現的。
最初是因為屏幕顯示的原因所以才加的冒號、隨著技術的進步。現在可加可不加。系統內統一就行。
輸入框的寬度是自適應的、輸入框的寬度是有暗示左右的。在真實場景中，大部分輸入框是存在理想長度的，那么就應該向用戶暗示所需輸入內容的長度來減輕判斷負擔。下圖就是典型案例，一個實際不需要花多少錢的金額輸入框在左圖中進行等寬處理，反而容易誤導用戶對輸入金額的判斷，造成一種不安全感。
在表單中我們采用多種布局方式。
信息分組、內容列表、標簽頁、分步驟。
在信息傳遞上。這集中布局方式本質都是一樣的。將信息進行分類展示。來更好效的進行信息的傳遞和展示。理論支持、格式塔原理
我們如何選則適用那種布局方式呢。很簡單需要展示內容的多少。
為了讓我們表單的用戶體驗做到極致、我們還有注意這些交互上的細節。做好這些細節將大幅提升我們的用戶體檢。
驗證用戶輸入活提交信息是否正確、驗證方法有三種、實時、提交后、服務器。因為他們時效性不同所以應用的場景也不同。
錯誤提示要適用積極地的語言、不清楚的告訴用戶存在哪里、要如何修復。
之前好像看過一個什么定律忘了。他的大致意思是，如果系統能處理的問題盡量讓系統去處理、不用留給用戶去操作。
滿足多數人需要的地方放置選擇，來幫助用戶作出明智選擇。互聯網表單中有很多地方能利用智能默認減少必要的選擇次數，加速表單完成過程。
保留用戶登陸信息、重復填寫內容。例如、之前去醫院需要手機登陸的那段時間。在去過一次后。掃完填寫信息制藥填一個名字、其他信息都帶出來了。
我們在滿足大部分用戶的同時、在某些場景里還要提高額外的輸入框給需要的人用。同時不會阻礙不需要的人。這類輸入框常常被作為高級選項或者額外選項。
一個結構充分的表單就像一個與用戶的良好對話。所以記住這一點，仔細規劃結構。
從簡單問題開始，用戶已經很清楚答案了。將不相關的信息按邏輯分組展示。來幫助用戶理解。
至于這些的方式的選擇、總的來說還是信息呈現多少的不同。單步的轉化率更高。但多步卻更適合復雜信息的收集。
作者：彪形大漢pro
鏈接：https://www.zcool.com.cn/article/ZMTYwNzU2OA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
