1.填寫域提供清晰可理解可視化的標(biāo)簽
填寫域是用戶填寫表單首先會(huì)聚焦的地方评凝,類似有用戶名/密碼等填寫信息,用戶需要清楚地了解每個(gè)空白域需要填寫的信息以及格式宜肉。一目了然才能做到不厭煩翎碑。
2.字體大小
一般來說日杈,主字體至少14px大小佑刷,16px是安全字體大小酿炸。
3.合適范圍的觸摸域
在觸摸設(shè)備上填寫表單的現(xiàn)象越來越常見,Apple一直倡導(dǎo)按鈕最小應(yīng)為44px44px麦萤,因?yàn)樗咏说氖种复笮》磻?yīng)的范圍廷支。當(dāng)然如果你在一個(gè)長(zhǎng)表單中全部使用44px大小的空白域栓辜,將會(huì)在網(wǎng)頁上占據(jù)大量空間,因此我建議用32px40px施敢。
Bootstrap默認(rèn)高度為32px狭莱,這是一個(gè)很好的基準(zhǔn)。
4.合理的輸入框大小
每個(gè)信息輸入框的大小不應(yīng)該是一致大小默怨,當(dāng)你在填寫郵政編碼時(shí)骤素,我們知道它是由4-6個(gè)數(shù)字組成的,因此與用戶名的輸入框長(zhǎng)度相比痕檬,它應(yīng)該更小以達(dá)到用戶的期望送浊。
5.瀏覽器默認(rèn)的點(diǎn)選框機(jī)制
點(diǎn)選框的功能一般是用Javascript庫(kù)實(shí)現(xiàn)的,但現(xiàn)在可以純粹用SVG和CSS實(shí)現(xiàn)唁桩。
[SVG animation]可以做到樣式很漂亮耸棒。但是不易用還是在損害用戶的利益。
select2所以使用瀏覽器默認(rèn)的選擇機(jī)制才是合理的仰猖。
6.可視化錯(cuò)誤提示
應(yīng)在可視化區(qū)域讓用戶接收錯(cuò)誤的信息提示。
7.清晰的可選擇區(qū)域提示
一般情況下用星號(hào)* 提示用戶此區(qū)域選擇性填寫鸵赫。
8.選擇性隱藏不必填寫信息
當(dāng)兩部分信息是獨(dú)立存在時(shí)辩棒,可以邏輯性地隱藏部分填寫信息膨疏。例如,在電商環(huán)境下佃却,用戶的支票地址信息很可能就是用戶接收發(fā)貨的的地址饲帅,這時(shí)可以隱藏地址這部分輸入框的填寫,待用戶需要時(shí)再出現(xiàn)即可灶泵。
9.精簡(jiǎn)輸入信息
盡量避免不必要信息的填寫特別是數(shù)字赦邻。
10.輸入樣式的提醒
當(dāng)被要求填寫用戶名、郵件地址仲锄、電話號(hào)碼等信息時(shí)湃鹊,應(yīng)給出輸入樣式的范例。