• 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  字体:[增加 减小] 来源:互联网

本文主要包含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教程——页面载入进度条

相关文章

  • Axure 美女浏览原型,内含:多层动态面板嵌套,拖动时函数设定边界
  • Axure教程 | 如何通过拖动滑杆上的按钮,调整数值?
  • Axure7.0教程(三)中继器的使用(3)
  • 矩形框:深度理解和应用元件样式(二)
  • Axure实例:制作一个通用的移动端内容滚动区
  • Axure教程:微信聊天列表原型制作(一)
  • Axure教程:原型设计之微信朋友圈效果(中继器、动态面板、变量高级用法)
  • Axure8.0小案例:手把手教你画挖掘机
  • axure九宫格拼图的实现原理
  • Axure教程-锚点滚动效果

文章分类

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

最近更新的内容

    • Axure8.0小案例:手把手教你画挖掘机
    • Axure教程:如何制作炫酷高效的元件库?
    • Axure原型技巧 | 这回我们模拟下键盘输入
    • Axure教程丨制作自己的Axure元件库
    • Axure教程 | 漂亮的不像实力派的锤子时钟
    • Axure实例:顶栏和侧边栏的固定和窗口自适应
    • Axure 8.0实例:复选框的应用
    • Axure原型设计,单读APP原型分享
    • Axure7.0教程(七)math函数的使用(2)Math函数简介
    • Axure教程:原型设计之侧滑菜单

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

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