把表單體驗(yàn)做到極致!11個(gè)表單設(shè)計(jì)的高效技巧
表單是產(chǎn)品設(shè)計(jì)中常見且重要的組成部分,對(duì) UX/UI 設(shè)計(jì)師來(lái)說(shuō),構(gòu)建有效的表單至關(guān)重要。
經(jīng)過(guò)思考的表單設(shè)計(jì),能夠?yàn)橛脩魩?lái)更好的實(shí)用性、包容性,讓填寫體驗(yàn)更流暢。
讓我們一起來(lái)看看在表單設(shè)計(jì)過(guò)程中需要注意的技巧和問(wèn)題點(diǎn),創(chuàng)建更合理的表單!
1. 最小化字段數(shù)量
通常表單中的字段越多,用戶完成的可能性就越小。
在表單設(shè)計(jì)過(guò)程中我們要盡可能避免展示非必填的字段,尤其是想引導(dǎo)用戶注冊(cè)或者留資的場(chǎng)景中,避免表單中的某個(gè)字段為選填,保證用戶最大程度的留資轉(zhuǎn)化。
2. 明確標(biāo)記可選字段
在同一個(gè)表單中,要確保用戶清楚哪些字段是必填、哪些是選填的。
用星號(hào)標(biāo)記必填字段是設(shè)計(jì)師最常用的方法,但用戶仍有可能無(wú)法很好地理解星號(hào)的含義。
因此,簡(jiǎn)單地用文本(選填)標(biāo)記某些字段通常不會(huì)在視覺上造成負(fù)擔(dān),并且更清晰。
3. 使用單列布局
盡管單列布局在視覺上可能不太優(yōu)雅,但可以提高用戶理解、減少輸入錯(cuò)誤,提高整體的轉(zhuǎn)化率。
在單列布局中,用戶“遺漏”輸入的可能性會(huì)更小,因?yàn)樵谔顚憜瘟胁季值谋韱螘r(shí),視線只需要從上至下垂直移動(dòng)。
當(dāng)用戶錯(cuò)過(guò)某個(gè)字段時(shí),會(huì)破壞用戶不斷填寫表單取得進(jìn)展的節(jié)奏,因?yàn)樗麄冃枰黄鹊雇瞬⑻顚懜绲淖侄?,產(chǎn)生負(fù)面體驗(yàn)。
4. 將標(biāo)簽放在表單上方
在單列布局中,難經(jīng)常看到表單標(biāo)簽放在輸入框左側(cè)的情況。
這意味著用戶的瀏覽視線仍然是 Z 字型,而不是簡(jiǎn)單的垂直向下,這樣會(huì)增加填寫的復(fù)雜性,填寫過(guò)程更緩慢。
5. 對(duì)標(biāo)簽和字段進(jìn)行分組
在表單設(shè)計(jì)過(guò)程中,要確保表單的字段、相關(guān)的標(biāo)簽有著清晰的層級(jí)分組和間距,并與周圍的元素充分分離。
6. 避免將數(shù)字拆分為多個(gè)輸入字段
當(dāng)填寫電話號(hào)碼、身份證、銀行卡、訂單號(hào)等較長(zhǎng)的數(shù)字時(shí)只需要一個(gè)輸入字段,避免將數(shù)字拆分為多個(gè)輸入字段。分成多個(gè)字段雖然看起來(lái)清楚,但需要用戶多次點(diǎn)擊輸入,操作更繁瑣。
7. 在移動(dòng)端中使用默認(rèn)控件
AndROId 和 iOS 都有用于特定類型數(shù)據(jù)輸入的默認(rèn)組件,例如日期選擇器。
在移動(dòng)端設(shè)計(jì)中,盡可能使用這些內(nèi)置的元素,這樣用戶會(huì)更熟悉原生的選項(xiàng),表現(xiàn)可能會(huì)更好。
8. 保證字段簡(jiǎn)潔
在設(shè)計(jì)表單的標(biāo)簽時(shí),目標(biāo)是最少的字段和最大的清晰度。
如果考慮到某個(gè)字段有不確定性,可以使用一些簡(jiǎn)短的提示文本,明確說(shuō)明如何填寫這個(gè)字段。
9. 在按鈕上使用準(zhǔn)確的描述
在按鈕中使用點(diǎn)擊后將進(jìn)行的操作,讓用戶能更明確知道點(diǎn)擊之后的操作。按鈕上最常見的描述是“提交”或者“取消”,代表的含義太不夠具體??梢钥紤]使用“注冊(cè)”、“發(fā)送信息”、“創(chuàng)建帳戶”等文案。
10. 不要使用占位符作為標(biāo)簽
占位符是指點(diǎn)擊輸入前在輸入框中顯示的提示文本。
使用占位符文本作為標(biāo)簽看起來(lái)雖然很簡(jiǎn)潔,但占位符文本的顏色往往是淺灰色,訪問(wèn)性和識(shí)別度弱,不夠明顯。
另外一旦在輸入框內(nèi)填寫信息后,占位符標(biāo)簽就會(huì)消失,用戶可能會(huì)忘記這個(gè)表單的標(biāo)簽或者輸入的具體要求。
11. 使用內(nèi)聯(lián)驗(yàn)證來(lái)確認(rèn)進(jìn)度
使用內(nèi)聯(lián)驗(yàn)證來(lái)確認(rèn)用戶輸入的進(jìn)度以及輸入的內(nèi)容是否正確。
例如用戶填寫完成一個(gè)字段后,在字段旁出現(xiàn)正確的提示,即時(shí)反饋給用戶。
最后
以上是在表單設(shè)計(jì)中高效且實(shí)用的設(shè)計(jì)技巧,希望通過(guò)這些內(nèi)容能讓你對(duì)表單設(shè)計(jì)有更多的學(xué)習(xí)。
慢慢來(lái)比較快,如覺得有幫助,
作者:Clip設(shè)計(jì)夾
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)
本文來(lái)源:http://www.sonygallery.com.cn/seodongtai/17984.html