一个合格的注册登录页面，应该是具有清晰的操作流程，良好的交互细节和美观的视觉设计。

移动互联网盛行下，基本所有APP都会有注册登录功能，它不仅能让用户扭头就走，也能让产品获得新用户的芳心。

一个合格的注册登录页面，应该是具有清晰的操作流程，良好的交互细节和美观的视觉设计。

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：

感谢您耐心的读完，真心希望你能获得新知哦～

相关推荐：

帮你全面掌握投影设计

UI底部标签栏设计总结

UI设计师必看，作品集制作注意要点

怎么做好弹框设计？有哪些注意事项？

为你全面分析移动端APP搜索框应该怎样设计