我们在设计产品的时候,经常遇到这样的场景: 在登录界面,当用户名和密码没有输入的时候,登录按钮是灰色的,只有当用户名和密码都被输入后,登录按钮才能被点亮,之后登录按钮才能被点击.下面的来讲一下怎么来实现这个效果工具/原料moreAxure方法/步骤1/10分步阅读

创建一个用户名输入框,输入框的组成为:

(1)一个图标

(2)一条水平线

(3)一个文本输入框

2/10

对文本输入框做一下设置:

(1)输入框命名为mobileNumber

(2)文本框的类型选为:phone number

(3)文本框里面的提示内容为:Mobile Number

(4)隐藏提示内容的时机: 输入

(5)最大输入长度11位

(6)隐藏边框

3/10

创建一个密码输入框,输入框的组成为:

(1)一个图标

(2)一条水平线

(3)一个文本输入框

4/10

对密码输入框做一下设置:

(1)输入框命名为password

(2)文本框的类型选为:password

(3)文本框里面的提示内容为:password

(4)隐藏提示内容的时机: 输入

(5)不设最大长度限制

(6)隐藏边框

5/10

用 「矩形]」创建一个登录按钮,并对按钮做一下设置:

样式:

(1)命名为:login

(2)颜色填充:#90C542

(3)无阴影

(4)字体颜色:#1E1E1E

6/10

对登录按钮的「属性」进行设置:

(1)disabled状态时, 颜色填充为:#C6E3A1

(2)默认选中disabled状态

默认选中disabled的状态的意思是,加载页面后,login的按钮的颜色呈现为稍微暗一点的颜色,给人在视觉上进行提示;同时对login按钮设置的各种动作都会无效,因为此时是disabled状态

7/10

对mobileNumber输入框进行设置:

在「属性中」

事件:当文本变动时(onTextChange)

条件:如果账户的内容不为空 并且(and) 密码的内容不为空

动作: 激活login按钮

8/10

对mobileNumber输入框进行设置:

在「属性中」

事件:当文本变动时(onTextChange)

条件:如果账户的内容为空 或者(or) 密码的内容不为空

动作: diable 掉login按钮

9/10

按照相同的逻辑,对password输入框进行设置:

在「属性中」

事件:当文本变动时(onTextChange)

case1

条件:如果账户的内容不为空 并且(and) 密码的内容不为空

动作: 激活login按钮

case2

条件:如果账户的内容为空 或者(or) 密码的内容不为空

动作: diable 掉login按钮

10/10

给login加上跳转交互之后,就达到了目标效果啦