最近一直在做公司的內(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ù)采集的功能，并且都是需要用戶(hù)自己填寫(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)用戶(hù)的體驗(yàn)很差，雖然很多時(shí)候表單里的一些內(nèi)容是無(wú)法去掉的，但是還是希望能夠簡(jiǎn)化表單，如下圖所示：

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

2、信息的排序從易到難

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

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

3、分類(lèi)

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

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

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

但是展示的時(shí)候分割線(xiàn)確實(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ō)是使用的比較少的情況，這種位置符合自然視線(xiàn)，能夠快速幫助用戶(hù)完成表單，但是卻用的不是很多，因?yàn)殛P(guān)于表單的填寫(xiě)，產(chǎn)品還是希望用戶(hù)能夠慢下來(lái)的，通過(guò)左右閱讀，讓用戶(hù)仔細(xì)閱讀標(biāo)簽，如下圖所示：

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

4、操作

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

1、界面右上角

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

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

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

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

2、固定在界面底部

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

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

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

3、固定在表單底部

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

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

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

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

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

1、未填寫(xiě)

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

將需要用戶(hù)填寫(xiě)的表單信息給予的一定的提示和解釋?zhuān)矒嵊脩?hù)在面對(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ò)上也能夠極大的提高用戶(hù)的體驗(yàn)。

6、反饋

1、操作前

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

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

2、操作后

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

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