为了加强厝边网与微博网友的互动,同时也让更多人认识雅乐这个网站所提供的服务。公司决定发起一个线上结合线下的活动,活动需要符合一定的条件(1.绑定微博;2.上传头像)才能参与,同时为了简化验证流程,避免频繁页面跳转提高参与门槛,考虑在一个页面内完成资格验证。

so…

总目标:验证并引导 用户达到参与活动的条件,顺利进入活动页。

任务分解:

TODO1:绑定微博

活动资格验证流程第一步中的所有可能性

活动资格验证流程第一步中的所有可能性

上图列出了资格验证流程第一步中所有可能的过程,在这环节可以获得页面访客微博账户(W)和厝边网账户(C)的登录状态,以此确定展示的页面

  1. 两种帐号同时登录的访客,到达验证环节出口进入下一验证环节
  2. 至少一种帐号未登录
    1. W登录C未登录,绑定页(cuobian.com)
    2. C登录W未登录,授权页(api.weibo.com)
    3. 两种帐号均未登录的访客
      1. 微博帐号
        1. 已有,微博登录页
        2. 未有,微博注册页
      2. 厝边网帐号
        1. 已有,厝边网登录页
        2. 未有,厝边网注册页

第一种(1),厝边网和微博帐号都已登录最理想,直接跳过这一环节;

第二种(2.1和2.2)中的前两个情况也好办,都是打开授权页,进入微博已有授权流程;

第二种中的最后一个情况(2.3)乍看页面挺多,层级也比较深,而层级越深步骤越多,访客中途退出的可能性就越大。但只要有一个登录状态改变,也就转变前两个情况(2.2)之一。考虑到厝边网已有登录页弹窗可以利用,登录页弹窗中有注册链接可兼顾无厝边网帐号访客,且对于我们而言可控性高于微博授权页,故考虑对两种帐号均未登录的访客展示厝边网登录页。如下图

活动资格验证流程步骤一-弹窗页的选择

活动资格验证流程步骤一——弹窗展示页的选择

  1. 两种帐号同时登录的访客,到达验证环节出口进入下一验证环节
  2. 至少一种帐号未登录
    1. W登录C未登录,绑定页(cuobian.com)
    2. C登录W未登录,授权页(api.weibo.com)
    3. 两种帐号均未登录的访客
      1. 微博帐号
        1. 已有,微博登录页
        2. 未有,微博注册页
      2. 厝边网帐号
        1. 已有,厝边网登录页
        2. 未有,厝边网注册页

这样以后,根据用户微博账户和厝边网账户登录情况的不同,将只有三种可能的展示页面。

TODO2:上传头像

这一步相对简单,通过用户头像url是否为默认值,即可判断是否满足条件。

对于不满足的,显示图片上传控件或同步微博头像的按钮即可。

流程衔接

验证流程可以以TODOlist 的形式在验证引导页中展示,引导页在整个验证过程始终保留,不仅可用作进度提示,也降低验证流程被打断的概率。

所以应该尽可能将页面和控件展示在弹窗中,厝边网弹窗控件的内容部分是一个Iframe引用,步骤完成后通过回调函数将父页面中TODOlist的相应条目标记为已完成并关闭入口;帐号注册和激活可能无法在弹窗中完成的操作,则在新建页面中完成。

小结

有些整体看起来比较庞大而繁杂的问题,可以将它分步骤、列出每一步中所有可能,然后由简入繁 各个击破,小技巧是在宏观上对所有同情况进行归纳和等效处理,找到其中最大公约数,让处理过程得到简化。