近期正好在做IOS版本的改版，第一项就是注册登录页，正好借此机会收集整理一些相关知识，加上自己实践时的感悟。
1、注册的目的
对于企业，比较类似：将访客转化为用户，有助于获得用户画像和各种数据，从而方便后续改进，以及针对用户的个性化服务。
对于个人，则根据APP的不同可以获得不同的便利：比如内容类的可以收藏，保存历史记录。社交类的可以提供个性身份。因此，根据不同的目的，需要设计不同的注册登录前页和完成后跳转页，比如，内容类的会在注册后让你选择感兴趣的版块、运动类的会询问你的一些个人情况等等。（影响注册登陆前后页流程的因素还有其他，后续会讲到）。
2、注册登录的流程
2.1 整体流程
整体来说，可以分为跳转前页——输入注册/登录——跳转后页
首先，根据APP的定位可分为三种形式：
新用户是否登录典型特点定位
A-强制微信、支付宝打开APP必须登录基于用户的各项功能，一般为必备型APP，简单粗暴的强制登录
B-主推Lofter、keep引导页/启动页与注册页相结合APP风格强烈，用户群年轻前卫，用引导页/启动页的风格给用户代入感，从而促进注册登录
C-无要求今日头条、美团、淘宝用户进入APP可正常使用，只有涉及相关功能（如支付）时才会要求登录以内容浏览为主(社交/平台/工具类等）
新用户是否登录用户信息需求量跳转前页跳转后页
A-强制中等无(APP打开首页）应用首页
B-主推大无/功能页用户信息相关填写或勾选/回功能页
C-无要求少功能页/内容页回功能页/内容页
对于各个不同的APP，有时并没有很具体的分类。比如淘宝属于上述的A+C，初次进入时可以在首页浏览，而一旦点击“我的”，则会进入强制登录页（无法返回）。而Lofter偏向于B+C类，给用户提供了一个“随便看看”的选项。
2.2 输入流程
脱离场景谈流程都是耍流氓，而场景中影响用户行为的因素比较多，比如在地铁上站立时，单手操作手机登录，这时周围环境，使用时间等等都是影响因素。但实际分析时，需要找到关键因素。由于手机上APP较多，用户来到登录页面时可能不记得自己是否注册过，因此用户是否记得自己账号密码的情况就是一个关键因素。在此对公司现有的APP尝
试进行分析。
用户注册过认为自己有账号认为自己有密码实际有密码输入密码用户行为设计策略
1用户名用户名/手机号是是正确用户名登录
2用户名用户名/手机号是是错误再次输入密码第一次提示密码错误，第二次提示找回密码
3用户名否
注册/第三方登录未绑定手机提示绑定手机，已绑定手机提示已有账号去绑定账号
4用户名/手机号手机号码否
验证码登录
5手机号用户名是否错误其他登录/注册提示用户名不存在，请其他登录或注册
6手机号手机号码是是正确手机号登录
7手机号手机号码是是错误再次输入密码第一次提示密码错误，第二次提示找回密码
8手机号否
注册/第三方登录提示已有账号去登陆
9否用户名是否错误输入密码提示用户名不存在，请其他登录或注册
10否手机号码是否错误输入密码提示用户名不存在，请其他登录或注册
11否手机号码否
手机验证登录跳转注册
12否否
注册
新注册只有手机注册这一种方式，即新用户没有账号，用户名是手机号。而账号是之前老用户的，老用户一个手机号可绑定多个账号，并设置一个默认账号。
3、页面元素与布局
一般来说，注册登录页涉及的元素有：注册按钮、登录按钮、找回密码、输入框，第三方登录，验证码登录，游客跳过按钮，产品LOGO。当然也会有一些独特的元素，如支付宝的刷脸登录，语言切换等。根据2.1中对APP类型的划分，以及各APP自己的情况，可以舍去其中某些元素。
APP现版页面，以账号登录为主
4、视觉样式
视觉样式主要是契合APP本身的特点和风格，也因此可以按照2.1中的分类进行粗略的划分。
A类（基于用户的各项功能，一般为必备型APP，简单粗暴的强制登录）
一般风格以简洁为主，同时会配以产品LOGO。由于是在打开APP后直接出现，因此背景可全屏，不受制于导航栏。如下图。
B类（APP风格强烈，用户群年轻前卫，用引导页/启动页的风格给用户代入感）
一般不配输入框，仅提供注册登录的按钮。背景采用全屏/半屏图片，有时配以宣传语。图片选取时如果是为了唤起共鸣，尽量选择带人物的，甚至可以采用小视频的形式（如keep）。而如果采用半屏图片，注意打破间隔来避免死板，如下图
C类（只有涉及相关功能（如支付）时才会要求登录，一般是内容浏览、工具类等APP）
该类注册登录页由于是在用户使用APP过程中跳出，所以大部分会尽量满足APP内的一致性（一般意味着保留导航栏，采用浅白色底色）。也可以采用类似B类的全屏登录页。还有一些会采取弹窗模态的形式，（如今日头条，微博）
注意点：若输入框在屏幕中处于较低的位置，要考虑输入框弹起后挡住的情况，采取如将页面上移等方法。
2.区分空状态（未输入）与错误。校验报错有三种种事件，一是边输入边检验（前端）；一是输入框失去焦点（完成该项进入下一项），另一种是全部完成，点击最终的确认按钮。常规错误应该在前两者发生时检验，而空状态应该在最后确认时时检验，避免用户在整个输入流程中过多干扰。
3.逐项提示错误。多条错误同时提示干扰性过强，同时打击用户，不利于引导。可以逐条报错，引导用户逐条更改。
不佳
优秀
4梳理出规范性的文档，同步给设计、开发和测试，以便更好地把控细节。
二、输入框提示文字
输入框的提示文字的目的：1.告诉用户此处要输入什么（用户名/密码）2.告诉用户怎么输入（格式/字数限制）。
对于第一个目的，现有的表现形式有多种。弱提示文字（开始输入后消失），icon+弱提示文字，强提示文字（直接注明“用户名”）+弱提示文字。
而对于第二个目的，可以用弱提示文字，或底部提示文字。
另外，在输入框获取焦点时，可以引入一些动效。
三、整体UI样式
首先，根据APP的定位可分为两种形式，一种以浏览为主，用户未登录也可以正常浏览，只有在进行购买等具体操作时才会弹出登录页（如浸今日头条，美团，淘宝等）。对应的登录页一般比较简单另一种
三、其他
设计要讲究实用性，不要过度细节钻牛角尖。京东的PC端就
参考文章：从京东注册优化谈如何做到细节设计
网友评论