AxureRP6.5原型设计-模拟网站登录功能

AxureRP不但能画线框图,也能模拟一些简单的网站功能,比如网站登录。要记录用户的登录状态,在服务器端一般是用Session,在AxureRP中则要借助于全局变量。

我做的一个网站的原型,简单实现了登录功能,在顶部能反应登录的状态,其实这就是一个动态面板的两个state
AxureRP6.5模拟网站登录功能
导航的最后一项登录前是Login,登录后是Logout,也是通过一个动态面板的两个state实现:
AxureRP6.5模拟网站登录功能

首先顶部这个动态面板命名为topbar,让它拥有两个state。
先建立两个全局变量logged和logusername,State1结构如下图,
点击Login按钮,添加两个事件:logged赋值为1表示已登录,logusername存储左边输入框输入的值,也就是用户名;刷新(Reload)当前页面。
AxureRP6.5模拟网站登录功能

State2结构如图,这里是登录后的显示,不需要添加事件,只把图中的字符框命名为usernameLogged:
AxureRP6.5模拟网站登录功能

然后把这个动态面板转成Master,以便在任何页面都能直接调用,在Master的页面加载里面添加如下事件:
假如logged为1(表示已登录),则topbar面板进入State2(登录后显示的面板);并且在把usernameLogged的值写成“welcome, [[logusername]]”,这里的欢迎语可以随便写,[[logusername]]就是要包含的用户名变量。
AxureRP6.5模拟网站登录功能

导航这个动态面板navigator,也是两个State,把它转成一个Master,添加如下事件:
假如logged为1(表示已登录),navigator直接跳到State2
AxureRP6.5模拟网站登录功能

到这里,登录的功能就实现了,但别着急结束,有登录就要有登出啊!
登出很简单,进入navigator的State2,添加事件:
设置logged为0(表示非登录状态),设置logusername为空值;最后跳转到网站登录页面
AxureRP6.5模拟网站登录功能
这样一个简单的登录功能就算完成了,不过别忘了在登录页面也加上同样的登录功能,这里就不重复了。

其实我们还能用AxureRP做更复杂的登录模拟,比如实现简单的密码判断,记录更多的用户变量以显示在页面上。这些都是基于AxureRP中的全局变量功能实现的,都很简单,就不详述了。
在菜单Wireframe-Manage Variables窗口,全局变量可以随意增加删除和改名。
AxureRP6.5模拟网站登录功能
如果修改了变量名,在整个项目的所有关联事件中的对应的这个变量名会自动改变,AxureRP功能很强大啊!但我个人不建议这么做,在更复杂的原型设计中,这种牵一发动全身的变量名可能会牵扯到很多未知的问题。

本站所有文章均为原创,欢迎转载,请注明文章出处:https://blog.brain1981.com/165.html。百度和各类采集站皆不可信,搜索请谨慎鉴别。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以查看本文的最新版本。

如本文对你有用,请在页面右侧栏扫码领取我的支付宝红包,作为打赏吧 (喂到底是我赏你还是你赏我啊-_-!)

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

发表评论

电子邮件地址不会被公开。 必填项已用*标注