Axure软件的使用
1．Axure简介
l Axure：公司名 RP：快速原型的缩写 Pro：专业
l 没有中文版，可以先安装英文版，然后汉化
l 设计思路：提出问题，分析问题，解决问题
2．工作流程
l 编辑
l 预览（发布）浏览器查看
n 发布/Preview Option(ctrl+F5)预览设置
l 发布
n 发布官网，需要账号
n Generate HTML File 创建HTML文档（支持比较好的浏览器是IE浏览器和火狐浏览器）
3．操作Axure
l /视图/...
n 面板……显示需要的工作面板
n 重置视图……回复乱的界面
l /编辑/...
n 撤销 （ctrl+z）
n 重做 （Ctrl+y）
l /网格/...
n 布置/网格和辅助线
n 布置/网格和辅助线/设置网格
n 布置/网格和辅助线/对齐网格（吸附）
n 拖动，添加辅助线
n 全局辅助线和页面辅助线：前者针对整个项目所有页面，后者针对单一页面
n 清除所有辅助线，单一清除拖动即可
l 页面属性/...
n 字体：通常选别人计算机里有的字体
l 页面样式/...
n 页面样式/编辑/新增……（这样就可以作为一整套的复用）
l 增删页面/...
n 右键单击/新增（子页面，同级页面，文件夹）
l 调整页面之间的级别关系（可拖动，可以按钮操作）
l 页面注释（在页面样式同级）：可以选择默认的，也可以自定义，为了提醒自己和别人用的
l 元件
n 添加元件：拖动
u ->选中可以操作该元件
u ->选中多个，和其他软件的的快捷键操作一样
n 元件的属性和样式
u ->样式/基本样式/自定义：保存某一样式，让它能用在不同的元件上
n 动态面板（会在元件管理里出现）：将现有的某些元件合成一个动态面板，动态面板就是自定义的元件
n 元件交互和注释：相应的描述，状态选择
n 元件/下载元件库……官网下载
n 元件/载入元件库……（卸载元件库）
l 母版面板：将页面共有的东西提取出来，
n 选中/右键单击/最下面转换为母版
n 双击母版面板里的母版，可以进行编辑
n 也可以直接新建母版
n 也可以分类
l 对齐操作：拖动，会有辅助线帮助；选中需要对齐的，点击对齐按钮操作
l 层叠顺序：选中，按钮操作……
l 生成流程图：选择页面/右键单击/生成流程图
4．高级交互：事件
l 要明白操作的概念（即事件）和执行的效果（即用例）
l 查看更多事件
l 单击事件：
n 页面互动面板 和 元件交互和注释/互动->设计用例
l 鼠标移入时
n 设计用例
l 鼠标按下时
n 设计用例：一般针对元件操作
l 鼠标释放时
n 设计用例：一般针对元件操作
l 鼠标移动时
n 设计用例：一般针对页面操作，需要设置xy坐标值，和绝对值，来控制控件随鼠标移动，可控制移动范围在某个控件里面
l 当鼠标在某个控件上停留超过两秒时
n 设计用例：这个只是元件事件，页面事件没有
l 鼠标点击超过两秒时
n 设计用例：也是元件事件，页面事件没有
l 双击事件
n 设计用例
l 移动移出
n 设计用例
n 设计用例：移动
l 多个元件之间的相互操作效果（区分事件和用例的概念即可举一反三）
l 视图自适应：为了适应显示在不同设备上，和不同大小的窗口
n 在编辑区域的左上角有一个图标，点击新建一个自适应视图，然后就会有基本和自适应的多个图，类似于Android开发的适配
n 删除自适应视图，和新增操作一样的流程，只不过增加换成删除
n 自适应事件：页面交互/自适应事件......就是在页面自适应执行过程中会执行的事件
l 焦点事件：按tab键会切换焦点
n 当获取焦点的时候会执行的事件
n 当失去焦点时执行的事件
l 窗口事件：窗口大小改变时，窗口滚动时
n 当窗口大小改变时会执行的事件
n 窗口滚动时会执行的事件
5．高级交互：动作
l 导航设计
l 关闭窗口
l 滚动到元件（锚点链接）：快速跳转到当前页面的某个位置 的用例。
l 元件控制
n 显示和隐藏
n 设置文本
n 设置图像
n 选中 未选中 切换选中
n 禁用和启用
n 设置选定的列表项：ListBox，双击控件可以增加列表项
n 移动
n 层次动作
n 获取焦点
n 展开与折叠
l 注意：一个用例可以设置多个动作
l 动态面板的动作
n 选中需要添加到动态面板的所有控件
n 右键/转换为动态面板
n 然后就可以在动作里对这个动态面板进行操作了：一般用在状态切换的情况下
n 还可以修改动态面板的尺寸
l 变量设置
n 创建全局变量：项目/全局变量
n 学会结合变量和动作一气使用：设置用例面板/增加条件/判断条件
n 创建局部变量：点击小按钮fx/弹出变量选择的面板/全局变量下面是局部变量
n 效果：button单击时显示全局变量的值，/用例设置/文本设置/fx小按钮/选择插入变量的值
l 中继器控件(Repeater)
n 中继器非常类似于Android里面的ListView，只不过中继器还可以自己内部设置数据，类似list增加了SQLite得功能
n 中继器的设置和使用
n 中继器的动作
n 拿到输入框的文字：用局部变量/元件文字
n 对中继器新增行：用例设置面板/中继器/数据集/新增行/添加行...fx设置局部变量值
n 对中继器删除行：用例设置面板/中继器/数据集/新增行/删除行...
n 删除选中行、多行
n 用例设置面板/中继器/数据集/标记行this
n 删除的时候，不选择规则，选择已标记
l 中继器动作
n 更改：中继器的数据到输入框（设置中继器的点击事件，设置文本框动作即可），记得要取消全部标记行，然后标记当前行
n 全选、全不选得效果
n 排序
n 取消排序
n 过滤器（筛选）：增删
n 中继器的分页：
u 首先要在中继器主页中设置分页的属性。
u 用例设置面板/中继器/设置当前页（next...previous）
6．实践操作
1) 登陆限制：
l 步骤
n 当没有登陆的时候，自动弹回登陆的页面
u 全局变量限制，新增条件
n 设置输入框是密码显示风格
n 提示用户名密码啊不对
2) 图片切换
l 步骤
n 用动态面板实现，单击切换
n 自动切换
n 选中动态面板/交互/载入时/动态面板/设置面板状态......
l 勾选循环、图片轮播
n 图片切换，对应的描述也要有相应的变化
n 将描述也设置成另一个动态面板，然后单击定位状态
l （特俗情况下，也可以考虑用移动方式来实现效果）
n 事件：动态面板状态改变时（添加条件：动态面板==index）
3) 跑马灯效果
l 步骤
n 文字转换为动态面板
n 属性和样式：属性/去掉“调整大小以适应内容”
n 进入动态面板编辑主页
n /元件管理/动态面板/把文字拖到显示框（蓝色框）右边
n 事件/显示/移动/绝对位置(查看具体位置：元件属性和样式/样式/位置和尺寸)、x移动到负...
l 循环：隐藏-等待-显示-移动-等待-隐藏......
l 图片跑马灯设计思路不一样，可以直接用状态切换来实现，还可以增加按钮的单击事件改变动态面板的状态
4) 单机某个按钮弹出一个面板
l 步骤
n 设计一个对话框（动态面板里面嵌套动态面板）
n 隐藏
n 单击事件：弹出、置于顶层
5) 弹出菜单
l 元件里面的Classic Menu-Horizontal/Classic Menu-Vwetical
l 增加删除菜单项：元件样式和属性/属性/插入增加项（删除）
l 增加删除子菜单项
6) 模拟充电器效果
l 步骤
n 自己手动绘制一个电池样式
n 通过动态面板实现
n 二级联动一个百分比的显示框
7) 评论的伸缩效果：展开/折叠
l 隐藏和切换
8) 手风琴效果
l 多级伸展折叠效果
9) 酒店网站制作
l 锁定操作
l 想让中继器效果有作用，应该放在每项加载时事件处理
7．iphone手机原型设计
l 载入元件库，ifelse条件的使用，触点的设计
l 滑动操作：（移动，拖动，动态面板的双层嵌套）
n 首先必须转换为动态面板
n 拖动动态面板时事件(OnDrag)：移动动作(Move)/选中动态面板/选择方向
n 再次选中，转换为动态面板，并且去掉属性里面的“调整大小以适合内容（Fit to Content）”:解决拖动动态面板时，超出部分不显示的问题
n 在内层动态面板里面，加入超出部分的显示，保证拖动时显示更多内容的效果
l 捕获拖动位置：
n 隐藏一个占位形状，对动态面板添加一个拖动用例：新增条件/选择“元件范围”、拖动、接触、元件范围、哪一个元件
n 最关键的一步：这个用例一定要右键单击/选择“切换到IF/ELSE IF”
l 拖动到一定的位置，切换另一张图
n 设计触点
n 如果碰到触点，动态面板就移动