為什么簡(jiǎn)單的表單總是很難設(shè)計(jì)的好?

2020-1-3    ui設(shè)計(jì)分享達(dá)人

這里討論的是從細(xì)節(jié)處提升表單的設(shè)計(jì)

最近一直在做公司的內(nèi)部辦公項(xiàng)目,涉及到了排版和表單的問(wèn)題最多,而且大部分都是來(lái)自于網(wǎng)頁(yè)端的改版,因此在畫(huà)界面的時(shí)候,關(guān)于表單里很多小細(xì)節(jié)都不太清楚,并且界面十分的冗長(zhǎng),因此就想把這段時(shí)間關(guān)于表單的設(shè)計(jì)做一個(gè)簡(jiǎn)單的總結(jié),希望能幫到大家。


我們今天換個(gè)角度來(lái)說(shuō),最近學(xué)了原子設(shè)計(jì),所以我們從原子的角度上將表單拆開(kāi)來(lái)說(shuō),讓我們更全面細(xì)節(jié)的了解表單,分為以下六個(gè)模塊:結(jié)構(gòu)、標(biāo)簽、操作、幫助、驗(yàn)證、反饋,首先我們先了解一下表單是什么?



1、表單是什么?

表單是我們?cè)诰W(wǎng)頁(yè)和APP中使用頻率比較高的模塊,大多是數(shù)據(jù)采集的功能,并且都是需要用戶自己填寫(xiě)或者編輯的,因此會(huì)在很多功能模塊中見(jiàn)到,例如12306的信息填寫(xiě)頁(yè),個(gè)人中心信息、評(píng)論和動(dòng)態(tài)發(fā)布以及登錄頁(yè)等等。



2、結(jié)構(gòu)

1、減少不必要的表單項(xiàng)目

我從項(xiàng)目當(dāng)中最深切的感受就是產(chǎn)品太摳了,網(wǎng)頁(yè)上的信息哪個(gè)都舍不得刪,整個(gè)搬下來(lái),導(dǎo)致頁(yè)面使用下來(lái)用戶的體驗(yàn)很差,雖然很多時(shí)候表單里的一些內(nèi)容是無(wú)法去掉的,但是還是希望能夠簡(jiǎn)化表單,如下圖所示:


用戶注冊(cè)表單時(shí)要一并填寫(xiě)姓名和生日,這種與注冊(cè)無(wú)關(guān)的信息填寫(xiě)除了增加用戶的提高留時(shí)間之外,降低對(duì)產(chǎn)品的好感度


2、信息的排序從易到難

信息的填寫(xiě)最好是從用戶相對(duì)無(wú)抵觸的信息開(kāi)始逐漸到隱私的信息,而不是一開(kāi)始就讓用戶萌生退意,如下圖所示:

自如的房東簽約里的內(nèi)容個(gè)人覺(jué)得門檻還是挺高的,剛選擇完自己的行業(yè),就要填寫(xiě)公司的名稱和地址,以及學(xué)歷信息,這種比較隱私的問(wèn)題一開(kāi)始就讓用戶填寫(xiě),其實(shí)會(huì)讓用戶對(duì)這個(gè)產(chǎn)品萌生退意。


3、分類

如果實(shí)在是信息量很大但一定要在一個(gè)界面里展示,那么就將相關(guān)的內(nèi)容進(jìn)行分類組合,并且通過(guò)增加一些額外的空間或者主標(biāo)題來(lái)分類。如下圖所示:



12306、愛(ài)彼迎以及知乎的個(gè)人信息填寫(xiě)都比較多,但是將信息分類以后,就增加了頁(yè)面呼吸和節(jié)奏感,從而幫助用戶更加輕松完成表單。


而且這里在設(shè)計(jì)的時(shí)候需要注意的一個(gè)是分割形式,上圖的三個(gè)例子分別使用了背景分割和留白分割,其中留白分割在填寫(xiě)時(shí)使用的比較多,因?yàn)榇蠹乙⒁獾氖窃诰庉嫚顟B(tài)是有很多填寫(xiě)提示的下劃線,背景分割或者分割線分割勢(shì)必會(huì)造成視覺(jué)上分割感更強(qiáng),因此在編輯狀態(tài)留白風(fēng)格是比較好的選擇辦法。


但是展示的時(shí)候分割線確實(shí)比較好的選擇辦法,如下圖所示:




3、標(biāo)簽

在表單中,標(biāo)簽問(wèn)題比較多的在于標(biāo)簽的位置放在那里,我們經(jīng)??吹降挠凶髮?duì)齊、右對(duì)齊、頂部對(duì)齊和浮動(dòng)標(biāo)簽。如下圖所示:


浮動(dòng)標(biāo)簽和頂部對(duì)齊目前來(lái)說(shuō)是使用的比較少的情況,這種位置符合自然視線,能夠快速幫助用戶完成表單,但是卻用的不是很多,因?yàn)殛P(guān)于表單的填寫(xiě),產(chǎn)品還是希望用戶能夠慢下來(lái)的,通過(guò)左右閱讀,讓用戶仔細(xì)閱讀標(biāo)簽,如下圖所示:


目前手機(jī)端使用較多的是右對(duì)齊為主,畢竟用戶理解和填寫(xiě)速度都屬于適中。



4、操作

在操作的設(shè)計(jì)問(wèn)題上,我們一般拿不準(zhǔn)的就是不知道按鈕要放在界面右上角還是下方,我們先說(shuō)第一種:


1、界面右上角

這是目前不管是設(shè)計(jì)還是使用,都是界面中出現(xiàn)頻次比較高的一種方式,如下圖所示:

這種形式適用于界面信息內(nèi)容不多,并且用戶的可控性比較強(qiáng),在UGC的產(chǎn)品中較多出現(xiàn)。


優(yōu)勢(shì):按鈕的視覺(jué)層級(jí)不是很高,方便用戶更專注于當(dāng)前頁(yè)面的填寫(xiě)


缺點(diǎn):按鈕在右上角,不太方便用戶一只手操作。



2、固定在界面底部

用主題色作為按鈕的主色,并且固定在界面底部位置,如下圖所示:

優(yōu)點(diǎn):位于屏幕下方,方便用戶點(diǎn)擊,同時(shí)視覺(jué)層級(jí)高能夠吸引用戶的注意力


缺點(diǎn):會(huì)遮擋表單,導(dǎo)致用戶會(huì)錯(cuò)過(guò)一些信息,因此這樣的按鈕大部分都是會(huì)放在信息不重要或者不用完全都填寫(xiě)的表單界面上。



3、固定在表單底部

這里的底部與第二種不同,第二種是固定在界面的底部,但是這種是固定在表單的底部,如下圖所示:


優(yōu)點(diǎn):符合用戶的閱讀習(xí)慣,同時(shí)能夠引導(dǎo)用戶將表單信息看完,因此這種比較適合用在表單有必填項(xiàng)目的表單中使用。


缺點(diǎn):如果表單內(nèi)容比較少,在視覺(jué)上就會(huì)顯得擁擠



5、提示和驗(yàn)證

幫助提示大多出現(xiàn)在產(chǎn)品的登錄頁(yè)和隱私信息的填寫(xiě)界面,不同的步驟需要考慮不同的情況。


1、未填寫(xiě)

未填寫(xiě)時(shí)給與用戶的提示,這種情況是最常見(jiàn)的表單形式,如下圖所示:


將需要用戶填寫(xiě)的表單信息給予的一定的提示和解釋,安撫用戶在面對(duì)大量需要填寫(xiě)信息時(shí)的情緒。



2、填寫(xiě)后

填寫(xiě)驗(yàn)證后出現(xiàn)報(bào)錯(cuò)或者不符合要求時(shí),需要作出反饋,可以有下圖幾種情況:

上圖中兩種不同的情況,針對(duì)性的報(bào)錯(cuò)和局部的報(bào)錯(cuò),都分別代表了不同的場(chǎng)景,個(gè)人認(rèn)為針對(duì)性的報(bào)錯(cuò)在登錄頁(yè)的報(bào)錯(cuò)上也能夠極大的提高用戶的體驗(yàn)。



6、反饋

1、操作前

在用戶未對(duì)當(dāng)前頁(yè)面有操作時(shí),按鈕需有不同的表現(xiàn)形式,讓用戶對(duì)操作的行為及結(jié)果有預(yù)先的心理感知,如下圖所示:

很多操作前的按鈕都會(huì)置灰,顯示不可點(diǎn)擊的狀態(tài),除了給用戶提示之外,也是為了避免誤操作,當(dāng)然現(xiàn)在還有一種方法就是如果誤觸頁(yè)面會(huì)有提示


2、操作后

點(diǎn)擊按鈕后給頁(yè)面增加一些微動(dòng)效,提起用戶的興趣,同時(shí)提升表單的轉(zhuǎn)化率。

轉(zhuǎn)自;站酷-潘團(tuán)子

分享本文至:

日歷

鏈接

個(gè)人資料

存檔