(二)Axure 9 制作计时器

一、本题实现效果

本文最终效果不代表标准答案 ,请谨慎参考!!!


二、操作步骤

步骤如下(示例):

1.新建文件

首先新建文件,并将其命名为"计数器"

2.界面设计

2.1文本框

拖拽文本框并将它命名为"文本框",需要将它拖拽大小合适,并在它的里面输入0,将其居中显示,字号为36

2.2 按钮

拖拽一个提交按钮,并调整合适大小,然后在复制两个并将它们拖拽到合适的位置。同时还需要更改一下提交按钮的名称,分别是提交、停止、重置

2.3设计界面完成

至此,原型的界面设计就已经完成了,下面进入到交互当中

3.交互

3.1启动交互设置

首先单击启动按钮,对它进行交互设计,点击界面右边框的交互属性,选择鼠标单击时

3.2 分别设置三个属性

交互------>单击时添加3个动作

3.2.1 设置变量值为"0"

添加动作-》设置变量

3.2.2 设置文本

添加动作-》设置文本

3.2.3 获取焦点时

以上为启动按钮的交互步骤

3.3 停止按钮的交互动作
3.3.1 设置变量值
3.4 重置按钮的交互设置
3.4.1 设置文本
3.5 文本框交互设置
3.5.1 等待
3.5.2 设置文本
3.5.3 获取焦点
3.5.4 添加情形

以上便是累加计时器的最终效果!

三、最终效果

运行效果如下(示例):

图片样式:

相关推荐
招风的黑耳7 小时前
Axure大屏可视化模板:赋能多领域,开启数据展示新篇章
axure·可视化·数据大屏·大屏模板
结构化知识课堂3 天前
Axure项目实战:智慧城市APP(二)(动态面板叠加、移动、倒计时等高级交互)
交互·axure·动态面板·移动·选中
结构化知识课堂3 天前
Axure项目实战:智慧城市APP(三)(显示与隐藏、单选按钮交互)
智慧城市·交互·axure·显示与隐藏
梓贤Vigo3 天前
【Axure高保真原型】增删改饼图
axure
结构化知识课堂3 天前
Axure项目实战:智慧城市APP(一)(动态面板、拖动效果)
人工智能·智慧城市·axure
招风的黑耳9 天前
Axure大屏可视化原型模板及素材:数据可视化的高效解决方案
信息可视化·axure·大屏可视化·科技感大屏
招风的黑耳9 天前
Axure设计之堆叠柱状图教程(中继器)
信息可视化·axure·数据图表·堆叠柱状图
招风的黑耳10 天前
Web元件库 ElementUI元件库+后台模板页面(支持Axure9、10、11)
前端·elementui·axure
招风的黑耳11 天前
Axure设计之下拉多选框制作教程A(中继器)
ui·axure·选择器·下拉多选框
梓贤Vigo11 天前
【Axure原型分享】输入框控制环形进度条
交互·产品经理·axure·原型