|
原文：Tips for Coding and Designing Usable Web Forms
譯文：關(guān)于可用性表單編碼和設(shè)計(jì)的小貼士
備注: 關(guān)于label和tag,在中文中都翻譯成標(biāo)簽,而下文中出現(xiàn)的標(biāo)簽,都是對label的翻譯,比如”用戶名”+輸入框, 這里的”用戶名”項(xiàng)在英文中是label,約定翻譯為標(biāo)簽
頁面表單已經(jīng)是web設(shè)計(jì)中討論最多的元素,已經(jīng)超過10年了.我們無法避免.Call-to-action(一般翻譯為”行動(dòng)呼吁”,”行動(dòng)號召”,但是都覺得不理想.譯者注)的方式通常會(huì)將用戶引導(dǎo)到表單頁;付費(fèi)需要使用表單;用戶注冊或訂閱需要使用表單-表單的使用是不會(huì)停止的.
盡管在HTML中,把表單拼湊到一塊相當(dāng)容易,但是對于可用的,友好的表單來說,編碼,制作樣式和設(shè)計(jì)是很難的.在網(wǎng)站的轉(zhuǎn)變中,對于成功轉(zhuǎn)化率,表單始終扮演著很重要的角色,下面的小貼士和文章末尾處提供的源碼,應(yīng)該會(huì)對制作和編碼頁面表單的開發(fā)者提供有價(jià)值的信息.
兩列 VS 一列
這個(gè)取決于表單的內(nèi)容,不過當(dāng)表單內(nèi)容相當(dāng)簡單時(shí),通常盡量避免兩列布局.
下面是一個(gè)很好的簡單表單的例子,它將每個(gè)標(biāo)簽(label)都放到相關(guān)表單元素的上方
這種表單布局的好處有哪些,僅僅是為了反對兩列布局?首先,表單的元素具有更大的空間,可以滿足今后對于文案的修改.兩列布局的表單在這點(diǎn)上會(huì)有限制,甚至可能需要重構(gòu)整個(gè)表單部分才能滿足調(diào)整的需求.另外一個(gè)好處就是看上去不雜亂,在每個(gè)標(biāo)簽部分不會(huì)有大量的空白,所以很容易閱讀并且很容易將標(biāo)簽與輸入框聯(lián)系起來.另外,每個(gè)成對的標(biāo)簽/輸入框的背景色可以讓表單從視覺上看更吸引人.
作為對比,讓我們看看下面這個(gè)兩列布局的表單
尤其是因?yàn)樽髮R的文字和不明顯的顏色,這個(gè)表單不具備上一個(gè)例子中那種干凈的視覺效果.事實(shí)上,在標(biāo)簽和輸入框之間的垂直空白多少會(huì)分散人的注意力,誤認(rèn)為里面包含了很多個(gè)部分,而實(shí)際上一個(gè)簡單的表單在視覺上應(yīng)該表現(xiàn)的像一個(gè)整體.
出處：豬窩
責(zé)任編輯：bluehearts
上一頁 下一頁 如何設(shè)計(jì)具可用性的網(wǎng)頁表單? [2]
|
第 1 頁 如何設(shè)計(jì)具可用性的網(wǎng)頁表單? [1]
第 2 頁 
