知识分享

  • 首页
  • 市场分析
  • 需求分析
  • UI设计
  • 产品运营
  • 产品设计
  • 项目管理
  • 新玩意儿
不积跬步无以至千里
不要停留,欣赏沿途的风景
  1. 首页
  2. UI设计
  3. 正文

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

2019年9月30日 630点热度 1人点赞 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协议

标签: 暂无
最后更新:2019年9月30日

小虾米

同理心,洞察力!

点赞
< 上一篇

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复
最新 热点 随机
最新 热点 随机
我在椰树直播间,花了三分钱 东方甄选走红这一年 京东自营开始踩刹车 “单车刺客”6.5元一小时!共享单车平台还是赚不到钱,你被刺了吗? 政务CRM-CRM在政务行业的应用现状 Temu的砍一刀,迷倒了美国人 社交媒体围攻BOSS直聘 组件应用 | 个人主页头部,应该如何设计? 远程技术团队,操作回顾会怎么开? 我在网上卖“土”,年入5000万 增长模型:产品增长的通用思维框架 “大人”,榜单时代变了 汽水音乐一周年:“抖音BGM播放器”的起与落 一个方法论,搞懂支付的一切 密码强度计有哪些局限性? 618回归“价格战”:京东淘宝进入存量竞争,小红书、视频号深入电商直播 兴趣电商未来会超过货架电商吗? 直播带货再难造神:天涯重启失败,7天只卖了36万 鏖战13年后,线上超市的肉搏还在继续 最佳的阅读一行是多少字最合适?
被集市收割、被买家嫌弃,“摆摊后浪”有点惨蓝领用工招聘平台的数字化建设思路干货分享:WMS系统—PDA的应用iOS 17,能否守住「iOS神话」?系统功能设计:网络加速器系统产品需求设计电商扫盲第一讲:GMV的底层逻辑打造一个基于本地社区的闲置交易平台,你看好吗?东南亚出海洞察:去东南亚为直播电商开荒,没有超头主播,货品供给不足……定金+尾款模式背后的套路天涯老用户的自救,让我明白情怀是最不值钱的东西抖音上线酒店日历房,其他平台会慌吗?从需求到设计开发,产品质量问题如何分析靠咱们看腻的电视剧,爱奇艺和腾讯在东南亚成了顶流如何让你的“对内B端产品”看起来有价值?设计走查知多少产品思考:视觉冲击!以图片展示金额,“省钱卡”这样玩就对了多多买菜为什么比美团买菜要便宜?都在骂网暴,为什么网暴一直没有停过韩国漂流记:明星在面前,咖啡在手里,中国互联网公司在广告墙自动驾驶风口退潮的深层逻辑
行业报告 | 神策数据《营销自动化应用基准报告 2021》正式发布 爱奇艺做减法,抖音做增量 盲盒背后,是巨大的精神消费商机 抖音奔着超级APP2.0就去了 网络亲社会参与:一种新的互联网用户实践 美团:「近场电商」之王刺向阿里 人力资源数字化转型总结:关键问题、核心要素及能力框架 004 传统软件转型 SaaS 的困局 如何搭建一个代付系统? 2022 前瞻设计趋势,独家揭秘 整装下一站:数字化、智能化 实战分享:从0到1构建落地的用户标签系统 春晚红包背上了互联网大厂新的KPI 微信突然放大招,这两个重磅新功能太香了! 产品不同阶段竞争力的关键:辅助决策的“价值金字塔” 车载HMI设计指南(基础篇) 行为设计:产品设计如何利用心理学和用户动机的指南 扎根本地社区,百万夫妻店正在驶入“快车道” 3个案例,正确理解B端产品中的一致性原则 淘宝省心版,难”钉”老人心?

COPYRIGHT © 2023 知识分享. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang