axure高级技巧和文档礼仪
DESCRIPTION
用axure快速高效的制作原型。不用太花哨，只要规范和保证各种细节。TRANSCRIPT
Axure 高级技巧和文档礼仪
如何实现复杂交互效果&提高使用效率
为什么用Axure
引子
好原型工具应具备的特质
操作简单
快捷
成本低
功能强大
可控
直观
一 搜狗搜索首页
概述
概述
一.认识Axure 二.Axure高级功能介绍&案例分析
三.提高Axure使用效率
四.Axure礼仪和文档规范
概述
一 认识Axure
认识Axure
1 工具栏菜单栏
站点地图
3 组件库
4 母版管理
5 主工作区
6 页面属性
7 部件属性和交互
8 动态面板管理
Axure主要功能区域划分 一
Axure主要功能区域划分 一
演示各部分操作方式和快捷键（演示1）
交互动作的执行 一
事件（用例）
场景（条件）
动作
交互事件拆分 一
事件(用例)
场景1（条件）
场景2（条件）
动作1
动作2
动作1
动作2
演示添加事件、条件、动作（演示2）
演示交互动作的执行 一
二 Axure高级功能介绍&案例分析
Axure高级功能介绍&案例分析
二 动态面板的使用和管理
动态面板的使用和管理
二 动态面板的使用和管理
动态面板的使用和管理
二 动态面板的使用和管理
1、隐藏与显示
2、滑动效果
3、拖动效果
4、多状态效果
常用于：点击按钮后出现一些界面上没有的元素
滑动效果一般通过其他交互事件激发，如点击某个按钮，或页面加载时实现
主要用于APP的产品原型。用来实现面板被拖动时产生的一些效果
隐藏一个面板，显示另外一个面板;动态面板的滑进滑出效果等
演示动态面板的使用（演示3）
二 动态面板的使用和管理
窗口4向右滑动 关闭按钮同时旋转
窗口4滑出页面 窗口5向下位移并渐隐
窗口5出现在窗口四 位置，上移并渐现
窗口6从优向左移动 至窗口5位置
二 综合案例—多窗口删除专利
1 3
4 2
二 案例—多窗口删除专利
拖动 窗口五
触发删除
窗口四滑出屏幕
返回原点
是
否
“×”转动
4
1
3
2
1、拖动效果
4、显示隐藏
3、滑动效果
2、面板多状态
窗口五隐藏 窗口五移至窗口四位置并显示
窗口六滑动 动至窗口五
触发事件中条件的使用
二 触发事件中条件（IF和ELSE IF）的使用
IF=如果
ELSE IF=否则，如果
举例： 事件“过马路遇到交通灯时”
用例1：IF True 红灯亮 执行 停
用例2：ELSE IF 黄灯亮 执行 等
用例3：ELSE IF True 执行 行
当过马路遇到交通灯时，如果（IF）是（True）红灯，就停下
否则（ELSE）如果（IF）是黄灯，是的话等一等
否则（ELSE）如果（IF）真的（True）不是红灯也不是黄灯就过马路。
二 IF和ELSE IF的使用
1、在Axure里，默认事件中的每个用例都是有关联的，由上至下依次执行
2、可以通过对用例添加条件进行判断
3、用例的IF、ELSE IF是可以切换的
二 触发事件中IF和ELSE IF的使用
1 2
3
条件生成器
变量值 变量值长度 部件上文字 部件值长度
……
二 触发事件中IF和ELSE IF的使用
1
2
演示为事件添加条件（演示4）
二 触发事件中IF和ELSE IF的使用
1、在页面范围内滑动地图（动态面板容器）
2、地图能放大缩小，且能判断最大、最小。（条件判断）
3、地图放大、缩小、拖动之后点击我的位置，回到当前位置。（动态面板状态切换）
描述
二 案例—地图放大缩小、回到当前位置
二 案例—地图放大缩小、回到当前位置
点击放大
状态五
显示“已经最大”
是
否 状态四
是
显示状态五
状态三
状态二
状态一
否
是
显示状态五
否 否
是
显示状态五
是
显示状态五
变量与系统函数
二 变量与系统函数
1、设置、添加变量
1
2
3
二 变量与系统函数
2、变量的种类： 全局变量：可以在整个原型的任意位置调用和修改。 局部变量：仅作用于某一事件的某一动作内。 自定义变量：自行新建的全局变量。
1
2
3
二 变量与系统函数
二 变量与系统函数
演示变量和函数的位置（演示5）
特殊变量（函数）： 特殊变量是软件自带的函数，可以调用获得一些特定的值。 功能函数： 除了运算符之外的三个函数，可以对变量进行进一步操作以获取需要的值。比如：截取变量字符串中的某一段或者计算变量字符串的长度。
Axure6.5
Axure7.0
二 变量与系统函数
例1：截取变量“页面名称”中的前三个字符 [[PageName.substring(0, 3)]] 例2：获取页面名称字符的长度 [[PageName.length]] 例3：将变量转换成小数点后保留两位的数值 [[自定义变量名.toFixed(2)]]
功能中的函数都是通过[[变量名.函数名（参数）]]”来实现：
二 变量与系统函数
二 案例—微博发布器
描述： 利用函数实现微博发布器相关功能（140字计数等）
描述： 利用变量和函数实现倒计时
二 局部变量+math函数案例—数字倒计时
二 案例—数字倒计时
利用判断动态面板的显示/隐藏实现循环
利用局部变量实现数字的递减 加载页面
秒大于0
分显示59
是
否
1 2
秒减1
3
描述： 自动轮播，鼠标hover缩略图时轮播停止，鼠标移开后继续轮播
二 综合案例—轮播图
描述： 触发抽奖，开始轮播奖品，停止后，随机抽中某个奖品。 可控制中奖几率（模糊），可无限次使用。
二 利用函数做简易抽奖软件
二 思考
Axure功能很强大？
有必要做的这么复杂吗？
二 思考
三 效率才是王道
提高Axure使用效率
使用自定义部件
提高Axure使用效率—自定义组件库 三
创建与修改组件库
2
3
如何提高Axure使用效率
1
三
演示自定义组件库（演示6）
提高Axure使用效率—自定义组件库 三
组件库应该包含哪些内容？
我要自定义组件库 三
组件库基本构成
提高Axure使用效率—自定义组件库 三
进入Axure演示部件库组成（演示7）
提高Axure使用效率—自定义部件库 三
提高Axure使用效率——母版 三
技巧：根据使用场景切换Behavior
Normal 与母版关联，可改变位置，不可单独修改
Background 与母版关联，位置固定，不可单独修改
Custom 拖入工作区后与母版失去关联，位置可变、可单独修改
提高Axure使用效率——母版 三
提高Axure使用效率—自定义组件库 三
演示快速创建页面（演示8）
如何提高沟通效率
四 沟通才是王道
四 Axure文档礼仪
文件命名 更新/修订 文档规范 沟通神器
文件命名规范
semob_android2.0_feature list_0515
项目名 操作系统/平台 文档名称
四 Axure文档礼仪
时间
文件命名规范
四 Axure文档礼仪
1
2 3
1、项目信息 2、Sitemap结构 3、更新记录
四 Axure文档礼仪
可放置项目logo，便于不同团队间分享
项目名称等，概括本文档主题
设置好后点击close，不会丢失
1、项目信息设置
四 Axure文档礼仪
四 Axure文档礼仪
演示添加项目信息（演示9）
更新记录
2、sitemap基本要素
流程图（如有）
线框图
修订版本(如有)
四 Axure文档礼仪
3、更新记录
版本 更新内容 责任人 完成时间 修订记录 修订内容 修订原因
必要信息
修订信息
四 Axure文档礼仪
四 Axure文档礼仪
演示添加修订记录（演示10）
2
1、标题区 项目、责任人、保密提示等 2、主工作区 配合母版更快捷 3、提示信息区 提示当前页面变动情况和重要信息
四 Axure文档礼仪
3
4、内容页结构
1
技巧：框架和母版的配合
和母版配合效果及常用母版
四 Axure文档礼仪
四 Axure文档礼仪
演示实际工作状态（演示11）
四 Axure文档规范
一切为了沟通
产品沟通神器—Feature List
四 附录—提高效率的神器
走查神器—走查问题表单
四 附录—提高效率的神器
手机端Demo展示神器—POP（ Prototyping on Paper ）
四 附录—提高效率的神器
四 最后一句话
Axure只是众多原型设计工具中的一种 有时一句话比一整套交互流程更有效
四 你有什么神器，拿出来溜溜
大家的沟通神器？
四 总结
1、使用动态面板快速实现简单交互动作，复杂动作用文字描述或口头表达
2、配合自定义组件库和母版可以极大提高Axure使用效率
3、良好的文档规范和命名规范可以让协作更加顺畅
4、Feature list可以极大降低产品同学的工作量，减少沟通阻力
5、走查表单可以让大家都参与到产品走查中，大大提高产品体验
四 推荐几个Axure社区
WebPPD.com ——尹广磊
人人都是产品经理——Axure版块
iAxure.com——Axure原创教程网
搜狗桌面事业部体验设计中心
@搜狗桌面EDC