1.什麽是表格？
網頁中表單的主要功能是收集數據，並將數據傳輸到服務器。表單是收集用戶信息數據的重要方式。好的表單設計可以提高信息收集的效率和成功率。糟糕的表單設計會影響用戶的心情和體驗，導致信息收集不成功，甚至利益受損。
二、構成形式
壹個表單通常由三部分組成:壹個標簽、壹個輸入字段和壹個操作按鈕。
標簽
標簽可以理解為標題，告訴用戶表單需要填寫什麽信息，表單需要收集什麽信息。標簽通常出現在輸入字段的左側、頂部或內部。
根據所填信息的必要性，標簽分為必填項和非必填項。壹般我們會在必選項的標簽內容上加壹個*。*號碼的放置有以下兩種情況:
1.當標簽以輸入字段為中心時，建議將*號放在標簽的左側。
因為*號很明顯，用戶往往第壹眼就看到，然後根據用戶從左到右的閱讀習慣，視覺上的落點分別是文本標簽和輸入欄。考慮到填表的效率，左邊帶*的表格會更容易閱讀。所以當標簽和輸入字段對準時，最好把*號放在標簽的左邊。
2.當標簽與輸入字段左對齊時，建議將*號放在標簽的右側。
由於人的垂直閱讀習慣，視線會呈F形。無論*號在左邊還是右邊，都不會對用戶的視覺立足點造成太大的困擾。另外，考慮到對齊形式，將*號放在標簽右側會更好。
輸入欄
輸入域是用戶輸入各種信息的重要交互區域。輸入字段包括文本框、密碼框、隱藏字段、多行文本框、復選框、單選框、下拉選擇框、文件上傳框等等。
不知道這些輸入字段區別的小夥伴可以去螞蟻設計官網了解壹下，門戶:
/
因為輸入域是輸入信息的重要交互區域，所以在設計時要考慮用戶輸入的各種場景。我們可以把用戶的輸入過程分為輸入前、輸入中、輸入後。根據每個場景改進我們的設計。比如在輸入上，要考慮光標的設計，輸入文字信息的設計，信息提示等。輸入後要考慮對信息輸入錯誤要給予什麽樣的視覺反饋。總之妳考慮的越仔細，就越能提高信息錄入的成功率。
操作按鈕
操作按鈕是用戶填寫表單內容後，完成或結束當前操作過程所要進行的操作。操作按鈕分為全局操作按鈕和局部操作按鈕。全局動作按鈕控制整個表單，如提交、發送等動作按鈕。本地操作按鈕用於對壹定範圍的內容進行操作，如編輯、刪除等操作。
三。表單設計中的常見問題
1.標簽采用哪種對齊方式更好？
在我們的實際項目中，由於副本的長度不同，我們通常不知道應該采用哪種對齊方式。標簽處理的原則是盡可能對齊，應該考慮具體的約束和目標來決定采用哪種對齊方法。
左對齊
當標簽左對齊時，標簽和輸入框之間的距離是不可控的，因為文本標簽的長度是不壹致的。這會導致設計的通用性不強，浪費側向空間。
如果采用左對齊的形式，就要盡量保持文字標簽的長度壹致，比如通過調整字距來保持文字標簽的長度壹致或者留出足夠的空白，這樣設計會更加統壹。例如，它采用左對齊的形式，但在文本標簽和輸入字段之間留有足夠的距離，使表單看起來更加統壹和諧。缺點是浪費了壹些空間。
頂部對齊
使用頂部對齊會使標簽和輸入字段垂直顯示，垂直布局呈現的信息會更好，從而提高填寫的效率。頂部對齊會因為垂直排列而浪費垂直空間，但會節省水平空間，更適合水平寬度較窄的頁面。
？頂部對齊
右對齊
右對齊與左對齊相同，因為標簽長度是不可控的。導致設計的通用性不強，浪費了橫向空間，卻節省了縱向空間。
？右對齊
在這些對齊方式中，用戶瀏覽信息的速率是頂部對齊>:右對齊>左對齊。頂部對齊的表單適用於簡單表單，右對齊和左對齊的表單適用於復雜表單。
2.操作按鈕應該使用哪種設計形式？
對於全局操作按鈕，將使用常規的按鈕樣式，全局按鈕分為壹級按鈕和二級按鈕。
主按鈕
主按鈕是界面中重要的功能操作按鈕，如提交、保存等正向操作。主按鈕是視覺層次中最高的，可以引導用戶找到核心操作並快速點擊。主按鈕通常是純文本或者圖形和文本的組合。圖文結合可以吸引用戶的註意力，幫助他們理解按鈕的操作含義。
輔助按鈕
二級按鈕的層次比壹級按鈕弱，通常是線性形式。壹個頁面中可以出現多個次級按鈕。
本地操作按鈕的設計形式可以是文本按鈕、圖標按鈕或圖標+文本。至於應該應用哪種形式，要結合具體的結尾場景來考慮。
圖標按鈕
圖標按鈕是用圖標來表示操作的含義，可以直觀地表達按鈕的功能。在設計時，我們需要註意的是，圖標要易於理解，用戶要熟悉。圖標按鈕通常設計有壹個浮動框，即當用戶懸停在圖標按鈕上時，會出現壹個浮動框來解釋按鈕的文本。以微信微信官方賬號為例。當鼠標懸停在編輯圖標上時，會出現壹個黑色的浮動框對其進行解釋，讓用戶明白這個按鈕的含義，安心操作。
在網頁設計中，由於按鈕種類多，使用場景多，建議局部操作按鈕使用線形圖標，使其層次性弱於其他按鈕。
文本按鈕
文本按鈕通常出現在列表中的操作項中。文字的顏色通常是品牌色或者藍色，因為在用戶的認知中藍色通常是可以點擊的。
圖標+文本按鈕
與純文本按鈕相比，圖形組合的按鈕會更直觀，更能吸引用戶的註意力。
3.輸入框應該設計多少種狀態？
考慮的狀態越多，設計就會越細致，信息也能及時反饋給用戶，從而提高填表的效率。在考慮輸入框的設計狀態時，遵循及時反饋的設計原則。
為了避免用戶填寫完所有信息後反饋錯誤，會浪費時間，使填表效率低下。通常情況下，輸入框線會變成紅色，會出現壹個紅色的解釋文案來吸引用戶的註意。
？及時反饋錯誤信息。
在設計中，我們還需要考慮自動驗證的成功和警告狀態。顏色通常是綠色和橙色。
輸入框應該設計多少種狀態？我們還需要根據我們表單的復雜程度來考慮，壹個簡單的表單沒有必要設計在過於詳細的狀態下。
寫在句子的末尾
表單設計看起來簡單，但是在設計過程中還是有很多值得學習和研究的地方。在這次制作表格的過程中，我覺得作為設計師，不應該挑剔。不要認為表單設計是壹個很小的設計，不加思考的按照別人的設計規範去復制。像這種看似枯燥卻很重要的模塊設計，我們可以在前期開始設計之前，先從交互層考慮，再從視覺層面考慮什麽樣的表單設計能讓用戶舒適高效地填寫。在看別人的設計規範的時候，比如螞蟻設計的組件規範，我們可以關註壹下他們的設計細節，比如表單上下之間留多少空間？有什麽模式嗎？按鈕的上下頁邊距和左右頁邊距有關系嗎？通過這些思考，然後觀察總結，把它們變成我們自己的小技巧。下次設計表單時，我們會做得很好。
過去的分析
UI設計-主頁分析
詳情頁設計技巧分析
容易得到的文字標簽設計技巧？
獲取點9切線方法(帶有切線工件)