Axure快速创建原型的示例

一.提要

Axure的主要作用就是快速的建立产品的原型,初次接触这个软件还是觉得有点复杂,而且网上并没有完整的示例.

这里我们要做的就是一步步建立一个网站的原型.

先看最终效果:

二.基础知识

这里最重要的是了解主界面上的几大面板 的作用.

1. 主菜单和工具栏
执行常用操作，如文件打开、保存文件，格式化控件，自动生成原型和规格说明书等操作。
2. 站点地图面板
对所设计的页面（包括线框图和流程图）进行添加、删除、重命名和组织页面层次，。
3. 控件面板
该面板中包含了线框图控件和流程图控件，如按钮、图片、文本面板、矩形框等，可用这些控件进行线框图
和流程图的设计。 另外，你还可以载入已有的部件库（*.rplib文件）和创建自己的部件库。
4. 模块面板
模块是一种可以复用的特殊页面，在该面板中可进行模块的添加、删除、重命名和组织模块分类层次。
5. 线框图工作区（或叫页面工作区）
线框图工作区是你进行原型设计的主要区域，在该区域中你可以设计线框图、流程图、自定义部件、模块。
6. 页面注释和交互区
添加和管理页面级的注释和交互。
7. 控件交互面板
定义控件的交互，如：链接、弹出、动态显示和隐藏等。
8. 控件注释面板
对控件的功能进行注释说明。

注:参考Axsure快速原型设计第二版

三.2个难点

1.广告牌的切换

主要的思路是利用button的onClick()事件来控制动态面板的显示与否.我这里的做法是设置三块动态面板,每块面块对应相应的广告.

然后三个button来触发不同的面板.比如点击button1,tab1显示,tab2,tab3隐藏.更改button的样式可以使效果更好一些.

2.登陆窗口显示

这里还是利用了动态面板.第一个动态面板是半透明的一个层 ,第二个是登录窗口.初始状态都是隐藏的,点击登陆后状态变为显示.

四.打完收工

快捷键F5,在浏览器中预览.