一個合格的註冊登入頁面，應該是具有清晰的操作流程，良好的互動細節和美觀的視覺設計。

移動網際網路盛行下，基本所有APP都會有註冊登入功能，它不僅能讓使用者扭頭就走，也能讓產品獲得新使用者的芳心。

一個合格的註冊登入頁面，應該是具有清晰的操作流程，良好的互動細節和美觀的視覺設計。

一、無登入註冊

1、大部分免費使用

2、一般功能都比較單一，不會記錄使用者的歷史行為，開啟即用。

如：小工具較多、手電筒、指南針、計算器…

特徵：工具型別產品盈利模式主要是靠廣告盈利。

二、強制性登入註冊

1、渴望使用者的資訊，對使用者身份資訊敏感

2、對使用者賬號安全有保護，注重使用者的資料保護

如：社交類app、運動健身類、招聘類…

特徵：這類產品的特質（功能、服務）強烈的吸引著使用者，使用者非常願意使用此類使用者。

三、觸發登入/註冊

1、靠內容與產品支撐，通過內容與產品的優勢

2、吸引使用者，促使使用者轉化

如：電商類、新聞類、知識類…

特徵：

1、這類產品的特質（功能、服務）並未強烈的吸引著使用者，需要使用者體驗

2、發展期、初創期的產品需要多的使用者數量，所以不會在登入註冊時強制執行，給使用者帶來困擾。

小結：根據產品屬性選擇合適的方式

預設優先“登入頁”還是“註冊頁”呢？

一、註冊優先

1、可體驗全部功能，直接進入產品核⼼區域。

2、可獲取使用者資訊，個性化推薦

常用於社交或定製化較強的APP，例如：QQ，微信，抖音，keep，⼩紅書.... 缺點：門檻較高，還沒看到整個應用的全貌就要填寫個人 資訊，考驗⽤戶耐心。

優點：

1 、所提供的內容和功能，需建立在⽤戶基本資訊之上

2、 產品初期成⻓長階段，需通過強化註冊⼊口提高新增⽤戶量

二、登入優先

適用場景：

1、前期在web端積累大量使用者，轉移到移動端時；

2、產品發展穩定期，已擁有大量的使用者基礎且新增使用者增長較為緩慢時。

優點：方便老使用者，進入應用效率較高

缺點：通常情況下，使用者會選擇下方的第三方一鍵登入，如果後期平臺需要使用者提交個人資訊來享用更多功能時，需要謹慎引導否則引起使用者反感

三、登入註冊一體化

優點： 方便快捷，轉化率高

背景設計

淺色背景

1、簡化了背景的視覺，突顯賬號區域的內容

2、聚焦註冊/登入的資訊錄入，提高轉化

品牌色背景

突出品牌資訊，加深使用者對品牌的認知，樹立品牌在使用者心中的印象。

圖片視訊背景

給使用者營造一種產品氛圍，是情感化設計的一種，應景的圖片提前讓使用者產生代入感，促使使用者融入到產品中。

引導元素設計

品牌元素引導

目的是為了進一步強大使用者對品牌的認知，讓使用者熟悉產品，了解產品、對產品產生足夠的印象，擴大品牌效應。

當以品牌名或LOGO體現的時候，背景的設計一般會弱化。

文案引導

更有親和力，與使用者對話，同時更加聚焦每一步操作任務！

插畫引導

1、使用與產品氣質一致的插畫，可以強化品牌感

2、同時更具有趣味性，也能讓使用者感受到產品設計的態度。

賬號操作設計

第三方快捷登入

以增加使用者量為主要目的時，可採用快捷登入方式，它給使用者提供了一種更為便捷的選擇方式，無形中減少了使用者的選擇負擔。

資訊輸入表單

以留存使用者資訊為目的時，讓使用者通過輸入自己的賬號、密碼、手機號碼、驗證碼等方式完成的登入註冊操作。

表單有幾種狀態？

1、預設狀態（input&Btn）

2、啟用狀態（input）

3、輸入狀態（input&Btn）

4、校驗報錯（前/後端校驗）

5、清除方式

6、密碼可/不可見

7、驗證碼讀秒/獲取

設計方式：

1、明確註冊/登入的功能定位

2、參照操作邏輯使用

Bilibili註冊登入定位為一個獨立模組，該模組高於其他模組。

如Bilibili：

感謝您耐心的讀完，真心希望你能獲得新知哦～

相關推薦：