火星网校
UI设计中登录页的设计指南
发布时间：2024-02-29 11:54:23 浏览量：275次
UI设计创新技能层出不穷，UI设计满足着形形色色各种垂直化的需求,在设计方面大家也是想方设法去做一些创新,希望自己能够在各种应用中脱颖而出,今天我就针对UI设计中登录页设计指南进行简单的说明。
一、注册登录方式
1.只使用第三方账号注册登录
这种方式是最快捷的登录方式，省去了手机注册的繁琐操作，帮用户提高效率，节省时间。
这里没有找到参考案例，可能现在用这种方式的APP已经很少了。
2.只使用手机号注册登录
使用手机号+获取验证码是目前最常用的注册登录方式，通过发送短信获取验证码在60-90秒内进行注册登录，这么做是为了确认用户拥有该手机号的使用权。
手机号+验证码是比较简便的登录方式，手机号+密码是比较常用的登录方式。在输入手机号后，为了让用户查看是否输入正确，建议手机号显示样式为3-4-4模式(如186 3464 ****)
手机号也是商家进行用户维护的有效手段，可以在节假日发送祝福或者促销短信，也可以在用户长期未使用产品时进行短信提示，避免用户将产品遗忘。
3.使用手机号+第三方账号注册登录
这种样式是上面两种样式的结合，一般这样的组合方式是希望用户使用手机号注册，所以手机注册登录比较突出，第三方注册会置于页面底部弱化处理。如下图所示：
还有一类APP是希望用户使用第三方登录，弱化手机号注册登录。比如阿里旗下的闲鱼、一淘、飞猪等，登录时为了用户数据之间的连接，会推荐用户使用淘宝账号进行登录，从而弱化了手机号注册登录，这是出于产品属性方面的考虑。
4.使用邮箱注册登录
使用邮箱进行注册登录是以前PC端常用的方式，一些又有移动端又有PC端的产品会使用。
5.先体验后注册登录
一开始用户可以游客状态进入使用产品，当用到添加、收藏、关注、评论、购买等功能就必须要进行注册登录了，这种方式一般多用于阅读类、游戏类或是电商类产品中。
这种方式对新用户的产生有积极作用，很多用户在不了解产品的情况下，可能只是想初步了解一下产品，又不想进行手机注册，所以会先进入熟悉一下产品，待初步使用了解后，再通过引导让用户进行手机号的绑定。
二、注册登录页面设计要点
1.分步骤注册登录
先输入手机号，UI设计中登录页的设计指南https://www.aaa-cg.com.cn/ui/2556.html?gpf点击“下一步”的同时，系统查询该手机号是否可以注册，通过的话则进入输入验证码页面，这样做的好处是可以及时反馈给用户，避免用户在输完手机号和验证码之后出现错误toast的情况。
需要注意的是步骤不宜过多，建议3步以内。如下图所示：
2.注册登录合二为一
这种方式是将注册和登录合到一起，如果是第一次使用，只要输入手机号再填写验证码就相当于注册成功了。
3.弹窗登录
在用户使用必须要登录才能用的功能时会跳出弹窗登录界面。
三、注册登录页面常用背景样式
注册登录页面常用背景样式可分为以下六大类：白色背景、轻装饰背景、纯色背景、全屏大图背景、半屏图片背景、插画背景。
1、白色背景
使用白色背景是目前较为常见的设计样式。页面以信息录入为主，不做过多装饰。
多用于体量比较大的APP中，主要目的是提高登录页面的操作效率，所以没有多余的点缀。如下图所示：
2、轻装饰背景
轻装饰背景会添加一些品牌设计元素或装饰来体现界面细节，增加产品品牌感。
轻装饰背景常见的有以下几种处理方式：
1、取产品相关元素进行装饰。
2 背景做模糊处理增加界面层次感。
3、加入意向类的图片。
4、 添加几何元素进行装饰。
3、纯色背景
纯色背景多采用品牌色，也可搭配Logo进行设计，体现品牌感。
该方式多用在登录信息简单或者以第三方登录为主的界面中，在不干扰用户视线的基础上丰富页面。
如下图所示：腾讯课堂、知识星球均采用品牌色进行设计，同时可以看出他们的登录信息都较少，在视觉设计上也较为简洁。
4、全屏大图背景
全屏大图背景就是在登录信息下方平铺一张与产品相关的图片。
优点：图片更容易吸引人的注意力，视觉上更有冲击力，也能提前给用户一个心理预期。
缺点：信息和背景融合较高，视觉干扰比较大，多用在垂直类的APP中，对于一些体量较大的产品不太适合。
如下图所示：
5、半屏图片背景
半屏图片和全屏图片有些类似， 都是通过意向图片传递产品品牌感，不过半屏图片重点是以登录信息为主，如下图所示：
6、插画背景
插画背景就是自己绘制品牌识别元素或者和品牌相关的元素作为背景。
优点：插画更有亲和力，更能与用户产生情感共鸣。
缺点：绘制成本较高，比较费时间。
如下图所示：
好了，今天的分享就到这里了，欢迎大家留言讨论哦。
Ui设计中图片的使用技巧
UI设计中间距的重要性
UI设计中引导页设计指南
UI设计中的空状态设计指南
UI设计中聊天气泡框的设计技巧
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
6. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
8. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
最新文章
