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

表單是產(chǎn)品設(shè)計中的重要組成部分，如果說彈框的主要作用是完成信息反饋，那么表單的主要作用就是完成信息錄入。任何一個表單都可以被拆解成三個最基本要素：標(biāo)簽（標(biāo)題）、輸入框和按鈕。

標(biāo)簽是用來告訴用戶這個列表項是什么；輸入框是供用戶完成信息錄入的；按鈕是供用戶完成信息錄入后點(diǎn)擊進(jìn)入下一個流程的。

標(biāo)簽

根據(jù)標(biāo)簽所處的位置，可以將其分為左標(biāo)簽、頂部標(biāo)簽和行內(nèi)標(biāo)簽。

1. 左標(biāo)簽

左標(biāo)簽在目前來說是最常見的一種標(biāo)簽樣式，但是這并不意味著我們可以無所顧慮地使用它。以手機(jī)端為例，手機(jī)端的屏幕尺寸（寬度）有限，左標(biāo)簽會占據(jù)屏幕較大的空間，此時右邊的輸入框就可能無法展示完整的信息。

例如，如果用戶輸入的地址過長，就會造成信息的展示不完全，這對用戶體驗來說是致命的。因為用戶在進(jìn)行下一步操作之前都會對輸入的內(nèi)容進(jìn)行審核確認(rèn)，如果連完整的內(nèi)容都無法獲知或者獲知的難度較大，則用戶根本不會進(jìn)行下一步操作，這就造成了操作流程的中斷。所以，我們在使用左標(biāo)簽的時候，一定要考慮對多行文本的展示。

2. 頂部標(biāo)簽

頂部標(biāo)簽是指位于輸入框上方的標(biāo)簽，這樣輸入框就可以獨(dú)占整個頁面，信息可以得到更完全的展示。

與左標(biāo)簽相比，頂部標(biāo)簽可以給輸入框的內(nèi)容騰出足夠的空間。在界面設(shè)計中，更多的空間還意味著具有更高的信息層級。同一個表單中會有很多的輸入項，有些輸入項的優(yōu)先級很高，我們可以考慮使用頂部標(biāo)簽的樣式來進(jìn)行凸顯。

但是這種布局方式也有缺點(diǎn)：會占據(jù)更多的縱向空間，之前一屏就可以展示的內(nèi)容，現(xiàn)在用戶需要滑動頁面才可以看完。

3. 行內(nèi)標(biāo)簽

行內(nèi)標(biāo)簽又可以被看成是輸入提示，其樣式看起來很適合手機(jī)端的表單設(shè)計，因為它可以極大地節(jié)省頁面空間。但是一旦用戶點(diǎn)擊切換到輸入狀態(tài)以后，就看不到這些標(biāo)簽了。如果操作提示字?jǐn)?shù)很多，例如密碼規(guī)范，那么用戶記憶會很吃力。我們可以在調(diào)起的鍵盤頂部加上提示，減少用戶的記憶成本。

但是，如果表單項目過多，則用戶在填寫的時候很容易串行，可能會出現(xiàn)把家庭住址填到畢業(yè)院校一欄中的情況。更嚴(yán)重的是，用戶因為無法看到標(biāo)簽，這類錯誤是無法被檢查出來的。為了解決這個問題，我們可以在行內(nèi)標(biāo)簽前加一個圖標(biāo)來標(biāo)識這個列表項，圖標(biāo)所占據(jù)的空間不會太大，而且會提高頁面的美觀性。

當(dāng)表單項目過多時，我們要對其進(jìn)行整合分組來提升內(nèi)容的可讀性。如下圖所示，這里將 15 個字段分成 3 組。同樣的內(nèi)容，但給用戶的印象卻大不相同。

輸入框

輸入框的作用是供用戶完成信息錄入，這里我們的設(shè)計思路是如何提升信息的錄入效率。我見過很多設(shè)計師偷懶，把所有的輸入框都做成文本框樣式，用戶必須調(diào)起鍵盤一個字一個字地輸入，這種體驗是非常不友好的。如果我們想讓用戶錄入個人信息，其中的生日和城市就應(yīng)該使用日期和城市組件，而不是讓用戶手動輸入。

即使非要讓用戶手動輸入，我們同樣可以根據(jù)不同的場景給用戶提供更友好的體驗。如果要輸入的是數(shù)字，那么應(yīng)該給用戶調(diào)起數(shù)字鍵盤；如果要輸入文本，那么應(yīng)該給用戶調(diào)起全鍵盤，避免用戶手動切換鍵盤。

即使用戶輸入符號，我們也要考慮如何減少用戶的操作步驟。例如，我們發(fā)現(xiàn)當(dāng)光標(biāo)位于周星星三個字右邊的時候，點(diǎn)擊「“」鍵，會出現(xiàn)左右雙引號；當(dāng)光標(biāo)位于周星星三個字中間的時候，點(diǎn)擊「“」鍵，只會出現(xiàn)左雙引號。這是因為光標(biāo)在文本右邊，用戶只要輸入「“」，那么就必然需要「”」來結(jié)尾，這里直接提供左右雙引號更合適。如果光標(biāo)是文本中間，無法確定「”」需要在哪里出現(xiàn)，所以只展示「“」。

容錯性設(shè)計

在理想狀態(tài)下，用戶填寫完表單信息，然后點(diǎn)擊「提交」按鈕，系統(tǒng)顯示提交成功。但是，現(xiàn)實(shí)情況卻是用戶在填寫過程中經(jīng)常會發(fā)生錯誤，那么如何將容錯性原則融入表單設(shè)計中呢？

首先我們需要給予用戶足夠的操作提示，日期錄入就是最典型的例子。不同的地區(qū)對于日期錄入的格式也不一樣，「02/12/2019」到底是2019年2月12日還是2019年12月2日？如果我們不提示用戶，用戶就不知道應(yīng)該怎么輸入。

為了避免用戶犯錯和提升用戶的信息錄入效率，我們可以提供自動完成錄入功能，當(dāng)用戶在文本框里輸入時，系統(tǒng)可以猜測可能的答案，顯示可選列表，避免了用戶手動輸入造成的錯誤。

如果你確定對用戶足夠了解，在用戶進(jìn)行信息錄入時，可以提供合理的默認(rèn)值。因為對用戶來說，填寫信息永遠(yuǎn)都不是一件有趣的事情，設(shè)置合理的默認(rèn)值可以節(jié)省用戶的操作時間。

能讓系統(tǒng)完成的任務(wù)，就盡量不要讓用戶來操作。用戶會犯錯，而系統(tǒng)不會。表單容錯性設(shè)計的另一個方向就是梳理表單中的雞肋項目。

現(xiàn)在很多的購票類 APP 都提供送票上門的功能，這就需要用戶填寫收貨地址。以交通出行類 APP 飛豬、途牛和去哪兒為例，其中，上圖中左側(cè)的兩張圖，飛豬和途牛都需要用戶填寫郵政編碼，而在去哪兒中則是選填的。其實(shí)根據(jù)用戶填寫的地址，我們已經(jīng)可以獲取到郵政編碼，郵政編碼完全可以自動回顯，不需要用戶手動輸入。

而在小米有品 APP 中就可以根據(jù)用戶填寫的地址回顯郵政編碼，這看起來很方便。這只是看起來很方便，我們可以繼續(xù)思考一下：如果系統(tǒng)完全可以根據(jù)用戶填寫的地址獲取到郵政編碼，那么郵政編碼這一項完全可以不在界面中露出。其實(shí)很多產(chǎn)品在用戶填寫收貨地址的時候已經(jīng)不需要用戶填寫郵政編碼了。

對于容錯性原則，我們還要考慮如何給用戶展示合理的報錯提示。目前來說，我們經(jīng)?？吹降囊粋€報錯提示樣式是對話框。在我看來，對話框并不是一個好的選擇。因為用戶如果要進(jìn)行修改，就必須要關(guān)閉對話框，那么用戶就看不到錯誤信息了。如果錯誤原因和解決方案的字?jǐn)?shù)較多，那么用戶就需要花一定的時間記住這些信息，然后再來修改，這會增加用戶的記憶負(fù)擔(dān)。如何才能設(shè)計好表單的報錯提示呢？表單中的報錯提示可以分為兩種：單行表單報錯提示和多行表單報錯提示。

單行表單中意味著在當(dāng)前界面中表單只有一行輸入框，其一般用于手機(jī)號、銀行卡號、身份證號和金額的錄入。對于此類場景，建議使用輸入框底部的文字報錯提示樣式，并且要對錄入的信息進(jìn)行實(shí)時校驗，不要等到用戶進(jìn)入下一個界面才告知用戶在上一個界面中手機(jī)號輸錯了。

給多行表單進(jìn)行報錯提示時，除告知傳統(tǒng)的錯誤原因和解決方案外，還應(yīng)該告知用戶錯誤的位置。因為在一個界面中，有很多的輸入項，用戶在短時間內(nèi)無法把報錯提示和錯誤項聯(lián)系起來，因此，為了提升用戶對于錯誤場景的感知效率，對錯誤項進(jìn)行標(biāo)記是非常有必要的。具體的實(shí)現(xiàn)方式有改變文字顏色、輸入框背景色和設(shè)置提示文案抖動。

以上圖為例，這里通過改變文字顏色或輸入框背景色來標(biāo)記錯誤位置，用 Toast 告知用戶錯誤原因和解決方法。我們也可以不改變配色，讓該輸入框左右抖動也能起到快速標(biāo)識的作用。

按鈕

表單中的提交類按鈕按照位置可以分為以下三種。

其中位置 A 是最常見的布局樣式，這樣的布局符合用戶的視覺習(xí)慣和操作流程：用戶由上而下完成表單信息的填寫，最后點(diǎn)擊「提交」按鈕進(jìn)入下一個頁面。但是這種布局有一個問題：如果表單項目過多，則用戶必須滑動頁面才能完成提交操作。

位置 B 跟位置 A 很相似，唯一的區(qū)別在于位置 B 是固定在頁面底部的。那么位置 B 跟位置 A 的適用場景有什么不同呢？位置 B 意味著用戶在不用滑到頁面底部的情況下就可以點(diǎn)擊「提交」按鈕，那么在什么樣的場景下用戶不用滑到頁面底部就可以提交呢？

其實(shí)在很多表單中，不是所有的信息都需要用戶手動錄入的。以前面提到的郵政編碼為例，只要用戶輸入了地址，系統(tǒng)就能獲取郵政編碼，相關(guān)信息是可以直接回顯的，用戶沒有看到此類信息的必要性。所以，對于一些重要性不是很高、不強(qiáng)制用戶看完的表單項目，很適合使用這類底部懸浮按鈕。最常見的就是各種協(xié)議頁。

位置 C 出現(xiàn)的原因在于，對于前兩種方案，當(dāng)調(diào)起鍵盤時就會遮住「提交」按鈕，用戶必須先關(guān)閉鍵盤才可以點(diǎn)擊「提交」按鈕，多了一步操作。而位置 C 可以完美解決鍵盤遮擋的問題，但是其不符合用戶的視覺習(xí)慣和操作流程。而且手機(jī)大屏化是一個不可逆的趨勢，用戶在單手握持手機(jī)的情況下很難直接點(diǎn)擊到界面右上角的「提交」按鈕，增加了操作難度。

其實(shí)位置 C 完全可以被忽視，因為現(xiàn)在很多產(chǎn)品已經(jīng)支持在調(diào)起鍵盤時滑動頁面，所以位置 C 最大的優(yōu)勢已經(jīng)不復(fù)存在。這里還介紹位置 C 的原因是希望讀者知道交互規(guī)則是會隨著技術(shù)的發(fā)展而不斷改變的，可能在這本書里提到的一些技法過一段時間就會落伍了。要成為一名優(yōu)秀的設(shè)計師，必須具備持續(xù)學(xué)習(xí)的能力。

文章來源：優(yōu)設(shè)

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