背景
在做系分项目原型的时候,我需要做一个简单的登录注册模块。但要实现这个功能,只是看我之前写的博客中的相关教程是远远不够的。因此,我需要重新开始摸索,便有了这篇博客。
为了完成该功能,我们需要用到两个Axure中非常强大、但又硬核的内容——全局变量和中继器。
全局变量
在前文中,我曾说过:“原型工具就是用做PPT的方式制作APP的外壳”。但比PPT更高级的是,Axure做的原型是有“状态”的,即它可以存储一些数据。相信在座各位都学过编程,那么大家对“全局变量”也有一定的概念了,我也不再赘述。
中继器
“中继器”这个名词很难在字面上了解它的意思,在此,我就引用别人的理解,帮助大家认识中继器:
中继器就像是一个巨大的容器,可以装载任意内容,编辑中继器就如同编辑一个崭新的页面,在里面可以任意自由地添加元件并进行界面布局,甚至为这些元件添加交互。中继器又好像一个本地化的微型数据库,通过前端页面实现对数据的管理。
在这篇博客中,我们将利用中继器的“数据库”特性,来完成注册信息的存储。
正文
基本布局
首先,我们将所需要的元素拉取到页面内。既然要做的是登录注册功能,必要的元素无非是两种基本的表单元件:
- 文本框
- 提交按钮
除此以外,如前文所说,我们还需要一个中继器,作为记录注册信息的数据库。
在拉取了所需了元素后,我们只需要对其做一些基本的、简单的布局就好了,没必要把时间浪费在样式和布局上。在我看来:做原型也应该像做软件一样,要有快步走,多回头的迭代思维。又如潘Sir常说的:“先做到,再做好”,故早期我们不应该把太多时间浪费在细节问题上,先完成功能点再考虑UI和UX。
此后,我还建议大家给重要的、需要实现交互的元件认真地命名。一方面,是因为在之后设计交互时需要多次选择特定元件,一个可读性高的名字可以帮助我们快速定位元件;另一方面,Axure的元件就像程序里的参数一样,为参数设计可读性高的参数名从来都是编程界的好习惯,不是吗?
中继器设置
- 双击中继器,进入中继器的设置页面;
- 将中继器中的默认的矩形命名为Account,然后增加一个新矩形并命名为Password;
- 清空中继器的默认数据;
- 在中继器中新增一个column1;
- 双击右侧Case 1,并勾选两个矩形,将Account矩形和Password矩形分别指向Column 0和Column1;
注册功能
- 单击选择“注册”按钮,并双击右侧的“鼠标单击时”选项,为注册按钮添加事件;
- 选择“中继器”选项下的“添加行”事件,并勾选中继器以配置动作,随后点击下方的“添加行”按钮;
- 在弹出窗中,点击Column0(对应中继器中的Account矩阵)旁的fx按钮;
- 如下图进行配置(accountInput_register为注册的账号输入文本框名字);
- 以同样的方式配置Column1;
完成了上述步骤后,我们就可以预览页面效果:输入账号和密码后点击“注册”,可发现中继器能成功地记录我们输入的信息,说明我们已经成功地完成了注册功能了。
登录功能
- 单击选择“登录”按钮,并双击右侧的“鼠标单击时”选项,为登录按钮添加事件;
- 双击"Case 1",直接添加动作;
- 添加以下条件,其中"Account"为中继器的Account矩形、"accountInput_login"为登录页面的账户输入框,其余同理;
- 我们可以增加一个页面跳转动作以判别登录是否成功,如下图:
完成了上述步骤后,我们就可以预览页面效果:先注册一个账号,然后使用该信息登录。点击登录按钮后,原型成功跳转到另一个页面,说明我们成功地用注册的信息完成登录了!
总结
至此,我们已经成功地用中继器实现了非常基本又很常用的登录、注册功能。随后我们只需要添加一些细节优化,如:
- 将密码输入框的样式设为“密码”,这样在输入的字符就会被加密
- 设置密码验证,要求用户在注册时输入两次相同的密码
- 加页面跳转功能
- …
但相比完成登录注册功能,上面的优化并不难实现。总而言之,在做项目的时候,我们还是要“先做到,再做好”,如果只是作为一个简单的原型,我们能完成本教程的内容已经足够了。