×

关于APP 登录页

96
低端人口阿布
2016.08.18 12:04* 字数 1255

在大部分的 app 设计中,登录页都是不可避免的。许多 app 的体验也是从登录页开始的,从一个登录页的设计你就能感受到 app 有没有用心去做,它的体验如何,甚至可以决定用户会不会使用它。
一个登录页是由哪些元素组成的、登录的逻辑是怎样的,它的好坏是如何评判的,这些都是一个非常值得探讨的话题。以下是我对于登录页的总结和设计中的总结,水平十分有限,有不妥之处欢迎指正。

登录的逻辑/流程

设计时人们总是关注于视觉如何呈现,可作为一个 UI 设计不只是视觉设计,更要把握整体的互动,有输入、输出、以及交互内容才是 UI 设计。
初学者在做登录页设计时,往往什么都不考虑,画了登录和注册两张图就给开发(说的就是我自己~0~)。接下来可想而知,各种修改。下图是我整理的一份常用的 app 登录流程。


视觉稿也许只有两张,可却包含了这么多判断和流程。所以一定要先有流程图,才能在画 Wireframe 时不至于遗漏。

4种常见的设计方案

在看了许多登录页的设计后,整理出常用的几种设计方案,以供参考。

方案一:简易型

简介:页面中只显示登录或注册界面
特点:单一页面中完成登录或注册操作,简单直观。用户基数较大的 app 展示登录页,新上线的 app 展示注册页。


1.jpg
方案二:复合型

简介:登录和注册在同一界面中
特点:需要切换登录或注册,界面相对较为复杂,但操作更快捷。


2.jpg
方案三:入口型

简介:提供登录/注册的入口
特点:能有有更多内容展示 APP 介绍,强调品牌特点。


3.jpg

通过弹出窗口,可以在当前页面完成所有操作,形式感较好,适合搭配动效,做出惊艳的效果。


4.jpg
方案四:流线型

简介:按登录流程拆分界面,一次只需输入一条信息。
特点:按照登录操作一步步引到用户登录/注册,界面非常简洁,可以合并登录和注册操作(参考印象笔记)。


5.jpg

几条不成熟的小建议:

  1. 每种方案各有不同的特点,根据情况选择合适的方案。应尽可能的提高安全性和易用性。
  2. 针对性的设计让你的 app 更加优秀。在同一个 app 中可以有不同的方案,例如首次使用 app 的登录页与长时间未使用需要重新登录的页面。
  3. 慎用快捷登录,使用社交帐号快捷登录的确可以减少注册流程,但应当在技术成熟的条件下使用,且不要增加额外的操作。
  4. 必须登录才能使用的 app 推荐使用快捷登录,尽可能给客户以方便。
  5. 注册界面的密码确认:手机号、邮箱注册的帐号可不提供密码确认,增加默认显示密码。
  6. 注册时用户名的限制应该越少越好,并且给与相应的提示。
  7. 如果有“记住我”按钮,请默认为选中状态。

又爱又恨的快捷登录

优点:快捷登录可以无需输入即可完成登录/注册的操作,不需要记住帐号的烦恼,与常用社交软件结合,可以完成社交体验,如内容分享,朋友推荐等。
槽点1:根据我使用的情况,很多 app 的关联操作经常失败,或是导致 app 直接关闭,或是未打开关联的 app,则会出现需要输入关联入口的帐号,密码。导致操作没有减少反而增加了。最后呈现糟糕的客户体验,降低客户使用的兴趣。
槽点2:使用第三方帐号导致用户之后操作的不便捷,例如团购、电影 app,使用时仍然需要再次绑定手机号。导致快捷登录没有带来操作上的便捷。部分 app 采用快捷登录后仍然需要绑定手机号、邮箱的操作,甚至要输入密码。


个人笔记,仅供参考,欢迎讨论。
END

设计
Web note ad 1