冷胖Axure8.0图文教程案例分享（京东注册交互原型）

冷胖Axure8.0图文教程案例分享（京东注册交互原型）

• 大家好！很高兴冷胖今天和大家见面了！今天给大家分享是Axure8.0电商注册交互原型
  

• 知识点：条件设置、全局变量、函数、多条件判断

• 版本系统：Axure版本8.0 系统win

这里我们以（2017）京东的注册为模板进行制作，见图1。（如果大家去体验天猫和京东的注册时可以发现，注册会员时会首先弹出<<用户注册协议和隐私政策>>内容，点击同意后才能进行下一步，见图2。把以前注册协议用复选框默认选择的方式给取代了，吐槽下就是与时俱进、符合国情、避免风险，捎带手点个赞）

（图1）

（图2）

第一步 元件准备

拖拽一个矩形元件与文本框元件到设计区域，复制5组同样的元件在设计区域，为了方便调整和复制可以进行矩形与文本框的组合，按照我们要做的模板样式调整元件位置。

接下来我们做各输入框的提醒元件，这里我们用动态面板与文本框进行创建。分为以下内容：

• 用户名提醒元件

  创建动态面板命名为name_error ，给动态面板增加四个State分别命名为：“长度只能在4-20个字符之间”、“请输入用户名”、“用户名不能是纯数字，请重新输入！”、“支持中文、字母、数字”，按名称在每个State中用文本框元件输入相应内容。

• 设置密码提醒元件

  创建动态面板命名为pwd_error，给动态面板增加五个State分别命名为：“长度只能在6-20个字符之间”、“有被盗风险,建议使用字母、数字和符号两种及以上组合”、“安全强度适中，可以使用三种以上的组合来提高安全强度”、“你的密码很安全”、“建议使用字母、数字和符号两种及以上的组合，6-20个字符”。按名称在每个State中利用文本框元件输入相应内容。

• 设置确认密码提醒元件

  创建动态面板命名为pwd_confirm_error，给动态面板增加两个State分别喝命名为：“两次密码输入不一致”、“请再次输入密码”。按名称在每个State中利用文本框元件输入相应内容。

• 设置手机号提醒元件

  创建动态面板命名为mobile_error，给动态面板增加两个State分别命名为“完成验证后，你可以用该手机登录和找回密码”、“格式有误”。按名称在每个State中利用文本框元件输入相应内容。

• 设置验证码提醒元件

  创建动态面板命名为code_error，给动态面板增加三个State分别命名为“请输入图片验证码”、“验证码不正确或已过期”、“看不清？点击图片更换验证码”。按名称在每个State中利用文本框元件输入相应内容。

完成后我们给所有元件进行命名，见图3。code元件与login元在上面没有提到大家不要忘了自己添加上哦，利用矩形元件添加即可。

图3

第二步 元件调整

1. 首先我们看到模板样式中，文本输入框没有边框且点击后获取焦点，所以我们设置每个文本框属性为“隐藏边框”，【隐藏提示触发】设置为“获取焦点”。

2. 我们发现注册时每个边框内容如果输入有误时边框颜色会变为红色，所以我们设置每个矩形选中状态【线段颜色】为红色FF0000。

3. 默认状态下所有提示元件是不显示的，所以我们设置所有提示元件动态面板为隐藏状态。

4. 同样默认状态下所有输入内容确认的小图标（confirm），都是不显示的，我们同样设置为隐藏状态。

第三步 交互设置

一、首先我们来做用户名的交互效果主要效果有以下几个内容：

1. 鼠标点击输入时显示提示元件内容“支持中文、字母、数字、“-” “_” 的组合，4-20个字符”。

2. 文本框中输入纯数字时显示提示元件内容“用户名不能是纯数字，请重新输入！”。

3. 输入符合条件的内容后显示确认小图标confirm。

4. 输入字符小于4个大于20个时显示提示元件内容“长度只能在4-20个字符之间”。

5. 输入用户名已被注册时提示已被注册并给出建议的用户名（此交互在本次案例中未涉及，冷胖会在以后在案例中给大家分享）

我们知道了要做的交互效果接下来我们开始吧：

1. 设置name_inputf元件获取焦点事件，选择name_input元件在元件【属性】面板中双击【获取焦点时】事件，在弹出的【用例编辑器】点击【设置面板状态】在【配置动作中】选择name_error动态面板，设置选择状态为“支持中文、字母、数字、“-” “_” 的组合，4-20个字符”，勾选“如果隐藏则显示面板”，见图4。完成后点击左侧，元件【显示/隐藏】选择元件name_confirm,设置可见性为隐藏，见图5。添加动作【取消选中】【配置动作】选择name_box，值为false点击确定完成设置，见图6。

   图4

   图5

   图6

2. 设置name_input文本改变时效果，选择name_input元件在元件【属性】面中双击【失去焦点时】事件，在弹出的【用例编辑器】单击【添加条件】设置name_input是数字时条件，见图7。点击确认后单击【设置面板状态】在右侧配置动作选择name_error动态面板，设置选择状态为“用户名不能是纯数字，请重新输入！”，勾选“如果隐藏则显示面板”，见图8。添加动作【选中】【配置动作】选择name_box，值为true，见图9。

   图7

   图8

   图9

3. 添加name_input元件【失去焦点时】事件2（Cacs2）,【用例编辑器】中添加条件name_input元件文字长度值<4,条件name_input元件文字长度值>20,注意这里需要设置符合条件为【任何】，见图10。点确定设置name_error动态面板选择状“长度只能在4-20个字条之间”，勾选“如果隐藏则显示面板”，见图11。同样添加动作【选中】【配置动作】选择name_box，值为true，见图12。完成后点击确认。

   图10

   图11

   图12

4. 添加name_input元件【失去焦点时】事件3（Cacs3）【用例编辑器】中添加条件name_input元件文字长度值>=4,条件name_input元件文字长度值<=20、条件name_input元件文文字不是数字，见图13。点确定设置元件显示name_confirm,见图14。设置隐藏动态面板面板name_error，见图15。添加动作【取消选中】【配置动作】name_box设置值为false，见图16。完成后点击确定。

   图13

   图14

   图15

   图16

5. 添加name_input元件【失去焦点时】事件4（Cacs4）【用例编辑器】中添加条件name_input元件文字name_input值为空时，见图17。设置取消选中name_box，值为flase，见图18。设置隐藏动态面板面板name_error，见图19。完成后点击确定。

   图17

   图18

   图19

6. 现在name_input元件【失去焦点时】事件如图20所示，第一个用例中条件是If语句，而其余的三个均是Else if语句。区别在于，在Axure中多用例是自上至下按顺序执行的。If结构语句是始终执行的。Else if结构语句是它上面一个用例未满足条件时，则执行该用例；如果满足条件就不再向下执行。也就是如果Case1满足条件时，就不再向下执行Case2；如果Case1未满足条件时，则向下执行Case2。这里我们四个用例始终执行所以把其余的三个修改为If语句，右击case2在弹出的对话框中选最的一项“转换为<If>或<Else if>”见图21，将case3、case4均进行修改。

   图20

   图21

   上面我们就已经把用户名输入文本框的交互效果完成了，点击预览来验证下吧。冷胖子要去喝杯水你也休息下吧！
   

【简述】上面我们主要是利用当文本框内容发生变化时动态面板的联动效果，及利用条件限制文本框输入内容来与动态面板发生联动事件的效果。

通过以上的学习相信你已经可以独立完成设置密码这个文本框的交互效果了。那么就自己动手来做下吧。

注意的是设置密码与确认密码两个元件的事件要有联动，具体事件交互思路如下：

1、设置密码pwd_input文本改变时事件，

• 首先考虑添加输入密码时，在什么情况下会提醒“有被盗风险,建议使用字母、数字和符号两种及以上组合”，即当输入密码长度大于5个小于11个且输入的内容为纯文字或纯字母时，对是的那么我就可以添加第一个条件事件了，同时注意错误提醒时pwd_box元件应当处于选中状态，还要考虑一个情况就是如果修改已经填入符合条件的密码时pwd_confirm元件是显示的，这里要进行隐藏。

• 然后我们来想下输入密码时在什么情况下会提醒“安全强度适中，可以使用三种以上的组合来提高安全强度”，这里分为两个情况，一种是纯数字或纯字母长度大于10个的时候，另一种情况是当输入内容不是纯数字且不是纯字母输入长度大于5个小于11个的时候。根据这两种情况分别添加条件事件即可，同时不要忘了根据案例来看，密码安全适中时是允许通过的，那么这里需要将pwd_box的选中状态取消，且显示pwd_confirm元件。

• 接下就是在输入密码时什么情况下提示“你的密码很安全”这个应该属于高级别了把，即当输入的密码长度大于10个，不是纯数字也不是纯字母。根据这个情况添加条件事件即可，同样不要忘了将pwd_box的选中状态取消，且显示pwd_confirm元件，这样就会实时的根据我们输入的内容来判定显示了。

• 另外我们这里不要忽略一个小的细节，那就是当输入密码长度小于6个时会提醒“建议使用字母、数字和符号两种及以上的组合，6-20个字符”那么我同样添加一个条件事件即可，同时将pwd_box的设置为选中状态，且隐藏pwd_confirm元件。这样我们文本改变时的事件就都添加完成了，将<Else if>语句修改为<If>预览下看看效果吧。

2、设置密码pwd_input文本获取焦点时事件，我们看到当文本框获取焦点时提示“建议使用字母、数字和符号两种及以上的组合，6-20个字符”这里我们添加相应事件即可但要注意的是我们在输入内容时同样属于获取焦点，那么事件就会冲突，所有这里需要添加条件为当pwd_input内容为空时显示。

3、设置密码pwd_input文本失去焦点时事件。第一种情况内容为空时取消选中pwd_box、隐藏pwd_confirm、隐藏pwd_error。第二种情况，输入内容文字长度小于6大于等于1时，我们要提醒用户“长度只能在6-20个字符之间”同时pwd_box元件为选中状态。第三种情况，输入内容长度为大于5个小于11个的纯数字或字符时需提示“有被盗风险,建议使用字母、数字和符号两种及以上组合”案例中提示的文字为红色，这里我们给pwd_error添加一个State内容为“有被盗风险,建议使用字母、数字和符号两种及以上组合”字体为红色，设置显示该State即可。

4、设置密码pwd_input文本失去焦点时事件，与pwd_confirm_input的联动效果，这里需要考虑当pwd_confirm_input已经有了内容，这时修改pwd_input后pwd_input元件失去焦点情况有两种，一种是内容相同一种是内容不同。相同时显示pwd_confirm_confirm元件，隐藏pwd_confirm_error元件，不同时隐藏pwd_confirm_confirm元件，取消选中pwd_confirm_box，设置pwd_confirm_error显示“两次密码输入不一致”。

以上我们对设置密码pwd_input元件的所有交互事件就都完成了，是不是有些小激动预览看下效果吧。接下来我们来给pwd_confirm_input元件设置交互事件。

5、确认密码pwd_confirm_input获取焦点时事件，当pwd_confirm内容为空时需要提示“请再次输入密码”，当pwd_confirm内容不为空时需要提示“两次密码输入不一致”，根据以上条件为pwd_confirm_input添加条件事件。

6、确认密码pwd_confirm_input失去焦点时事件，当pwd_confirm_input内容等于pwd_confirm时，显示pwd_confirm_confirm元件，隐藏pwd_confirm_error动态面板，同时取消pwd_confirm_box元件选中状态。当pwd_confirm_input内容不等于pwd_confirm时，显示pwd_confirm_error动态面板提示两次密码输入不一致，设置pwd_confirm_box元件为选中状态。当pwd_confirm_input元件值为空时，隐藏pwd_confirm_error动态面板，同时取消pwd_confirm_box元件选中状态。

以上我们对确认密码pwd_confirm_input的交互事件也已经完成了。不要忘了要将<Else if>语句修改为<If>。因为涉及的知识点与前面用户名设置时的大体相同，所以这里就没有细致的截图讲解，如果有操作上的问题欢迎向冷胖咨询。

二、接下来和大家分享手机号码验证的交互效果

首页我们需要确认的我们要设置的是输入手机号的对话框，那么这里应该只允许用户输入11位字符，验证时需要验证用户输入的值为11位纯数字且前三位为手机号段，这里我们设置的号段为前两位是13、15、17、18后9位为任何数字的11为数字。

1、设置mobile_input元件属性最大长度为11，见图22

图22

2、设置mobile_input元件事件。

• 当mobile_input内容为空获取焦点时显示提示内容“完成验证后，你可以用该手机登录和找回密码”这里我们添加mobile_input【获取焦点时】事件设置条件mobile_input内容为空时显示mobile_error动态面板显示“完成验证后，你可以用该手机登录和找回密码”，见图23、图24。

图23

图24

• 当mobile_input内容为失去焦点时事件，失去焦点时需要判定输入内容是否正确，这里我们首先设置正确时的情况事件。为mobile_input添加【失去焦点时】事件，设置条件mobile_input是数字 、mobile_input元件长度值为11、前两位值是13、15、17、18（我们用到字符串函数substr(start,length) 函数公式为：[[this.text.substr(0,2)]]，其中this为当前元件对象，text为文字、substr（0，2）为位置为从0开始的两位字符，合起来就是获取当前元件文字中从0开始的前两位字符）步骤见图25、26、27、28、29、30。当满足以上条件后我们设置的是显示mobile_confirm元件、隐藏mobile_error动态面板，设置mobile_box为取消选中状态。

  设置元件长度和限制为数字

图25

• 设置元件值前两位
  

图26

图27

图28

图29

图30

• 接下来我们来设置当输入内容不正确时，那们我只复制正确时的事件只要将条件中的是改为否，等于改为不等于就好了，然后设置mobile_box为选中状态，设置mobile_error动态面板显示“格式有误”。这样我们就完成手机号的设置。这里我们阉割了实例中选择国家的交互，在后面冷胖也会带给大家的。怎么突然感觉欠大家好多了呢，O(∩_∩)O哈哈~等等差点忘了我们还有一个交互事件，那就是失去焦点且mobile_input内容为空时mobile_error显示“完成验证后，你可以用该手机登录和找回密码”，这样我们就完成了。相信大家通过以上的学习这个就是毛毛雨了。

三、我们来设置验证码的交互事件。

首先我没来设置code获取4位随机的数字加字母显示且点击后进行变换。

1、我们在设计区域添加一个文本元件并输入内容“ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz1234567890”这个文本元件就是我们验证码的号码源将其命名为source。

2、给code元件添加页面载入时显示验证码事件

我们在code元件属性里点击更多事件，找到【载入时】单击。添加设置文本动作，选择code元件然后点击【fx】按钮，打开【编辑文本】的界面，见图31。

图31

我们这里用到随机数的函数random()、向下取整函数floor(x)，获取字符串中指定位置的字符函数charAt(index)。我们首先来看获取字符的位置指定source的随机位置的整数。随机整数我们字符一共为62个字符那么这里我们随机位置就是，随机数*62，所以我们获取一个字符的公式为[[LVAR1.charAt(Math.floor(Math.random()*62))]]这们我们如果要获取4个只要复制四次即可，见图32

图32

3、我们在点击code元件时需要更换验证码，就是需要变更随机获取的值，这里我们给code添加鼠标点击时事件，复制已经设置好的载入时事件到鼠标点击时即可，复制完成后将 source原件设置为隐藏。这个我们验证码的功能就完成了。但是我们还要对code_input输入的值进行验证。那么我们继续进行。

4、code_input事件包含，

• 当获取焦点且内容为空点击code_input元件输入内容时，code_error动态面板显示“看不清？点击图片更换验证码”

• code_input元件内容不等于code元件内容时时点击Obtain元件提示“验证码不正确或已过期”

• code_input为空时点击Obtain元件提示“请输入图片验证码”

知道了上面在事件，相信通过我们上面的分享你也可以独立完成了。这里就不给大家详细介绍了。就当给大家的作业吧

鸣谢！到这里本期京东注册交互原型的所有内容就和大家分享完了，冷胖没有忘了欠大家的内容哦，下期我会给大家呈现，欢迎大家关注冷胖。冷胖只做最新的案例分享，如果大家有想要学习的可以和冷胖说，我会尽量满足大家的需求。我们下一期见！

此文为看点（冷胖Axure）原创内容，特此声明