Axure RP6 学习笔记(2)

news/2024/7/5 10:17:29
 

学习资料【Axure 快速原型设计Axure Rapid Prototyping 作者:陈良泳】

    以学习的习惯,先来一个例子~~~

第一个实例  简单登陆界面

案例描述 

 这是一个较为简单的登陆界面,输入用户名、密码后,点击登陆按钮进行登陆校验:

 1.  如果未输入用户名或密码,则提示“请输入用户名和密码”,红色字体;

 2.  如果用户名或密码错误,则提示“用户名或密码错误”,黄色字体;

 3.  如果用户名和密码都匹配,则提示“您好,【用户名】”,蓝色字体。

实现步骤

  步骤一、绘制线框图 

1、 打开 Axure 软件,新建一个 RP 文件,右键选择rename然后修改【home】为【Axure第一个例子】; 

2、 拖动控件面板中的控件到线框图面板中,绘制登陆界面:

所用到的控件清单如下: 

 

控件名

 

作用

 

文本内容

 

标识符

 

其它属性

 

Rectangle

 

装饰底板

 

 

 

底色:灰色

 

Text Panel

 

信息提示

 

默认:登陆窗口

 

logInfo

 

 

Text Panel

 

信息提示

 

用户名:

 

 

 

Text Panel

 

信息提示

 

密码:

 

 

 

Text Field

 

输入用户名

 

 

username

 

 

Text Field

 

输入密码

 

 

password

 

 

Button

 

点击登录

 

登陆

 

btnSubmit

 

 

步骤二、设计控件交互

1、 选中登陆按钮,在控件交互和注释面板中鼠标双击 onClick 事件;

2、 在弹出的“交互场景属性”对话框中,点击“添加场景(Add case)…”这个链接,修改case description为输入验证;

3、 在弹出的“条件创建(Create condition)”对话框中,选择

      if text on widget username equals ""
     or text on widget password equals ""

4、 回到“交互场景属性”对话框中,Step 2 中选择动作“Set Variable and Widget value equal to Value”,并点击 Step 3 中的链接; 

5、 在弹出的“设置变量和控件值”对话框中,设置如下:

点击 Edit text…链接,输入“请输入用户名或密码”,并设置为蓝色;

6、 确定和关闭所有对话框,这时控件交互和注释面板如下: 

以上我们实现了第一个场景:如果未输入用户名或密码,则提示“请输入用户名和密码”, 蓝色字体;

接下去,我们实现第 2、3 个场景,其步骤和实现场景 1 类似,只是要注意各个场景之间是“If else”关系。 

步骤三、生成原型

1、 点击主菜单“Generate->Prototype…(F5)”,选择要生成的原型地址,确定后就可以在浏览器中查看原型了。

2、 输入用户名和密码,点击登陆按钮,进行原型体验。

 

技巧:

   1. 目前的密码输入的是明文,如果要改为密文的,右键-》Edit Text Field-》Mask Text (Password Field)

 

欢迎交流: xqdd2004@163.com

 


http://www.niftyadmin.cn/n/3654639.html

相关文章

央行发布第三方支付业务系统检测认证新规

中国人民银行2011年6月21日发布《非金融机构支付服务业务系统检测认证管理规定》,明确将对因认证问题造成不良后果的机构给予处罚,保障非金融机构支付服务业务系统检测认证工作规范有序开展,并即日起开始施行。金融机构支付服务业务系统检测认…

[MSSQL]将用户表 存储过程 变成系统的

将用户表变成系统表exec sp_configure allow updates,1 reconfigure with overrideUPDATE sysobjects SET status status | 0x80000000 WHERE [NAME] 表名称exec sp_configure allow updates,0 reconfigure with override还原exec sp_configure allow updates,1 reconfigure …

城市一卡通系统走进线上支付“芯”时代

互联网的快速发展极大地丰富了人们的生活,催生了大量在线支付应用吸引了用户的极大热情,这从第三方支付市场的快速增长就可见一斑,在首批27家企业获得牌照之后,二批牌照申请工作正在紧锣密鼓进行之中。与此同时,城市一…

IntelliJ IDEA中tomcat启动项目一直在build问题

用到的工具和配置: IntelliJ IDEA 2019.2.4 x64Tomcat 8.5.51JDK 1.8maven包是同事给的。 最近接触到一个难搞的jsp项目,之所以说它难搞是因为,在配置好所有配置后,居然启动不了,一直在build。 排查错误过程 删除本…

解析Js中和、|和||运算符的区别和运算过程

| 和 &属于位运算符,而 || 和 && 属于逻辑运算符。 &运算符 先在浏览器控制台,举个例子: 为什么 234 & 456 打印的结果是200? &的运算步骤: 先把234,456两个十进制的数字转换成二进制分别为…

神州数码:我国市民卡发展之路探讨

编者语:说起神州数码,大家都知道是我国IT巨头,最近两年来,神州数码在市民卡领域不断开拓业务,并取得业界领先的位置,受到不少的关注,为了比较系统地了解和分析我国市民卡当前的现状及探讨未来发…

孔乙己之五----虚函数(下)

本文作者:sodme本文出处:http://blog.csdn.net/sodme声明: 本文可以不经作者同意, 任意复制, 转载, 但任何对本文的引用都请保留文章开始前三行的作者, 出处以及声明信息. 谢谢.本文所需代码可从以下地址获得( 此地址含有多继承c和asm代码 ):http://sodme.dev.googlepages.com/…