移動應用設計：註冊和表單

上次我們討論了應用內搜尋和業務轉化的設計原則，這次讓我們把話題聚焦在這兩個比較複雜的內容上，事實上我們發現這也是不少設計師和開發者頭疼的地方。也正因為如此，我們針對性地準備了七條原則來幫助大家少走彎路。

第四部分：註冊

註冊是一種您用來與使用者聯絡的方式，它可以提升未來的轉換機率，併為雙方未來的關係提供更多的可能性。然而，設計不佳的註冊往往也是摩擦產生的根源，也可能是轉換的障礙。這裡我們向您展示如何構建註冊過程，讓使用者能夠更快地達成目標。

14.要求使用者註冊前，需提供明確的用途

如果一個應用一開始就要求使用者提供個人資訊，使用者就會放棄它，除非它承諾向使用者提供某種形式的即時回報（例如叫車或外賣等具體的服務）。尤其是那些品牌認可度不高的應用，以及價值主張不清晰的應用，如果要在最開始就要求使用者註冊，必須得跨越非常大的阻礙。只在必要的時候要求使用者註冊，貫徹這一原則的常見做法是，在業務轉化點，也就是結賬的時候允許使用者使用訪客身份 (guest) 結賬。

△ 左邊，進入應用就要求使用者註冊，對使用設定了較大的障礙，使用者體驗不好。右邊，並沒有要求使用者註冊，而是全力展示著自己的核心服務內容 —— 後退一步，給使用者一些空間，體驗會更好。

15. 區分 “登入” 和 “註冊”。

使用者經常試圖點選 “登入” 按鈕來 “註冊” 賬號，當系統再次提示輸入密碼時，才意識到自己錯誤的行為。這種情況經常發生，因為使用者在迅速掃過螢幕後，通常會選擇最顯眼的、最先注意到的操作入口（CTA, Call To Action）。所以，需要設計易於區分的 “登入” 和 “註冊” 按鈕，以便使用者可以快速操作。

 

△ 左邊的 CTA 按鈕沒有作區分，很容易將下面的兩個按鈕都認為是上面使用者名稱和密碼的下一步操作；右邊的介面更為簡潔，且 “註冊” 和 “登入” 兩個行為被明確宣告為兩個平級的操作。

16. 減少密碼輸入錯誤的可能性

如果密碼輸入總是在出錯，使用者會感到惱火。您應該儘可能降低密碼輸入錯誤的可能性來降低被使用者放棄的風險。儘可能減少步驟，或提供不同的身份驗證方法，如使用 Google Sign-In、第三方登入或指紋觸控登入。

 

△ 左邊只提供了手動輸入密碼的選擇，而偏偏手機輸入會更容易出錯；而右邊提供指紋登陸等更有效率的驗證方式，使用者體驗更為友好。

第五部分：表格錄入

表格一般總在最重要的時候出現，畢竟要求使用者親自輸入資訊在如今已經是門檻極高的要求了。請遵循這些原則，製作可以快速且輕易完成的表格。

17. 建立使用者友好的表單

表格的設計需要符合使用者輸入資訊的方式、習慣。螢幕需要能夠適應多種輸入形式，而不是讓使用者去適應應用。另外，請確保表格欄位不被其他介面元素（如鍵盤）阻擋。當使用者完成一個表格欄位時，自動將下個欄位提到螢幕上方。此外，自動填充、自動大小寫調整和信用卡掃描等功能也可以提升效率。

 

△ 左邊的表單，資料輸入的格式太過死板（比如，三個表格欄位來輸入電話號碼），另外，下一個要輸入的欄位被鍵盤擋住了；右邊的表單，資訊輸入的格式更為自由，完成一個欄位後會自動展現下一個欄位。

18. 實時提示表格資訊輸入錯誤

使用者辛辛苦苦填寫好了表格，但在提交時才發現表格出現錯誤，這是十分惱人的。您需要實時檢測並提供錯誤資訊來緩解這一 “痛苦”，並且在使用者成功完成某個欄位後給予確認。此外，您需要不斷測試表格的使用體驗，來確保整個流程的流暢性。

 

△ 左邊，表格資訊只有在提交時才會驗證是否正確，而且錯誤的資訊並沒有展現在欄位框裡，且沒有提供參考示例；右邊，在欄位框裡直接提示錯誤，並給出可供參考的示例。

19. 將鍵盤與所需輸入的文字相匹配

使用者希望應用能夠提供適應文字輸入的鍵盤。同時，您需要確保在整個應用中都貫徹這個原則，而不是僅對部分表單生效。

 

△ 左邊的表單欄位需要輸入數字，但鍵盤仍是字母鍵盤；右邊的鍵盤能夠根據輸入欄位來調整鍵盤。僅僅只是一個控制元件屬性的調整，體驗卻有天壤之別。

20. 在表格的上下文中提供有用的資訊

在上下文提供相關資訊能夠幫助使用者快速完成整個表格。例如，在安排日期時，使用者希望能夠直接像在月曆上一樣確定日期，而不用離開去檢視手機日曆應用。同時，這也降低了使用者被另外的任務分散注意力的風險。

 

△ 左邊沒有提供便捷的日期輸入功能，以及幫助表格輸入的提示文字；右邊提供了日曆控制元件等有效的功能來幫助日期輸入，還給出了簡要的說明文字。

在應用設計的整個過程中，“使用者友好” 是極其重要的一點，尤其是到了需要使用者親自操作去輸入一些資訊的時候。如果您在日常生活中碰到了讓您 “不爽” 的註冊和表單，不妨試著用上面這幾點來試著找到更棒的設計解法。我們下期再見！

推薦閱讀：

移動應用設計：應用內搜尋和業務轉化

移動應用設計：綜述、導航和瀏覽

馬上報名 | Google Play 線上訓練營四月課程報名及三月課程總結

四月刊 | Google Play 開發者 FAQ