Axure是一种简单常见的快速设计原型工具，能快速高效的设计原型，还支持多人协作设计以及版本控制管理。今天就给大家分享一下比较长常见的用户登录制作方法，产品小白看过来!
一、元件准备
首选得知道用户名和密码的输入框是有哪些元件组成的，矩形、icon、文本框就是最近本的元件了。
先来看用户名输入框，元件进行命名，矩形框为“矩形1”，文本框为“用户名”。文本框属性设置：类型为“text”，勾选“隐藏边框”。提示文字写“用户名、邮箱、手机号”。这样三个元件组合命名为“用户名输入框”。
现在轮到密码输入框，跟上面的操作其实大同小异，矩形框为“矩形2”，文本框为“密码”。文本框属性设置：类型为“密码”，勾选“隐藏边框”。提示文字写“登录密码”。
如下图所示，排列好各元件在界面中的位置，原件准备这一步就算完成了。
二、登录交互
登录交互其实就包括两个方面：鼠标选中输入框“高亮”和点击登录时用户名和密码的校验。
1、选中输入框“高亮”
如下图所标识1、2、3、4的顺序进行用户名输入框和icon进行设置，icon的选中状态设置是相同的方式。
然后选中用户名文本框，如图所示设置获取和失去焦点时，选中状态的矩形和icon的值。
密码输入框的设置也是一样的，设置成功预览如下图。
2、点击登录时的校验交互
登录验证组成部分：用户名、密码为空，用户名不存在和用户或密码输入错误登陆登录失败。
这就需要添加一个动态面板，命名为“提示”，设置为“隐藏”，如图所示添加好4种对应状态。其中“登陆成功”可以不用，因为登录成功后就直接跳转了，并不用再提示。
最后是设置登录按钮校验交互，“用例编辑”—“鼠标单击时”鼠标点击时用例就添加好了，“编辑条件”下设立条件，点击“确定”即可，再增加下推元件效果就完成了。
整体效果预览如下：
好了，这就是Axure的用法，如果小伙伴么还有其他好的方法，欢迎评论区分享。
X
