在上一篇原型设计《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