• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure教程——页面载入进度条

Axure教程——页面载入进度条

作者: @蜗牛PM  字体:[增加 减小] 来源:互联网 时间:2017-06-14

本文主要包含axure登录页面教程,axure页面跳转教程,axure rp页面居中,axure设置页面大小,axure登录页面等相关知识, @蜗牛PM 希望在学习及工作中可以帮助到您

jindutiao

在产品的原型设计中,进度条的意义是:

  • 第一,在页面载入中,给用户的等待过程中增加少量的乐趣;在一个追求快的环境中,这是十分关键的要素,可以减少流失率。
  • 第二,也是在告知用户,网页或者APP有没有响应了你的点击?反馈给了用户信息,而不是不是一张白纸,使用户感到茫然。

而在Axure中,进度条的设计,主要的掌握要素就是函数变量的使用。

拖入部件

如下图所示,在Axture中拖入label标签、矩形框、动态面板。此时一定要培养一个好习惯,给部件命名。一旦交互过程十分复杂时,不同的名称将使得逻辑关系变得十分清楚。

1

交互设计

11111

OnPageLoad:页面载入时,改变动态面板大小(Set Panel Size),调用fx函数,宽度设置为背景部件的宽度/100,高度为背景部件的高度。其次,将其移动(Move)到背景部件的位置。

2

注意:to指的是绝对位置;by指的是相对位置。

函数说明:

  • widget.width? 部件的宽度
  • widget.height? 部件的高度
  • widget.x? 部件绝对位置的x坐标
  • widget.y? 部件绝对位置的y坐标

onpageload

OnResize:动态面板大小改变时的触发。

  • 第一,设置百分比(Set Text on widget)。基本思想是动态面板的宽度占背景条的宽度的百分比就是我们想要的效果。但是在动态面板大小改变的过程中,进度条百分比的显示会有小数的出现,这就需要用到Math.ceil()取整函数。
  • 第二,设置动态面板循环(Set Panel State)。基本思想同设置Banner轮播图是一样的道理。通过设置不同的面板颜色,会使得进度条具有闪烁的效果。

注意:show panel if hidden。因为动态面板是处于隐藏的状态,所以要勾选这一选项。

onresize1

onresize2

OnPanelStateChange:状态面板状态改变时触发。如果动态面板的宽度没有达到背景条的宽度,即进度条百度比小于100%时,那么动态面板就要每隔56s增加背景条宽度的1%。选择56s的依据是,电影的一帧是56s,比较符合人眼的视觉观察。一旦进度条的百分比=100%时,则弹出网页。进度条就停止增加,完成使命。

onpanelstatechanged

end

通过以上的设计,页面载入时的进度条就基本已经完成了。

源文件下载:链接:http://pan.baidu.com/s/1qWGKToK 密码:adx4

Axure页面原型效果展示:http://sj8sjc.axshare.com/#c=2

您可能想查找下面的文章:

  • Axure教程:滑动鼠标页面自动切换(一)
  • Axure教程——页面载入进度条

相关文章

  • 2017-06-14用Axure 实现“打飞机”,骚年,来一发(上)
  • 2017-06-13Axure教程:可使用的计算器demo制作(下)
  • 2017-06-14Axure教程 | 如何通过拖动滑杆上的按钮,调整数值?
  • 2017-06-14如何用Axure快速制作APP交互原型
  • 2017-06-13Axure实现多级联动下拉框
  • 2017-06-14建立自己的元件库(二)——验证码
  • 2017-06-14Axure教程-锚点滚动效果
  • 2017-06-13Axure RP8 动态面板之折叠和展开(例如菜单栏)
  • 2017-06-14Axure教程 | Axure8旋转功能应用——幸运大转盘
  • 2017-06-14Axure教程:滑动鼠标页面自动切换(一)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure原型设计之轮播图
    • Axure实现两种滑动的方式(附源文件下载)
    • Axure教程:实现倒计时获取验证码效果
    • Axure7.0教程(五)鼠标Cursor函数的使用(动态面板跟随)
    • Axure中继器:制作可交互的“APP音乐播放列表页”
    • Axure教程:用中继器和日期函数实现万年历
    • Axure教程:如何制作炫酷高效的元件库?
    • Axure基础教程—文本框用法
    • Axure RP设计伸缩导航、遮罩弹窗、返回顶部的方法
    • Axure7.0教程(二)中继器的使用(2)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有