可用性表單關于編碼和設計的小貼士
備注: 關于label和tag,在中文中都翻譯成標簽,而下文中出現的標簽,都是對label的翻譯,比如”用戶名”+輸入框,這里的”用戶名”項在英文中是label,約定翻譯為標簽。
頁面表單已經是web設計中討論最多的元素,已經超過10年了.我們無法避免.Call-to-action(一般翻譯為”行動呼吁”,”行動號召”,但是都覺得不理想.譯者注)的方式通常會將用戶引導到表單頁;付費需要使用表單;用戶注冊或訂閱需要使用表單
–表單的使用是不會停止的.
盡管在HTML中,把表單拼湊到一塊相當容易,但是對于可用的,友好的表單來說,編碼,制作樣式和設計是很難的.在網站的轉變中,因為在表單網站的成功轉化率中扮演很重要的角色,下面的小貼士和文章末尾處提供的源碼,應該會對制作和編碼頁面表單的開發者提供有價值的信息.
兩列 VS 一列
這個取決于表單的內容,不過當表單內容相當簡單時,通常盡量避免兩列布局.
下面是一個很好的簡單表單的例子,它將每個標簽(label)都放到相關表單元素的上方
這種表單布局的好處有哪些,僅僅是為了反對兩列布局?首先,表單的元素具有更大的空間,可以滿足今后對于文案的修改.兩列布局的表單在這點上會有限制,甚至可能需要重構整個表單部分才能滿足調整的需求.另外一個好處就是看上去不雜亂,在每個標簽部分不會有大量的空白,所以很容易閱讀并且很容易將標簽與輸入框聯系起來.另外,每個成對的標簽/輸入框的背景色可以讓表單從視覺上看更吸引人.
作為對比,讓我們看看下面這個兩列布局的表單
譯者:豬小凡
原文地址:?http://www.noupe.com/design/tips-for-coding-and-designing-usable-web-forms.html
評論
- 目前還沒評論,等你發揮!