通過項目實戰(zhàn)，帶你全面了解在UI設(shè)計中設(shè)計表單時碰到的問題，避免因表單設(shè)計的問題而造成用戶的流失。

前言

表單是提升用戶體驗的一個核心點，但在視覺呈現(xiàn)的時候，大部分都忽視了它的體驗。對于一個設(shè)計師來說，就需要根據(jù)實際情況在設(shè)計中進行靈活調(diào)整，設(shè)計出符合用戶預(yù)期的表單，不僅能帶給用戶操作效率上的提升，節(jié)約時間成本，還能避免錯誤出現(xiàn)，在體驗過程中心情更加的愉悅。

上期我們分享了在實際的項目中如何選擇合適的表單以及表單的結(jié)構(gòu)介紹，本期將分享在表單設(shè)計過程需要注意的細(xì)節(jié)以及容易碰到問題點。

信息的錄入方式

1. 文本輸入類型

用戶在完成表單進行文本輸入時，當(dāng)然希望填寫的信息越少越好，所以我們盡可能提供合適的輸入格式、適當(dāng)?shù)淖詣虞斎?、合理的輸入順序以及避免重?fù)輸入來提升用戶完成表單的效率。

輸入格式： 通過合理的格式約束，能夠方便用戶更快的完成填寫，而減少錯誤出現(xiàn)。自動對焦第一個輸入字段可以引導(dǎo)用戶開始進行輸入。

自動輸入：根據(jù)已知信息，幫助用戶預(yù)判內(nèi)容并自動錄入。如：用戶在輸入電話號碼前，需要先輸入國家的代碼，我們可以根據(jù)產(chǎn)品的運營市場所在的國家自動錄入。

輸入順序：先易后難；先必填后選填；先公開信息后隱私信息；有關(guān)聯(lián)性的合成一組，特殊問題后置，用戶輸入時、不會覺得突兀、門檻太高 。

避免多次詢問相同信息，重復(fù)輸入的內(nèi)容盡量減少。比如：用戶可以顯示和隱藏所設(shè)置的密碼，不是讓用戶輸入2次來進行驗證，這對于生成有效的密碼更重要。

2. 信息選擇類型

在用戶完成表單的過程中，為了應(yīng)對不同的信息，除了文本輸入之外，還會有選擇的方式。通常會包含有至少2個或以上的選項，用戶可以選擇其中的一個或多個。選擇的類型最常見的有單選、復(fù)選（多選）；選擇樣式有彈窗、下拉菜單、跳轉(zhuǎn)新頁面。它們看起來不復(fù)雜，但是在實際使用的時候講究非常之多，不僅關(guān)乎用戶體驗，而且涉及到一些界面邏輯問題，每種選擇方式也都有各自不同的狀態(tài)顯示。

單選

單選項是界面中非常常見的表單元素。它通常被用來從一組互斥的相關(guān)選項中選擇一個單獨的選項。當(dāng)點擊一個未選中的單選項時，它會被選中，其他按鈕則會變成未選中狀態(tài)。

單選可根據(jù)用戶最可能會選中或者數(shù)據(jù)統(tǒng)計選擇最多的一個標(biāo)簽作為默認(rèn)選項，如果此字段屬于非必填，需要有一個「無」的標(biāo)簽選項，以方便用戶在選擇之后又不想做出選擇時能夠更改。單選的樣式有單選框、按鈕、波動開關(guān)，請根據(jù)不同需求選擇不同的樣式：

單選框：存在兩個以上的選項且標(biāo)簽是一句/多句話組成，需要選擇一個正確的選項。使用單選框時，靠左對齊的選框+標(biāo)簽的樣式是效果最好的，單選框有選中、未選中、不可選狀態(tài)。

按鈕：存在2~6個選項時且選項信息是一個詞語，文本一般不超過4個字，需要選擇一個正確的選項，使用按鈕樣式。有選中、未選中、不可選狀態(tài)；

波動開關(guān)：只存在兩個選項且選項具有判斷性質(zhì)，需要選擇一個正確的信息，觸發(fā)之后能夠立即生效，使用波動開關(guān)，有開啟、關(guān)閉兩種樣式。

復(fù)選：

復(fù)選也是界面中很常見的表單元素，通常會有一個或多選項供用戶選擇，同時選項的內(nèi)容是不互斥的，可以選擇一個或多個正確的選項。

復(fù)選無需提供默認(rèn)選項，也不需要提供「無」的標(biāo)簽，用戶可在同一選項上重復(fù)點擊進行選中/未選中操作。復(fù)選最常見的樣式就只有復(fù)選框、按鈕兩種：

復(fù)選框：一個具有判斷性質(zhì)（用戶協(xié)議）的選項或者有兩個正確答案以上的多個選項組成。復(fù)選框有選中、未選中兩種常用狀態(tài)，另外當(dāng)選項存在子父級關(guān)系時，還有一種未定狀態(tài)，常用于Web端管理后臺。

按鈕：存在2~6個選項時且選項信息是一個詞語，文本最好不超過4個字，有兩個以上的正確選項，使用按鈕樣式。有選中、未選中、不可選狀態(tài)；

選擇方式

不管是單選還是復(fù)選、按鈕還是框選的形式，都需要結(jié)合表單當(dāng)前選項的實際需求，以對應(yīng)不同選擇方式。最為常見的選擇方式有彈窗、下拉、新頁面跳轉(zhuǎn)...等，不同的選擇方式有各自的優(yōu)勢和劣勢，選擇不當(dāng)可能會造成用戶體驗差而導(dǎo)致轉(zhuǎn)化率低或用戶流失。

• 彈窗：在完成表單需要選擇的字段內(nèi)容時，當(dāng)選項超過6條或特定（低于6條但文本過長、調(diào)用系統(tǒng)功能...）情況，可使用動作欄彈窗的方式；
• 下拉（展示與隱藏）：有多種樣式，正確使用下拉可以有效幫助用戶縮小選擇范圍；
• 新頁面：當(dāng)選項信息較多且復(fù)雜時，使用新頁面跳轉(zhuǎn)更便于操作。如：選擇用戶地址則跳轉(zhuǎn)至地址列表。

• 對于如何選擇適合表單當(dāng)前字段的方式，還需要注意一下幾點：
• 需要使用簡潔明了的標(biāo)簽，不要讓用戶思考，使用簡短而明確的詞匯，讓用戶明確行為的意圖和功能；
• 清晰告知用戶完成整個表單的步驟 ，給用戶一個預(yù)期，避免用戶在完成過程中產(chǎn)生不耐煩的情緒；
• 盡可能減少不必要的表單項目， 每多一個項目需要填寫，就有可能流失一部分用戶；
• 填寫順序應(yīng)先易后難、先必填后選填、涉及隱私的內(nèi)容靠后，反之用戶容易被嚇到，從而放棄整個任務(wù)；
• 識別代替輸入，善于利用技術(shù)的力量，技術(shù)上能解決的就不要讓用戶輸入；
• 能不填寫就不填寫，能選擇就不要輸入，能選擇一下就不要選兩下；
• 當(dāng)輸入可能更快時，就別讓用戶在菜單選擇；
• 選項過少，避免使用下拉菜單，以免給視覺瀏覽動線造成了不必要的阻礙；
• 選項被禁用或不可用時，將其顯示為灰色。

信息保存方式

1. 手動保存

手動保存即依賴用戶做額外操作才可以達成的保存行為。此類保存，我們往往依賴保存按鈕。這種保存方式大多用于網(wǎng)頁，如：個人信息、簡歷...等，大多用于表單內(nèi)容較多的頁面，根據(jù)表單信息將內(nèi)容屬性相近或有關(guān)聯(lián)性的放在一組，組的下方提供一個保存按鈕。

2. 自動保存

自動保存的目的是記住用戶已經(jīng)填寫的內(nèi)容，從而避免用戶需要再次輸入而放棄?？梢栽O(shè)定間隔時間或者用戶未操作后的一段時間進行自動保存，比如：每隔30秒或者用戶在10秒內(nèi)未操作，系統(tǒng)進行自動保存一次，比較適合需要大量編輯功能的表單。（這種保存方式屬后臺發(fā)送請求，視覺無任何變化）

3. 兜底保存

其實前面兩種保存方式在移動端都有局限性，手動保存不利于用戶體驗，自動保存比較占資源和影響用戶操作，那么我們就需要有一個更好的方案。類似信息較多的表單，系統(tǒng)檢測到用戶填寫了部分內(nèi)容但沒有完成表單就要離開時，以彈窗的形式給用戶一個溫馨提示，讓用戶自行選擇保存還是直接離開。另外在用戶使用網(wǎng)絡(luò)問題或應(yīng)用意外退出，都應(yīng)自動保存用戶已完成的信息，以便用戶再次使用時不會因為重新填寫嫌麻煩而放棄。

視覺反饋

設(shè)計表單時，對于一些專業(yè)詞匯或較難理解的概念，要給予明確的解釋，有較高要求的表單信息也要給予明確的示例供用戶參考。復(fù)雜的流程，還可以提供在線咨詢幫助，協(xié)助用戶完成整個表單的填寫。當(dāng)用戶填寫內(nèi)容出錯的時候，應(yīng)當(dāng)指明發(fā)生錯誤的條目，以及錯誤的原因，最好將反饋定位到具體位置。反饋的前提是不打擾用戶，但在用戶需要的時候及時出現(xiàn)。

1. 提示反饋（輸入前）

• 聚焦?fàn)顟B(tài)：光標(biāo)插入輸入框，當(dāng)前輸入框應(yīng)予以不同的樣式，便于用戶清楚當(dāng)前處于什么位置；
• 標(biāo)簽提示：針對用戶容易出錯的格式問題，可在標(biāo)簽中提示，如：字?jǐn)?shù)限制、格式要求...等；
• 引導(dǎo)提示：部分完成難度較大的表單，以圖表或按鈕引導(dǎo)用戶點擊，用彈窗或跳轉(zhuǎn)新的頁面詳細(xì)解答。如：需要用戶填寫相對隱私的信息時，請給予解釋這么做的原因及目的。

2. 驗證反饋（輸入后）

行內(nèi)提示：行內(nèi)提示不需要服務(wù)器上傳驗證的數(shù)據(jù)，就可以判斷，例如手機格式，當(dāng)光標(biāo)離開時理解為用戶輸入完成，通過前端對格式進行驗證；

toast提示：屬于后臺驗證，需要服務(wù)器上傳驗證數(shù)據(jù)，或者其他類型的突發(fā)事件。如果是表單問題，需要有清晰的定位提示位置，就近原則，方便用戶發(fā)現(xiàn)并修改操作。請注意錯誤的字段，請勿在鍵入后直接清除，請給用戶在此基礎(chǔ)上修改的機會，記住用戶才是決定者。

彈窗提示：彈窗提示是直接打斷當(dāng)前的操作，同時會引導(dǎo)用戶進行新的操作。比如成功提示，是對用戶完成信息輸入的提示和感謝；失敗提示則會通過彈窗引導(dǎo)用戶返回或者重新提交。

操作按鈕

操作按鈕是在表單的結(jié)尾，有個確認(rèn)提交的動作控件，是專門為觸控而設(shè)計，不僅可點擊，更需要容易點擊，還需要根據(jù)表單的不同條件反饋不同的按鈕狀態(tài)，清晰可預(yù)測，應(yīng)該準(zhǔn)確地描述用戶點擊按鈕后會發(fā)生什么，比如提交。復(fù)位、下一步...等。按鈕是關(guān)系到頁面的最終轉(zhuǎn)化的重要元素，在按鈕的設(shè)計上要更加費心。

顏色是影響按鈕隔離效果的首要因素，多個按鈕基本都是通過顏色來區(qū)分主次。其次才是樣式，設(shè)計師利用同理心來理解用戶「心理模型」，利用設(shè)計手段，將「實現(xiàn)模型」改變成用戶可以接受和理解的「心理模型」，給用戶提供最常用樣式，如果設(shè)計和常規(guī)樣式差異過大的按鈕，容易帶來額外的認(rèn)知負(fù)擔(dān)。

1. 按鈕位置

• 右上角：以純文字的形式固定在導(dǎo)航欄的右側(cè)（屏幕右上角）；
• 表單底部：置于表單的最下方，根據(jù)表單內(nèi)容縱向空間的大小而上下移動。表單內(nèi)容較多時，容易下沉過多而導(dǎo)致按鈕不可見；
• 設(shè)備底部懸?。簯腋≡谠O(shè)備底部，隨時可見，會占用一定的縱向空間。
• 跟隨鍵盤：固定在鍵盤的某個位置，跟隨鍵盤展示或隱藏，常用于單個字段內(nèi)容的表單。如：登錄頁面，填寫完手機號碼，點擊鍵盤上的確定，會跳轉(zhuǎn)至驗證碼頁面，輸入驗證碼后確定，直接登錄成功。

△ 綜合實例，Bee Express項目為了適配中文/英文/泰文狀態(tài)，綜合了每個位置的利弊得出：當(dāng)表單內(nèi)容+按鈕少于一屏內(nèi)容時，操作按鈕置于表單底部；超過一屏則在設(shè)備底部懸浮。

2. 交互狀態(tài)

• 待激活狀態(tài)：需要完成表單中的部分條件方可激活，變成正?？山换顟B(tài)；
• 正常狀態(tài)：已完成表單必填的內(nèi)容，按鈕是可交互的，并且可用的狀態(tài)；
• 激活狀態(tài)：用戶已點擊按鈕后的狀態(tài)（且還未結(jié)束按按鈕的動作）；
• 加載狀態(tài)：送出表單后，正在加載中，但操作還未完成，沒有立即實現(xiàn)的狀態(tài)；
• 禁用狀態(tài)：非交互狀態(tài)，目前不可交互，但以后可以使用。

3. 多按鈕樣式

• 主操作按鈕：一個表單頁面只能存在一個主操作，也是最醒目、最突出、最重要的按鈕；
• 次操作按鈕：存在多個等級，可以通過弱化主操作按鈕、圖標(biāo)或突出文字來表現(xiàn)次操作按鈕，次級按鈕可以多個同時存在。

總結(jié)

以上只是對表單設(shè)計的一些總結(jié)，視覺體驗只占了整體體驗一部分 。一個表單是否真的好用，還需要深入研究表單設(shè)計，從結(jié)構(gòu)化的思維分析表單的設(shè)計問題，從而能夠全面的認(rèn)識一個事物并進行了解掌握。通過優(yōu)化視覺表現(xiàn)提升表單體驗只是表象，更多是要考慮到表單最終要幫用戶解決什么問題，先想好為什么，再想怎么做。

更多表單設(shè)計方法：

歡迎關(guān)注作者微信公眾號：「能量眼球」