在web端上，表單是一種非常常見的存在。那么對(duì)設(shè)計(jì)師來說，如何設(shè)計(jì)出優(yōu)秀的表單呢？什么樣的表單會(huì)帶來良好的用戶體驗(yàn)?zāi)?？筆者將為大家介紹幾個(gè)設(shè)計(jì)策略，希望對(duì)你有所幫助。

表單（不是表格），作為最為常見的頁面模塊，是不是都快忽略它的存在了？回想一下你登陸網(wǎng)站填寫信息、購物填寫地址、填寫調(diào)查問卷、修改個(gè)人中心信息時(shí)……都是在和表單發(fā)生互動(dòng)。

對(duì)于設(shè)計(jì)師而言，如何設(shè)計(jì)出一個(gè)體驗(yàn)優(yōu)秀的表單？我總結(jié)了這 5大 策略：

01 填寫流程與問題設(shè)計(jì)

1.1 足夠精簡(jiǎn)的填寫流程

想讓用戶不設(shè)防、還不被打斷填寫完信息，填寫流程就需要足夠精簡(jiǎn)，才能讓用戶順暢的完成信息采集，同時(shí)需要確保產(chǎn)品所有表單頁面操作的一致性。

你可能遇到過這樣的場(chǎng)景，用社交賬號(hào)登陸一個(gè)產(chǎn)品，登陸后不是進(jìn)入首頁，而是繼續(xù)讓你輸入手機(jī)號(hào)碼后才能使用，這就打斷了用戶填寫信息的流程，失去了好的體驗(yàn)，甚至可能造成用戶流失。

1.2 多頁填寫要有進(jìn)程提示

如果填寫信息分為多頁，需要有進(jìn)程提示，以便用戶知道自己填寫信息的位置、剩余步驟，使用Tab鍵需要能跳轉(zhuǎn)到下一個(gè)輸入框。

1.3 問題設(shè)計(jì)的4個(gè)方法

每一個(gè)問題該?保留?還是?刪減?，是一個(gè)值得思考的事情。用戶希望填寫的信息越少越好，可以快點(diǎn)使用產(chǎn)品。所以去掉那些可有可無的問題，保留有價(jià)值的問題。

延遲?指的是一些特殊問題后置，讓用戶輸入信息時(shí)、不會(huì)覺得突兀、門檻太高，比如要收集銀行卡這樣比較重要的信息，不要讓用戶第一個(gè)填寫，而是將問題后置。

對(duì)于?解釋?，依舊以收集銀行卡信息為例，需要說明為何收集這條信息，比如用于支付，或者是綁定后支付可以獲得優(yōu)惠等。

1.4 用戶不關(guān)心冒號(hào)

不要糾結(jié)冒號(hào)，用戶不關(guān)心冒號(hào)，他們只關(guān)心自己要填寫什么信息。

1.5 主動(dòng)作與次動(dòng)作

表單中的主動(dòng)作包括提交、保存、繼續(xù)等，它們都帶有繼續(xù)操作下去或者完成操作的屬性，在表單中的視覺效果應(yīng)更突出。

次動(dòng)作主要有取消、重制、返回、預(yù)覽、導(dǎo)出、導(dǎo)入等，這類操作屬于次要層級(jí)，主要屬性是打斷當(dāng)前流程或者對(duì)當(dāng)前信息的操作，視覺層級(jí)也處于次要。

02 選擇合適的輸入框

2.1 輸入框的類型

輸入框是提供回答問題的方式，有輸入框和輸入框組之分。

輸入框主要有復(fù)選框、單選鈕、下拉菜單、文本框、列表框（極少使用）；輸入框組類型有復(fù)合輸入框、關(guān)聯(lián)輸入框、父子輸入框等。

完整類型的輸入框可以參考ant design組件，它包含了幾乎會(huì)使用到的所有類型。

2.2 標(biāo)簽、輸入框的對(duì)齊

標(biāo)簽對(duì)齊的方式有四種，左對(duì)齊、右對(duì)齊、頂對(duì)齊和輸入框內(nèi)標(biāo)簽。其中頂對(duì)齊方式會(huì)加快用戶處理速度，因?yàn)橐暰€只需要在中間一塊兒移動(dòng)，但會(huì)增加頁面的垂直空間。

慎用框內(nèi)提示，當(dāng)輸入內(nèi)容過多時(shí)，可能會(huì)忘記這個(gè)提示，適用于簡(jiǎn)單的輸入框，如注冊(cè)、登陸界面的表單。

輸入框的長度會(huì)暗示填寫信息的長度，預(yù)先需做好表單中輸入框長度歸類。如果不用暗示信息長度，需要統(tǒng)一輸入框長度。

2.3 選填與必填

經(jīng)過無數(shù)產(chǎn)品長時(shí)間的教育，用戶已經(jīng)知道帶星號(hào)*（或是紅點(diǎn) · ）的必填項(xiàng)，當(dāng)必填項(xiàng)多于選填項(xiàng)時(shí)，可以標(biāo)記清楚選填項(xiàng)，而不是所有必填項(xiàng)加星號(hào)，這樣可以減輕視覺負(fù)擔(dān)。

03 合理使用幫助提示

3.1 盡可能減少幫助提示

不要依賴文字的幫助來彌補(bǔ)表單設(shè)計(jì)本身的不足，幫助文字能不用就別使用，如需要使用，要盡可能的簡(jiǎn)潔明了，并選擇好提供幫助的時(shí)機(jī)。

3.2 幫助提示的5種樣式

常見的幫助提示有彈窗、toast（常見于移動(dòng)端）、snackbar、氣泡和行內(nèi)提示5種樣式，每一種提示的使用場(chǎng)景不同，對(duì)用戶當(dāng)前操作影響也不同。

彈窗提示是直接打斷當(dāng)前的操作；行內(nèi)提示可清晰定位提示位置；氣泡提示多用于指示性、信息提示等場(chǎng)景；snackbar類似于toast，都是在頂層出現(xiàn)短時(shí)間的操作提示，但snackbar可以附帶操作屬性，如帶有撤銷的按鈕。

3.3 自動(dòng)即時(shí)幫助

即時(shí)幫助需要在合適的時(shí)間和位置。新浪網(wǎng)注冊(cè)頁面，當(dāng)開始填寫手機(jī)號(hào)碼時(shí)，會(huì)提示國內(nèi)和海外填寫區(qū)別，如果直接跳轉(zhuǎn)到第二個(gè)輸入框，會(huì)立刻給出錯(cuò)誤提示，來引起你的注意。

3.4 成功提示

成功提示屬于整個(gè)輸入信息的額外信息，是對(duì)用戶完成信息輸入的提示和感謝，所以如果要增加成功提示需要簡(jiǎn)短打動(dòng)人，能夠喚起用戶正向的情緒即可，否則寧可不要成功提示。

04 信息驗(yàn)證

4.1 錯(cuò)誤提示的驗(yàn)證

錯(cuò)誤提示適用于錯(cuò)誤率較高，有特定格式要求的問題。

QQ和蝦米音樂的注冊(cè)頁面，手機(jī)號(hào)填寫位數(shù)不對(duì)時(shí)，跳轉(zhuǎn)到下一個(gè)輸入框依舊能通過驗(yàn)證，到用戶少輸入一位獲取不到驗(yàn)證碼時(shí)，就很難發(fā)現(xiàn)錯(cuò)誤所在。36kr的注冊(cè)界面中，跳轉(zhuǎn)后會(huì)給出提示。

錯(cuò)誤提示需要和輸入位置緊密相關(guān)，以便用戶可以清晰看到是什么位置出現(xiàn)了什么錯(cuò)誤。

4.2 即時(shí)驗(yàn)證的時(shí)機(jī)

即使驗(yàn)證要在輸入之后，而不是輸入過程中。

你可能遇到過，輸入郵箱時(shí)，剛開始輸入第一個(gè)數(shù)字或者是字母，輸入框后面就提示錯(cuò)誤，但當(dāng)你輸入完整個(gè)郵箱地址后，錯(cuò)誤提示變成正確提示，這種情況下，你會(huì)想是不是哪里出錯(cuò)了，怎么一直有錯(cuò)誤提示，這就造成了不必要的困擾。

4.3 輸入限制需實(shí)時(shí)提示

限制輸入常見于固定信息輸入、或者是輸入較長的文本信息，這樣的提示需要實(shí)時(shí)提醒用戶。

05 其他輸入

5.1 默認(rèn)狀態(tài)

如果可以，單選按鈕有必要給出默認(rèn)狀態(tài)，提示用戶作出選擇，例如性別的選擇，有的產(chǎn)品除了男、女選項(xiàng)外，會(huì)增加一個(gè)不想透露（或者保密）作為默認(rèn)選擇。

5.2 層疊樣式

當(dāng)需要顯示很多輸入信息時(shí)，或者選項(xiàng)需要單獨(dú)考慮時(shí)，都可以考慮使用層疊樣式，最常見的層疊樣式就是下拉選擇框、時(shí)間日期選擇等。層疊不應(yīng)遮擋住底部信息（尤其選擇信息比較復(fù)雜時(shí)可能會(huì)忘記底部信息），這樣可能會(huì)造成選擇困擾。

總結(jié)

以上內(nèi)容主要來自Luke Wroblewski的《Web表單設(shè)計(jì)》這本書，書雖然是2010年出版的，但其中的很多基礎(chǔ)的知識(shí)點(diǎn)到現(xiàn)在依舊通用，同時(shí)也適用于移動(dòng)端產(chǎn)品設(shè)計(jì)。

如需深入研究表單設(shè)計(jì)，可以翻看一下這本書，想要電子書的可以找我。

你還可以了解一下目前市場(chǎng)上主流的組件庫，對(duì)于表單設(shè)計(jì)也會(huì)有很大幫助：

• ant design：ant.design
• element：https://element.eleme.cn
• material design:?https://www.material.io

好，關(guān)于表單設(shè)計(jì)，就這么多了。。。

作者&公眾號(hào)：自言自君

本文由@自言自君?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

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