起点学院课程

Axure 教程:按钮与文本框结合在一起的动态重置功能

4 评论 1763 浏览 7 收藏 7 分钟
15天0基础极速入门数据分析,掌握一套数据分析流程和方法,学完就能写一份数据报告!了解一下>>

本文要给大家讲解的是,按钮与文本框结合在一起的动态重置功能,enjoy~

设置文本

1.1 页面布局

1.1.1 页面设定

新建一个页面文件,命名为“重置功能”。

在“重置功能”页面内新建一个命名为“窗口”的【组合文件】,并在【组合文件】内分别新建命名为“模板备注”、“字典名称、“左上””的【组合文件】和命名为“重置按钮”、“窗口背景”的【矩形】元件。

(1)模板备注

从元件库内分别拉入两个【矩形】和一个【文本框】元件分别做“模板备注-标题”、“模板备注-文本框”、“模板备注-背景”。

“模板备注-背景”的填充色为#ffffff,边框为1px实线、色值#e4e4e4,“模板备注-文本框”没有边框、框内字体大小为12px、字体颜色为#333333填充色为#ffffff、并在属性-类型-提示文字内输入请输入描述内容(文字大小为12px,字体颜色为#333333)、高度为162px、宽度为233px,, “模板备注-标题”的填充色为透明、没有边框、字体为黑体大小为12px、色值为#666666。

(2)字典名称

从元件库内分别拉入两个【矩形】和一个【文本框】元件分别做“字典名称-标题”、“字典名称-文本框”、“字典名称-背景”。

“字典名称-背景”的填充色为#ffffff,边框为1px实线、色值#e4e4e4,“字典名称-文本框”没有边框、框内字体大小为12px、字体颜色为#333333填充色为#ffffff、高度为21px、宽度为233px,, “字典名称-标题”的填充色为透明、没有边框、字体为黑体大小为12px、色值为#666666。

1.2 动态交互

1.2.1 效果设计

(1)重置按钮的交互样式设置

选中“重置”按钮,进行【交互样式设置】,将鼠标悬停、鼠标按下、选中的交互样式的填充颜色设为#00CC00。

(2)文本框的交互样式设置

选中【文本框】元件,将【类型】设置为查询(在文本框内输入文字的时候,则会出现清除框内文字的交互效果),隐藏提示触发勾选为输入。

1.2.2 交互流程

(1)重置按钮联动字典名称和模板备注文本框的动态交互效果

选中“重置”按钮,在【属性】中设定【鼠标单击时】的交互用例,并配置相关的动作。

步骤一:设置用例名称的编辑条件

在【条件设立】中添加【元件文字】动作,选择“模板备注-文本框”和“字典名称-文本框”,将两者的值设为不等于(!=)空条件。

步骤二:设置“模板备注-文本框”&“字典名称-文本框”的动态交互效果

在case1【组织动作】中添加【设置文本】的动作,在【配置动作】内勾选“模板备注-文本框”和“字典名称-文本框”,设置文本为:值=空。

1.3 预览效果

请路过的朋友们多多支持哈,卧枕江山在这里先谢谢了,以后会有更多优质的文章和产品在这个平台上进行发布,请尽请期待呦!

#专栏作家#

卧枕江山,微信公众号:卧枕江山,人人都是产品经理专栏作家。曾负责过多个项目的设计和研发,有丰富的动态交互设计的经验。

本文原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
起点学院课程
评论
评论请登录
  1. 哈,看完还是不太会?你可能需要从Axure基础开始学

    ❗ 这里推荐你加Axure实战班的助教小可爱@CC-起点学院(微信:qidiancc520),回复关键词:大礼包

    领取适合产品新人的原型设计大礼包哦,cc还会不定期分享Axure免费视频课程呢!

    回复
  2. 写这种文章 最好是gif先展示你的成果或者效果是怎么样的 不然光看标题都不知道你在表达什么 很难往下看

    回复
    1. 受教了 😉

      回复
  3. 请路过的朋友们多多支持哈,卧枕江山在这里先谢谢了,以后会有更多优质的文章和产品在这个平台上进行发布,请尽请期待呦!

    回复