摘要:本篇Axure教程探讨了产品原型设计工具使用,希望阅读本篇文章以后大家有所收获,帮助大家对Axure的掌握更加深入。
今天就用axure一步步教大家做出一个简单的仿土豆网注册的页面,该页面效果图如下:
1:下载安装axure,由于安装过程简单,我就不赘述了;
2:打开axure,重命名相关页面:
3:双击节点“注册页面”,进入到注册页面的编辑界面,拖拽两个占位符到右边的编辑区,分别表示页头和页尾,然后拖一个矩形到中间,表示我们的注册表单区:
4:利用文本面板和文本框表示文字和输入框,文字大小样式可以在工具栏编辑,效果如下:
5:增加链接文字,将线框图中的超链接拖到编辑区,输入相关文字后在右边的部件属性框中双击Onclick事件,弹出事件编辑框,由于我们希望点击“注册一个吧”后,重新打开一个页面(邮箱注册页面),第一步描述用例,名称可以随便取,第二步添加动作,我们选择在新窗口/新标签页中打开链接,第三步组织动作,我们单击一下新增的用例,然后第四步配置动作,我们选择链接的页面邮箱注册页面,确定即可:
6.由于验证信息初始化的时候是隐藏的,所以我们需要对那些红色的提示文字进行编辑,右键红色文字,然后转换为动态面板,并且给它命名,用于标识这个控件,最后右键它,设置隐藏:
7:将email输入框获取焦点时清空里面的提示文字,首先点击输入框,给它起个名字text_email,然后在右边的事件框中双击OnFocus事件,第二步选择“设置变量/部件值”,第四步中打开设置编辑器,设置如下:
8:将email输入框跟验证信息进行动态绑定,我们的思路是这样的,当email输入框失去焦点时,如果里面的内容是空的,我们就显示红色的验证文字,然后如果用户输入了相关信息我们就因此验证文字。首先单击email输入框,在右边的事件编辑框中双击OnLostFocus,第二步添加动作中选择显示动态面板,第四步中选择要显示的动态面板check_email,此时需要添加条件(输入框内容为空我们才能显示这个验证的动态面板),条件设置如图所示:
然后我们再来编辑onkeyup事件,如果输入内容不为空我们就隐藏验证信息,双击右边的onkeyup事件,第二步添加动作选择隐藏动态面板,第四步中选择我们需要隐藏的面板名称check_email,同样添加条件,设置如下:
9:按照同样的方式配置其他的输入框和文字信息,其中验证码图片用的是图像部件,然后还用到了复选框和按钮,最终效果如下:
10:再在右方添加一个图片:
11:界面基本完成了,下面我们来导出html页面看看效果,点击工具栏中的生成-》原型,基本按照默认生成就行了,最终页面打开效果如下:
本文由职坐标整理并发布,了解更多内容,请关注职坐标常用软件Axure频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号