如何设计登录页,试试这几种方法!

154天前发布

原创文章 / UI / 观点
泡芙喵F 原创,如需商业用途或转载请与泡芙喵F联系,谢谢配合。

今天跟大家聊一聊登录页面的一些设计思考方法,希望能帮助到大家。

文章从三大方面来讲解:1、注册登录方式  2、注册登录页面要点   3、注册登录页面常用设计样式



1、注册登录方式


1.只使用第三方账号注册登录

这种方式是最快捷的登录方式,省去了手机注册的繁琐操作,帮用户提高效率,节省时间。

这里没有找到参考案例,可能现在用这种方式的APP已经很少了。


2.只使用手机号注册登录

使用手机号+获取验证码是目前最常用的注册登录方式, 通过发送短信获取验证码在60-90秒内进行注册登录,这么做是为了确认用户拥有该手机号的使用权。

手机号+验证码是比较简便的登录方式,手机号+密码是比较常用的登录方式。在输入手机号后,为了让用户查看是否输入正确,建议手机号显示样式为3-4-4模式(如137 4536 8876)

undefined

手机号也是商家进行用户维护的有效手段,可以在节假日发送祝福或者促销短信,也可以在用户长期未使用产品时进行短信提示,避免用户将产品遗忘。


3.使用手机号+第三方账号注册登录

这种样式是上面两种样式的结合,一般这样的组合方式是希望用户使用手机号注册,所以手机注册登录比较突出,第三方注册会置于页面底部弱化处理。如下图所示:

undefined


还有一类APP是希望用户使用第三方登录,弱化手机号注册登录。比如阿里旗下的闲鱼、一淘、飞猪等,登录时为了用户数据之间的连接,会推荐用户使用淘宝账号进行登录,从而弱化了手机号注册登录,这是出于产品属性方面的考虑。

undefined


4.使用邮箱注册登录

使用邮箱进行注册登录是以前PC端常用的方式,一些又有移动端又有PC端的产品会使用。


5.先体验后注册登录

一开始用户可以游客状态进入使用产品,当用到添加、收藏、关注、评论、购买等功能就必须要进行注册登录了,这种方式一般多用于阅读类、游戏类或是电商类产品中。

这种方式对新用户的产生有积极作用,很多用户在不了解产品的情况下,可能只是想初步了解一下产品,又不想进行手机注册,所以会先进入熟悉一下产品,待初步使用了解后,再通过引导让用户进行手机号的绑定。



2注册登录页面要点



1.分步骤注册登录

先输入手机号,点击“下一步”的同时,系统查询该手机号是否可以注册,通过的话则进入输入验证码页面,这样做的好处是可以及时反馈给用户,避免用户在输完手机号和验证码之后出现错误toast的情况。

需要注意的是步骤不宜过多,建议3步以内。如下图所示:

undefined


2.注册登录合二为一

这种方式是将注册和登录合到一起,如果是第一次使用,只要输入手机号再填写验证码就相当于注册成功了。


3.弹窗登录

在用户使用必须要登录才能用的功能时会跳出弹窗登录界面。

undefined



3、注册登录页面常用背景样式 


注册登录页面常用背景样式可分为以下六大类:白色背景、轻装饰背景、纯色背景、全屏大图背景、半屏图片背景、插画背景。 


1、白色背景

使用白色背景是目前较为常见的设计样式。页面以信息录入为主,不做过多装饰。

多用于体量比较大的APP中,主要目的是提高登录页面的操作效率,所以没有多余的点缀。如下图所示:

undefined


2、轻装饰背景

轻装饰背景会添加一些品牌设计元素或装饰来体现界面细节,增加产品品牌感。

轻装饰背景常见的有以下几种处理方式:

1、取产品相关元素进行装饰。

2 背景做模糊处理增加界面层次感。

3、加入意向类的图片。

4、 添加几何元素进行装饰。 

undefined  

3、纯色背景

纯色背景多采用品牌色,也可搭配Logo进行设计,体现品牌感。

该方式多用在登录信息简单或者以第三方登录为主的界面中,在不干扰用户视线的基础上丰富页面。

如下图所示:腾讯课堂、知识星球均采用品牌色进行设计,同时可以看出他们的登录信息都较少,在视觉设计上也较为简洁。 

undefined


4、全屏大图背景

全屏大图背景就是在登录信息下方平铺一张与产品相关的图片。

优点:图片更容易吸引人的注意力,视觉上更有冲击力,也能提前给用户一个心理预期。

缺点:信息和背景融合较高,视觉干扰比较大,多用在垂直类的APP中,对于一些体量较大的产品不太适合。

如下图所示:

undefined


5、半屏图片背景

半屏图片和全屏图片有些类似, 都是通过意向图片传递产品品牌感,不过半屏图片重点是以登录信息为主,如下图所示:  

undefined 

6、插画背景

插画背景就是自己绘制品牌识别元素或者和品牌相关的元素作为背景。

优点:插画更有亲和力,更能与用户产生情感共鸣。

缺点:绘制成本较高,比较费时间。

如下图所示:

undefined


图片素材来源于网络和应用截图,仅用于学习交流

- END -


感谢您的阅读,希望能对你的设计有些帮助。

更多精彩内容可以关注我的公众号【 泡芙喵F设计教室 】


7
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    文章信息

    • 文章标签

    没有新消息