Freetao's Blog

活动资格验证流程设计

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

so…

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

任务分解:

TODO1:绑定微博

[caption id=”” align=”alignnone” width=”539”]活动资格验证流程第一步中的所有可能性活动资格验证流程第一步中的所有可能性[/caption]

上图列出了资格验证流程第一步中所有可能的过程,在这环节可以获得页面访客微博账户(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)之一。考虑到厝边网已有登录页弹窗可以利用,登录页弹窗中有注册链接可兼顾无厝边网帐号访客,且对于我们而言可控性高于微博授权页,故考虑对两种帐号均未登录的访客展示厝边网登录页。如下图

[caption id=”” align=”alignnone” width=”539”]活动资格验证流程步骤一-弹窗页的选择活动资格验证流程步骤一——弹窗展示页的选择[/caption]

  1. 两种帐号同时登录的访客,到达验证环节出口进入下一验证环节
  2. 至少一种帐号未登录

    1. W登录C未登录,绑定页(cuobian.com)
    2. C登录W未登录,授权页(api.weibo.com)
    3. 两种帐号均未登录的访客

      1.  微博帐号
      
              1.  已有,<span class="cutOff">微博登录页</span>
      2.  未有,<span class="cutOff">微博注册页</span>
      
          2.  厝边网帐号
      
              1.  已有,**厝边网登录页**
      2.  未有,<span class="cutoff">厝边网注册页</span>
      

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

TODO2:上传头像

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

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

流程衔接

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

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

小结

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

Kainy Guo wechat
微信扫码,或订阅 Feed 解锁更多开发技能。