在移动应用开发中，App登录页面设计不仅是用户与产品的首次接触界面，更直接影响用户的第一印象与留存率。为了更好的帮助大家快速上手，掌握App登录页面设计方法，这篇文章就以下图的ONT Design登录页设计为例，为大家分享一下登录页的设计步骤与方法。
在正式app登录页面ui设计之前，需要对使用的设计工具有一个基本了解：
- 首先，Pixso是一款专业的UI/UX设计工具，可以一站式完成原型、设计、交互与交付，帮助你提升设计效率。
- 其次，Pixso在团队协作方面非常的好用，可以支持团队成员实时编辑设计文件，方便团队成员沟通，获取设计反馈。
- 另外，Pixso的矢量编辑功能也十分强大，用Pixso来制作App登录页可以事半功倍，所以本次App登录页面设计，也将使用在线设计工具Pixso来完成。
- 最后，Pixso内置资源社区，拥有海量免费的设计资源，包括UI\UX套件、图标、插画、海报等，可以作为你的设计素材库，帮助你更高效的完成设计任务。
1. 登录Pixso账号
在使用Pixso设计app登录页之前，你需要进入Pixso官网，直接点击“在线使用”按钮，注册/登录Pixso账号，就可以在浏览器打开Pixso设计工具了，不用下载客户端。👉点击注册账号，免费使用Pixso
2. 新建设计文件
登录Pixso账号后，会进入Pixso的工作台页面，在该页面点击“新建设计文件”按钮，新建一个Pixso文件，并进入Pixso编辑器页面。
3. 新建空白画板
在Pixso编辑器页面，点击顶部导航栏的画板图标，快捷键【A、F】，新建一个大小尺寸为390x844的空白画板。
4. 插入背景图片
可以先在Pixso资源社区，获取App状态栏组件，将其复制到新建的空白画板中，然后将登录页的背景图片拖入到画板中，并添加登录页的品牌logo。品牌logo的添加可以在登录页传达品牌调性，建立信任感。
5. 绘制登录注册按钮
在Pixso顶部导航栏选择矩形工具，快捷键【R】，绘制一个大小尺寸为34x60，圆角为10的按钮的“login”按钮，并填充矩形颜色为#1D2322。
然后，使用文字工具，快捷键【T】，输入按钮文字"Login"，设置文字大小为16，字体为Poppins，字重为semibold，色值#FFFFFF。再复制一下“Login”按钮，修改矩形为描边样式，文字为“Register”。
最后，再使用文字工具，输入“Continue as a guest”，设置颜色为#18C079，字重medium，字号15，字体为Poppins，并添加下划线样式。
6. 绘制登录页欢迎语
再新建一个画板，并为界面添加返回按钮与欢迎语，返回按钮可以直接从Pixso中的图标插件中搜索获取，也可以使用顶部导航栏的矢量工具自行绘制。
欢迎语“Welcome back! Glad to see you, Again!”的字体使用Poppins，字号28，字重bold，色值为#1E232C。
7. 绘制账号密码输入框与登录按钮
使用矩形工具，绘制2个大小为342x60的矩形输入框，圆角为10，填充色为#1D2322，透明度5%，描边#1D2322，透明度15%。再分别在圆角矩形中输入默认提示文字“Enter your Email”与“Enter your password”，设置字体为Poppins，字重regular，字号16，色值#1D2322，透明度60%。
在密码输入框，需要添加密码显示图标，以便让用户更好的查看保护密码。
最后，添加“Forgot Password“链接，与“login”按钮，登录按钮需要与输入框有所区别，采用#1D2322，透明度为100%进行填充。
8. 添加第三方登录方式
为了更方便用户进行快速登录，在登录页一般会设置第三方登录方式，但添加过多的第三方登录方式会让页面显得混乱，因此一般来说限制第三方登录方式为3种是比较合适的。
在Pixso中先使用文字工具，添加“or login with”文字，然后再使用矩形工具，绘制3个矩形大小为103x60的圆角矩形，圆角为10，矩形描边为1.5，#1D2322，透明度15%。最后，将Facebook、Google、apple图标分别放置在3个圆角矩形框内。
另外，使用文字工具输入“Don’t have an account? Register Now”，设置字体Poppins，字号16，字重medium，色值#18C079，就完成了整个登录页的设计。
总结
以上就是使用Pixso设计APP登录页的全部内容，整个过程还是非常简单的，即便是小白也可以快速上手，这主要得益于Pixso这款好用的UI设计工具。即使你不想从头开始进行APP登录页面UI设计，也可以在Pixso资源社区搜索免费的设计模板，进行修改编辑成你想要的风格。👉点击注册账号，免费使用Pixso
