UI组件库（3）——Logins

「あげる」「いくらうに」のイラスト [pixiv].png

今天总结一下注册登录界面的页面。

除了很多离线可以用的APP之外，大部分的需要联网才能使用的APP，都需要用户进行注册登录的操作。注册登录页面作为用户踏入APP的第一扇门，对用户的第一印象和产品本身的品牌形象都很重要。

国内比较普遍采用手机号登录的方式，而在国外邮箱注册的方式很常见。不论是哪种方式，这些页面都有一些必要的组成元素，我们可以从中寻找一些规律，在这些规律的基础之上进行组合，创造出一些新的解决方案。

注册登录示例.png

组成元素

注册登录页面通常包含以下组成元素：

1、logo

对一些APP来说，作为跟用户见面的第一个页面，突出产品的品牌是一件很值得去做的事情。

2、文本框

无论是手机号登录还是邮箱登录，都需要用户进行输入操作，所以，我们可以对文本框本身进行设计，以符合产品自身的品牌调性。

3、按钮

按钮的用途有很多，比如选择其他登录方式、发送验证码、登录操作、注册操作、跳过操作等等。

4、提示

很多APP会在注册登录页面放一些提示的文案，比如《用户须知》和《服务条款》，让用户明白一些须知的事项。

或者APP的介绍文案，比如“登录之后可以收藏喜欢的内容”等等，给用户一个注册的动机。

5、忘记密码

当用户不使用第三方登录的时候，而是用手机号或者邮箱登录，很可能会出现忘记密码的情况，这个时候要给用户一个重置的入口。

6、其他登录方式

为了减少用户登录的时间成本和操作成本，有的APP会加入第三方登录，国内的比较常见的是QQ登录、微信登录、微博登录，国外比较常见的google账号登录、twitter登录、Facebook等等。

我们在设计的时候可以对这些三方登录的按钮下文章，可以有很多种形式。

7、品牌图片

除了自身的logo之外，有的APP也会加入代表自身品牌的图片或者插画。

可以把这些图片整个作为背景，在上面加上遮罩；也可以占用页面的一小部分区域。

当然，除了图片之外，如果产品的品牌色加上文字后识别性很好的话，也可以用品牌色作为背景。

常见场景

注册登录页面的基本组成元素就是上面那些，不过并不是所有的都会用到，要根据实际的场景进行选择。比较常见的场景有强制登录、非强制登录和弹窗登录。

1、强制登录

对于一些必须登录才能使用的APP，如QQ、微信等，需要强制用户登录，用户没有选择的余地。

这时候也有多种表现形式。

• 登录和注册不在同一页面
• 登录和注册在同一页面，用Tab切换

2、非强制登录

对于非强制登录的APP，把登录界面放在流程的第一个，一般是为了强化用户对产品的品牌认识。通常会告诉用户自家产品的一些特点。有时候会与引导页相结合，置于引导页的最后一个位置。

可以采用与强制登录相同的页面，不过会多出一个“跳过登录”的按钮，给一部分用户先进入APP进行探索的机会。

3、弹窗登录

既然有些用户没有在最开始的时候登录，那么当用户进行到关键的操作的时候，用户必须登录之后才能进行下一步操作，这个时候可以采用弹窗登录的方式。

有些APP会采用跳页的方式进行登录操作，不过这种方式比较暴力，采用弹窗，并且尽可能的简化登录的流程，这样对用户才会更友好，可以让用户尽可能快的续上刚才的流程。

「さとりとこいし」「藤原」のイラスト [pixiv].png