在大部分的 app 设计中，登录页都是不可避免的。许多 app 的体验也是从登录页开始的，从一个登录页的设计你就能感受到 app 有没有用心去做，它的体验如何，甚至可以决定用户会不会使用它。
一个登录页是由哪些元素组成的、登录的逻辑是怎样的，它的好坏是如何评判的，这些都是一个非常值得探讨的话题。以下是我对于登录页的总结和设计中的总结，水平十分有限，有不妥之处欢迎指正。
登录的逻辑/流程
设计时人们总是关注于视觉如何呈现，可作为一个 UI 设计不只是视觉设计，更要把握整体的互动，有输入、输出、以及交互内容才是 UI 设计。
初学者在做登录页设计时，往往什么都不考虑，画了登录和注册两张图就给开发（说的就是我自己～0～）。接下来可想而知，各种修改。下图是我整理的一份常用的 app 登录流程。
视觉稿也许只有两张，可却包含了这么多判断和流程。所以一定要先有流程图，才能在画 Wireframe 时不至于遗漏。
4种常见的设计方案
在看了许多登录页的设计后，整理出常用的几种设计方案，以供参考。
方案一：简易型
简介：页面中只显示登录或注册界面
特点：单一页面中完成登录或注册操作，简单直观。用户基数较大的 app 展示登录页，新上线的 app 展示注册页。
1.jpg
方案二：复合型
简介：登录和注册在同一界面中
特点：需要切换登录或注册，界面相对较为复杂，但操作更快捷。
2.jpg
方案三：入口型
简介：提供登录／注册的入口
特点：能有有更多内容展示 APP 介绍，强调品牌特点。
3.jpg
通过弹出窗口，可以在当前页面完成所有操作，形式感较好，适合搭配动效，做出惊艳的效果。
4.jpg
方案四：流线型
简介：按登录流程拆分界面，一次只需输入一条信息。
特点：按照登录操作一步步引到用户登录/注册，界面非常简洁，可以合并登录和注册操作（参考印象笔记）。
5.jpg
几条不成熟的小建议：
- 每种方案各有不同的特点，根据情况选择合适的方案。应尽可能的提高安全性和易用性。
- 针对性的设计让你的 app 更加优秀。在同一个 app 中可以有不同的方案，例如首次使用 app 的登录页与长时间未使用需要重新登录的页面。
- 慎用快捷登录，使用社交帐号快捷登录的确可以减少注册流程，但应当在技术成熟的条件下使用，且不要增加额外的操作。
- 必须登录才能使用的 app 推荐使用快捷登录，尽可能给客户以方便。
- 注册界面的密码确认：手机号、邮箱注册的帐号可不提供密码确认，增加默认显示密码。
- 注册时用户名的限制应该越少越好，并且给与相应的提示。
- 如果有“记住我”按钮，请默认为选中状态。
又爱又恨的快捷登录
优点：快捷登录可以无需输入即可完成登录/注册的操作，不需要记住帐号的烦恼，与常用社交软件结合，可以完成社交体验，如内容分享，朋友推荐等。
槽点1：根据我使用的情况，很多 app 的关联操作经常失败，或是导致 app 直接关闭，或是未打开关联的 app，则会出现需要输入关联入口的帐号，密码。导致操作没有减少反而增加了。最后呈现糟糕的客户体验，降低客户使用的兴趣。
槽点2：使用第三方帐号导致用户之后操作的不便捷，例如团购、电影 app，使用时仍然需要再次绑定手机号。导致快捷登录没有带来操作上的便捷。部分 app 采用快捷登录后仍然需要绑定手机号、邮箱的操作，甚至要输入密码。
个人笔记，仅供参考，欢迎讨论。
END
网友评论