Axure高保真原型:扫码登录、加载中

1 评论 6746 浏览 20 收藏 6 分钟
B端产品经理要负责对目标行业和市场进行深入的分析和调研,了解客户的需求、痛点、期望和行为,找到产品的价值主张 🔗

编辑导语:我们在很多软件登录方式里面都可以看到扫码登录这个选项,那么它是如何实现的呢?本文作者通过扫码登录这一案例,详细讲述了Axure高保真原型的核心逻辑,推荐正在做交互设计的童鞋阅读。

首先来看看我们要实现的效果:

看过效果之后我们再确认一下我们要实现的几个功能

  1. 二维码有个失效的时间;
  2. 当二维码失效的时候,扫码不成功会有个错误提示;
  3. 当二维码没有失效的时候,扫码成功,需要移动端上进行确认登录;
  4. 当扫码成功后,移动端上确认登录后,登录成功;
  5. 当扫码成功后,移动端上取消登录,二维码立即失效。

那么,我们提炼一下几个重点

  1. 设置二维码失效的时间,原型中设置为10秒,可自行调整。
  2. 有个扫描中的状态,当开始扫描的时候,设置一个短小的扫描时间,再进行判断当前二维码是否失效;
  3. 当二维码失效了,显示错误提示;
  4. 当二维码没有失效,显示扫描成功页面,进行确认登录操作;
  5. 当操作“确认登录”,移动端回到扫一扫页面,桌面端跳转到首页;
  6. 当操作“取消登录”,移动端回到扫一扫页面,桌面端的二维码立即失效。

一、如何实现上下移动扫描的效果

提前准备一个扫描的图片,确定好移动的最高点和最低点。想让它不停的移动就要设置一个触发点,触发某个事件就会移动。这里我常用的就是文本输入框(Text Field),因为它有一个交互叫文本改变时。

当页面切换到扫描中的页面时,我们设置一个文本的text,使它的文本进行改变,然后再设置这个文本改变时的交互如下,就可以实现不停的扫描状态了。

二、如何判断当前的二维码状态

当页面跳转到扫描中的状态,就设置开始扫描,我也是利用了文本改变时的交互。当需要扫描的时候设置文本为“扫描中”,利用文本框内容的判断,当文本框text是扫描中,去判断二维码当前的状态。二维码的当前状态,我也是用了一个文本框来存储。

这里要注意几个点,就是很多效果在页面切换之前要设置回到初始状态。不然流程走回来的时候没有在初始状态,会出现错误效果。

三、如何设置二维码失效时间

失效时间,当倒计时结束时就是二维码失效之时。所以设置当倒计时的输入框为“0”的时候,显示失效蒙层即可。

这其中还有一个加载中的效果——就是在扫描成功的时候,切换到确认登录页面的时候,会有一个加载中的效果,来看一下慢动作效果。

想要实现这个效果,首先要做如下准备,画出4个半圆。

因为加载中这个元素本来就是要隐藏的,只有在需要的时候才显示。所以就利用整个元素的“显示时”的交互,首先就是半圆1旋转180度,然后半圆4旋转135度,注意每度旋转时间要一样。利用半圆2、3遮挡后面的半圆1、2,当1、4到指定位置时,再一起旋转。

注意在设置旋转动作的时候,有个更多选项,就是设置旋转的中心点在什么位置,半圆1当然是右边的中心点,半圆4是左边的中心点。

以上就是本原型的核心逻辑啦。

 

本文由 @Eliza-三十 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自 Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 提升留存

    回复
专题
12698人已学习11篇文章
需求评审会议对整个项目想影响至关重要,作为产品经理,应该如何完成需求评审呢?本专题的文章分享了如何高效完成需求评审。
专题
13131人已学习13篇文章
广告是互联网的最大的商业模式,已经逐步形成一个巨大的行业,整个互联网广告也在持续增长中。本专题的文章分享了关于对互联网广告的思考与分析
专题
37091人已学习23篇文章
不知道这些问题,你出去都不敢说自己是做电商运营的。
专题
15869人已学习12篇文章
有效的团队管理对于一个企业来说十分重要。本专题的文章分享了团队管理的方法。
专题
12270人已学习15篇文章
互联网医疗是医疗行业与互联网的综合应用,其以互联网及相关技术为载体和支撑,开展线下传统或线上衍生的医疗健康服务。本专题的文章分享了对互联网医疗的分析和见解。