詳細解析網(wǎng)站表單元素設計大揭密發(fā)布者：本站     時(shí)間：2021-12-29 09:12:36

表單是由許多細小的元素所組合而成的集合體，標題和輸入框的排列方式有著(zhù)重要的地位，標題要放在輸入框的左側還是上面?要靠左還是靠右?要怎么排列才能提高表單的完成率呢?

詳細解析網(wǎng)站表單元素<a href=/design/ target=_blank class=infotextkey>設計</a>大揭密,PS教程,

標題和輸入框常見(jiàn)的排列方式

1. 放在輸入框左邊，而且靠左對齊

詳細解析網(wǎng)站表單元素設計大揭密,PS教程,

2. 放在輸入框左邊，但是靠右對齊

詳細解析網(wǎng)站表單元素設計大揭密,PS教程,

3. 放在輸入框上面

詳細解析網(wǎng)站表單元素設計大揭密,PS教程,

4. 放在輸入框里面

詳細解析網(wǎng)站表單元素設計大揭密,PS教程,

排列方式的比較

到底這四種排列方式有什么不一樣呢?其實(shí)這些排列組合最大的影響都在于用戶(hù)視線(xiàn)的移動(dòng)，在第一種排列方式中，用戶(hù)的視線(xiàn)先看到標題，由于靠左對齊的緣 故，我們可以看到表單的左側有著(zhù)很整齊的虛擬標線(xiàn)，用戶(hù)的視線(xiàn)會(huì )跟隨著(zhù)這條虛擬路徑前進(jìn)，他們會(huì )舒服的看完所有的標題，大概的這張表單要求用戶(hù)輸入什么數據。

詳細解析網(wǎng)站表單元素設計大揭密,PS教程,

但是由于標題靠左的關(guān)系，標題和輸入框之間的關(guān)系就不是這么明顯，距離也不固定，使用者要來(lái)回在標題-輸入框之間呈現Z型的瀏覽路徑，所以對用戶(hù)而言輸入上會(huì )稍微產(chǎn)生一點(diǎn)障礙，當然也就增加了完成表單的時(shí)間。

詳細解析網(wǎng)站表單元素設計大揭密,PS教程,

第二種排列方式可以減少上面所提到的困擾，因為標題靠右對齊，標題和輸入框之間的關(guān)系既清楚又明顯，Z型路徑變短了，輸入數據就會(huì )比較輕松。但是由于左側的虛擬標線(xiàn)也變得崎嶇，用戶(hù)對于整個(gè)表單的概念就會(huì )稍微減低，但還不致于造成障礙。

詳細解析網(wǎng)站表單元素設計大揭密,PS教程,

第三種排列方式是直接把標題放在輸入框上面，這個(gè)方式完全消除了讓人感到煩躁的Z型路徑，從頭到尾可以較為流暢的閱讀與完成表單，左側的虛擬標線(xiàn)也很整齊，所以使用者的輸入時(shí)間也比較短。唯一的缺點(diǎn)是表單看起來(lái)變長(cháng)了，讓使用者心理上感覺(jué)好像會(huì )花最多時(shí)間。

詳細解析網(wǎng)站表單元素設計大揭密,PS教程,

最后一種方式最常出現在注冊或登入的表單上面，把標題直接和輸入框結合，當使用者開(kāi)始輸入的時(shí)候，在輸入框里的標題便慢慢淡出。視覺(jué)動(dòng)線(xiàn)流暢、垂直高度 短、也很容易快速瀏覽表單要求的項目。這個(gè)方式最大的缺點(diǎn)大概就是當用戶(hù)開(kāi)始輸入數據的時(shí)候，標題就消失了，偶爾會(huì )讓使用者產(chǎn)生混淆。

詳細解析網(wǎng)站表單元素設計大揭密,PS教程,

這四種排列組合的方式有著(zhù)不同的優(yōu)點(diǎn)與缺點(diǎn)，適合用在不同的地方。設計師可以考慮各種狀況采用不同的排列組合。如果你的網(wǎng)站對于垂直空間很要求，那么第三種排列方式就不能采用了;如果你需要用戶(hù)快速的完成表單，第一種排列方式可能不是很好的選項。