彩票走势图

原型设计工具Axure RP案例:设计一个简单的登陆界面

翻译|使用教程|编辑:陈津勇|2020-01-06 14:16:47.713|阅读 1586 次

概述:本文主要介绍使用Axure RP设计一个简单的登陆界面的步骤:绘制线框图、设计控件交互、生成原型。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具, 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格,现已成为设计Web APP的重要工具。

免费下载Axure RP 优惠购买Axure RP

本文将介绍设计一个简单的登陆界面的步骤,完成时输入用户名、密码后点击登陆按钮进行登陆,有以下三种情况: 

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

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

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


实现步骤

步骤一、绘制线框图

1、打开Axure软件,新建一个RP文件;

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

所用到的控件清单如下:

控件名
作用
文本内容
标识符
其它属性
Rectangle
装饰底板


底色:灰色
Text Panel
信息提示
默认:登陆窗口
logInfo

Text Panel
信息提示
用户名:


Text Panel
信息提示
密码:


Text Field
输入用户名

userName

Text Field
输入密码

passWord

Button
点击登录
登陆
submitButton
步骤二、设计控件交互

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

2、在弹出的“交互场景属性”对话框中点击“添加场景…”链接;

3、在弹出的“条件创建”对话框中添加条件如下:

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、输入用户名和密码,点击登陆按钮,进行原型体验。



想要获得Axure RP更多资源、正版授权的伙伴,请咨询了解

关注慧聚IT微信公众号 ☟☟☟,了解产品的最新动态及最新资讯


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP