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