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

图片[1]-怎么样在Axure里面制作多角色登录的原型模板,实现高保真登录效果-4747i站长资讯

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

原型地址:#g=1

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

状态 1(用户选择页面)

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

图片[2]-怎么样在Axure里面制作多角色登录的原型模板,实现高保真登录效果-4747i站长资讯

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

图片[3]-怎么样在Axure里面制作多角色登录的原型模板,实现高保真登录效果-4747i站长资讯

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

状态2(个人用户登录页面)

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

图片[4]-怎么样在Axure里面制作多角色登录的原型模板,实现高保真登录效果-4747i站长资讯

返回图标的交互:设置面板状态,将动态面板设置回状态1(用户选择页面)。

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

图片[5]-怎么样在Axure里面制作多角色登录的原型模板,实现高保真登录效果-4747i站长资讯

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

图片[6]-怎么样在Axure里面制作多角色登录的原型模板,实现高保真登录效果-4747i站长资讯

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

图片[7]-怎么样在Axure里面制作多角色登录的原型模板,实现高保真登录效果-4747i站长资讯

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

图片[8]-怎么样在Axure里面制作多角色登录的原型模板,实现高保真登录效果-4747i站长资讯

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

图片[9]-怎么样在Axure里面制作多角色登录的原型模板,实现高保真登录效果-4747i站长资讯

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

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

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

图片[10]-怎么样在Axure里面制作多角色登录的原型模板,实现高保真登录效果-4747i站长资讯

状态 3(企业用户登录页面)

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

图片[11]-怎么样在Axure里面制作多角色登录的原型模板,实现高保真登录效果-4747i站长资讯

返回图标的交互:同上,设置面板状态,将动态面板设置回状态1(用户选择页面)。

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

状态 4(内部登录页面)

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

图片[12]-怎么样在Axure里面制作多角色登录的原型模板,实现高保真登录效果-4747i站长资讯

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

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

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

------本页内容已结束,喜欢请分享------

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

© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容