多语言展示
当前在线:953今日阅读:84今日分享:32

axure创建界面原型方面的经验

axure是一款建立界面原型很好的软件,分析员使用界面原型与最终用户沟通,可以获取用户的真实需求。通过界面原型与设计、开发人员进行沟通,保证开发成果不变样。 假设你已经会auxre的基本操作。 auxre widgets(控件)中,有一个叫 dynamic panel的控件,使用好可以获得很好的效果,本文使用该控件建立一个多tab的效果。 (这篇经验可能起点有点高,后边我会出一个系列,从基础开始,写成教程。请大家读完后鼓励我,关注我,加我粉丝,给我月票,谢谢)
工具/原料

axure 试用版

步骤/方法
1

创建一个项目,名字test;

2

打开默认的home页面,在右边工作区编辑该页面;

3

在左边的控件栏(widgets),拖动一个矩形到home页面的合适位置,设置合适大小(作为tab页面边框);

4

在拖动两个矩形控件到刚才的矩形上方左侧,作为tab标签,双击每个矩形,分别输入文字“tab1”,“tab2”。等一下单击矩形时切换页面。你可以选中矩形,然后右键,操作:Edit Button Shape-- >Tab Left (根据需要可选则其他形状)。

5

拖动控件:dynamic panel 到刚才作为页面边框的矩形中,改变控件大小适应矩形大小;

6

双击页面中的dynamic panel 控件,在弹出的对话框中,输入控件名称:testpanel。对话框的下部列表是控件的状态,状态是动态面板的核心概念,tab效果的实现其实是在转换面板的不同状态,每个状态可以对应一个页面,你可以在不同状态页面中设计不同的内容。通过状态切换达到显示不同的内容,也就做到了tab页的效果。状态在列表中的顺序,是默认显示顺序,比如第一个状态总是当前的状态。 默认只有一个状态,状态名称默认为state1可改名,改为TAB1,点击加号,增加一个状态,名称为 TAB2,你可以改变状态的顺序。

7

双击TAB1状态,系统打开一个页面,在蓝色矩形内,放置一些控件; 双击TAB2状态,系统打开另一个页面,在蓝色矩形框内放置一些控件,注意与TAB1不同,以区分;

8

到现在为止,基础工作已经完成,下面通过添加TAB标签(第4步创建的两个小矩形)的click事件,达到效果。选择标签为TAB1的矩形,在右边控件属性栏,点击闪电形状的按钮,再双击“OnClick”按钮,弹出事件设置对话框,在对话框中选择 set panle state(s) to state(s),中间出现事件列表(可多条,按顺序触发),在右边选择切换到哪个面板的哪个状态,此时,选择testpanel面板的TAB1(与标签对应)状态,点击OK按钮设置完毕。相同步骤设置矩形TAB2的事件。至此设计完毕;

9

按F5或者点击菜单“Generate”-->Prototype... 然后按提示选择生成页面路径,生成后会自动打开首页,点TAB1,TAB2对比,观察到tab页切换效果。

10

总结:动态面板的状态概念很重要,可以使用任何事件去切换状态,这样可以做出很多效果。

推荐信息