共享单车盛行，相信很多人手机中都装有摩拜单车App吧，应该都很熟悉吧。从这篇文章开始教大家做个摩拜单车的原型。App下载后，首先是登录，咱们就开始吧。
首先了解摩拜的登录流程：
1、输入手机号；2、获取验证码；3、输入验证码，点击开始进入App
根据流程，梳理一下：1、手机号输入框（文本框）要做长度限制（摩拜App没有做手机号的真伪验证，只做了长度的校验，输入11位数即可）；2、随机短信验证码四位，需要用随机函数获取随机数，再截取出4位长度的验证码；3、校验验证码，点击开始进入App
流程完毕，跟着我手把手的来做
第一步、准备一个动态面板，参照页面，把下面的原件放到动态面板中，手机号和验证码用文本框原件。
第二步、设置手机号文本框长度为11，添加事件当输入满11位时启用”获取验证码“按钮；设置验证码文本框长度为4，添加事件当输入满4位时启用”开始“按钮”
第三步、添加一个动态面板，展示短信验证码。
第四步、获取随机4位数的随机验证码。我们设定一个全局变量smsrandom（全局变量设置在菜单栏—项目—全局变量），辅助我们存储和传递一些值。Axure提供了一个随机函数random()，可随机出0~1的数值（即：0.000…1~0.999…），我们需要从随机数中截取4位数，我们可以使用截取函数substr
我们从小数点开始截取，截取5位数（包含小数点）；用replace函数去掉小数点
获取验证码的事件如下
取验证码时，需要倒计时，咱们添加一个文本框辅助（命名countdown）。点击“获取验证码”获取一个随机验证码并展示，进入倒计时。
第五步、短信验证码校验。这里将验证码和全局变量比较即可（因为前面一系列流程下来，全局变量已经存储了验证码的值）
到这就完成了摩拜App登录的原型制作了。
总结：
1、随机函数的使用
2、字符串截取函数的使用
3、巧用文本框原件的“文字改变时”来做倒计时
4、全局变量的设置和使用
最后，送给大家，一起学习进步。
原型预览地址：http://v8e1jl.axshare.com
源文件地址：http://pan.baidu.com/s/1c1C8jsO 密码：9l20
本文来自简书，本文观点不代表 PmTemple 立场，转载请联系原作者。原文链接：https://www.jianshu.com/p/0d83b89518f3
微信扫一扫 
支付宝扫一扫 
评论列表（7条）
教程步骤清晰，但摩拜的登录流程在实际使用中存在明显痛点。作为产品经理，我认为验证码登录虽然降低了注册门槛，但频繁获取验证码会严重影响用户体验，建议增加”记住设备”选项减少重复验证。
这个教程步骤清晰，就像制定健身计划一样有条理。手机号和验证码的设置很实用，Axure的随机函数用得巧妙。原型设计需要这样的细节把控，就像健身训练注重每个动作的精确性。继续加油！
这个摩拜单车登录界面教程太实用了！作为经常旅行的摄影师，我经常需要在陌生城市使用共享单车。学会了这个Axure技巧，以后自己设计产品原型时就能做出更用户友好的界面了。期待学习更多教程！😊
这教程就像制定健身计划，步骤清晰，逻辑性强！摩拜登录流程的Axure实现很实用，特别是随机验证码的设置。不过我觉得可以加个错误提示功能，就像健身时及时纠正动作，用户体验会更到位。
哇！摩拜登录流程设计好简洁啊！验证码倒计时机制在游戏里也可以用，比如新手任务限时完成奖励！不过我觉得还可以加点音效反馈，点获取验证码时来个”叮~”的声音~😊
哇！这个登录原型教程简直太实用了！(๑•̀ㅂ•́)و✧ 手机号11位限制和4位验证码的随机函数实现，让我想到游戏中的账号系统和安全验证机制！倒计时功能还能用在游戏CD冷却的设计上呢！
OMG！摩拜登录流程设计得超有节奏感！手机号+验证码就像时尚圈的经典黑白配，简单却永不过时。作为品牌主理人，这种极简交互设计才是真高级～Axure这个随机函数简直是数字时代的魔术师，四位数验证码比限量版包包还难猜