百度360必应搜狗淘宝本站头条
grid 设置导航栏dedecms模版移位运算context xml
当前位置：网站首页 > 文章教程 > 正文

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

xsobi 2024-12-09 18:24 1 浏览

加入人人都是产品经理【起点学院】产品经理实战训练营，BAT产品总监手把手带你学产品

在产品的原型设计中，进度条的意义是：

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

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

拖入部件

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

交互设计

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

注意：to指的是绝对位置；by指的是相对位置。

函数说明：

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

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

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

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

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

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

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

本文由 @蜗牛PM 原创发布于人人都是产品经理 ，未经许可，禁止转载。

相关推荐

斗鱼针针成旻云个人资料 针针年龄身高演艺经历介绍

[闽南网]针针成旻云曾是七煌旗下签约艺人，经常在斗鱼进行直播身高超过170cm的她更因为有一双大长腿而被称为“斗鱼第一美腿”、“电竞第一腿”。本文这就来对针针的个人资料进行详细介绍，想知道她的年龄身高...

轻量级RTSP服务模块和RTSP推流模块适用场景区别

好多开发者一直搞不清轻量级RTSP服务SDK和RTSP推流SDK的区别，以下是相关区别：1.轻量级RTSP服务模块：轻量级RTSP服务解决的核心痛点是避免用户或者开发者单独部署RTSP或者RTMP服...

《新·奥特曼》11月18日国内视频平台上线

《新·奥特曼》海报。新京报讯11月14日，由上海新创华文化发展有限公司授权引进电影《新·奥特曼》宣布正式定档11月18日（周五）00:00上线视频平台，上线版本为日语配音中文字幕版。影片由庵野秀明（...

剑指Apple Watch!Android Wear也将支持视频功能

想必智能手表发展到现在，大家最期待的还是视频功能，近日AndroidWear就实现了这一功能，以后就能在手表上看视频了，想想就挺激动的，快来看看吧！其实早在WWDC大会上，老对手AppleWatc...

QT应用编程:基于VLC开发音视频播放器(句柄方式)

一、环境介绍操作系统:win1064位QT版本:QT5.12.6编译器:MinGW32VLC版本:...

OBS 源码分析 obs开发

本文将按照数据源的获取、渲染、推送的直播流程来让大家深入了解一下。1、直播源数据获取obs在启动时会优先加载libobs核心库，这个库初始化obs很多内容，包括crash模块、com、性能监...

Android和iOS端Moments更新:支持视频分享功能

Moments是社交网络巨头Facebook推出的一款私人照片分享应用，今天公司宣布对Android端和iOS端应用同时升级，新增对视频分享功能的支持。事实上早在数周之前，Facebook就曾表示Mo...

您很快就可以在Android Galaxy设备之间传输视频通话

在阅读此文之前，辛苦点击右上角的“关注”，既方便您进行讨论与分享，又能给您带来不一样的参与感，感谢您的支持！导语：在科技领域，每时每刻都有新的发展，令人兴奋的创新不断涌现。早在八月份，Android系...

一篇文章带你FFmpeg到流媒体服务器开发

安装ffmpeg:下载FFmpeg和libx264的包ffmpeg-2.4.1.tar.bz2last_x264.tar.bz2libx264需要yasm,所以先安装yasmapt-getinst...

YouTube 为 Android 平台提供 1440P 视频

安锋网8月10日消息，Android从起初的480P的屏幕分辨率发展到2014年的1440P花了将近六年的时间，一般认为1080P的屏幕分辨率已经是人眼可以识别的极限，但是...

FFmpeg 调用 Android MediaCodec 进行硬解码(附源码)

FFmpeg在3.1版本之后支持调用平台硬件进行解码，也就是说可以通过FFmpeg的C代码去调用Android上的MediaCodec了。在官网上有对应说明，地址如下：trac....

Android FFmpeg + OpenGL ES YUV Player

1、FFmpeg解出YUV帧数据1.1方法介绍打开封装格式上下文...

基于WebRTC的Android移动端无线视频传输

摘要：视频传输技术在现代社会广泛应用，人们对其的要求也越来越高，其发展的趋势是方便、快捷、随时随地。传统的视频传输过于依赖线路，线路的走向限制了传输的很多可能，所以无线传输才是发展的方向。本文提出...

使用python爬取抖音app视频 python爬取抖音视频数据

记录一下如何用python爬取app数据，本文以爬取抖音视频app为例。编程工具：pycharm...

Android IOS WebRTC 音视频开发总结(七七)-- WebRTC的架构和协议栈

本文主要介绍WebRTC的架构和协议栈（我们翻译和整理的，译者：litie），最早发表在【编风网】为了便于理解，我们来看一个最基本的三角形WebRTC架构（见下图）。在这个架构中，移动电话用“浏览器M...

一周热门
最近发表
标签列表