優(yōu)秀注冊(cè)表單設(shè)計(jì)方法及案例分析

以下對(duì)國(guó)內(nèi)外近20個(gè)網(wǎng)站的注冊(cè)表單進(jìn)行的分析，并歸類(lèi)總結(jié)優(yōu)秀表單的設(shè)計(jì)方法。文章最后對(duì)其中三個(gè)案例進(jìn)行優(yōu)化對(duì)比。

1．??越少的填寫(xiě)項(xiàng)越好

Site inspire

CSS web site award

Tumblr

DeviantArt小tips：將表格內(nèi)容title寫(xiě)入格子內(nèi)，在視覺(jué)上降低“要填很多項(xiàng)”的感覺(jué)

反例：Another Bookmark，填寫(xiě)項(xiàng)太多，字號(hào)太小格子太密

反例：Shutter Stock，同上，填寫(xiě)項(xiàng)過(guò)多格子過(guò)密

反例：點(diǎn)點(diǎn)印，當(dāng)全是必填項(xiàng)時(shí)，可以不要*號(hào)，減小用戶(hù)壓力

2．??無(wú)論填寫(xiě)項(xiàng)多還是少，使用寬大的格子，行與行之間留白重組。一個(gè)清爽的頁(yè)面比被密密麻麻小字兒充滿(mǎn)的頁(yè)面更容易誘使人注冊(cè)。

Pictory

糯米

反例：sisTown（相比糯米只多了一項(xiàng)，卻在視覺(jué)上感覺(jué)繁重很多）

3．??即時(shí)的提示（該格子內(nèi)填什么，當(dāng)光標(biāo)移入才提示），即時(shí)的反饋（填的對(duì)不對(duì)，當(dāng)光標(biāo)移出再提示）。

twitter

Last.fm

Bangumi (注：此處提示信息相對(duì)有些過(guò)多)

Hashable

案例

案例一：Airbnb

分析：頁(yè)面左右輕重不統(tǒng)一，視覺(jué)上已聚焦左側(cè)框和右側(cè)框，無(wú)法視覺(jué)focus

修改方法：

1）??將頁(yè)面元素重新排列，讓用戶(hù)將注意力集中在“注冊(cè)”上

2）??頁(yè)頭橫線拉長(zhǎng)覆蓋全部寬度，頁(yè)尾文案放在一行

3）??將填寫(xiě)項(xiàng)title放入格子中，是頁(yè)面整齊化又不感覺(jué)內(nèi)容過(guò)多

案例二：UserInterface

分析：

1）??只有四項(xiàng)需要填，但是過(guò)多無(wú)用的文案引導(dǎo)

2）??填寫(xiě)title及填寫(xiě)框沒(méi)有任何對(duì)齊模式，界面較亂

3）??UserInterface的logo沒(méi)有突出，頁(yè)面的沒(méi)有title

4）??注冊(cè)按鈕太不突出，不能誘導(dǎo)注冊(cè)

修改方法：

1）??把沒(méi)用文案全部掉

2）??填寫(xiě)項(xiàng)titel與框左對(duì)齊

3）??修正logo及加入頁(yè)面title

4）??強(qiáng)化“注冊(cè)”按鈕視覺(jué)效果

案例三：Visualize.us

分析：

1）??框長(zhǎng)度不一導(dǎo)致左側(cè)不整齊

2）??右側(cè)干擾信息過(guò)明顯

修改方法：

1）??將填寫(xiě)框統(tǒng)一長(zhǎng)度

2）??右側(cè)突出是有FB或twitter賬號(hào)登陸，減輕干擾

來(lái)源：http://blog.sina.com.cn/s/blog_6d04fca50100r6bp.html