Axure实战——实现登录注册功能

背景

在做系分项目原型的时候，我需要做一个简单的登录注册模块。但要实现这个功能，只是看我之前写的博客中的相关教程是远远不够的。因此，我需要重新开始摸索，便有了这篇博客。

为了完成该功能，我们需要用到两个Axure中非常强大、但又硬核的内容——全局变量和中继器。

全局变量

在前文中，我曾说过：“原型工具就是用做PPT的方式制作APP的外壳”。但比PPT更高级的是，Axure做的原型是有“状态”的，即它可以存储一些数据。相信在座各位都学过编程，那么大家对“全局变量”也有一定的概念了，我也不再赘述。

中继器

“中继器”这个名词很难在字面上了解它的意思，在此，我就引用别人的理解，帮助大家认识中继器：

中继器就像是一个巨大的容器，可以装载任意内容，编辑中继器就如同编辑一个崭新的页面，在里面可以任意自由地添加元件并进行界面布局，甚至为这些元件添加交互。中继器又好像一个本地化的微型数据库，通过前端页面实现对数据的管理。

在这篇博客中，我们将利用中继器的“数据库”特性，来完成注册信息的存储。

正文

基本布局

首先，我们将所需要的元素拉取到页面内。既然要做的是登录注册功能，必要的元素无非是两种基本的表单元件：

• 文本框
• 提交按钮

除此以外，如前文所说，我们还需要一个中继器，作为记录注册信息的数据库。

在拉取了所需了元素后，我们只需要对其做一些基本的、简单的布局就好了，没必要把时间浪费在样式和布局上。在我看来：做原型也应该像做软件一样，要有快步走，多回头的迭代思维。又如潘Sir常说的：“先做到，再做好”，故早期我们不应该把太多时间浪费在细节问题上，先完成功能点再考虑UI和UX。

此后，我还建议大家给重要的、需要实现交互的元件认真地命名。一方面，是因为在之后设计交互时需要多次选择特定元件，一个可读性高的名字可以帮助我们快速定位元件；另一方面，Axure的元件就像程序里的参数一样，为参数设计可读性高的参数名从来都是编程界的好习惯，不是吗？

中继器设置

1. 双击中继器，进入中继器的设置页面；
2. 将中继器中的默认的矩形命名为Account，然后增加一个新矩形并命名为Password；
   
3. 清空中继器的默认数据；
   
4. 在中继器中新增一个column1;
   
5. 双击右侧Case 1，并勾选两个矩形，将Account矩形和Password矩形分别指向Column 0和Column1；
   
   

注册功能

1. 单击选择“注册”按钮，并双击右侧的“鼠标单击时”选项，为注册按钮添加事件；
   
2. 选择“中继器”选项下的“添加行”事件，并勾选中继器以配置动作，随后点击下方的“添加行”按钮；
   
3. 在弹出窗中，点击Column0(对应中继器中的Account矩阵)旁的fx按钮；
   
4. 如下图进行配置(accountInput_register为注册的账号输入文本框名字);
   
5. 以同样的方式配置Column1;
   

完成了上述步骤后，我们就可以预览页面效果：输入账号和密码后点击“注册”，可发现中继器能成功地记录我们输入的信息，说明我们已经成功地完成了注册功能了。

登录功能

1. 单击选择“登录”按钮，并双击右侧的“鼠标单击时”选项，为登录按钮添加事件；
   
2. 双击"Case 1"，直接添加动作；
   
3. 添加以下条件，其中"Account"为中继器的Account矩形、"accountInput_login"为登录页面的账户输入框，其余同理；
   
4. 我们可以增加一个页面跳转动作以判别登录是否成功，如下图：
   

完成了上述步骤后，我们就可以预览页面效果：先注册一个账号，然后使用该信息登录。点击登录按钮后，原型成功跳转到另一个页面，说明我们成功地用注册的信息完成登录了！

总结

至此，我们已经成功地用中继器实现了非常基本又很常用的登录、注册功能。随后我们只需要添加一些细节优化，如：

• 将密码输入框的样式设为“密码”，这样在输入的字符就会被加密
• 设置密码验证，要求用户在注册时输入两次相同的密码
• 加页面跳转功能
• …

但相比完成登录注册功能，上面的优化并不难实现。总而言之，在做项目的时候，我们还是要“先做到，再做好”，如果只是作为一个简单的原型，我们能完成本教程的内容已经足够了。