備註: 關於label和tag,在中文中都翻譯成標籤,而下文中出現的標籤,都是對label的翻譯,比如”用戶名”+輸入框,這裡的”用戶名”項在英文中是label,約定翻譯為標籤。

頁面表單已經​​是web設計中討論最多的元素,已經超過10年了.我們無法避免.Call-to-action(一般翻譯為”行動呼籲”,”行動號召”,但是都覺得不理想.譯者註)的方式通常會將用戶引導到表單頁;付費需要使用表單;用戶註冊或訂閱需要使用表單

–表單的使用是不會停止的.

儘管在HTML中,把表單拼湊到一塊相當容易,但是對於可用的,友好的表單來說,編碼,製作樣式和設計是很難的.在網站的轉變中,因為在表單網站的成功轉化率中扮演很重要的角色,下面的小貼士和文章末尾處提供的源碼,應該會對製作和編碼頁面表單的開發者提供有價值的信息.

兩列 VS 一列

這個取決於表單的內容,不過當表單內容相當簡單時,通常盡量避免兩列佈局.

下面是一個很好的簡單表單的例子,它將每個標籤(label)都放到相關表單元素的上方

這種表單佈局的好處有哪些,僅僅是為了反對兩列佈局?首先,表單的元素具有更大的空間,可以滿足今後對於文案的修改.兩列佈局的表單在這點上會有限制,甚至可能需要重構整個表單部分才能滿足調整的需求.另外一個好處就是看上去不雜亂,在每個標籤部分不會有大量的空白,所以很容易閱讀並且很容易將標籤與輸入框聯繫起來.另外,每個成對的標籤/輸入框的背景色可以讓表單從視覺上看更吸引人.

作為對比,讓我們看看下面這個兩列佈局的表單

譯者:豬小凡

特別注意：本站所有轉載文章言論不代表本站觀點，本站所提供的攝影照片，插畫，設計作品，如需使用，請與原作者聯繫，文章轉自alibuybuy