網頁設計表單元素設計大揭密

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

　　標題和輸入框常見的排列方式

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

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

　　3. 放在輸入框上面

　　4. 放在輸入框裡面

　　排列方式的比較

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

　　但是由於標題靠左的關系，標題和輸入框之間的關系就不是這麼明顯，距離也不固定，使用者要來回在標題-輸入框之間呈現Z型的浏覽路徑，所以對用戶而言輸入上會稍微產生一點障礙，當然也就增加了完成表單的時間。

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

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

　　最後一種方式最常出現在注冊或登入的表單上面，把標題直接和輸入框結合，當使用者開始輸入的時候，在輸入框裡的標題便慢慢淡出。視覺動線流暢、垂直高度 短、也很容易快速浏覽表單要求的項目。這個方式最大的缺點大概就是當用戶開始輸入數據的時候，標題就消失了，偶爾會讓使用者產生混淆。

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