快好知 kuaihz

Axure教程:按钮的启用和禁用设计

原型中常要用到按钮禁用和启用,比如常见的:输入手机号获取验证码的获取按钮,在未输入内容前按钮不可点,输入按钮后,可点击获取按钮获取验证码。那我们本文就一起来看看按钮的启用和禁用设计。

如下图:

首先,我们来看看效果

没有输入内容前,按钮灰色不可点,输入内容后,按钮变亮,表示可以点击。

设计步骤

(1)设计好元件:输入框+按钮

(2)设置按钮的属性:点击交互样式中的选中,在弹窗中设置按钮被选中时的颜色为绿色;在弹窗中切换到禁用禁用时的颜色为灰色,点击确定。

(3)勾选引用页中的禁用、选中。

(4)对输入框进行交互设置:选择交互方式:文字改变时。

(5)在弹出的交互编辑窗口中编辑用例条件:当输入框中的元件文字为空时。

(6)选择交互工作:当输入框中的元件文字为空时,按钮禁用

(7)可以看到,第5步点击了确定之后,属性中的用例1已经成功设置了按钮禁用。再次点击文字改变时,设置用例条件。

(8)将用例条件设置为输入框中的元件文字不为空时。

(9)选择启用/禁用,为输入框在改变文字之后配置启用动作,点击确定。

(10)此时按钮禁用启用已经完成,点击预览测试一下吧。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:禁用  禁用词条  启用  启用词条  按钮  按钮词条  教程  教程词条  设计  设计词条  
原型

 Axure RP 8新功能和优化...

我结合我的设计工作,来讲一下Axure8改进和新增功能:1. 画板区:我的电脑是13寸的,画板区希望越大越好,因些我把电脑分辨率调到最小,新的8整体界...(展开)

原型

 Axure8.0教程:“百度一下...

百度作为最大的中文搜索引擎,在某种程度上,有点学习google的简约至上的原则,但是给人的感觉还是不够彻底。今天,使用Axure 8.0花了一下午的时间基本重现...(展开)