Login页面设计——短信登录

最近设计到login页面的时候重新看了很多登录页面的设计，登录页面是比较常见的页面之一了，但是在重新设计这个页面的时候发现现在的越来越多的产品的登录方式和设计都和以前有了很大的区别，虽然在全部界面中它只是一个部分，但是交互就是在这一个又一个小页面中不断优化体现出来的，所以决定借这这次机会，把登录页面做一个梳理和总结。

Old:邮件注册登录 微信注册登录 电话注册登录 申请账号注册登录 QQ登录

New：电话登录 邮箱注册登录  二维码手机授权登录

总结：所有的产品都在提炼和越来越简单变化，用户对产品体验的时间和操作性越来越挑剔和精细化，促使在设计产品的时候必须注意到任何一个细小的环节。当在做任何一个设计的时候都要考虑现在市场上有的产品都是如何做的，有什么体验变化，我们在设计的时候是不是要注意和学习的选择。

先看两种短信登录的设计

这是一个设计类网站的短信登录页面

操作步骤：输入电话号码——拖动滑块（通过验证）——发送验证码——输入验证码——登录 5步

再看一个和飞书一样的短信登录页面

操作步骤：输入电话号码——下一步——输入验证码（自动登录） 3步

短信登录的基本流程都是大差不差，在设计上其实也是大同小异，但是就在21年开始慢慢发现，新出来的登录一看在慢慢的发生变化，像21年出的那个海外版的Tik Tok，它的登录界面整体采用的是插画和登录框结合的样式，但是让我眼前一亮的是，没有icon的使用，这在前几点是登录页面必备元素之一。那么为什么会出现这样的变化呢？是为了让页面更聚焦更简单，也是设计师的一种选择。

包括上面的两种步骤，对比就能发现一些驱动改变的原因：

1. 页面点击步骤减少了，这是肉眼可见的时间提效

   
   

2. 通过体验一次就会发现，第二个使用更加自然，第一个，那为什么会多出来一个拖拽验证的按钮呢？

   “通过验证”这个按钮本身，我猜可能有几种考量

   
   

   1：判断此账号是老用户还是新用户，牵扯是否建档留存数据

   2：为了判断是人工操作还是机器恶意操作占用服务器从而影响产品的稳定性问题

   3：还有就是最开始验证手机号是否输入正确的验证是不是也被放在了这里

   
   

   抛开设计底层的技术问题，但从体验上来讲，只要体验一遍可能就已经能感受到这两个页面带给我们的感受区别了，用户关心的永远是如何更快更准确更简单的完成目标，我花三步能做到的事情，绝对不会多花两步去做这个事情，不然市场上也不会有越来越多的工具类产品层出不群。《简约至上》里面提到过，“简单的产品，就是研究把复杂的问题放在哪里的问题”，当复杂性给到了用户，产品在使用过程中就会让用户有压力和不理解，产生极大的挫败感形成产品不好用的潜在体验感，当复杂性给到了产品内部团队，也许大家都不愿意去解决那个极难又没有什么大用的问题，但是如果尽最大的资源去解决了，不要将问题外显到前端用户面前，这才是简单产品的思路。当然，在更多的公司，每做一个功能的时候都会评估功能价值点和效益，追求成本和价值匹配原则，也就仁者见仁智者见智了。

   
   

3. 页面的聚焦性：第二个：页面设计简单，没有过多的干扰项和多余操作，把输入电话号码和输入验证码分开设计，使页面更加聚焦。更具有引导性，减少用户在完成目标过程中的干扰项。而第一个：从始至终都只有一个页面，在体验上不够聚焦，引导性相比较第二套就不够强。