主页 > 饮食 > > (axure怎么做登陆页面)axure
最佳回答 最佳答案

本回答由网友推荐

人间风情


1、绘制登录窗口(1)首先,打开Axure80,在站点地图里选择一个页面,重命名为“登录窗口”,双击该页面,进入该页面的编辑模式。
然后在元件库中拖拽一个矩形元件到线框图面板中,单击右键选择“转化为动态面板”,将其转化为动态面板,并将其命名为“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"键,就可以预览原型啦。
没看懂什么意思?

赞同 (75127)

反对 (105)

其它回答
╰つ泯灭

第一步,打开AxureRP8软件,找到“RoundedRectangle”,拖出一个到Home页面第二步,拖出两个“Label”和两个“TextField”到Home界面,并修改了Label标签内容第三步,再拖出两个“LinkButton”、一个“VerticalLine”、一个”Checkbox“和两个”HTMLButton“,并修改其显示的内容第四步,为了限制用户名、密码输入,将用户名长度限制为20,密码长度也为20,并且显示成密码格式输入第五步,给”忘记“和”注册“添加链接,一个链接到”Page1“,另一个链接到”Page2“最后一步,在浏览器上预览,点击”忘记“或”注册“
1、打开axurerp8软件,找到“roundedrectangle”,拖出一个到home页面,如下图所示:
2、拖出两个“label”和两个“textfield”到home界面,并修改了label标签内容,如下图所示:
3、再拖出两个“linkbutton”、一个“verticalline”、一个”checkbox“和两个”htmlbutton“,并修改其显示的内容,如下图所示:
4、为了限制用户名、密码输入,将用户名长度限制为20,密码长度也为20,并且显示成密码格式输入,如下图所示:
5、给”忘记“和”注册“添加链接,一个链接到”page1“,另一个链接到”page2“,如下图所示:
6、在浏览器上预览,点击”忘记“或”注册“,如下图所示:

赞同 (80396)

反对 (769)

偶尔平凡

背景,文本框,密码框,登录按钮,注册按钮,在按钮添加用例并进行简单的非空校验方法/步骤1首先,打开axurerppro65,新建页面,这时会出现一个home,三个page,如下图所示:
2接着,从视图窗口拖出两个textfield,移动到编辑窗口,并修改显示的文字,如下图所示:
3然后,再拖两个按钮到编辑框,修改显示的文字为“登录”和“取消”,如下图所示:
4一般登录界面都会有“记住我”这个功能,即是下次登录不需要输入密码,这里添加一个复选框,如下图所示:
5有时登录界面会有一个自动登录的功能,这里我也设计一个,利用复选框设计自动登录,如下图所示:
6接着,给账号和密码输入框设置限定,如字符长度、密码显示等

赞同 (10489)

反对 (254)

柠檬酸ゞ

如果是单个就很简单,如果是多个的话,可能再条件设置上会有点纠结,不是难,就是要求很细心,逻辑要很清晰,下面的是单个的简单步骤:
一、直接用一个动态面板(覆盖整个页面的大小)打开面板,用一个矩形1覆盖整个面板,然后将矩形1的填充颜色设置成黑色加透明度60%;
二、在矩形1的中间加个矩形2,大小就是你想要的图片显示大小;
三、加个关闭的叉叉,onclick后关闭动态面板,或者也可以是点击图片外的区域关闭图片;
四、活到原来的页面,将图片位置的onclick设置为打开面板,具体效果可以自己设置;
五、在页面交互上选择隐藏面板。
这个只是简单的效果,如果需要更好的效果就需要自己摸索了!

赞同 (62385)

反对 (826)

笑羞容

可实现模拟登录效果,判断输入框输入的值是否正确(ifelse),然后跳转都另外的页面(可查看我的个人主页中的链接,有demo查看)1制作一个动态面板2将一个正向界面放置动态面板state1中3将一个翻转界面放置同一动态面板state2中4给state1一个交互用例,做一个鼠标移动或失去焦点的用例,连接state2

赞同 (11180)

反对 (689)

花落无痕

这需要用到动态面板1,从组件中将动态面板组件拖放到页面,点击右键,选编辑动态面板,选设为隐藏。
2,双击动态面板,编辑状态,在状态1里,设计好你的注册页面(动态面板默认显示的是第一个状态也就是最上面的)3,回到主页,编辑注册按钮的onclick事件,选择显示动态面板,很简单,试试吧不会再留言问我

赞同 (68319)

反对 (954)

热心人

输入框+按钮+动态面板,进行条件动作设置就可以实现,自己多试试就能弄出来。
小建议:不要陷入Axure强大的功能漩涡中。

赞同 (23817)

反对 (363)

相关百科

(密致酱油是怎么做的)酱油的密度是

有一个比较秘密的方法,因为以前我爷爷是在饭店工作的。1、把猪肥肉熬成清油,熬成猪肥膘成黑黄色,油可以清澈见底。下面时在酱油上加点,味道鲜美...全文

等你回答

换一换