编辑导语:用户登录界面是吸引用户的一个很重要的手段,新颖的界面往往可以给用户留下深刻的印象,从而提升一款产品的好感。那么,如何用Axure制作渐变色用户登录交互呢?本文作者通过实际操作为我们进行了分享,快来一起学习吧啊。 ...
在系统产品设计过程登录窗口的交互设计是不可少步骤,今天符号给新人分享一个用Axure制作一个用户登录界面的教程。 先预览一下最终实现的效果: 本教程案例主要使用到的元件有:
操作流程: 一、制作登录背景拖入一个矩形做为登录的背景设置尺寸 1920×1080,如下图: 设置背景颜色,这边使用到了颜色渐变工具,颜色可以按需要设置,如下图: 给背景设置鼠标移入交互。这边也是用到了渐变。原理就是鼠标悬停后,改变背景的颜色。 设置页面载入时,背景大小。 如下图,分别设置背景的对应的宽高,这边使用到[[Window.width]]和[[Window.height]]。主要功能是获取当前窗口宽高,这样在小点的屏幕小预览就不会有滚动条了。 到此,登录背景就完成了。 二、用户名和密码框设计用户名和密码框由三个元件组成,矩形,文本输入框,icon。我们可以先做好用户名的,密码原型一样。 给矩形框设置选中交互、边框颜色、可见边框、线段颜色,可以按需要设置。 拖入一个文本输入框,命名为账户,给这个文本框设置获取焦点交互。 当获取到焦点时,也就是输入选中进入切换时,选中(ture)账号和账号icon(icon可在Iconfont获取)。 设置失去焦点时,将账号和账号icon设置为false。 到这边用户名输入相关交互做好了。这时可以将其组合起来。复制一个密码组合,进行密码框交互修改。 三、登录按钮判断制作用户登录会有很多种情况,可能用户名和密码都不正确。或有一个没填写我们希望在提示错误信息时,能在对应的项目中做动效。 具体交互如下图:
当然你还可以制作添加更多的交互,这边不做讲解。
作者:符号,目前从事互联网电子商务项目,岗位产品负责人一枚 本文由 作者: @符号 创作发布或转载,小媒球编辑收集整理发布于媒球圈。其版权均为原作者所有,如稿件涉及版权等问题,请与我们联系删除或处理。稿件内容仅为传递更多信息之目的,不代表本网观点,亦不代表本网站赞同其观点或证实其内容的真实性,更不对您的投资构成建议。。未经许可,禁止转载 题图来自Unsplash,基于CC0协议 |
点赞
点赞
点赞