確認過眼神，這就是我要的註冊界面
註冊是聯繫一個網站或APP與用戶的開端，想要獲得更多的用戶，一個好的註冊頁面設計尤為重要。對於大多數網站而言，註冊功能都是必要的，所以它十分普遍，但這不意味著註冊的設計就很簡單。不論視覺上還是功能上，優秀的設計能有效地引導和幫助用戶註冊，讓用戶高效完成各個環節，並收穫良好的體驗，對其註冊的平台形成好的「初印象」。
－－－－－－－－－－－＋－－－－－－－－－－－
如何幫助用戶填寫註冊信息？
設計師在設計一個註冊頁面時要做的，就是盡全力幫助和引導用戶填寫信息，讓用戶感覺方便、省時、高效，極小化在註冊環節的用戶流失。設計中，可以從以下幾個方面考慮來幫助他們：
1、流程
設計時，在可行範圍內，考慮如何優化和簡化註冊流程。
（1） 儘可能使用電子郵件地址或手機號作為用戶名。
如果讓用戶自己創建一個用戶名，你很可能會遇到兩個問題：一，用戶為了創建一個唯一且符合要求的用戶名花費了很多時間；二，這個用戶名並不是用戶熟悉的，用戶很快就會忘記。因此最好讓用戶使用自己的郵箱或手機號來作為用戶名，例如下圖豆瓣網的註冊。用戶自己創建的用戶名（或昵稱）也可以作為一個登錄賬號的選項，但要給用戶選擇。
（2） 註冊頁面盡量少地讓用戶填寫信息。
在新用戶註冊頁面，不要問多餘的信息，盡量讓用戶以最快的方式完成註冊。表單中設置的輸入框越少，用戶不想填的可能性就越低。在設計註冊頁面之前，務必想清楚必需的用戶信息有哪些。另外，盡量減少非必填項目，如果這個信息不是必要的，那麼考慮可否刪除它，刪除一些非必填項目讓要填的內容看起來更少，更不顯得麻煩。將非必填項目和必填項目分開設置也是一種方法，一般在中間用一條橫線隔開，或者設置一段明顯的間隔以分塊。務必記住在非必填項目旁邊醒目地標註「可選」或「非必填」或者其他讓用戶一下子就能理解的標註。
（3） 隨時提供明確的引導提示。
在註冊流程的任何一步，用戶輸入錯誤時一定要明確的指出錯在哪裡，而不是簡單地給出一個諸如小紅叉的錯誤提示，同時，還應細緻地指導用戶填寫正確的答案。這一點在下一方面將繼續詳細介紹。
2、提示
註冊過程中的提示和及時的反饋非常重要，無論是便利性的、引導性的還是糾正性的。提示的設計基本有下面幾種，各有其設計原則和精妙之處。
（1）關於密碼的提示
設置密碼是註冊中必不可少的一個環節。用戶在登陸註冊過程中最容易犯的錯誤便是輸錯密碼，因為密碼輸入框通常都不是明文的。因此用戶很容易輸錯，尤其是在移動設備上。很多網站和應用的解決方法是讓用戶再次輸入密碼並驗證。然而這並不能從根本上解決這個問題。用戶從始至終看不見自己輸入的內容，即便輸入兩次用戶也有可能犯兩次相同的錯誤，而且驗證失敗之後用戶也不知道自己哪裡輸錯了還得重新輸入。最好的方法是添加一個「顯示密碼」的選項，或者你也可以添加一個「眼睛」圖標。
（2）關於輸入框的提示
輸入框中一般會有提示佔位符來告訴用戶該填寫什麼內容。PC端因為界面大，所以可以使用短的文本標籤來代替輸入框的提示佔位符，當然兩者也可以都有。而移動端因為界面有限，一般不會使用標籤，而是用提示佔位符。
數據的呈現方式多種多樣。所以，當你在設計輸入框的時候，應當與用戶輸入信息的類型、格式相互匹配。不過要做到完全的對應並不容易。舉個例子，電話號碼的輸入就存在多種不同的方式，比如我們常見的「+86」，而更多的情況下大家可能會直接輸入一串11位的手機號，座機號碼的情況則更加複雜，有的人習慣加上區號，而有的人則不會。面對這種複雜的情況，你可以通過設計輸入框，加入輸入提示來「格式化」輸入內容。還是以電話號碼的輸入為例：
（3）報錯提示
報錯時要提供明確的錯誤引導提示。錯誤要描述清楚並且便於閱讀，「出於安全考慮，您的密碼長度必須在6個字元到10個字元之間，並且包含至少1個大寫字元、1個數字和1個符號」。這是一個典型的密碼錯誤提示，但卻不便於閱讀。
最好能實時輸入驗證，實時輸入驗證可以及時地告知用戶輸入的錯誤。這樣用戶可以及時更正錯誤，而不是在點擊「提交」按鈕後收到輸入錯誤的通知。另外，表單驗證不僅要提示用戶輸入錯誤，還應告訴他們怎麼輸入才是正確的。這樣用戶會更放心地進行後續操作。
參考一下QQ的註冊界面當用戶的輸入滿足一個條件時，對應條件的錯誤提示便會變為綠色的√ ，而其他還沒有滿足的條件繼續以 ! 的形式存在。當所有條件均滿足之後會提示密碼符合要求。
（4） 按鈕的狀態提示
按鈕的不同狀態提示著用戶填寫信息的正確性和完整性。主要說一下disabled，也就是禁用狀態。一般來說當input為空或者input不符合輸入要求時，關聯按鈕為disabled的狀態，這是採用了放錯的原則：如當使用條件沒有滿足時，常常通過使功能失效來表示（一般按鈕會變為灰色無法點擊），以避免誤按。
3、驗證碼與其他驗證形式
填寫驗證碼，是註冊步驟中必不可少的一個環節，因為系統為了防止註冊機惡意註冊，需要通過讓用戶填寫驗證碼的形式來保證安全。所以，如何減少填寫驗證碼的枯燥和繁瑣，讓這個必不可少的環節變得快捷、有趣，是UI設計師們可以大開腦洞的一點。
最常見的驗證碼形式是採取數字、字母，或者二者相結合的一串字元請用戶進行辨認。如果驗證碼過長或者過於難以辨認，對於用戶來說都是非常不友好的。
還有一種常見的驗證形式，就是填寫手機驗證碼。用戶首先需要填寫手機號，然後系統會向該手機號發送驗證碼，用戶再將該驗證碼填寫在註冊頁面上即可。這種方式將驗證碼簡化為幾個數字，不需要用戶進行辨認，而且因為手機號與用戶是一對一的關係，也保證了註冊的安全性。
－－－－－－－－－－－＋－－－－－－－－－－－
怎樣用好分步式註冊？
註冊可以分為一步式註冊和分散式註冊。一步式註冊在以往的設計中很常見，它把一套完整的註冊流程放在一個頁面範圍內，讓用戶完成所有信息的填寫並提交。但是，隨著註冊所需信息量的增加等因素，用戶體驗設計師們發現，如果要填寫的內容過多且都堆在一個頁面，用戶看到大堆的填寫框很容易產生抵觸情緒並離開。一個解決該問題的方法就是用好分散式註冊，下面對其進行一些探討和挖掘。
1、什麼是分步式註冊
分散式註冊一般包括兩種，一種是讓用戶先填寫最基本信息註冊，進入平台使用其他功能時再進行註冊信息完善。另外一種是在用戶進行註冊過程中，分步一次性完成註冊過程。這裡指的是第二種。
2、怎麼設計分步式註冊
分步式註冊通常是在註冊信息比較多的時候採用的，設計的時候要注意步驟不能過長，兩三個步驟比較好，並且最好做一個步驟提示，讓用戶心裡有數，知道自己當前所在的步驟。特別要注意移動端，因為移動端的屏幕大小有限，軟鍵盤彈出後會遮擋住將近一半的屏幕，所以在設計時必須考慮到這點。如下圖中的註冊界面，用戶在點擊信息框填寫信息鍵時，下一步按鈕就被軟鍵盤遮住了，用戶需要滑動屏幕才能進行下一步。試想一下，如果再多幾條註冊項，那用戶連填寫信息時都需要滑動屏幕，給用戶帶來很大不便。所以在設計註冊界面時，通常每頁填寫的信息要控制在3項以內，否則就要設計成分步式註冊。並且畫面中的輸入框、按鈕等重要控制項在彈出軟鍵盤時要儘可能顯示在屏幕上半部分，以便用戶進行切換、確認等操作。
具體註冊環節如何設計其實也沒有統一的標準。尤其在PC端，由於屏幕夠大，基本所有的註冊方式都支持，需要評估平台的定位來選取一步式註冊還是分步式註冊。如果是移動端註冊，如APP或者H5頁面等，建議採用分步式註冊，每頁填寫信息控制在3項以內，並且布局靠屏幕上方部分，這樣就不會因為輸入時鍵盤遮擋到註冊信息。
注意當前所在步驟提示也很重要，建議使用進度條等方式鼓勵用戶往下填寫，不論是在PC端還是在移動端。例如QQ和淘寶網頁版均採用了分步式註冊，並且運用了流程進度提示，讓用戶知道自己所處位置，得知剩餘步驟，能減輕長流程引起的焦躁感，給予更好的用戶體驗。
你可以看到，一個小小的註冊功能，其中蘊含的用戶體驗設計亦是十分豐富的。普通人可能認為註冊功能很簡單，其設計難以有什麼亮點，但是對於設計師而言，儘管註冊功能極其普遍，它的設計也從來不是千篇一律的。無論是整體頁面布局設計，流程組織設計，還是提示等各處小細節的設計，都存在其獨特的妙處，都可以不斷進步和改善用戶的體驗。
圖片均來自於網路，如對您的權益產生侵害，
請與作者聯繫刪除，謝謝！
觀點分享：倪江雪、鍾藝、陳玥婧
李曉瑞、馮藝菲
責編：楊佳琪
排版：張柏川
TAG:犀刻設計 |