编者按:用户登录界面是吸引用户的一个非常重要的手段，新颖的界面往往能打动用户，从而增强一个产品的商誉。那么，如何让渐变用户登录与Axure交互呢？本文作者通过实际操作与我们分享。一起来学习吧。

登录窗口的交互设计是系统产品设计过程中不可缺少的一步。今天，符号分享了一个为新人创建用户登录界面的教程。

首先预览最终效果:

本教程案例中使用的主要组件有:

矩形文本输入框动态面板按钮元件元件渐变

操作流程:

首先，制作登录后台

拖动一个矩形作为登录的背景，设置大小为1920×1080，如下图所示:

设置背景颜色。这里使用的是颜色渐变工具，可以根据需要设置颜色，如下图所示:

为背景设置鼠标输入交互。这里也用渐变。原理是鼠标悬停后改变背景颜色。

加载页面时设置背景大小。

如下图设置背景对应的宽度和高度。这里用的是[[Window.width]]和[[Window.height]]。主要功能是获取当前窗口的宽度和高度，这样小屏幕预览就不会有滚动条了。

至此，登录后台完成。

二、用户名和密码框设计

用户名和密码框由三个部分组成，矩形，文本输入框和图标。我们可以先做用户名，密码原型也一样。

为矩形框设置选定的交互、边框颜色、可见边框和线段颜色，可根据需要进行设置。

拖到一个文本输入框中，将其命名为帐户，并为该文本框设置获取焦点的交互。

获得焦点时，即选择输入切换时，选择账号和账号图标(图标(图标可在Iconfont获得)。

当设置失去焦点时，将帐号和帐户图标设置为false。

这里，用户名输入相关交互完成。这时候就可以结合了。复制密码组合并交互式修改密码框。�������ʦ

第三，判断并做出登录按钮

用户登录时有很多情况，用户名和密码可能不正确。或者其中一项没有填写。我们希望当出现错误信息时，可以在相应的项目中激活它。

具体交互如下:

第一个case意思是，如果用户名和密码都为fuhao。点击按钮时，提示信息正确。第二个case2意思是，如果用户名为空时。点击按钮时，提示用户名不能为空，并选中用户矩形为ture。第三个case3意思是，如果密码为空时。点击按钮时，提示密码不能为空，并选中用户矩形为ture。

当然你也可以多做多加互动。这里就不解释了。