APP登錄注冊頁面設(shè)計(jì)指南

時(shí)間：2023-09-24 23:18:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-24 23:18:01 來源：網(wǎng)站運(yùn)營

APP登錄注冊頁面設(shè)計(jì)指南：一個(gè)合格的注冊登錄頁面，應(yīng)該是具有清晰的操作流程，良好的交互細(xì)節(jié)和美觀的視覺設(shè)計(jì)。

移動(dòng)互聯(lián)網(wǎng)盛行下，基本所有APP都會(huì)有注冊登錄功能，它不僅能讓用戶扭頭就走，也能讓產(chǎn)品獲得新用戶的芳心。

一個(gè)合格的注冊登錄頁面，應(yīng)該是具有清晰的操作流程，良好的交互細(xì)節(jié)和美觀的視覺設(shè)計(jì)。

APP的注冊登錄有三種情況

一、無登錄注冊

1、大部分免費(fèi)使用

2、一般功能都比較單一，不會(huì)記錄用戶的歷史行為，打開即用。

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

特征：工具類型產(chǎn)品盈利模式主要是靠廣告盈利。

二、強(qiáng)制性登錄注冊

1、渴望用戶的信息，對用戶身份信息敏感

2、對用戶賬號安全有保護(hù)，注重用戶的數(shù)據(jù)保護(hù)

如：社交類app、運(yùn)動(dòng)健身類、招聘類…

特征：這類產(chǎn)品的特質(zhì)（功能、服務(wù)）強(qiáng)烈的吸引著用戶，用戶非常愿意使用此類用戶。

三、觸發(fā)登錄/注冊

1、靠內(nèi)容與產(chǎn)品支撐，通過內(nèi)容與產(chǎn)品的優(yōu)勢

2、吸引用戶，促使用戶轉(zhuǎn)化

如：電商類、新聞?lì)?、知識類…

特征：

1、這類產(chǎn)品的特質(zhì)（功能、服務(wù)）并未強(qiáng)烈的吸引著用戶，需要用戶體驗(yàn)

2、發(fā)展期、初創(chuàng)期的產(chǎn)品需要多的用戶數(shù)量，所以不會(huì)在登錄注冊時(shí)強(qiáng)制執(zhí)行，給用戶帶來困擾。

根據(jù)產(chǎn)品屬性選擇合適的方式

默認(rèn)優(yōu)先“登錄頁”還是“注冊頁”呢？

一、注冊優(yōu)先

1、可體驗(yàn)全部功能，直接進(jìn)入產(chǎn)品核?區(qū)域。

2、可獲取用戶信息，個(gè)性化推薦

常用于社交或定制化較強(qiáng)的APP，例如：QQ，微信，抖音，keep，?紅書.... 缺點(diǎn)：門檻較高，還沒看到整個(gè)應(yīng)用的全貌就要填寫個(gè)人 信息，考驗(yàn)?戶耐心。

優(yōu)點(diǎn)：

1 、所提供的內(nèi)容和功能，需建立在?戶基本信息之上

2、 產(chǎn)品初期成?長階段，需通過強(qiáng)化注冊?口提高新增?戶量

二、登錄優(yōu)先

適用場景：

1、前期在web端積累大量用戶，轉(zhuǎn)移到移動(dòng)端時(shí)；

2、產(chǎn)品發(fā)展穩(wěn)定期，已擁有大量的用戶基礎(chǔ)且新增用戶增長較為緩慢時(shí)。

優(yōu)點(diǎn)：方便老用戶，進(jìn)入應(yīng)用效率較高

缺點(diǎn)：通常情況下，用戶會(huì)選擇下方的第三方一鍵登錄，如果后期平臺需要用戶提交個(gè)人信息來享用更多功能時(shí)，需要謹(jǐn)慎引導(dǎo)否則引起用戶反感

三、登錄注冊一體化

優(yōu)點(diǎn)： 方便快捷，轉(zhuǎn)化率高

登錄/注冊的頁面設(shè)計(jì)元素有哪些？

背景設(shè)計(jì)

淺色背景

1、簡化了背景的視覺，突顯賬號區(qū)域的內(nèi)容

2、聚焦注冊/登錄的信息錄入，提高轉(zhuǎn)化







品牌色背景

突出品牌信息，加深用戶對品牌的認(rèn)知，樹立品牌在用戶心中的印象。







圖片視頻背景

給用戶營造一種產(chǎn)品氛圍，是情感化設(shè)計(jì)的一種，應(yīng)景的圖片提前讓用戶產(chǎn)生代入感，促使用戶融入到產(chǎn)品中。

引導(dǎo)元素設(shè)計(jì)

品牌元素引導(dǎo)

目的是為了進(jìn)一步強(qiáng)大用戶對品牌的認(rèn)知，讓用戶熟悉產(chǎn)品，了解產(chǎn)品、對產(chǎn)品產(chǎn)生足夠的印象，擴(kuò)大品牌效應(yīng)。

當(dāng)以品牌名或LOGO體現(xiàn)的時(shí)候，背景的設(shè)計(jì)一般會(huì)弱化。







文案引導(dǎo)

更有親和力，與用戶對話，同時(shí)更加聚焦每一步操作任務(wù)！







插畫引導(dǎo)

1、使用與產(chǎn)品氣質(zhì)一致的插畫，可以強(qiáng)化品牌感

2、同時(shí)更具有趣味性，也能讓用戶感受到產(chǎn)品設(shè)計(jì)的態(tài)度。

賬號操作設(shè)計(jì)

第三方快捷登錄

以增加用戶量為主要目的時(shí)，可采用快捷登錄方式，它給用戶提供了一種更為便捷的選擇方式，無形中減少了用戶的選擇負(fù)擔(dān)。







信息輸入表單

以留存用戶信息為目的時(shí)，讓用戶通過輸入自己的賬號、密碼、手機(jī)號碼、驗(yàn)證碼等方式完成的登錄注冊操作。

表單有幾種狀態(tài)？

1、默認(rèn)狀態(tài)（input&Btn）

2、激活狀態(tài)（input）

3、輸入狀態(tài)（input&Btn）

4、校驗(yàn)報(bào)錯(cuò)（前/后端校驗(yàn)）

5、清除方式

6、密碼可/不可見

7、驗(yàn)證碼讀秒/獲取

頁面左上角是“返回”還是“關(guān)閉”？

設(shè)計(jì)方式：

1、明確注冊/登錄的功能定位

2、參照操作邏輯使用

Bilibili注冊登錄定位為一個(gè)獨(dú)立模塊，該模塊高于其他模塊。

如Bilibili：







感謝您耐心的讀完，學(xué)習(xí)了解更多可以關(guān)注微信公眾號：Mr凱

相關(guān)推薦：