備注: 關(guān)于label和tag,在中文中都翻譯成標(biāo)簽,而下文中出現(xiàn)的標(biāo)簽,都是對(duì)label的翻譯,比如”用戶名”+輸入框,這里的”用戶名”項(xiàng)在英文中是label,約定翻譯為標(biāo)簽。

頁(yè)面表單已經(jīng)是web設(shè)計(jì)中討論最多的元素,已經(jīng)超過(guò)10年了.我們無(wú)法避免.Call-to-action(一般翻譯為”行動(dòng)呼吁”,”行動(dòng)號(hào)召”,但是都覺(jué)得不理想.譯者注)的方式通常會(huì)將用戶引導(dǎo)到表單頁(yè);付費(fèi)需要使用表單;用戶注冊(cè)或訂閱需要使用表單

–表單的使用是不會(huì)停止的.

盡管在HTML中,把表單拼湊到一塊相當(dāng)容易,但是對(duì)于可用的,友好的表單來(lái)說(shuō),編碼,制作樣式和設(shè)計(jì)是很難的.在網(wǎng)站的轉(zhuǎn)變中,因?yàn)樵诒韱尉W(wǎng)站的成功轉(zhuǎn)化率中扮演很重要的角色,下面的小貼士和文章末尾處提供的源碼,應(yīng)該會(huì)對(duì)制作和編碼頁(yè)面表單的開(kāi)發(fā)者提供有價(jià)值的信息.

兩列 VS 一列

這個(gè)取決于表單的內(nèi)容,不過(guò)當(dāng)表單內(nèi)容相當(dāng)簡(jiǎn)單時(shí),通常盡量避免兩列布局.

下面是一個(gè)很好的簡(jiǎn)單表單的例子,它將每個(gè)標(biāo)簽(label)都放到相關(guān)表單元素的上方

這種表單布局的好處有哪些,僅僅是為了反對(duì)兩列布局?首先,表單的元素具有更大的空間,可以滿足今后對(duì)于文案的修改.兩列布局的表單在這點(diǎn)上會(huì)有限制,甚至可能需要重構(gòu)整個(gè)表單部分才能滿足調(diào)整的需求.另外一個(gè)好處就是看上去不雜亂,在每個(gè)標(biāo)簽部分不會(huì)有大量的空白,所以很容易閱讀并且很容易將標(biāo)簽與輸入框聯(lián)系起來(lái).另外,每個(gè)成對(duì)的標(biāo)簽/輸入框的背景色可以讓表單從視覺(jué)上看更吸引人.

作為對(duì)比,讓我們看看下面這個(gè)兩列布局的表單

譯者:豬小凡

原文地址:?http://www.noupe.com/design/tips-for-coding-and-designing-usable-web-forms.html