如何用Axure8.0制作简单的登录窗口分享

如题所述

1、绘制登录窗口
(1)首先,打开Axure8.0,在站点地图里选择一个页面,重命名为“登录窗口”,双击该页面,进入该页面的编辑模式。然后在元件库中拖拽一个矩形元件到线框图面板中,单击右键选择“转化为动态面板”,将其转化为动态面板,并将其命名为“login”

(2)双击login动态面板,选择动态面板的State1,进入状态1的编辑模式。可看到线框图面板中有一个矩形,我们将它调整为适当的大小。
(3)首先,从元件库中拖入一条水平线,作为标题栏的分割线;然后,继续拖入一个三级标题文本标签,修改文本为“登录窗口”,放置在标题栏位置;最后,拖入一个占位符,将其命名为“btn_close”,作为登录窗口的关闭按钮。如下图:

2、绘制登录表单
(1)从元件库中的表单元件中拖入两个文本框元件,一个标签文本,和一个按钮,并在属性面板编辑各个元件的属性:
文本框元件1:命名为“username”,作为用户名输入框,设置提示文本为“请输入您的用户名”;
文本框元件2:命名为“passwords”,作为密码输入框,设置提示文本为“请输入您的密码”,作为密码框,当用户输入文本,应该是以密文的形式展示,因此还需要文本框的类型设置为“密码”;
标签文本:命名为“tip”,作为页面错误提示的文本展示区域,设置文本居中显示,文本颜色为红色;
按钮:命名为“btn_login”,作为登录按钮,设置文本为“登录”;

3、为表单提交添加错误提示
当提交表单时,用户名或密码为空,会有错误提示。因此需要为登录按钮添加用例。
(1)点击“登录按钮”,选择右侧交互面板中的“鼠标单击时”,会出现如下图的用例编辑对话框。此时可以开始编辑用例。

(2)点击“添加条件”,添加的条件则为用户名为空,如下图,if 文字于username=="" 就是表示如果username为空时的意思;

点击确定,回到用例编辑对话框;
(3)选择左侧“添加动作”中的“设置文本”,在右侧的“配置动作”中选择“tip”元件,设置文本为“用户名不能为空”,如下图:

点击“确定”,Case1(用户名不能为空)即完成;接下来可按照以上的步骤完成 Case2(密码不能为空)的情况。
4、错误提示的隐藏
当错误提示后,用户要再次输入时,错误提示应消失。
(1)为元件“username”,添加获取焦点时的用例,设置当username获取焦点时,tip元件的文本为空;元件“passwords”也是;

5、关闭按钮的实现
单击占位符“btn_close”,为其添加鼠标单击时的用例,选择“显示/隐藏”,在“配置动作”栏中选择“login”动态面板,可见性选择“隐藏”,点击确定,完成用例。
至此,一个简单的登录窗口就大致实现。按键盘"F5"键,就可以预览原型啦。
温馨提示:答案为网友推荐,仅供参考
第1个回答  2018-10-13

哈哈哈哈,上面那个回答没有图片看的多痛苦啊。

众所周知,Axure作为一款高保真原型设计软件是非常优秀的,功能强大,学起来又毫不费力,不管对于小白或者有一定经验的产品经理都是最佳的选择。

首先我们打开Axure软件,创建一个页面,命名为“登录窗口”,拖入一个“矩形”元件,鼠标右击,转为动态面板,命名为“登录”。

从元件库中拖入一条“水平线”,作为划分,然后拖入一个“三级标题”,文本改为“登录窗口”接着拖入一个“占位符”命名为“btn_close”,作为窗口的关闭按钮。

根据登录页面的模型,拖入两个“文本框”,两个文本框分别命名为“用户名”和“密码”。一个“复选框”文字改为“记住你的登录状态”,一个“按钮”,输入文字“登录”。

在这里设置文本时,第一个文本框作为“用户名”,第二个作为输入“密码”。然后在属性里面,找到提示文字,输入“用户名”,第二个输入“密码”。在提示文字前面按两个空格,提示样式可以自行设置,比如我设置为“获取焦点”时文字消失:

在这里为了体现更好的交互也可以,在输入用户名或密码时,提醒输入错误。拖入一个“标签框”作为提示:

一个总体的登录界面就算设计出来了,接下来我们需要对登录窗口的用例逻辑进行设置。当用户名输入为空、密码输入为空、用户名输入错误、密码输入错误、用户名和密码正确时都应该有相应的逻辑用例比如我们对登录进行设置。

这里我们以用户名为空,然后提示“请输入你的用户名”为例,点击“登录”交互为“鼠标单击时”:

添加条件,将“用户名”文本框,在条件生成时设置当前为空,如下图所示:

然后将最开始添加的“标签框”设置文本为“请输入你的用户名”。

设置完之后我们可以点击预览,我在没有输入任何文字的情况下,直接点击登录,便会提示我“请输入你的用户名”,如下图所示:

比如我们添加第二个交互,则“密码为空时”,在“密码”文本框作同样设置:

预览时,输入“用户名”,“密码”那一行为空,然后点击登录,就会弹出“请输入你的密码”。

其他的用例交互也同样方法设置。

我是参考网页链接这里的,如果你有需求也可以看看。

相似回答