怎么样在Axure里面制作多角色登录的原型模板，实现高保真登录效果

多角色登录是很多系统都需要具备的功能。例如，在招聘网站中，登录角色包括求职者、招聘公司HR、猎头、内部员工等。所以今天我们要学习如何在 Axure 中制作一个多角色登录的原型模板。制作完成后，我们可以选择不同类型的用户进入不同的页面，我们可以使用来记住不同的类型。用户的账号密码，达到高保真登录的效果。

原型地址：#g=1

这里我们直接使用动态面板。本例动态面板有4种状态，分别是状态1（用户选择页面）、状态2（个人用户登录页面）、状态3（企业用户登录页面）、状态4（内部员工登录页面）

状态 1（用户选择页面）

如下图，用户选择页面比较简单，包括提示文字（请选择您的身份登录），3个选项（矩形+图标），如下图所示。

这个页面的交互也很简单。当鼠标点击个人用户时，我们可以通过设置面板状态的交互，将动态面板设置为个人用户登录页面。

同理，当鼠标点击企业用户时，通过设置面板状态的交互，将动态面板设置为企业用户登录页面，当鼠标点击内部员工时，将动态面板设置为内部员工使用交互设置面板状态。登录页面。

状态2（个人用户登录页面）

个人用户登录页面主要包括返回图标、文本标签（个人用户登录）、输入框（手机号和密码）、登录按钮、错误提示弹窗、背景图片和中继器，如图以下。

返回图标的交互：设置面板状态，将动态面板设置回状态1（用户选择页面）。

登录按钮：鼠标点击登录按钮时，首先要判断手机号是否为空。如果为空，则设置提示弹窗输入手机号码的位置。

然后显示错误弹出窗口。如果密码输入框为空，则将提示弹窗的文字设置为请输入密码。

最后还要判断手机号和密码是否正确。这里需要一个中继器。中继器的作用是判断手机号和密码是否一一对应。中继器包含两列和，我们可以在其中填写默认的个人用户电话号码和相应的密码。这里的中继器只用于录音html输入框提示文字，所以可以默认隐藏，也可以删除内部矩形。

回到用鼠标点击登录按钮的交互。如果上面的手机号和密码框不为空，那么我们需要先过滤中继器。过滤条件为栏的值等于手机号输入框中的值。内容，该列的值等于密码输入框中的值。

过滤后，需要检查中继器的可见条数，即过滤完成后html输入框提示文字，中继器是否还有显示内容。我们可以用函数做统计。一般来说，结果只会出现1或0，如果等于0，就证明我们输入的手机号和密码组有误。这是我们设置错误信息为手机号码或密码错误的文字，并显示错误信息的弹窗；

如果结果等于1，说明我们输入的手机号和密码正确，可以匹配，那么就可以完成登录了。一般来说，它会跳转到首页或上一页。我们使用打开链接的交互就行了。

如果结果大于 1，则证明有 2 组或更多组相同的手机号和密码。这可能是因为我们不小心填错了初始数据。

最后是错误提示弹窗的交互：默认隐藏。如果触发了以上三个错误，就会显示出来。这是一个软提示，3秒后可以隐藏提示。

状态 3（企业用户登录页面）

其实企业用户的界面和个人用户的登录界面类似，包括返回图标、文本标签（企业用户登录）、两个输入框、登录按钮、错误提示弹窗、背景图片、中继器、不同的是，企业用户一般用企业邮箱登录，个人用户用手机号登录。我们可以复制上面的个人页面，然后修改文字、图片和布局。

返回图标的交互：同上，设置面板状态，将动态面板设置回状态1（用户选择页面）。

登录按钮和弹窗的交互逻辑同上，只是设置提示的具体文字发生了变化。如果是复制的，只需要简单修改转发器中的文字内容、图标、背景、密码即可。群里设置的提示文字和互动就够了。

状态 4（内部登录页面）

内部员工登录页面与上述两个登录页面的材料相同，只是文字和背景有所改变，登录输入的不是手机号或企业邮箱，而是员工号。

交互也是一样的，我们可以简单的修改三种错误状态下的提示弹窗文字。

这样，我们就完成了多角色登录的原型模板。如果以后想添加角色页面，也很简单。您只需要复制一个登录页面，您只需更改文本、图标和背景。

文章来源:https://www.163.com/dy/article/GTGOLN2B0511805E.html

感谢您的来访，获取更多精彩文章请收藏本站。