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

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

1、表單是什么？

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

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

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

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

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

2、信息的排序從易到難

信息的填寫最好是從用戶相對無抵觸的信息開始逐漸到隱私的信息，而不是一開始就讓用戶萌生退意，如下圖所示：

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

3、分類

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

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

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

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

3、標(biāo)簽

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

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

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

4、操作

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

1、界面右上角

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

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

優(yōu)勢：按鈕的視覺層級不是很高，方便用戶更專注于當(dāng)前頁面的填寫

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

2、固定在界面底部

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

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

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

3、固定在表單底部

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

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

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

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

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

1、未填寫

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

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

2、填寫后

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

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

6、反饋

1、操作前

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

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

2、操作后

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

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