APP框架之四登录页面

描述：当用户已经注册过账号后再次使用app，为用户提供已有信息。
上下文情境：当用户在注册后再次进入你的app，已经对app有一定的了解，希望通过你的app完成一定的目标，希望app能记住用户的一些习惯，保有一定的数据，且比第一次能更好的完成任务，带来一定的惊喜。
任务流程：用户进入app，输入自己的账号（在选择记忆情况下有记忆，或保存）和验证（密码，手机可用验证码，第三方登录）。
构成元素：用户账号【手机，邮箱，账号】，对应的验证元素【密码，手势密码，第三方登。录，验证码】，忘记密码【提供方便的验证方式】。
辅助元素：视觉辅助，注册跳转
设计准则：减少用户的输入！

元素1：视觉辅助

通过与app有一定联系的视觉页面或文字营造一定的氛围，宣扬一定的产品理念，通过品牌logo展现品牌信息，
用户进入登录页面时，往往先会被图片，文字吸引，其次登录框

这时图片文字最好能很好的传达产品的相关信息，营造氛围（节日相关，QQ的节日主题登录，可参考这篇文章《QQ登录banner再设计》
），加深用户对产品的认识

Image.png

元素2：用户账号（用户名，用户邮箱，手机）

记录用户登录过的用户名，并在用户输入部分后智能补全（qq），联想选择（知米背单词，邮箱后缀）

用户名提示信息（占位符和标签）
要包括用户名的类型（邮箱，手机号，字母+数字等等），帮助用户回忆

元素：验证元素（密码，手机验证码，手势密码）

建议密码显示为可见文本。在密码框旁边提供了隐藏选项

提供方便的找回密码功能
密码错误提示要温和，并要起到一定的提示作用，可采用非模态的错误提示。

元素3：第三方登录
第三方账号体系相比于自己的账号体系而言，十分的方便快捷，适用于当用户还不是很了解产品的时候，那么用户可以在不注册一个新的账号的情况下通过这种方式体验产品。用户也不需要记住密码，对用户来说十分方便。
但也存在一些其它问题，用户可能会觉得会泄露自己的资料；用户反馈问题时，无法提供对应账号（可以通过提供一个对应账号解决）

元素4：输入法
根据需要输入数据的类型选择智能键盘，如工行的乱序数字输入法，咳咳。。。

辅助元素：

忘记密码选项
本来不想放，但前两天重新体验一个app的时候，竟然找不到找回密码的选项，让人最后只能重新注册一个账号。。。

注册入口

反馈入口

另外再附加自己一些自己思考的建议，希望得到大家的指正
建议1：不要独创登录表单，保持应用间的一致性，采用用户习惯的设计方案，如无必要，不要违背，这样更易于用户登录

建议2：提供取回已忘记密码的方式

建议3：不要让用户犯错，错误预防，即使错误也不要提供模态的错误警告。
进行有效的即时校验，让用户能及时修改、补充缺漏的信息。
另外，我们还可以通过限制用户的行为，或提供自动修正的方式来预防用户犯错。
如当用户名输入手机号时，自动空格插入，或提示位数；输入邮箱时自动补全@后面的输入。
建议4：减少用户的等待感觉（支付宝 输入密码动画）

建议5：如有验证码，在第一次输入的时候不要出现，只有输入错误到一定次数才出现 万恶的验证码，万恶的验证码，万恶的验证码！
建议6：输入密码错误后，直接显示密码，让用户可以直接查看哪里错误

一些参考来源：
页面之门——登录页的设计分析 不易察觉的细节！常见的登录界面该不该显示密码？
【浅谈】网站APP登录界面设计