联系我们 face+ 关于 服务 案例
首页 案例 服务 关于 face+

UI设计的登录页面怎么做?分享登录页ui设计指南攻略

Time: 2022-01-18

    说起登录页面相信大家是最熟悉不过,现在我们上网聊天或者是上网办理业务的时候,都是需要做一些账号登录的操作认证,那么这个登录页面是怎么做的呢?今天就让faceui给大家带来一下关于登录页ui设计知识。感兴趣的朋友进来看看吧。

  UI其实是一个广义的概念,《现代汉语词典》将“界面”定义为:物体与物体之间的接触面,泛指人和物(人造物、工具、机器)互动过程中的界面(接口)。以车为例,方向盘、仪表盘、中控都属于用户界面。从字面上看由用户与界面两个部分组成,但实际上还包括用户与界面之间的交互关系,所以可分为三个方向,用户研究、交互设计界面设计

  登录页ui设计指南攻略

  一、注册登录方式

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

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

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

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

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

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

登录页ui

  登录页ui

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

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

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

  4.使用邮箱注册登录

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

  5.先体验后注册登录

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

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

  二、注册登录页面设计要点

  1.分步骤注册登录

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

  需要注意的是步骤不宜过多,建议3步以内。

  2.注册登录合二为一

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

  3.弹窗登录

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

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

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

  1、白色背景

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

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

  2、轻装饰背景

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

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

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

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

  3、加入意向类的图片。

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

  3、纯色背景

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

  该方式多用在登录信息简单或者以第三方登录为主的界面中,在不干扰用户视线的基础上丰富页面,采用品牌色进行设计,同时可以看出他们的登录信息都较少,在视觉设计上也较为简洁。

  4、全屏大图背景

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

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

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

登录页ui

  登录页ui

  5、半屏图片背景

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

  6、插画背景

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

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

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

  以上就是faceui给大家带来了关于登录页ui设计的一些基本知识,看完后,相信各位朋友都应该清楚的了解到企业做UI设计中登录页是非常重要,这也是为了让企业能够拥有在自己的行业中脱颖而出。

合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康17号A座
010-64015620
service@faceui.com

办公地址地图

成都

四川省成都市锦江区东大街牛王庙段100号
028-62790929
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2022 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开