最近一直在做公司的內(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ù)采集的功能，并且都是需要用戶自己填寫或者編輯的，因此會在很多功能模塊中見到，例如12306的信息填寫頁，個(gè)人中心信息、評論和動態(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í)會讓用戶對這個(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)是有很多填寫提示的下劃線，背景分割或者分割線分割勢必會造成視覺上分割感更強(qiáng)，因此在編輯狀態(tài)留白風(fēng)格是比較好的選擇辦法。

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

3、標(biāo)簽

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

浮動標(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)：會遮擋表單，導(dǎo)致用戶會錯(cuò)過一些信息，因此這樣的按鈕大部分都是會放在信息不重要或者不用完全都填寫的表單界面上。

3、固定在表單底部

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

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

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

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ù)先的心理感知，如下圖所示：

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

2、操作后

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

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