微信设计一个登录页面（微信授权登录中的惊艳设计）

在本文中，作者盘点了微信授权登录设计中的创建不同身份功能、以及这一功能背后的设计思路与原理。

现在很多网站产品和APP产品都不在固执的建立自己的用户账户体系，而是使用了微信授权登录的方式来减小获取新用户的门槛，这一方式对产品方和用户来说都有很多好处。例如让注册时操作成本更低、用户也不需要记录各个平台的不同账号等等，但是这种登录方式同时也带来了一些隐私方面的问题。

对于大部分人来说，一定不会希望自己在使用陌陌时还是用的和微信一样的头像和昵称吧？如果微信头像是本人照片，那这一顾虑就更加容易体会了，与此类似的隐私问题大家应该都有遇到过。

对于微信来说，第三方产品使用微信授权登录还有更大意义上的好处，即能够获取用户数据、用户行为信息等等，有了这些信息，那么无论是进行精准的广告推送，还是以后做相同领域的产品时都会有很大作用。最重要的是能够巩固自己的“江湖地位”，把更多产品纳入微信大生态之中。

让我没想到的是在微信授权登录这个功能被推出数年之后，居然开发出了一项十分惊艳的功能。就是在使用微信登录其他产品时，可以创建不同的身份信息以满足用户在不同场景中的使用。

（抱歉实在没有找到具体是哪个版本，这个功能时间已经不短了，只是最近有一些新的感悟才写了写。）

具体设计如下图，当我们使用微信授权登录时，手机上会弹出确认授权页面，即第三方产品申请使用我们微信头像、昵称、地区、性别这些信息的确认页面，在新版本中我们可以创建不止一个身份信息，以在不同的场景中使用。

点击新建用户信息一栏后即进入下图，填写昵称，选择头像并保存即可，此处的头像信息可以不选择，与微信内部我页面的规则一致。这里最想说的其实是这个页面中的【随机头像与昵称】这个功能，如果没有这个功能的话，只能说微信的设计团队解决了用户的“痛点”，做出了用户需要的功能。但有了这个功能之后，我认为其设计完全就让用户达到了“爽点”。

结合使用场景来说：

我们在使用第三方产品做授权登录时，发现这个产品并不适合拿我的微信头像和昵称来作为相应的用户信息，此时我使用了新建新的身份信息这一功能，但是我又要花费不少脑细胞去想一个昵称，这样就会把我之前的使用流程打断。甚至会对这个第三方产品造成用户的流失。

可能有的朋友并不会有选择困难症去纠结这个头像和昵称，但是微信作为一款十亿日活用户的产品，其设计一定是充满包容性的，在设计时一定会考虑到用户群体的不同特征来做设计。此时刚刚所说的这个【随机头像与昵称】真的是一个让我感到惊艳的设计！！！

无论是在设计与场景的结合上，在设计的包容性上，还是对用户痛点与爽点的感知上，真的不得不敬服微信的设计团队。这个功能其实已经推出不短的时间了，可能普通用户并不能从中感知到这是一个超牛的设计，但作为一个设计师，反而是惊叹于这种朴实无华、返璞归真的设计。

但这里的设计细节远远还没有说完，如果说上面的描述是一些大方向、意识形态上的东西，那么下面的设计则会让你感知到微信团队对细节的把控同样十分精彩。

点击【随机头像与昵称】按钮后，头像一栏和昵称一栏会自动填充内容，我在点击约100次这个按钮后共出现了以下几种情况

100次点击中共出现了5套不同的头像和昵称，这里大致可以认为所有可能性就是这五套方案了。

那么，为什么会是5套呢？以微信的设计资源还不是随随便便弄出几百套不同的头像和昵称吗？为什么不让用户有更多的选择度呢？

这里我暂且胡乱说出说出两个我对这一功能设计思路上的推测：

1）第一个推测就比较简单了，我最多可以创建4个不同的身份信息，按照最大的使用频率来算那至少不能出现重复的信息，否则就又是同一套信息了嘛。所以头像昵称方案的数量要大于4套。（准确的说是大于3套，因为我本身一有一套身份信息）

2）第二个推测是呼应上面说过的：授权登录中多身份信息的设计方案不能对第三方产品造成影响，尽量不打断用户正在进行的流程，避免给第三方产品造成用户流失。微信的设计资源肯定是可以轻轻松松做出几百套方案，但是方案过多可能会导致用户选择困难，犹豫不决。进而在此处停留时间过长的话就可能打断原来正在进行的流程，给第三方产品造成用户流失。

当然了，以上部分内容可能是我不靠谱的猜测，但是道理上还大致说得通，作为设计师的话，宁可多想，也不要遗漏。

要注意的是新的身份信息（图中称为用户信息，我觉得身份信息这种叫法更合适一些）是保存在微信中的，而不是和你此时授权登录的产品绑定，在创建新的身份信息后下次登录其他产品时可以直接选择。如下图。

身份信息最多可以创建4个，创建4个后下方就会显示提示文案：名额已满，无法再添加身份。身份信息中头像可以为空，但昵称不可为空，如果想删除某个身份信息的话直接向左滑即可，交互方式与微信内部完全一致。

写到这里不得不说微信在保护用户隐私方面已经走在了前面，一个小小的授权登录中创建新的身份信息的设计都有如此之多的惊艳操作。文中可能存在思考比较浅薄或错误的地方，欢迎大家进行指正！

作者：杜昭，duzhao55，设计的威严

本文由@杜昭原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash, 基于CC0协议。

,