網(wǎng)頁表單三元素的布局分析
時間：2023-10-06 01:30:02 | 來源：網(wǎng)站運營
時間：2023-10-06 01:30:02 來源：網(wǎng)站運營
網(wǎng)頁表單三元素的布局分析：公眾號：小法師們
表單是任何網(wǎng)站都難以避免的內(nèi)容，用戶填寫任何一個表單都帶有目的性，這是用戶與網(wǎng)站溝通的一種方式。在設計時，其布局也需要根據(jù)內(nèi)容進行調(diào)整,這里將從標簽對齊方式與操作欄位置討論表單的布局。
表單的三個基本要素：標簽Label，輸入框 Input，動作Action
標 簽：解釋該字段的內(nèi)容，提出問題
輸入框：提供信息填寫位置
動 作：完成表單，將表單信息傳給后臺
常見的標簽對齊方式（頂對齊、右對齊、左對齊、輸入框內(nèi)標簽）
- 頂對齊標簽（Top-aligned Labels）
上標簽下輸入框的布局讓這兩個元素的位置很近，用戶可以直觀地將兩個元素聯(lián)系起來，便于閱讀
優(yōu)點：
1.標簽名稱橫向可用的空間較大，可以滿足大部分場景，有時候可以放下一些輔助文字
2.多平臺適配時幾乎不用做調(diào)整
3.適用于多語言版本
缺點：
1. 垂直空間占用較大
2. 全局掃描標簽名稱時不夠清晰，被輸入框本身和框內(nèi)值干擾
建議：
雖然這種方式下標簽與輸入框的對應關系歧義較小，但還是建議使用親密性原則，標簽與對應輸入框的間距小于該標簽與上一個輸入框的距離（二者距離關系可參考最小尺寸單位并讓其符合一定的倍數(shù)關系）
- 右對齊標簽（Right-aligned Labels）
標簽名稱和輸入框依然相鄰，但左側(cè)標簽名稱寬度不同
優(yōu)點：
1.占用的垂直空間較少
2.單行標簽名稱和輸入框靠近，便于填寫，檢查
缺點：
1. 瀏覽標簽名稱時視覺左右來回移動跨度大，可讀性降低
2.多語言情況下標簽長度難以適應，可能會換行
3.長標簽在多平臺適配時樣式上需要重新調(diào)整
- 左對齊標簽（Left-aligned Labels）
標簽左對齊，與輸入框的距離由標簽名稱長度決定
優(yōu)點：
1.單獨瀏覽標簽時清晰
2.占用的垂直空間較少
缺點：
1. 標簽與輸入框的間距加大，且受最長標簽影響
2. 表單過長填寫時需要花時間尋找對應關系，認知壓力沉重
3.多語言情況下標簽長度難以適應，可能會換行
4.長標簽在多平臺適配時樣式上需要重新調(diào)整
- 輸入框內(nèi)標簽（Inline Labels）
標簽名稱直接放在輸入框內(nèi)
優(yōu)點：
橫向、垂直占用的空間最少
缺點：
1.只適用于文本類字段
2.視覺上像是已被填寫內(nèi)容，用戶可能會產(chǎn)生在哪填寫的困惑
3.填寫內(nèi)容后標簽消失，填寫和檢查時無參考，可用性差
建議：
標簽名稱與輸入框內(nèi)字段值應在樣式上有所區(qū)別
表單動作欄（按鈕左對齊、按鈕右對齊、按鈕居中對齊、頂部按鈕）
按鈕起著完成表單填寫，傳送表單數(shù)據(jù)的重要作用。作為完成表單的最后一步，若在按鈕的操作上體驗不佳會讓用戶沮喪，網(wǎng)站受損，下面來分析幾種網(wǎng)頁表單按鈕常見的布局。
符合視覺從上到下的垂直移動的特點，當表單橫向空間較小時，這種布局的按鈕眼睛移動距離最短，很好的傳達了如何完成表格。Luke Wroblewski在他有關眼動研究的報告中證實了單列表單中按鈕與輸入框左對齊時操作效率最高
（
https://www.lukew.com/ff/entry.asp?571）
此外，在用戶放大頁面的場景下，左對齊按鈕和標簽名稱都在左側(cè)區(qū)域，按鈕依然可見。
當表單采用多欄布局時，用戶在右側(cè)填寫完最后一項內(nèi)容后需要將視覺移至左側(cè)按鈕處，雖然會加長眼睛的移動距離，但符合眼睛移動軌跡，很少出現(xiàn)找不到按鈕的情況。
當網(wǎng)站需要用戶在填寫完表單后優(yōu)先關注其他提示信息時，可以采用左提示信息右按鈕的布局，提高用戶對這段提示信息的關注概率。
建議：
右對齊按鈕避免出現(xiàn)按鈕位置超過輸入框最右側(cè)的情況，這樣會讓用戶花費時間去尋找按鈕，可用性降低。（在Luke Wroblewski的眼動實驗中，這種布局的按鈕操作效率最低）
居中對齊多在橫向或垂直空間占比較大的表單中使用，這時的按鈕為了適應頁面上的元素往往較大，再配合上居中對齊的方式，視覺上可以達到平衡且嚴肅的效果，給用戶沉穩(wěn)的觀感，并提高用戶對表單內(nèi)容的關注程度。
例：阿里巴巴采購網(wǎng)的詢價表單，從樣式上看幾乎占滿了整個版面從內(nèi)容上看這份表單相對正式，帶有商業(yè)性質(zhì)，需要仔細填寫）
按鈕放在頂部時可視為其操作是針對頁面全局的，適用于表單過長或需要分多個步驟完成時，此時頂部按鈕永遠保持在用戶的視野范圍內(nèi)，給到用戶操作暗示。
例如一個表單需要三步完成，在用戶剛進入第三步時，就可以看到按鈕名稱由之前的“下一步”變?yōu)椤疤峤弧?，暗示這是表單的最后一頁，一定程度上緩解填寫復雜表單的焦躁情緒。
建議：
1.頂部按鈕一定要清晰，保證按鈕一目了然，減少其他視覺元素對按鈕的干擾
2.若一頁表單過長需要滾動才能完成時，不要讓按鈕隨表單一起滾動，這樣會增加用戶尋找按鈕的難度，應使用懸浮按鈕（Sticky Form Actions），保持可見性。
總結(jié) 以上內(nèi)容從表單單個元素的布局進行了分析，但在實際業(yè)務場景中，表單會由單個元素的單一或多種形態(tài)組成，很多時候現(xiàn)有的設計理論滿足不了業(yè)務需求，因此我們可以從上述的幾個角度出發(fā)，結(jié)合實際業(yè)務，動態(tài)地尋找最合適的解決方案。
歡迎大家關注我的原創(chuàng)公眾號，一些ui ux的分享
在線咨詢