从手机产品登录页面设计想到的

elya妞 手机产品

一、架构设计和流程设计

我一直追求简单而高效的设计，尤其欣赏臭鱼这一篇文章《为产品结构的设计，为用户任务的设计》。他用图1很好的诠释了这个观点：首先要保证产品逻辑结果清晰、准确，其次要为用户任务架起一些快捷操作的桥梁。

图1  “产品结构设计”和“为用户任务设计”的关系

好的流程设计能使产品具有更清晰的架构，更良好的体验。我的老大曾经举过一个串珠子的例子，说PM给我们的功能列表都像是一堆零零散散的珠子，而我们要做的，就是把这些珠子串起来，把功能串起来，最后呈现给用户的才是一个完整的东西，有着清晰的架构和流程。

这话说起来还是有一些抽象，我想尝试着通过手机产品登录界面的设计，来跟大家分享我对架构设计和流程设计的思考过程。

二、一个例子

首先我们来看一个例子，见图2：

图2 一个小朋友做的登录界面

这个页面非常有代表性，它很像PM提出的需求列表，杂乱的堆在了界面上。先来挑挑问题所在:

  • 文案不太准确，“帐号密码”的文案用“密码”就行了，“登录账号”按钮的文案用“登录”就可以了，“离线使用”按钮，他想表达的是“匿名登录（不需要账号、密码）”。
  • 界面上元素太多，需要分辨哪些是自己需要的
  • 层级关系不明，没有一条清晰的任务主线
  • 没有考虑到虚拟键盘遮挡的问题
  • 相关操作可以离得再近一些，比如忘记密码跟登录按钮

三、研究一下架构

那么我们架构上进行分析，架构上来讲，这个界面，主要有三个模块：登录、匿名和注册，其中匿名可能有两种情况，这里表现的是不需要用户名和密码的情况，如图3.

图3 登录页面架构图

我们先来分析一下登录和注册这两个功能模块。如果用户要登录，那么需要输入用户名和密码，如果用户希望以后不用再输入密码了，可以选择记住密码，如果用户忘记了密码，那么可以给一个入口让他去执行找回密码操作。当然，这些如果都是建立在用户要执行登录操作之后。所以可以把这些元素藏起来。所以，既然登录和注册是平级的，那么我们可不可以把这个页面设计成图4这样子呢？

图4 登录页面采用2个入口的形式，可以选择登录或注册

参考案例是Foursquare和16Fun，见图5。

图5 Foursquare的登录页面，只有两个选项，登录或者注册

这个方案的优点非常明显，就是架构清晰，不会有太多的干扰因素，但是缺点也是有的，登录和注册两个按钮还是需要区分一下的，而且这两个功能过于平级，在不同的产品阶段应该有侧重才对，比如新产品上线，要更合理的引导注册，成熟产品，要突出登录。

再来看看匿名这个功能，前文提到，匿名有两种情况：

1、不需要用户名和密码，就可以登录

2、需要提交用户名和密码，但是匿名登录，不让别人看到

情况1，既然不需要用户名和密码就可以登录，那为什么还要先进入登录页面而不是内容页面呢？如果你的产品是侧重于社区类的，需要用户登录的，那么还是要引导用户登录，如果你的产品是工具类的、内容类的，希望用户能看到内容，那么可以让用户直接进入到软件里，先看到内容，等需要执行一些登录之后才能进行的操作时，才提示用户登录。

情况2，往往是用在论坛、贴吧等需要匿名发表帖子的情况下，那么我们只需要在发帖页面给出匿名发贴的复选框就行了，不需要让用户在登录界面就直接选择了。如果是想登录某些论坛，却又不想暴露在线状态，则可以在登录按钮按钮上面增加一个状态选择，如图6，ＱＱ客户端。

图6 iPhone版ＱＱ客户端，登录按钮上方可以选择状态

因为我们这个登录页面属于情况1，所以就把匿名登录功能从登录页面拿掉了。

四、研究一下流程

那么这个时候，我们要对产品的流程来进行一次深入的思考了，我们的产品，是希望用户从哪里来？到哪里去呢？希望用户在我们的产品里完成怎样一个任务流呢？我简单分析了一下，如果是以引导登录为目的的流程，用户必须有账号，只能登录访问产品，那么流程大概如图7这般。

图7 手机产品登录流程

那么我们知道了，我们是希望用户刚进入软件就遇到这个界面，完成登录之后，到达内容的。如果是这样，我们是否应该让用户可以更快速的执行登录过程，也就是说，把账号和密码提到一级，方便用户快捷的操作。于是我把设计改成了图8的样子：

图8 暴露出账号、密码输入框的登录页面

参考案例是街旁网的登录页面，见图9。

图9 街旁网的登录页面，突出登录功能

跟密码相关的选项，比如记住密码，忘记密码，需要放在哪里合适呢？一般情况下，相关性较大的最好要离得 较近。于是我把记住密码和忘记密码都放在密码输入框底下，但是这时候，又会显得信息较乱，解决的办法是什么呢？就是给信息分组，如图10。

图10 把信息区隔成登录和注册两个模块，强化登录

而如果是以内容为主的，登录的目的是完成某些操作，那么登录页面往往出现在导航栏上、菜单里，或者是执行某个需要登录的操作之后，以论坛回帖为例，流程如图11：

图11 当执行发帖操作的时候，提示登录的流程图

此时，明显可以分析出，流程的终结应该不是登录成功，而是执行接下来的操作。与其上来就让一个注册门槛，击垮了一部分用户的积极性，还不如，先把内容暴露出来，当你需要执行一些登录用户才能执行的操作的时候，再引导你去登录页面，就顺理成章，没有强迫登录的感觉了。这种情况下，可以采用浮层的形式，完成简单快捷的登录操作，如图12。

Vimeo

图12 Vimeo的登录页面，采用浮层的设计方式

当然，也可以调用统一的登录页面，即降低成本，又保持统一。

五、需求，还是需求

之所以碎碎念这么多，是因为，这一个看似简单的页面，包含了很多的架构、流程上的思考，包含了产品逻辑，最重要的，包含了设计师对需求的把握。

登录页面，到底要设计成什么样子，肯定没有一个统一的标准，但是，根据你的产品需求，你可以推断出，该是怎样一个流程，该突出哪些功能，让我们来总结一下，我感悟颇深的一些点：

  1. 告诉我为什么（为什么登录？为什么注册？）
  2. 不要给用户太多的选择（太多的选择意味着太多的思考时间）
  3. 让用户一条路走到底（流程要有始有终，且不能有太多分支）
  4. 跟某个选项相关的东西要跟随这个选项（比如密码输入框和忘记密码）
  5. 内容为主的要弱化登录（在合适的时候提示用户登录就行了）
  6. 架构和流程是两回事（清晰的架构是基础，快捷的流程是保证）

有点乱，欢迎批评和探讨，elya妞文：http://elya.cn/mobile/808.html

elya妞

～落花有意随流水，流水无情恋落花～

在 “从手机产品登录页面设计想到的” 上有 288 条评论

  4. Pingback： 从手机产品登录页面设计想到的 – 分享LBS|关注移动互联网，分享LBS业界最新动态

  6. 登录按钮的问题。很多界面都有意识的注意它不被弹出来的键盘遮住。我有一个很朴素的想法，因为像iPhone之类的智能手机，弹出键盘画面上，那个Enter键，制作软件时候可以设定成［Go］，［Login］之类的功能键，用户输入帐号密码之后，可以很自然的按下这个键，来实现登录的功能。这个时候，界面原有的登录按钮，它应该是可以替代的吧。

    回复

  7. 现在有了facebook connect，新浪账号链接这些东西后，我越来越不想注册了，未来的网站可能大部分都不需要注册了。

    所以网站最好能提供这些东西，能大大降低用户使用门槛，还能迅速复制用户的关系。

    回复

  8. 看到elya在分析的过程中画的流程图和信息架构图，着实感动了一下。
    之所以感动是因为，我们也在琢磨这些。显然，
    为流程而设计->流程图
    为结构而设计->信息构架图

    而接下来还有一个重要的问题：这两种图怎么联系起来？或者说，为流程而设计，为结构而设计从工作方法上怎么融合起来？
    实际上我们目前琢磨出了一些方法，在这两个图的中间加一个“页面简图”。关于这个方法，12月10日在广州的那个用户体验日工作坊中，我和seven一起做了演示。当时的演示是在白板上画的，到现在也没有整理一份电子稿出来。希望接下来我们能有时间吧，把它整理出来。

    看到elya很投入的研究这些，着实是感动~

    回复

  12. 不错，分析的很到位，不过蒙层效果的页面，对手机的要求应该会高些吧，使用的时候要慎重考虑软件的使用对象以及对手机的要求。 🙄 🙄 🙄

    回复
  15. Pingback： 从手机产品登录页面设计想到的 « 互联网的那点事

  16. 开头讨论界面，最后开始说内容为主的要不要登录了，而且流程图的逻辑混乱。。。。。
    还有离线使用，如果是匿名，很简单，“随便逛逛”就好了

    回复

  18. 离线模式可参考部分小说杂志阅读器，这部分人在打开软件之前就可以决定是否离线，因此针对这类产品的离线开关可以加在软件的启动&联网阶段，顺利通过此阶段的都是正常联网模式，硬件或用户手动中断联网后都是离线模式

    回复

  19. 支持晓生同学的“登录注册是阻碍用户第一个门槛”，这个门槛不亚于门神，如果登录不是第一要求的话，尽量弱化这个概念，设计一个对游客也比较友好的使用路线，在适当的节点添加登录要求；另外，我觉得如果是百度的产品，注册也不是很有必要，手机上除非是自动发短信注册的，其他的对用户来说都比较伤神

    回复

  21. 图7 手机产品登录流程
    这里只是记住密码
    那么不记住密码的情况呢？
    既然记住密码了 到登陆界面 用户还需要填写 账户和密码信息吗？
    个人感觉流程中的”记住密码“应该为”记录账户“
    判定用户是否注册之后，注册用户并且登陆过一次 那么账户就会被记录的（这个必须的），而记录密码应该在登录界面体现

    回复

    1. 我表达的不准啦，这个是用户的判断，是否记住了密码，其实是不应该写在逻辑流程图里的，已经被晓声批评了，嘎嘎~

      回复

  23. 1、QQ的登录按钮放在右边的体验很棒，当用户输入密码或更改状态后，点击登录的距离最近；

    2、登录和注册是针对不同的用户角色设计的，应该以不同的风格呈现（所以图9 街旁网的登录和注册的体验就不是很好）

    回复

    1. 就是我最后说的，需求，还是需求
      这个页面，肯定没有一个统一标准的，要因产品而异，因阶段而异~

      回复

  27. 1.不同的产品登录界面显示内容不太相同。QQ不需要吸引用户注册，而街旁网有这样的需求。
    2.手机登录之前是否有检查联网状态呢？没联网的话，不然白白输入账号和密码。互联网没有这样需求，因为不联网没办法打开网页。
    3.登录页面也有模块弹出框，比如华彩彩票iPhone客户端，可以研究下它什么时候要求登录的。登录注册是阻碍用户第一个门槛。
    4.对于有点产品注册只需要填写账号和一次密码，那么用户在界面上是否可以先输入账号和密码，再选择是否登陆或者注册。
    5.游玩网多账号登录情况会怎么样？比如游玩网android版。
    6.图7流程图中穿插了两种流程，一个是用户的思维，一个是程序本身的判断。个人觉得图中画出程序流程图即可。
    登录界面直接两个分支：注册页面和输入账号和密码。是否注册和是否记住密码是用户的事情，如果画给RD看，就没必要了。

    仅供参考。

    回复

    1. 我想到有两个地方我没有提到，一个是登录按钮，在没有输入用户名和密码的时候，是否应该处理成灰色不可点击的状态？如果处理成不可点的状态了，会不会让人有种不能登录的误解？如果不处理成灰色的，点击了之后该是什么反应呢？没有反应是不是怪怪的？
      另外一个，是登录按钮，是不是应该处理成不会被键盘遮挡住的方案？比如键盘弹出来，登录就顶在键盘顶上，但是这样比较占空间，或者是激活用户名和密码输入框之后，登录和取消就处于标题栏一左一右…纠结啊…
      关于2，我也想过，是不是应该先检查联网，如果没联网的话，彻底打不开登录页面？还是打开登录页面同时给出提醒“无网络连接”的好？
      关于6，这个问题我纠结了好久啊，流程图里，该不该画出用户的思维流程，看来是不需要的，我明白了~万谢万谢万谢~~~~~

      回复

向CH5iRe进行回复 取消回复

电子邮件地址不会被公开。