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

來源:互聯網
上載者:User

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

  標題和輸入框常見的相片順序

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

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

  3. 放在輸入框上面

  4. 放在輸入框裡面

  相片順序的比較

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

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

  第二種相片順序可以減少上面所提到的困擾,因為標題靠右對齊,標題和輸入框之間的關係既清楚又明顯,Z型路徑變短了,輸入資料就會比較輕鬆。但是由於左側的虛擬標線也變得崎嶇,使用者對於整個表單的概念就會稍微減低,但還不致於造成障礙。

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

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

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

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。