這7個(gè)秘訣,能幫你做出體驗(yàn)極佳的網(wǎng)頁(yè)表單

2017-3-6    周周

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

表單是網(wǎng)頁(yè)設(shè)計(jì)中最常見(jiàn)的元素,幾乎每個(gè)網(wǎng)站都會(huì)包含一種甚至幾種不同類型的表單。從簡(jiǎn)單的電子郵件搜集和訂閱,到注冊(cè)、下單、購(gòu)買,表單一直伴隨著網(wǎng)頁(yè)而存在。所以,設(shè)計(jì)出好看易用的表單是非常有必要的。

也正是因?yàn)楸韱我恢卑殡S這網(wǎng)頁(yè)存在,在過(guò)去的20多年間,表單的設(shè)計(jì)規(guī)范和標(biāo)準(zhǔn)也一直在逐步發(fā)展。雖然許多網(wǎng)頁(yè)中的表單涵蓋了大量的信息也數(shù)量可觀的欄目,但是絕大多數(shù)的優(yōu)秀設(shè)計(jì)和最佳實(shí)踐都是以簡(jiǎn)單而著稱。好的表單一目了然,用戶不需要輸入太多信息,條目標(biāo)識(shí)明確,格式清晰,讓用戶盡可能一次就能正確填寫。

1、盡量讓表單一目了然

用戶瀏覽網(wǎng)站的時(shí)候,通常會(huì)快速掃視來(lái)獲取信息,看看網(wǎng)站內(nèi)容和設(shè)計(jì)是否對(duì)他們的胃口或者符合需求,再?zèng)Q定要如何應(yīng)對(duì)、交互。表單也是一樣的道理。一目了然的表單能讓用戶立刻知道他們需要填寫多少信息,以及如何提交表單。

一份一目了然的表單具備下面的特征:

·對(duì)比度:文本和標(biāo)簽都簡(jiǎn)短直觀,易于閱讀,避免使用大量的色彩,盡量采用傳統(tǒng)的黑白式的文本/背景組合。
·分組和間距:像較長(zhǎng)的表單那樣,將相近、相關(guān)的信息都分到同一組當(dāng)中。以支付為例,用戶的基本信息、支付信息和物流信息分成不同的組。三個(gè)較短的條目比一個(gè)較長(zhǎng)的條目要更容易接受??刂坪脴?biāo)簽文本和填寫表單之間的間距,根據(jù)相關(guān)靠近原則,讓條目之間的相互關(guān)系更明確。
·行為召喚:金蓮使用大且容易看清的按鈕。按鈕中的文本指向性明確,比如“提交”“立即支付”或者“下一步”,直觀不拖沓。

2、考慮使用浮動(dòng)的提示文本

對(duì)于是否要在表單的輸入框中加入提示文本有很多爭(zhēng)論,其中主要的爭(zhēng)論圍繞在一點(diǎn)上:當(dāng)用戶點(diǎn)擊輸入框,光標(biāo)出現(xiàn)準(zhǔn)備輸入的時(shí)候,其中的提示文本并沒(méi)有自動(dòng)消失,而需要手動(dòng)刪除之后再才能輸入。這就非常尷尬了。

此外,Nielsen Norman Group 的研究發(fā)現(xiàn),空白字段會(huì)更加吸引用戶注意,并且能夠幫助用戶更加清晰的輸入信息。

如果你覺(jué)得有必要給用戶以提示,那么請(qǐng)考慮使用交互性更強(qiáng)的解決方案:浮動(dòng)的提示文本。在輸入框內(nèi)加入提示文本,讓它看起來(lái)是占位符,但是允許它動(dòng)效化,當(dāng)用戶的光標(biāo)懸?;蛘唿c(diǎn)擊輸入框的時(shí)候,提示信息移動(dòng)到左上角的位置上,它永遠(yuǎn)不會(huì)消失,起到了提示的作用,便于用戶輸入,動(dòng)效還能給用戶以驚喜,何樂(lè)而不為呢?

3、使用表單格式掩碼

格式掩碼能夠提醒用戶輸入的內(nèi)容的格式,字段的長(zhǎng)短大小,對(duì)于表單的可用性有明顯提升。在用戶激活輸入框的時(shí)候,格式掩碼會(huì)出現(xiàn),它會(huì)幫助用戶格式化輸入信息,避免提交的時(shí)候出錯(cuò)。格式掩碼常見(jiàn)于數(shù)字輸入的時(shí)候。

最典型的情況就是電話號(hào)碼的輸入,常見(jiàn)的格式掩碼如下:

·(000) 000-0000
·000-000-0000
·0000000000

用戶在輸入過(guò)程中,能夠通過(guò)格式掩碼實(shí)時(shí)地了解輸入信息的數(shù)位的正確性,節(jié)省了反復(fù)確認(rèn)的過(guò)程,或者在提交后報(bào)錯(cuò)再回頭調(diào)整的麻煩。

4、把表單設(shè)計(jì)得易于輸入

你無(wú)法確知用戶使用的是手機(jī)還是電腦在瀏覽你的網(wǎng)頁(yè),輸入你的表單,但是它應(yīng)該對(duì)于各種輸入設(shè)備都足夠友好才行??紤]到你的表單可能會(huì)是不同類型的鍵盤輸入的,所以你應(yīng)該根據(jù)表單字段屬性和檢測(cè)到的鍵盤類型,進(jìn)行適配。

在桌面端,用戶應(yīng)該可以只借助鍵盤完成整個(gè)輸入過(guò)程,而無(wú)需動(dòng)用鼠標(biāo)與觸控板。完成一個(gè)字段的填寫之后,自動(dòng)切換到下一個(gè)字段,或者使用Tab按鍵來(lái)切換。W3.org 有一套完整的表單輸入策略供你參考。

在移動(dòng)端設(shè)備上,鍵盤有多種不同的類型,不同的鍵盤匹配不同的輸入內(nèi)容。如果需要輸入的是字母,那么可以打開(kāi)字母鍵盤;如果需要輸入的是數(shù)字,最好直接調(diào)用數(shù)字鍵盤。根據(jù)Google的研究,用戶非常喜歡輸入數(shù)據(jù)和輸入鍵盤對(duì)應(yīng)起來(lái),并且這種設(shè)定最好是貫穿整個(gè)APP,而不僅僅是某個(gè)任務(wù)。

5、選擇垂直單列布局

對(duì)于用戶而言,垂直單列的布局比起多列的布局更容易使用。當(dāng)用戶瀏覽的時(shí)候,只需要向下瀏覽即可,不用來(lái)回翻看,也可以很好的避免填寫過(guò)程中的遺漏。

不過(guò)有一個(gè)例外,就是那種超級(jí)短的表單,比如只需要輸入電子郵件和用戶姓名兩個(gè)字段的表單,在確保屏幕能夠放下的情況下,將兩個(gè)字段橫向排列就可以了。

另外,縱向單列表單的條目?jī)?nèi)容應(yīng)當(dāng)符合邏輯,按照約定俗稱的順序也可以,比如從上到下依次是:形式、名字、電子郵件、手機(jī)號(hào),等等。

6、控制輸入內(nèi)容

盡量使用瀏覽器的記憶功能和Cookie,調(diào)用數(shù)據(jù)將表單中常見(jiàn)的字段預(yù)先填充進(jìn)去。沒(méi)有什么比打開(kāi)表單其中的多數(shù)字段已經(jīng)自動(dòng)填寫進(jìn)去,更讓人興奮的了。

預(yù)填寫表單有三個(gè)好處:

·讓移動(dòng)端用戶填寫表單明顯便捷了很多;
·合理地控制了需要填寫的字段數(shù)目;
·根據(jù)已有信息,合理的消除了一些用戶的輸入錯(cuò)誤;

7、讓表單短而美

當(dāng)你設(shè)計(jì)表單的時(shí)候,總想從用戶那兒盡可能多的獲取信息,一定要克制住這個(gè)沖動(dòng)!

只在表單中呈現(xiàn)重要信息,讓用戶盡可能少的填寫。如果稍后需要提供更多的信息,可以在其他的地方諸如電子郵件中向用戶獲取信息。當(dāng)用戶已經(jīng)完成注冊(cè)之后,你們后續(xù)推送信息、相互溝通、獲取信息的機(jī)會(huì)更多了。

盡量只保留必要的字段供用戶填寫,不要提供冗余的選項(xiàng),讓表單小而美。

結(jié)語(yǔ)

當(dāng)用戶完成表單的填寫之后,為用戶提供一些獎(jiǎng)勵(lì)或者有趣的內(nèi)容,這會(huì)讓用戶感到更加愉悅。將過(guò)去讓人煩躁的表單轉(zhuǎn)化為有趣的過(guò)程,強(qiáng)化你的網(wǎng)站和用戶之前的情感紐帶。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

 

日歷

鏈接

個(gè)人資料

存檔