快好知 kuaihz

Axure8.0教程——页面载入进度条(二)

在上一篇原型设计《Axure教程——页面载入进度条》中,设计中运用的技巧主要是函数、动态面板的使用;全局变量的使用、逻辑条件的设置。函数部分涉及widget.width、widget.height、widget.x、widget.y、Math.ceil()等;动态面板部分通过其大小改变触发(OnResize)和其状态部分触发(OnStateChanged)相互牵制影响。其实这一种比较依赖于函数的设计方法,是比较定性的一种设计方式。在一部分博友的建议下,我又设计了3种不同形式的页面载入进度条,其实,万变不离其中,运用的还是一些基本元素。

进度条设计

形式1的进度条是模拟钟表的形式,这一形式其实是很符合中国的传统元素——人生如圆,终点亦是起点。进度条的作用是某一页面和另一页面的润滑链接。这在移动APP和网站页面载入中比较常见。形式2和形式3比较类同,都是矩形长条的形式。只不过前者是将矩形长条分成矩形框的形式,而后者是直接划入的形式

设计思想

形式1&形式2

首先,作图方面,给一个小建议:尽可能充分的利用辅助线;其实,逻辑条件方面,什么时候是页面载入完成时刻,什么时候是载入进行时,临界点是什么?这里,我们设置global variables(全局变量)——num,初始值为1,当每次一个小圆点或者正方形亮起时,num的值自动加1,当num=12时,即载入完成。最后,基于逻辑条件下,判断是动态面板状态切换还是打开新的链接。

形式3

形式3的交互设计是一种基于视觉的定量的设计。动态面板是有显示任意页面的功能的,即可以显示我们想让其显示的部分,而隐藏掉我们想要隐藏的部分。明白这一点是很重要的。那么,我们就可以画两个相同大小的矩形条,分别命名为progressbar和background。页面载入时,progressbar矩形条以不同的速度移入background矩形条中。这就会在视觉上给人一种忽快忽慢的逼真的网页承载效果。

值得一提的是,case1和case2是按照设置的先后顺序,至上而下的运行的;但是在case1中具体的交互情景则是同时进行的。所以,我们需要加入wait 3200ms这一交互设计。

 

源文件下载:http://pan.baidu.com/s/1jGMwVFC

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

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:进度  进度词条  载入  载入词条  页面  页面词条  教程  教程词条  Axure8  Axure8词条  
原型

 Axure:中继器实现表单增删改...

在用Axure的时候,怎么通过中继器实现表单的增删改查呢?本文分享了一个方法。使用中继器设计表单,如下:一、分析在文本框中输入学号,姓名,成绩,班级,点击“新增...(展开)

原型

 Axure原型设计:微信看一看下...

 看一看是微信最新开放不久的功能,以前是隐藏在搜索框下方“朋友圈热文”。进入后可以查看推送给自己感兴趣的文章。在文章列表里,下拉后释放,会自动更新些新...(展开)

原型

 移动端APP应该如何定义页面规范

APP的所有功能和内容最终都呈现在页面这个载体上。设计好页面,至少会让整个APP的交互体验达到及格的水平。而页面的加载逻辑、状态表现等规则在大部分时候都应该是一...(展开)