|
如果你正從你的用戶那里收集信息, 沒有比網(wǎng)頁表單更簡(jiǎn)單和直接的辦法了。
一份有良好設(shè)計(jì)的表單可以提供有價(jià)值的信息, 相反, 他們有可能把用戶嚇跑。
明確了這一點(diǎn)之后, 每個(gè)設(shè)計(jì)師就應(yīng)該知道一些設(shè)計(jì)網(wǎng)頁表單的規(guī)則。
文章中所有的實(shí)例都是用CoffeeCup Web Form Builder生成的.
1. 保守性的搭建, 并帶有目的性的設(shè)計(jì)表單
我們要面對(duì)的現(xiàn)實(shí)是沒有人喜歡花大把的時(shí)間填寫表單. 保持表單的短小精悍
并且剔除絕對(duì)不必要的或者不會(huì)提供實(shí)際收效的表單元素. 保證表單的每個(gè)部
分都對(duì)整體起到了推動(dòng)作用, 這樣用戶會(huì)感謝你。
你的表單結(jié)構(gòu)應(yīng)該和表單內(nèi)的元素一樣具有功能性. 當(dāng)設(shè)計(jì)表單樣式的時(shí)候,
要記得, 至少在西方國家, 人們的閱讀習(xí)慣是從上到下, 從左到右. 他們也經(jīng)常
用Tab鍵在表單各個(gè)元素之間移動(dòng). 你的設(shè)計(jì)應(yīng)該通過元素?cái)[放的合理性和標(biāo)
簽的語義性來實(shí)現(xiàn). 當(dāng)然, 永遠(yuǎn)不要讓你的表單看起來分散或雜亂無章——保證
所有的元素都均勻的分隔開, 并且排列整齊。
下面是一些標(biāo)準(zhǔn)表單, 你可以用來作為出發(fā)點(diǎn), 設(shè)計(jì)出更加有創(chuàng)造性的表單:
標(biāo)簽左對(duì)齊, 輸入字段垂直羅列：
這個(gè)表單的特點(diǎn)是標(biāo)簽左對(duì)齊, 輸入框整齊有序的從上到下排列. 我們的眼
睛能夠很容易的捕捉表單元素, 特別是當(dāng)你問到一些用戶不太熟悉的問題時(shí)。
因?yàn)樗麄兛梢院茼樌膹纳系较麻喿x問題列表而不被輸入框打斷, 他們會(huì)更
專注于你所問的問題. 但是這個(gè)樣式會(huì)延長(zhǎng)填完表單的時(shí)間, 因?yàn)橐暰�在標(biāo)
簽和輸入框之間移動(dòng)會(huì)占據(jù)大量的時(shí)間。
標(biāo)簽右對(duì)齊, 輸入字段垂直堆疊：
右對(duì)齊的標(biāo)簽?zāi)軌蚋菀讌^(qū)分和閱讀, 并且剔除掉了標(biāo)簽和輸入框之間那些
不合適的空間. 但是, 卻使閱讀更加困難. 它不那么吸引人, 而且看起來不整齊。
標(biāo)簽頂端對(duì)齊：
頂端對(duì)齊的標(biāo)簽可以使填寫表單更加迅速和容易, 因?yàn)檠劬Σ恍枰跇?biāo)簽和
輸入框之間來回移動(dòng). 這種樣式也讓你把相關(guān)的字段放在一起, 節(jié)省了空間。
出處：cssrain
責(zé)任編輯：bluehearts
上一頁 下一頁 有效網(wǎng)頁表單的八條規(guī)則 [2]
|
第 1 頁 有效網(wǎng)頁表單的八條規(guī)則 [1]
第 2 頁 
