编辑导语：用户登录界面是吸引用户的一个很重要的手段，新颖的界面往往可以给用户留下深刻的印象，从而晋升一款产物的好感。那么，如何用Axure建造渐变色用户登录交互呢？本文作者通过实际操纵为我们举办了分享，快来一起进修吧啊。

在系统产物设计进程登录窗口的交互设计是不行少步调，本日标记给新人分享一个用Axure建造一个用户登录界面的教程。

先预览一下最终实现的结果：

本教程案例主要利用到的元件有：

矩形

文本输入框

动态面板

按钮元件

元件渐变

操纵流程：

一、建造登录配景

拖入一个矩形做为登录的配景配置尺寸 1920×1080，如下图：

配置配景颜色，这边利用到了颜色渐变东西，颜色可以按需要配置，如下图：

给配景配置鼠标移入交互。这边也是用到了渐变。道理就是鼠标悬停后，改变配景的颜色。

配置页面载入时，配景巨细。

如下图，别离配置配景的对应的宽高，这边利用到[[Window.width]]和[[Window.height]]。主要成果是获取当前窗口宽高，这样在小点的屏幕小预览就不会有转动条了。

到此，登录配景就完成了。

二、用户名和暗码框设计

用户名和暗码框由三个元件构成，矩形，文本输入框，icon。我们可以先做好用户名的，暗码原型一样。

给矩形框配置选中交互、边框颜色、可见边框、线段颜色，可以按需要配置。

拖入一个文本输入框，定名为账户，给这个文本框配置获取核心交互。

当获取到核心时，也就是输入选中进入切换时，选中(ture)账号和账号icon（icon可在Iconfont获取）。

配置失去核心时，将账号和账号icon配置为false。

到这边用户名输入相关交互做好了。这时可以将其组合起来。复制一个暗码组合，举办暗码框交互修改。

三、登录按钮判定建造

用户登录会有许多种环境，大概用户名和暗码都不正确。或有一个没填写我们但愿在提示错误信息时，能在对应的项目中做动效。

详细交互如下图：

之一个case意思是，假如用户名和暗码都为fuhao。点击按钮时，提示信息正确。

第二个case2意思是，假如用户名为空时。点击按钮时，提示用户名不能为空，并选顶用户矩形为ture。

第三个case3意思是，假如暗码为空时。点击按钮时，提示暗码不能为空，并选顶用户矩形为ture。