7個表單設計的祕訣

表單是網頁設計中最常見的元素，幾乎每個網站都會包含一種甚至幾種不同型別的表單。從簡單的電子郵件蒐集和訂閱，到註冊、下單、購買，表單一直伴隨著網頁而存在。所以，設計出好看易用的表單是非常有必要的。今天分享7個表單設計的祕訣，幫你設計出素質過硬的網頁表單。

　1、儘量讓表單一目瞭然

使用者瀏覽網站的時候，通常會快速掃視來獲取資訊，看看網站內容和設計是否對他們的胃口或者符合需求，再決定要如何應對、互動。表單也是一樣的道理。一目瞭然的表單能讓使用者立刻知道他們需要填寫多少資訊，以及如何提交表單。

一份一目瞭然的表單具備下面的特徵：

·對比度：文字和標籤都簡短直觀，易於閱讀，避免使用大量的色彩，儘量採用傳統的黑白式的文字/背景組合。

·分組和間距：像較長的表單那樣，將相近、相關的資訊都分到同一組當中。以支付為例，使用者的基本資訊、支付資訊和物流資訊分成不同的組。三個較短的.條目比一個較長的條目要更容易接受。控制好標籤文字和填寫表單之間的間距，根據相關靠近原則，讓條目之間的相互關係更明確。

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

2、考慮使用浮動的提示文字

對於是否要在表單的輸入框中加入提示文字有很多爭論，其中主要的爭論圍繞在一點上：當用戶點選輸入框，光標出現準備輸入的時候，其中的提示文字並沒有自動消失，而需要手動刪除之後再才能輸入。這就非常尷尬了。

此外，Nielsen Norman Group 的研究發現，空白欄位會更加吸引使用者注意，並且能夠幫助使用者更加清晰的輸入資訊。

如果你覺得有必要給使用者以提示，那麼請考慮使用互動性更強的解決方案：浮動的提示文字。在輸入框內加入提示文字，讓它看起來是佔位符，但是允許它動效化，當用戶的游標懸停或者點選輸入框的時候，提示資訊移動到左上角的位置上，它永遠不會消失，起到了提示的作用，便於使用者輸入，動效還能給使用者以驚喜，何樂而不為呢?

3、使用表單格式掩碼

格式掩碼能夠提醒使用者輸入的內容的格式，欄位的長短大小，對於表單的可用性有明顯提升。在使用者啟用輸入框的時候，格式掩碼會出現，它會幫助使用者格式化輸入資訊，避擴音交的時候出錯。格式掩碼常見於數字輸入的時候。

最典型的情況就是電話號碼的輸入，常見的格式掩碼如下：

·(000) 000-0000

·000-000-0000

·0000000000

使用者在輸入過程中，能夠通過格式掩碼實時地瞭解輸入資訊的數位的正確性，節省了反覆確認的過程，或者在提交後報錯再回頭調整的麻煩。

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

你無法確知使用者使用的是手機還是電腦在瀏覽你的網頁，輸入你的表單，但是它應該對於各種輸入裝置都足夠友好才行。考慮到你的表單可能會是不同型別的鍵盤輸入的，所以你應該根據表單欄位屬性和檢測到的鍵盤型別，進行適配。

在桌面端，使用者應該可以只借助鍵盤完成整個輸入過程，而無需動用滑鼠與觸控板。完成一個欄位的填寫之後，自動切換到下一個欄位，或者使用Tab按鍵來切換。 有一套完整的表單輸入策略供你參考。

在移動端裝置上，鍵盤有多種不同的型別，不同的鍵盤匹配不同的輸入內容。如果需要輸入的是字母，那麼可以開啟字母鍵盤;如果需要輸入的是數字，最好直接呼叫數字鍵盤。根據Google的研究，使用者非常喜歡輸入資料和輸入鍵盤對應起來，並且這種設定最好是貫穿整個APP，而不僅僅是某個任務。

　　5、選擇垂直單列布局

對於使用者而言，垂直單列的佈局比起多列的佈局更容易使用。當用戶瀏覽的時候，只需要向下瀏覽即可，不用來回翻看，也可以很好的避免填寫過程中的遺漏。

不過有一個例外，就是那種超級短的表單，比如只需要輸入電子郵件和使用者姓名兩個欄位的表單，在確保螢幕能夠放下的情況下，將兩個欄位橫向排列就可以了。

另外，縱向單列表單的條目內容應當符合邏輯，按照約定俗稱的順序也可以，比如從上到下依次是：形式、名字、電子郵件、手機號，等等。

　6、控制輸入內容

儘量使用瀏覽器的記憶功能和Cookie，呼叫資料將表單中常見的欄位預先填充進去。沒有什麼比開啟表單其中的多數字段已經自動填寫進去，更讓人興奮的了。

預填寫表單有三個好處：

·讓移動端使用者填寫表單明顯便捷了很多;

·合理地控制了需要填寫的欄位數目;

·根據已有資訊，合理的消除了一些使用者的輸入錯誤;

　7、讓表單短而美

當你設計表單的時候，總想從使用者那兒儘可能多的獲取資訊，一定要剋制住這個衝動!

只在表單中呈現重要資訊，讓使用者儘可能少的填寫。如果稍後需要提供更多的資訊，可以在其他的地方諸如電子郵件中向用戶獲取資訊。當用戶已經完成註冊之後，你們後續推送資訊、相互溝通、獲取資訊的機會更多了。

儘量只保留必要的欄位供使用者填寫，不要提供冗餘的選項，讓表單小而美。

　結語

當用戶完成表單的填寫之後，為使用者提供一些獎勵或者有趣的內容，這會讓使用者感到更加愉悅。將過去讓人煩躁的表單轉化為有趣的過程，強化你的網站和使用者之前的情感紐帶。