axure基础原型制作之地区-学校-学院三级联动

这个原型是在一个互换链接的朋友的博客上的省-市-区三级联动稍加改动形成的,是个比较常见的原型,于是我也试着做了一下。

效果要求:

有三级选项:地区—该地区的学校—该学校的学院,每个下级的选项都是上级的子选项。比如选择地区为“湖北省”,那么该地区的学校就得从备选的湖北省的学校中选取(武汉大学、华中科技大学、华中师范大学等),该学校的学院必须属于上一级的学校。

制作步骤:

1,  地区不需动态面板,一个简单的droplist即可,里面加入几个备选地区,比如湖北省、陕西省、北京市等。

2,  加入dynamic panel,其中panel里面的states的个数与上级的地区的个数严格对应,因为不同的地区对应于不同的区域学校,此处加入3个states,全部编辑,每个states拖入droplist分别添加对应的学校。

3,  在以上的3个states后面依次加入dynamic panel 是为了实现针对不同的学校显示不同的地区,这次panel的states的个数要对应于上级几个本地学校包含的学院的个数。

4,  给onchange添加case,其中step1添加条件的时候要选择if selected option of…

Bug

初次进入页面,它会默认出现:湖北省-武汉大学-武大信管 的选择,实际上它将各级的第一个分类直接显示在框中,这会造成不良的显示效果,比如你选择:陕西省,它自动将西安交通大学放在学校栏的第一个,这没什么好说的,但是第三级就没有跟着改变,它仍然是默认的“武大信管”,槑!所以我想知道——如何取消降低一个分类放在框里面。

附注:

后来的dynamic panel是不需要添加那么多的,只需要将一个dynamic panel放在学校后面即可,然后根据学校选择的不同,调动不同的学院的states。因为在一个页面内,axure都可以被调用。

axure基础原型之图片自动轮转播放

效果要求:

有5张图片,相隔相等的时间分别播放一张图片,播放完毕最后一张又转到第一张重新开始。

制作步骤:

1,  加入dynamic panel,大小不小于图片,编辑该panel,使之有5个States;

2,  编辑这5个states,加入5张图片,为了让图片大小和位置一致,可以在调整好第一张之后,右键选择edit location and size,之后几张都这样调整;

3,  给onpageload添加case,由于图1已经显示在最前面,因此转到下一个state应该是图2,并且转之前会有停顿时间设为2s,,,,,,转向图5之后需要再次停顿2s之后刷新本页。

axure基础原型制作之注册框

交互效果要求——

(1)点击用户名框时提示交互条件:用户名至少4个字符,取消点击时显示其他相应信息;

(2)点击密码框时提示交互条件:密码至少6位英文或数字;取消点击时显示其他相应信息;

(3)点击确认密码框时提示交互条件:输入相同的密码;取消点击时显示其他相应信息;

(4)符合以上所有条件时显示登录成功页面,根据用户名不同,欢迎的名称亦不同。

效果演示:

制作步骤:

(1)使用文本和文本框、按钮等组建做好基本布局;

(2)在三个框的右边分别放空白的文本组建,以显示提示信息之用;

(3)给用户名框添加case,onfocus解决点击用户名框出现提示信息的问题,if text on widget 用户名框 equals “”, set text on widget 用户名文本equals “输入4位以上英文或数字”,onlostfocus解决取消点击时各种应对情况。Onclick解决输入时与交互条件相符合时的反馈。

(4)给密码框及密码确认框加case,具体情况就不细说,看源文件即可清楚。

(5)给注册框加case以解决符合各种条件时进入登录成功的页面,为了在欢迎界面返回输入的不同用户名,在此要将用户名设定为变量绑定到“注册”按钮。除了符合所有条件外,还需要:set value of variable usernamevariable equals to text on widget 用户名框……这一步是重点,也是连接点!