1. 主页 > 行业资讯 > 设计文章 >

Axure教程:制作渐变用户登录交互

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

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

首先预览最终效果:

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

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

操作流程:

首先,制作登录后台

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

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

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

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

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

至此,登录后台完成。

二、用户名和密码框设计

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

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

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

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

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

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

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

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

具体交互如下:

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

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

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:https://ffjianzhan.cn/a/sjwz/549.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息