亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁(yè) > SEO動(dòng)態(tài) > 網(wǎng)站技術(shù)把表單體驗(yàn)做到極致!11個(gè)表單設(shè)計(jì)的高效技巧

把表單體驗(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)更流暢。

交互設(shè)計(jì) 表單 表單細(xì)節(jié) 表單設(shè)計(jì)

讓我們一起來(lái)看看在表單設(shè)計(jì)過(guò)程中需要注意的技巧和問(wèn)題點(diǎn),創(chuàng)建更合理的表單!

1. 最小化字段數(shù)量

通常表單中的字段越多,用戶完成的可能性就越小。

在表單設(shè)計(jì)過(guò)程中我們要盡可能避免展示非必填的字段,尤其是想引導(dǎo)用戶注冊(cè)或者留資的場(chǎng)景中,避免表單中的某個(gè)字段為選填,保證用戶最大程度的留資轉(zhuǎn)化。

交互設(shè)計(jì) 表單 表單細(xì)節(jié) 表單設(shè)計(jì)

2. 明確標(biāo)記可選字段

在同一個(gè)表單中,要確保用戶清楚哪些字段是必填、哪些是選填的。

用星號(hào)標(biāo)記必填字段是設(shè)計(jì)師最常用的方法,但用戶仍有可能無(wú)法很好地理解星號(hào)的含義。

因此,簡(jiǎn)單地用文本(選填)標(biāo)記某些字段通常不會(huì)在視覺上造成負(fù)擔(dān),并且更清晰。

交互設(shè)計(jì) 表單 表單細(xì)節(jié) 表單設(shè)計(jì)

3. 使用單列布局

盡管單列布局在視覺上可能不太優(yōu)雅,但可以提高用戶理解、減少輸入錯(cuò)誤,提高整體的轉(zhuǎn)化率。

在單列布局中,用戶“遺漏”輸入的可能性會(huì)更小,因?yàn)樵谔顚憜瘟胁季值谋韱螘r(shí),視線只需要從上至下垂直移動(dòng)。

交互設(shè)計(jì) 表單 表單細(xì)節(jié) 表單設(shè)計(jì)

當(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ò)程更緩慢。

交互設(shè)計(jì) 表單 表單細(xì)節(jié) 表單設(shè)計(jì)

5. 對(duì)標(biāo)簽和字段進(jìn)行分組

在表單設(shè)計(jì)過(guò)程中,要確保表單的字段、相關(guān)的標(biāo)簽有著清晰的層級(jí)分組和間距,并與周圍的元素充分分離。

交互設(shè)計(jì) 表單 表單細(xì)節(jié) 表單設(shè)計(jì)

6. 避免將數(shù)字拆分為多個(gè)輸入字段

當(dāng)填寫電話號(hào)碼、身份證、銀行卡、訂單號(hào)等較長(zhǎng)的數(shù)字時(shí)只需要一個(gè)輸入字段,避免將數(shù)字拆分為多個(gè)輸入字段。分成多個(gè)字段雖然看起來(lái)清楚,但需要用戶多次點(diǎn)擊輸入,操作更繁瑣。

交互設(shè)計(jì) 表單 表單細(xì)節(jié) 表單設(shè)計(jì)

7. 在移動(dòng)端中使用默認(rèn)控件

AndROId 和 iOS 都有用于特定類型數(shù)據(jù)輸入的默認(rèn)組件,例如日期選擇器。

在移動(dòng)端設(shè)計(jì)中,盡可能使用這些內(nèi)置的元素,這樣用戶會(huì)更熟悉原生的選項(xiàng),表現(xiàn)可能會(huì)更好。

交互設(shè)計(jì) 表單 表單細(xì)節(jié) 表單設(shè)計(jì)

8. 保證字段簡(jiǎn)潔

在設(shè)計(jì)表單的標(biāo)簽時(shí),目標(biāo)是最少的字段和最大的清晰度。

如果考慮到某個(gè)字段有不確定性,可以使用一些簡(jiǎn)短的提示文本,明確說(shuō)明如何填寫這個(gè)字段。

交互設(shè)計(jì) 表單 表單細(xì)節(jié) 表單設(shè)計(jì)

9. 在按鈕上使用準(zhǔn)確的描述

在按鈕中使用點(diǎn)擊后將進(jìn)行的操作,讓用戶能更明確知道點(diǎn)擊之后的操作。按鈕上最常見的描述是“提交”或者“取消”,代表的含義太不夠具體??梢钥紤]使用“注冊(cè)”、“發(fā)送信息”、“創(chuàng)建帳戶”等文案。

交互設(shè)計(jì) 表單 表單細(xì)節(jié) 表單設(shè)計(jì)

10. 不要使用占位符作為標(biāo)簽

占位符是指點(diǎn)擊輸入前在輸入框中顯示的提示文本。

使用占位符文本作為標(biāo)簽看起來(lái)雖然很簡(jiǎn)潔,但占位符文本的顏色往往是淺灰色,訪問(wèn)性和識(shí)別度弱,不夠明顯。

另外一旦在輸入框內(nèi)填寫信息后,占位符標(biāo)簽就會(huì)消失,用戶可能會(huì)忘記這個(gè)表單的標(biāo)簽或者輸入的具體要求。

交互設(shè)計(jì) 表單 表單細(xì)節(jié) 表單設(shè)計(jì)

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ì) 表單 表單細(xì)節(jié) 表單設(shè)計(jì)

最后

以上是在表單設(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

免責(zé)聲明:部分文章信息來(lái)源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對(duì)文章進(jìn)行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點(diǎn)或證實(shí)其內(nèi)容的真實(shí)性,不承擔(dān)任何法律責(zé)任。