7個(gè)秘訣幫你做出體驗極佳的網(wǎng)頁(yè)表單發(fā)布者：本站     時(shí)間：2022-01-10 15:01:33

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

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

今天分享7個(gè)表單設計的秘訣，幫你設計出素質(zhì)過(guò)硬的網(wǎng)頁(yè)表單。

1、盡量讓表單一目了然

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

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

·對比度：文本和標簽都簡(jiǎn)短直觀(guān)，易于閱讀，避免使用大量的色彩，盡量采用傳統的黑白式的文本/背景組合。

·分組和間距：像較長(cháng)的表單那樣，將相近、相關(guān)的信息都分到同一組當中。以支付為例，用戶(hù)的基本信息、支付信息和物流信息分成不同的組。三個(gè)較短的條目比一個(gè)較長(cháng)的條目要更容易接受?？刂坪脴撕炍谋竞吞顚?xiě)表單之間的間距，根據相關(guān)靠近原則，讓條目之間的相互關(guān)系更明確。

·行為召喚：金蓮使用大且容易看清的按鈕。按鈕中的文本指向性明確，比如“提交”“立即支付”或者“下一步”，直觀(guān)不拖沓。

7個(gè)秘訣幫你做出體驗極佳的網(wǎng)頁(yè)表單,PS教程,

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

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

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

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

7個(gè)秘訣幫你做出體驗極佳的網(wǎng)頁(yè)表單,PS教程,

3、使用表單格式掩碼

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

最典型的情況就是電話(huà)號碼的輸入，常見(jiàn)的格式掩碼如下：

·(000) 000-0000

·000-000-0000

·0000000000

用戶(hù)在輸入過(guò)程中，能夠通過(guò)格式掩碼實(shí)時(shí)地了解輸入信息的數位的正確性，節省了反復確認的過(guò)程，或者在提交后報錯再回頭調整的麻煩。

7個(gè)秘訣幫你做出體驗極佳的網(wǎng)頁(yè)表單,PS教程,

4、把表單設計得易于輸入

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

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

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

7個(gè)秘訣幫你做出體驗極佳的網(wǎng)頁(yè)表單,PS教程,

5、選擇垂直單列布局

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

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

另外，縱向單列表單的條目?jì)热輵敺线壿?，按照約定俗稱(chēng)的順序也可以，比如從上到下依次是：形式、名字、電子郵件、手機號，等等。

7個(gè)秘訣幫你做出體驗極佳的網(wǎng)頁(yè)表單,PS教程,

6、控制輸入內容

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

預填寫(xiě)表單有三個(gè)好處：

·讓移動(dòng)端用戶(hù)填寫(xiě)表單明顯便捷了很多;

·合理地控制了需要填寫(xiě)的字段數目;

·根據已有信息，合理的消除了一些用戶(hù)的輸入錯誤;

7個(gè)秘訣幫你做出體驗極佳的網(wǎng)頁(yè)表單,PS教程,

7、讓表單短而美

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

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

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

7個(gè)秘訣幫你做出體驗極佳的網(wǎng)頁(yè)表單,PS教程,

結語(yǔ)

當用戶(hù)完成表單的填寫(xiě)之后，為用戶(hù)提供一些獎勵或者有趣的內容，這會(huì )讓用戶(hù)感到更加愉悅。將過(guò)去讓人煩躁的表單轉化為有趣的過(guò)程，強化你的網(wǎng)站和用戶(hù)之前的情感紐帶。