Axure原型设计累加器计时器设计效果（职业院校技能大赛物联网技术应用项目原型设计题目）

﹏ヽ暗。殇╰゛Y 2024-03-16 10:10 81阅读 0赞

**目录**

前言

一、本题实现效果

二、操作步骤

1.新建文件

2.界面设计

2.1文本框

2.2 按钮

2.3设计界面完成

3.交互

3.1启动交互设置

3.2 分别设置三个属性

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 设置变量

三、最终效果

总结

--------------------

## 前言 ##

`前提须知：`

1.本文所讲的是Axure 原型设计，使用软件是Axure RP 8版本，若您有需要在资源中下载；

**2.本文所讲的内容来源自——全国职业院校技能大赛“物联网技术应用”赛项原型设计题目；**

3.本文所讲的原型设计素材会发布到我的资源当中，若有需要可以在我的资源中下载；

4.本文讲解的操作步骤均是Axure RP 8版本，原则上8以上版本操作步骤会跟本文大有不同，所以需要者可以学习其中交互方法，或直接见上行文字下载使用；

5.Axure原型设计内容以收入到我的“Axure原型设计”专栏当中；

6.题目具有多样性，本文讲解不是唯一、正确答案，仅供参考!

7.若文中出现错误，欢迎提出指正，我将吸取经验，总结教训，完善文章；

--------------------

`提示：以下是本篇文章正文内容，下面案例可供参考`

## 一、本题实现效果 ##

这是2023年全国职业院校技能大赛2023年物联网应用开发赛题样题 第1套模块二中的题目

![d95f81fce5b04be7ade7fbace7144293.png][]

**本文最终效果不代表标准答案 ，请谨慎参考！！！**

--------------------

## 二、操作步骤 ##

步骤如下（示例）：

### 1.新建文件 ###

首先新建文件，并将其命名为“计数器”

![1beb929036944edb91a9383eb23f4464.png][]

### 2.界面设计 ###

#### 2.1文本框 ####

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

![93a762c799e94a7a836b777af4bc0b21.png][]

#### 2.2 按钮 ####

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

![98285b20735b47fdaea1d5b3271fc9b9.png][]

Axure 计时器实现效果视频

#### 2.3设计界面完成 ####

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

### 3.交互 ###

#### 3.1启动交互设置 ####

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

![67d07a7aba54406c89005f3ea90465d2.jpeg][]

#### 3.2 分别设置三个属性 ####

![0d61e1b5030043508d788f0f576aeb4a.png][]

##### 3.2.1 设置值为“0” #####

![0aff41863c7f421ca962556165ccec6a.jpeg][]

##### 3.2.2 文字于文本框 #####

![cff08a3a2e824df7a3514f4f6107250a.jpeg][]**上面步骤完成后再点击，图片中画红圈的FX按钮，设置变量**

![78aeaad7d496425594c4bffcf958c5df.jpeg][]

##### 3.2.3 获取焦点时 #####

![fdd8209cc25342a893110024917789d5.jpeg][]

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

#### 3.3 停止按钮的交互动作 ####

![ca259846dd3247a8951bca7cc899fa9a.png][]

##### 3.3.1 设置变量值 #####

![eba9dfd080d44000a7019645385d72e6.jpeg][]

#### 3.4 重置按钮的交互设置 ####

![4d6bc0a4750e410c839ffe4d0d3eee2a.png][]

##### 3.4.1 设置文字 #####

![3c1c3c8bf83945ea8bde40853cb0b679.png][]

#### 3.5 文本框交互设置 ####

![607f6b45443e44eba404ba7c12fcae43.png][]

##### 3.5.1 等待 #####

##### ![3063a1e42a6d42a8af775cabd5033c90.png][] #####

##### 3.5.2 设置文字 #####

![c28296d2226247128a2d25160a76c42d.png][]

##### ![17208eff67bb47199516b1a1b09507ec.png][] 3.5.3 获取焦点 #####

![23ca9123418c43d4863057e6241a3682.png][]

##### 3.5.4 设置变量 #####

然后单击case 1，设置相关变量

**![930f010da5764c338f81212e09a51527.png][] 以上便是累加计时器的最终效果！**

## 三、最终效果 ##

运行效果如下（示例）：

图片样式:

![ef4ee74320144f8d952a46dc0df9f333.png][]

视频样式:

Axure 计时器实现效果视频

## 总结 ##

上述为本文实现效果的步骤和方法

特别说明，该程序存在问题，如在运算时点击重置按钮程序会自动变成0，同时还会继续增长

因时间原因，该程序发布的较为简单，制作周期达到了4个月，处于一直搁置状态，所以没有将本文章达到最大的发挥效果！

[d95f81fce5b04be7ade7fbace7144293.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/230569b08ac94f8789188a33b0a89fe9.png
[1beb929036944edb91a9383eb23f4464.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/bf4e745fba8a432382eee05051d2981c.png
[93a762c799e94a7a836b777af4bc0b21.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/a6b51cb1c19d49fc91b694a438194618.png
[98285b20735b47fdaea1d5b3271fc9b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b555c2859b824ff4965cb997876fed33.png
[67d07a7aba54406c89005f3ea90465d2.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b309f31dc6e1496390c59f2471941cff.png
[0d61e1b5030043508d788f0f576aeb4a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/71bf1103e7cc4289a61694f05984ca7f.png
[0aff41863c7f421ca962556165ccec6a.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b129be0bbc9a40e8b2da751183a2de2b.png
[cff08a3a2e824df7a3514f4f6107250a.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/674e5c8e0f224b2ba0816b841e8bf37c.png
[78aeaad7d496425594c4bffcf958c5df.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/19b22210db1c4a40bac3dcb796dd04f9.png
[fdd8209cc25342a893110024917789d5.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/be8356306c0547b3be1012df271a60f5.png
[ca259846dd3247a8951bca7cc899fa9a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/79266d163b9b4955a758d8eca97e17b7.png
[eba9dfd080d44000a7019645385d72e6.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/59ac26a6d71241249ce96396483802f6.png
[4d6bc0a4750e410c839ffe4d0d3eee2a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/cb8e9ff2166e4567b26511e8f37c3541.png
[3c1c3c8bf83945ea8bde40853cb0b679.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/6bf8fdaea1794721bc0b03318548f58f.png
[607f6b45443e44eba404ba7c12fcae43.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/217e5a189c91492daa1a979e7480daee.png
[3063a1e42a6d42a8af775cabd5033c90.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/a1b63433c4a042c3b7e46d0f4df33fc2.png
[c28296d2226247128a2d25160a76c42d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/abe36404b3ef4d438a4c04cbd8ac5123.png
[17208eff67bb47199516b1a1b09507ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/841b22589d83400983e13d95d1a6c24d.png
[23ca9123418c43d4863057e6241a3682.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/f65424d4ac844c32a57255155c979511.png
[930f010da5764c338f81212e09a51527.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/2df6abe6583941f1aff1315cfa5a8d7d.png
[ef4ee74320144f8d952a46dc0df9f333.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/37c3c96db3c74a9b8e6e93018c6e41b4.png