2019-8-14 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
表單是產(chǎn)品設(shè)計中的重要組成部分，如果說彈框的主要作用是完成信息反饋，那么表單的主要作用就是完成信息錄入。任何一個表單都可以被拆解成三個最基本要素：標簽（標題）、輸入框和按鈕。
標簽是用來告訴用戶這個列表項是什么；輸入框是供用戶完成信息錄入的；按鈕是供用戶完成信息錄入后點擊進入下一個流程的。
根據(jù)標簽所處的位置，可以將其分為左標簽、頂部標簽和行內(nèi)標簽。
1. 左標簽
左標簽在目前來說是最常見的一種標簽樣式，但是這并不意味著我們可以無所顧慮地使用它。以手機端為例，手機端的屏幕尺寸（寬度）有限，左標簽會占據(jù)屏幕較大的空間，此時右邊的輸入框就可能無法展示完整的信息。
例如，如果用戶輸入的地址過長，就會造成信息的展示不完全，這對用戶體驗來說是致命的。因為用戶在進行下一步操作之前都會對輸入的內(nèi)容進行審核確認，如果連完整的內(nèi)容都無法獲知或者獲知的難度較大，則用戶根本不會進行下一步操作，這就造成了操作流程的中斷。所以，我們在使用左標簽的時候，一定要考慮對多行文本的展示。
2. 頂部標簽
頂部標簽是指位于輸入框上方的標簽，這樣輸入框就可以獨占整個頁面，信息可以得到更完全的展示。
與左標簽相比，頂部標簽可以給輸入框的內(nèi)容騰出足夠的空間。在界面設(shè)計中，更多的空間還意味著具有更高的信息層級。同一個表單中會有很多的輸入項，有些輸入項的優(yōu)先級很高，我們可以考慮使用頂部標簽的樣式來進行凸顯。
但是這種布局方式也有缺點：會占據(jù)更多的縱向空間，之前一屏就可以展示的內(nèi)容，現(xiàn)在用戶需要滑動頁面才可以看完。
3. 行內(nèi)標簽
行內(nèi)標簽又可以被看成是輸入提示，其樣式看起來很適合手機端的表單設(shè)計，因為它可以極大地節(jié)省頁面空間。但是一旦用戶點擊切換到輸入狀態(tài)以后，就看不到這些標簽了。如果操作提示字數(shù)很多，例如密碼規(guī)范，那么用戶記憶會很吃力。我們可以在調(diào)起的鍵盤頂部加上提示，減少用戶的記憶成本。
但是，如果表單項目過多，則用戶在填寫的時候很容易串行，可能會出現(xiàn)把家庭住址填到畢業(yè)院校一欄中的情況。更嚴重的是，用戶因為無法看到標簽，這類錯誤是無法被檢查出來的。為了解決這個問題，我們可以在行內(nèi)標簽前加一個圖標來標識這個列表項，圖標所占據(jù)的空間不會太大，而且會提高頁面的美觀性。
當表單項目過多時，我們要對其進行整合分組來提升內(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)當光標位于周星星三個字右邊的時候，點擊「“」鍵，會出現(xiàn)左右雙引號；當光標位于周星星三個字中間的時候，點擊「“」鍵，只會出現(xiàn)左雙引號。這是因為光標在文本右邊，用戶只要輸入「“」，那么就必然需要「”」來結(jié)尾，這里直接提供左右雙引號更合適。如果光標是文本中間，無法確定「”」需要在哪里出現(xiàn)，所以只展示「“」。
在理想狀態(tài)下，用戶填寫完表單信息，然后點擊「提交」按鈕，系統(tǒng)顯示提交成功。但是，現(xiàn)實情況卻是用戶在填寫過程中經(jīng)常會發(fā)生錯誤，那么如何將容錯性原則融入表單設(shè)計中呢？
首先我們需要給予用戶足夠的操作提示，日期錄入就是最典型的例子。不同的地區(qū)對于日期錄入的格式也不一樣，「02/12/2019」到底是2019年2月12日還是2019年12月2日？如果我們不提示用戶，用戶就不知道應(yīng)該怎么輸入。
為了避免用戶犯錯和提升用戶的信息錄入效率，我們可以提供自動完成錄入功能，當用戶在文本框里輸入時，系統(tǒng)可以猜測可能的答案，顯示可選列表，避免了用戶手動輸入造成的錯誤。
如果你確定對用戶足夠了解，在用戶進行信息錄入時，可以提供合理的默認值。因為對用戶來說，填寫信息永遠都不是一件有趣的事情，設(shè)置合理的默認值可以節(jié)省用戶的操作時間。
能讓系統(tǒng)完成的任務(wù)，就盡量不要讓用戶來操作。用戶會犯錯，而系統(tǒng)不會。表單容錯性設(shè)計的另一個方向就是梳理表單中的雞肋項目。
現(xiàn)在很多的購票類 APP 都提供送票上門的功能，這就需要用戶填寫收貨地址。以交通出行類 APP 飛豬、途牛和去哪兒為例，其中，上圖中左側(cè)的兩張圖，飛豬和途牛都需要用戶填寫郵政編碼，而在去哪兒中則是選填的。其實根據(jù)用戶填寫的地址，我們已經(jīng)可以獲取到郵政編碼，郵政編碼完全可以自動回顯，不需要用戶手動輸入。
而在小米有品 APP 中就可以根據(jù)用戶填寫的地址回顯郵政編碼，這看起來很方便。這只是看起來很方便，我們可以繼續(xù)思考一下：如果系統(tǒng)完全可以根據(jù)用戶填寫的地址獲取到郵政編碼，那么郵政編碼這一項完全可以不在界面中露出。其實很多產(chǎn)品在用戶填寫收貨地址的時候已經(jīng)不需要用戶填寫郵政編碼了。
對于容錯性原則，我們還要考慮如何給用戶展示合理的報錯提示。目前來說，我們經(jīng)常看到的一個報錯提示樣式是對話框。在我看來，對話框并不是一個好的選擇。因為用戶如果要進行修改，就必須要關(guān)閉對話框，那么用戶就看不到錯誤信息了。如果錯誤原因和解決方案的字數(shù)較多，那么用戶就需要花一定的時間記住這些信息，然后再來修改，這會增加用戶的記憶負擔。如何才能設(shè)計好表單的報錯提示呢？表單中的報錯提示可以分為兩種：單行表單報錯提示和多行表單報錯提示。
單行表單中意味著在當前界面中表單只有一行輸入框，其一般用于手機號、銀行卡號、身份證號和金額的錄入。對于此類場景，建議使用輸入框底部的文字報錯提示樣式，并且要對錄入的信息進行實時校驗，不要等到用戶進入下一個界面才告知用戶在上一個界面中手機號輸錯了。
給多行表單進行報錯提示時，除告知傳統(tǒng)的錯誤原因和解決方案外，還應(yīng)該告知用戶錯誤的位置。因為在一個界面中，有很多的輸入項，用戶在短時間內(nèi)無法把報錯提示和錯誤項聯(lián)系起來，因此，為了提升用戶對于錯誤場景的感知效率，對錯誤項進行標記是非常有必要的。具體的實現(xiàn)方式有改變文字顏色、輸入框背景色和設(shè)置提示文案抖動。
以上圖為例，這里通過改變文字顏色或輸入框背景色來標記錯誤位置，用 Toast 告知用戶錯誤原因和解決方法。我們也可以不改變配色，讓該輸入框左右抖動也能起到快速標識的作用。
表單中的提交類按鈕按照位置可以分為以下三種。
其中位置 A 是最常見的布局樣式，這樣的布局符合用戶的視覺習(xí)慣和操作流程：用戶由上而下完成表單信息的填寫，最后點擊「提交」按鈕進入下一個頁面。但是這種布局有一個問題：如果表單項目過多，則用戶必須滑動頁面才能完成提交操作。
位置 B 跟位置 A 很相似，唯一的區(qū)別在于位置 B 是固定在頁面底部的。那么位置 B 跟位置 A 的適用場景有什么不同呢？位置 B 意味著用戶在不用滑到頁面底部的情況下就可以點擊「提交」按鈕，那么在什么樣的場景下用戶不用滑到頁面底部就可以提交呢？
其實在很多表單中，不是所有的信息都需要用戶手動錄入的。以前面提到的郵政編碼為例，只要用戶輸入了地址，系統(tǒng)就能獲取郵政編碼，相關(guān)信息是可以直接回顯的，用戶沒有看到此類信息的必要性。所以，對于一些重要性不是很高、不強制用戶看完的表單項目，很適合使用這類底部懸浮按鈕。最常見的就是各種協(xié)議頁。
位置 C 出現(xiàn)的原因在于，對于前兩種方案，當調(diào)起鍵盤時就會遮住「提交」按鈕，用戶必須先關(guān)閉鍵盤才可以點擊「提交」按鈕，多了一步操作。而位置 C 可以完美解決鍵盤遮擋的問題，但是其不符合用戶的視覺習(xí)慣和操作流程。而且手機大屏化是一個不可逆的趨勢，用戶在單手握持手機的情況下很難直接點擊到界面右上角的「提交」按鈕，增加了操作難度。
其實位置 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è)
藍藍設(shè)計( paul-jarrel.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍藍設(shè)計的小編 http://paul-jarrel.com