主页 > 建站知识 > 建站指南 > 策划方案 >

Axure:一个简单的进度条,了解“触发事件”动作

作者/整理:07fly 来源:人人都是产品经理 2018-09-12 Tag:


QQ截图20180816101000.png

本文通过制作一个简单的进度条,顺便来了解一下“触发事件”动作。

先看效果:

涉及知识点:

实现目标:

  1. 完成需求:点击开始,进度条自动填充满,并在此过程中不断更新当前进度 – 百分比;

  2. 练习目的:通过使用“触发事件”,完成自循环及停止循环。有别于常用的动态面板循环机制。

难点:

如果只是自动充满,那么用一下设置尺寸,加一个动画就可以搞定。但是这个百分比一直在变,就需要动一点点小心思了。

以下是具体步骤

1. 准备素材

三个矩形:

(1)背景框 – 命名为背景框

问题思考:

(2)进度条

(3)开始按钮

无特殊说明,可自行设置。用于交互动作(此处是点击)。

也可以省去此元件,直接将交互动作放置于“背景框”,或者页面载入时……

由到进度条为宽度1,与背景框的边线重合了,故好像没有进度条。

2. 动作设置

梳理一下进度条执行的逻辑,尝试画个流程图。

翻译成大白话就是:

如果进度条满了,就不执行(什么都不做),如果没满就:

再来一次 – 再执行一次“点击开始”。


上一篇:设计师必看!十大线框图绘制技巧

下一篇:资深设计师心得:网格,更科学的排版方法

相关新闻

2008-2020 © 成都零起飞科技有限公司 网站建设 开源CRM 建站系统 旅行社ERP系统 虚拟主机