中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：表單設計老生常談，但又是使用頻繁且經常遇到各種問題的一種組件，尤其在B端業務中。本文詳細分享了在表單設計中我們應該注意的細節，一起來看看吧！

我們每天都在填寫各種表單，例如發帖、填單、登錄等等。然而，在填寫時經常容易出錯，例如可能會輸錯密碼。從用戶體驗角度看，幫助用戶盡可能順利地處理這些錯誤至關重要。

對于我們設計師來說，尤其是現在B端設計如此流行的情況下，表單設計細節尤其需要各位設計師注意。今天會分享表單設計中那些你不注意的細節點，必須先點贊收藏了，這些干貨知識相信你一定用的上。

比如以登錄為例，當你把密碼輸錯后，網站清空你剛剛才填好的表單，是不是非常讓你崩潰？刪除所有數據對用戶來說很煩人，這會讓你必須重新輸入用戶名和密碼，即便只是拼錯了密碼而已。

因此，任何專業的用戶體驗設計師不僅應該考慮順利的流程情況，還應該考慮失敗時應該怎么辦。

一、錯誤提示

錯誤提示應該讓用戶容易找到原因并方便理解。否則，他們可能沒辦法解決這些錯誤。所以對于設計師來說，一個非常重要的目標是要設計出一個易于解決錯誤的流程。一個錯誤信息應該能清晰的解釋到底發生了什么，如果可能的話，最好也提供解決方案。

左邊的錯誤信息很清晰的解釋了發生的問題，右邊的錯誤信息對用戶來說非常困惑。

1. 什么時候告知用戶發生了錯誤比較好

當用戶出錯后，首先要考慮的事情就是應該在用戶填表時提醒還是最后通知用戶。錯誤預警中有三種常見模式：

1. 內聯/實時：在輸入時或移開焦點后立即提供反饋。
2. 提交后/客戶端：當用戶點擊提交按鈕之后
3. 服務器端：當請求發送到服務器后再返回反饋給用戶

這些方法中的每一種都有其優點和缺點。

2. 內聯驗證

一般來說，當表單非常短小時用內聯驗證，因為它允許在內存中的數據仍然最新時更正錯誤。

你可以用內聯驗證立即告訴用戶哪里錯了。

“盡可能的進行內聯驗證”“這種類型的錯誤消息很容易被察覺”，此外，輸入完成后立即告知錯誤，對用戶的交互成本最低——UX專家Rachel Krause

另一位專家Luke Wroblewski建議，當問題的答案不明顯時，可以使用內聯驗證。例如，在選擇用戶名時，用戶可能不知道哪些用戶名可用。在這種情況下，在用戶輸入數據時立即告知錯誤可能會有所幫助。

3. 提交后驗證

另一方面，當表單很大且需要保持關注時，你希望幫助用戶保持專注，而不是通過不斷顯示錯誤來打斷他們。

“使用內聯驗證，用戶必須在兩種截然不同的思維模式之間反復切換：填寫表單和糾正錯誤。這減慢了用戶的速度，增加了認知努力，通常會降低用戶的滿意度?！盝essica Enders在她的書《設計UX：表單》中寫道。

4. 服務器端驗證

服務器端驗證是最不友好的方式，但卻為網站提供了很高的穩定性。當需要二次檢查用戶的數據時，這種方法最有效。

5. 如何提示用戶錯誤

錯誤提示告訴用戶他們做錯了，但是他們究竟做錯了什么，要如何修復它？很顯然，清楚地說明錯誤，而不僅僅是顯示Error:90803，對用戶有很大幫助。

6. 使用積極語言而不是消極語言

錯誤提示措辭要使用積極語言而不是消極語言。例如，如果用戶遺漏了一個字段，與其說”該字段不應該是空的“，不如說”請填寫此字段“。當使用積極語言時，用戶不會因為一個錯誤而受到責備，這能減少用戶的焦慮感，減少流失。

7. 必要時提供幫助

在某些情況下，用戶無法自己修復錯誤，他需要額外的幫助。例如，當用戶無法登錄時，大多數應用只提供找回密碼，而沒有找回用戶名。但事實上，用戶名和密碼都可能會忘記。因此，在這種情況下，嘗試提供所有必要的操作和信息資源來幫助用戶解決問題。

二、標簽

標簽是表單可用性最關鍵的組成部分。如果標簽不清晰，那么其他元素就算把可用性做得再好也沒意義。所以，不要讓用戶來猜測這里面到底要填什么內容。

1. 將標簽放在輸入字段的頂部

許多研究表明，將標簽放置在輸入字段的頂部可以幫助用戶更快地填寫表單，因為它允許用戶遵循一條垂直線而不是Z模式。但是，如果它占用太多的垂直空間，您也可以使用浮動標簽。因此，如果你希望用戶更快地填充表單，請將他們放置在字段的頂部。

2. 將標簽放在輸入字段的左側

另一方面，當你詢問用戶比較復雜的問題，用戶需要更多時間思考問題答案的時候，研究表明將標簽放在輸入框的左側會比較好。

3. 標簽應該是可見的，無論什么輸入狀態

無論你用什么方式，確保當用戶填完內容后，標簽是可見的。因為，當用戶需要再次確認表單內容的時候，他們不用刪除填好的數據來查看系統需要他們填什么。

4. 要的輸入項

要填的表單越多，用戶就不愿意填完它。所以盡可能地為用戶減少不必要的輸入項。如果實在做不到，可以將必填和非必填的字段區分開，減少用戶的負擔。

5. 可見性

不管狀態如何，字段都應該是清晰可辨的。此外，活動字段和非活動字段之間的區別應該要明顯。

6. 自動激活PC端表單的第一個字段

自動激活表單的第一個字段，這可以提高處理效率，避免用戶額外點擊。

7.幫用戶預先填好

在某些情況下，你可以幫用戶預先填好字段。例如，可以很容易地檢測到郵政編碼，或者某些數值可能是頻繁的。在這些情況下，為用戶填充字段。

8. 格式

含有大量小數的數字很難讀懂。因此，當要求較大的數字時，需要考慮添加格式以支持可讀性。例如，在詢問卡號時，使用自動格式化：讀取5678-9876-9738-8394比讀取5678987697388 394容易得多。

此外，當請求需要特定格式化數據時，要包含一個實例，讓用戶準確理解要填什么。

9. 表單區域大小

輸入框的大小應該要與所填的內容長度相匹配。比如，當要用戶填寫用戶名時，如果顯示的填寫區域是一個長段輸入框會讓用戶感到困惑。

另一方面，如果你希望用戶寫一些反饋，但只能看到所寫內容的最后一小段，那就很難用了。（彩云注：我就經常在一些體驗不好的產品上碰到過這種情況，簡直太難受了。）

如果你不能準確預測信息的長短，比如留言反饋，建議表單區域最好是能在用戶填寫內容觸碰邊界時，自動變高。

10. 為桌面系統設計靈活的表單

在鍵盤和鼠標之間切換很煩人。在理想的情況下，用戶應該只使用一種媒介來填寫表單，但有時，這是不可能實現的。

因此，如果用戶需要多種媒介來填寫表單，至少要盡量減少切換。為此，將需要同一種工具的輸入組合在一起。

另外，當創建一個網頁表單時，要確保用戶可以只使用鍵盤來瀏覽表單——使用TAB和方向鍵。2.11為移動端系統設計靈活的表單當在移動設備上時，將你顯示的鍵盤與用戶必須輸入的數據相匹配。

我們經?？吹叫枰獢底宙I盤的輸入可以很好地實現這一點，但幾乎很少有APP顯示支持輸入電子郵件地址的鍵盤。

三、下拉菜單vs單選按鈕

下拉框的使用比單選按鈕更有挑戰性，因為它需要額外的點擊來打開它們。此外，用戶無法提前看到選項，這可能會讓他們感到困惑。

因此，如果你只有少量的選項，使用單選按鈕。如果選項的數量超過4個，下拉菜單的效果會更好。

1. 復選框

通過勾選復選框，用戶應該是同意某些內容。我的意思是，他們應該說，“是的，我想要這個”，而不是，“是的，我不想要這個”。

不幸的是，我經常看到有誤導性的復選框試圖在創建賬戶時欺騙人們訂閱他們的產品。

當你不想訂閱他們的通訊時，你又必須勾選復選框，像這樣的伎倆對信譽是不合適的，所以不要動心使用它們。

四、結構

一個結構充分的表單就像一個與用戶的良好對話。所以記住這一點，仔細規劃結構。

1. 從簡單的問題開始

從簡單的問題開始，從用戶已經很清楚知道答案的問題開始，像名字、郵件這類。然后再循序漸進問稍微復雜的問題，像賬戶信息之類的。

首先，一個很自然的順序，當你第一次見某些人的時候，你會找一些比較好切入的問題，比如叫什么名字啊之類的。其次，當用戶已經填了一些字段之后，那么之后會增加他填完表單的機會。

2. 創建邏輯信息塊

將不相關的信息按邏輯分組。例如，你可以將結帳表單分為“個人信息”和“帳戶信息”組，將信息分組可以幫助用戶一次只考慮一個主題。

3. 單步VS多步表單

當你有很多問題要問的時候，你可能想知道哪一個最有效：單步流程還是多步流程。一般來說，單步表單的轉化率更高，因為它看起來更小，而且不會勸退用戶。

如果你詢問基本信息并希望用戶快速填寫表單，單步表單就非常不錯。當用戶被要求必須填寫更多復雜信息時，多步表單會更好。

為了幫助用戶在進行多步驟填寫時不至于失去耐心，可以給到進度條，提示還剩多少步。

4. 單列vs多列布局

一般來說，用單列布局會更好，因為可以幫助用戶更好地掃描，也可以盡量減少用戶遺漏填寫。

但當用戶多次填寫同一個表單時，他們更喜歡多列表單，因為這樣不會浪費時間滾動。一般來說，在B端應用中這種多列表單會比較合適。

五、按鈕

設計可用的按鈕對提高轉化率至關重要。如果按鈕上的文字內容比較模糊，會容易勸退新手用戶。

1. 提高用戶的容錯率

對于更復雜的表單來說，按鈕最重要的一點是，應該有提交和取消表單的單一方法。用戶應該至少有補救的機會。

舉個例子，如果用戶點了在線幫助時，他已經填好的數據不應該被丟失?；蛘?，如果用戶由于意外點擊了按鈕，請求不應該被提交。

2. 主要按鈕和次要按鈕應該很容易區分

為了避免點擊錯誤的按鈕，用戶應該能比較容易地區分主要和次要按鈕。另外，最好不要只依賴顏色，樣式上最好有比較大的差異。

3. 正確的標簽按鈕

按功能明確地標注按鈕。例如，如果按一個按鈕可以創建一個賬戶，在按鈕上的文案叫”創建賬戶”要好過“提交”

五、總結

當用戶打開表單時，他首先肯定是想要填完它的。嘗試幫助他們而不是用糟糕的設計給他們設置障礙。

不幸的是，這里面提到的許多錯誤，并不需要多么高級的技巧，而是因為設計沒有同理心。

仔細思考你的設計流程，檢查是否能讓所有內容對不同背景和專業知識的人都是清晰的。

通常來說，一般要達到以下目的，大多數指導原則都來自這些規則：

• 用戶應該只輸入一次數據
• 用戶應該填盡可能少的信息
• 用戶應該只需要記住少量的信息
• 用戶檢查和恢復錯誤內容應該要很容易

原文作者：Sophie

原文鏈接：https://bootcamp.uxdesign.cc/how-to-design-usable-forms-e34aa149ab3f

譯者：彩云sky

本文由@彩云sky 翻譯發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。