編輯導讀：為了提高更好更精準的服務(wù)，我們往往會需要收集用戶的信息，表單設(shè)計就顯得尤為重要。本文將從表單類型和設(shè)計點出發(fā)進行分析，希望對你有幫助。

不管你是負責設(shè)計B端產(chǎn)品或者C端產(chǎn)品，都必然接觸過表單設(shè)計。

有長表單也有短表單，我們要知道表單的目的是收集用戶的信息，綜合這些信息以提供更好更準確的服務(wù)給到用戶。

對于用戶來說，填寫長長的表單是需要花費時間成本的，如果表單是將所需要收集的問題簡單的羅列出來，填寫起來會非常困難，引起用戶的反感情緒，直接導致的就是用戶會直接關(guān)閉表單填寫。

設(shè)計師需要通過設(shè)計手段降低用戶對于表單的理解成本，充分的從用戶的角度考慮，幫助其更快速高效的完成表單填寫。

一、表單類型

在開始優(yōu)化設(shè)計表單之前，需要先了解一下表單的類型有哪些。

二、設(shè)計點

1. 提升填寫效率

設(shè)計某些有著特定填寫格式的表單，添加上適當?shù)奶崾緲永梢愿咝?。下圖這個是一個填寫官網(wǎng)地址的表單，通常我們在瀏覽網(wǎng)站時不會特意去記住網(wǎng)址，這里提供了一個常規(guī)網(wǎng)址的樣例格式，可以對于用戶起到一定的提示作用，幫助其更快速準確的填寫信息。

類似的還有，地址（如：***街**號）、日期（MM/DD/YY）、官網(wǎng)地址（http://www.***.com）、ICP備案號（京ICP證***號）、車牌號（川A·***）等，設(shè)計時遇到這種類型表單，可以添加相應(yīng)的提示樣例。

當可選項較少時，將選項全部排列出來會比下拉操作更好。我們在租房買房時，會有一個戶型的指標，采用將幾個選項統(tǒng)一排列出來的展示方式，用戶可以一眼看到戶型有幾種選擇，只需要一個操作就可以完成。

而使用下拉框需要先點擊下拉圖標，查看有哪些選項，再決定選擇哪個，這就需要兩步操作才可以完成。相比較之下，必然會選擇第一種設(shè)計。有一種情況，當可選項超過5個時，可以考慮使用下拉樣式。

地區(qū)選擇時，將省份、城市、區(qū)信息合為一處，減少點擊次數(shù)。下圖兩種形式相比較，鼠標點擊次數(shù)上左邊形式更少，操作交互更加流暢，比較符合用戶的使用習慣，左邊下拉框比右邊視覺效果上會更簡潔。

面對一個幾頁長的表單，需要填寫的信息太多，用戶第一反應(yīng)肯定會煩躁。

早在19世紀中葉，愛爾蘭哲學家漢米爾頓觀察到的，有一個神奇的7±2效應(yīng)，意思就是人們的短時記憶的信息量是7個，可能會上下浮動2個。運用在設(shè)計交互上，在設(shè)計這樣的長表單時，可以將表單按照類別分為分類，一次只展示部分信息，降低用戶的心理壓力，填寫效率會更高。

自動填充默認信息，在填寫表單時，會有一些標簽信息是相互關(guān)聯(lián)的。

下圖中地址與郵政編碼是相互匹配的信息，用戶填寫完地址，系統(tǒng)可以自動將郵政編碼填充。這樣設(shè)計的原因是產(chǎn)品充分考慮實際場景，用戶通常是不會去特意記住編碼，必然需要查找才可以，這必然會打斷用戶當前填寫表單的操作。

類似的表單類型還有如手機號碼的區(qū)號、國家、具有行業(yè)屬性的表單（如填寫汽車行業(yè)相關(guān)的性別，默認填充為男）、針對某一年齡段的產(chǎn)品的關(guān)于年齡的相關(guān)表單信息，總的來說就是適用于大多數(shù)用戶的標簽信息都可以使用自動填充默認信息的設(shè)計。

智能聯(lián)想，這種交互設(shè)計形式很常見，互聯(lián)網(wǎng)產(chǎn)品很多場景都有使用到。用戶輸入某個信息內(nèi)容，會自動出現(xiàn)有可能相關(guān)的內(nèi)容，用戶可以在這些內(nèi)容中選擇自己需要的，不要一個一個輸入，節(jié)省操作成本。

2. 好的交互體驗

多行文本框，使用可拉伸的文本框比固定框（內(nèi)容框內(nèi)滾動，頁面中又加了內(nèi)滾動）更好。

幾乎所有的表單中都會出現(xiàn)多行文本框，當你作為一名用戶看到下圖兩種文本框時，你更喜歡哪一種？

左邊文本框時可以根據(jù)輸入內(nèi)容的多少變化高度；右邊文本框則采用的固定大小的文本框，當超過一定字數(shù)時，會以框內(nèi)滾動的形式展示。

根據(jù)使用體驗來說，可變化的文本框會更好，頁面整體效果更統(tǒng)一。右邊文本框還有一點很不好的設(shè)計點是，在滾動的大頁面上又加上了一個滾動文本框，這時一個頁面上就出現(xiàn)了兩個滾動條，給用戶操作上造成一定混亂。

錯誤提示時，提示文案需要明確指出出錯的地方。經(jīng)常在登錄某個APP時提示用戶名或者密碼錯誤，這種情況最好的處理方式是明確說明是用戶名還是密碼錯誤。

下圖的場景就出現(xiàn)在注冊的流程中，一些網(wǎng)站對于用戶名的格式是有相應(yīng)的要求的，當你在用戶名中輸入了包含顏文字的字眼就會報錯，報錯的提示文案應(yīng)該像左邊的一樣講明要求與禁止，試想如果用戶看到右邊的錯誤文案，仍然會一頭霧水。當我們在設(shè)計錯誤提示時，可以朝著這個方向設(shè)計。

文本框在PC端及移動端的使用區(qū)別，PC端通常使用左標簽右輸入框，移動端頁面受限于顯示面積小，使用上標簽下文本框或者標簽置于輸入框內(nèi)。下圖中顯示的標簽置于輸入框內(nèi)，當點擊輸入框時，標簽移動到上面，這種設(shè)計形式也很好，缺點是開發(fā)成本較高。

對于特殊格式的信息自動幫用戶設(shè)定好展示格式。設(shè)計這類型表單時，不能簡單的按照正常思路去思考，需要考慮到特定場景的設(shè)計形式。

像手機號、銀行卡號、軟件序列號等這些表單，通常的形式是每四位數(shù)字與四位數(shù)字都會使用空格隔開，方便用戶對照是否有誤。涉及到金額時，每四位數(shù)字都會使用逗號隔開，以便用戶快速了解到金額數(shù)。在設(shè)計手機填寫驗證碼時，樣式上是獨立的6個圓角矩形框，輸入時當你輸入一位數(shù)字時會自動跳轉(zhuǎn)到下一個矩形框。

限制文本框的輸入信息屬性限制。比如輸入密碼、手機號、身份證號碼、車牌號時，移動端的鍵盤應(yīng)該切換成數(shù)字英文鍵盤，這是通過鍵盤來限制用戶輸入的信息屬性。也可以在文本框輸入時利用一些弱提示形式，提醒用戶此處應(yīng)該是哪種屬性的信息。

表單在完成填寫提交時，告知用戶提交結(jié)果，這一步是很有必要的。從用戶角度來說希望填寫的表單是否提交成功，下一步該干什么；從產(chǎn)品自身角度來說，可以在結(jié)果頁面運用情感化設(shè)計提升用戶的心情愉悅度，同時提供一些功能入口，為其他頁面引流。

好了，這次沒有總結(jié)，想看再往上看一遍。

作者：小葫圖，微信公眾號：YI易設(shè)計

本文由 @YI易設(shè)計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議