Axure RP 9 制作登录页面过程

1**.首先是准备工作,制作好登录界面面板**

从左侧元件库拖出一个矩形,w为400,h为500,命名矩形一。然后在拖出一个矩形,设置w为370,h为70,命名为矩形2,双击矩形框,输入"文字后台管理系统"。然后复制矩形2两个,分别命名为边框1,边框2,然后在边框1,2中放入两个文本框,w为300,h为35,并为第一个文本框命名为"用户名",第二个命名为"密码",然后拖入四个图标分别放入边框1,2当中(感叹号命名为清除)。然后在边框2下方拖入一个主要按钮,最后拖动一个动态面板(这个地方是重点),动态面板分为第三个状态,分别是用户名或密码不正确、请输入登录账号、请输入登录密码,每个状态下放一个矩形,矩形内分别对应状态输入用户名或密码不正确、请输入登录账号、请输入登录密码,最后命名为""警告提示""。

第一步如下图:

2.动作交互

2.1 用户名交互设置

2.2 清除交互设置

2.3 密码交互设置

2.4 主要按钮交互设置(重点),最后将将清除按钮,警告提示隐藏就可以了。

3**.预览一下。**

总结:以上就是登录界面的制作,有两个地方需要加深理解,一是动态面板的使用,二是推动弹窗的交互,容易出错。

相关推荐
xy345313 天前
Axure9.0 热区典型实战使用场景
ui·axure·原型·产品设计
充值内卷13 天前
把 Visio 和 Axure 塞进一个 1.5 MB 的 exe:Visioxure 的架构与取舍
架构·axure
充值内卷13 天前
Visio、Axure、draw.io、ProcessOn、墨刀、Figma:六款工具哪个该干哪件事
axure·draw.io·processon
xy345318 天前
Axure 9.0 列表框 介绍
ui·axure·原型·产品设计
xy345318 天前
Axure 9.0 内联框架加载方式
前端·ui·html·axure·原型·产品设计
汉派日月土申25 天前
【移动元件库】8.时间轴
产品经理·axure
结构化知识课堂1 个月前
Axure产品原型设计:AI能画原型了,为什么你还得懂这些术语?
人工智能·axure·原型设计·ai产品经理
xy34531 个月前
Axure 9.0 动态面板基本操作
前端·ui·html·axure·原型·产品设计
结构化知识课堂1 个月前
AI产品设计思维:需求分析的新变化(与传统软件的区别)
人工智能·产品经理·axure·需求分析·ai产品经理·数据产品经理
xy34532 个月前
Axure 9.0 中继器核心结构
前端·ui·html·axure·原型·产品设计