SlideShare uma empresa Scribd logo
1 de 73
Baixar para ler offline
Axure 高级技巧和文档礼仪 
如何实现复杂交互效果&提高使用效率
为什么用Axure 
引子
好原型工具应具备的特质 
操作简单 
快捷 
成本低 
功能强大 
可控 
直观
一 
搜狗搜索首页
一 
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、地图放大、缩小、拖动之后点击我的位置,回到 当前位置。(动态面板状态切换) 
描述 
二 
案例—地图放大缩小、回到当前位置
二 
案例—地图放大缩小、回到当前位置 
点击放大 
状态 五 
显示“已经 最大” 
是 
否 
状态 四 
是 
显示状态五 
状态 三 
状态 二 
状态 一 
否 
是 
显示状态五 
否 
否 
是 
显示状态五 
是 
显示状态五
二 
案例—登录页面 
用户名:852309946@qq.com 
密码:852309946 
都正确时点击登录按钮才能进入页面。否则输入框会 摆动提醒。 
描述
变量与系统函数 
二 
变量与系统函数
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

Mais conteúdo relacionado

Destaque

Material design分享
Material design分享Material design分享
Material design分享麦哥UE
 
手机浏览器竞品分析(Home页诉求)0714
手机浏览器竞品分析(Home页诉求)0714手机浏览器竞品分析(Home页诉求)0714
手机浏览器竞品分析(Home页诉求)0714麦哥UE
 
E-mail Marketing - 設計一封客戶會愛上你的電子報
E-mail Marketing - 設計一封客戶會愛上你的電子報E-mail Marketing - 設計一封客戶會愛上你的電子報
E-mail Marketing - 設計一封客戶會愛上你的電子報阿肯 KEN studio
 
Git 零基础介绍
Git 零基础介绍Git 零基础介绍
Git 零基础介绍Ethan Zhang
 
最终 大屏手机上的设计策略
最终 大屏手机上的设计策略最终 大屏手机上的设计策略
最终 大屏手机上的设计策略麦哥UE
 
Design in Agile Development
Design in Agile DevelopmentDesign in Agile Development
Design in Agile DevelopmentAbby Chiu
 
从钢铁侠与美国队长看用户体验
从钢铁侠与美国队长看用户体验从钢铁侠与美国队长看用户体验
从钢铁侠与美国队长看用户体验麦哥UE
 
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会Joseph Chiang
 
20150626 - 從使用者角度進行名單開發優化
20150626 - 從使用者角度進行名單開發優化20150626 - 從使用者角度進行名單開發優化
20150626 - 從使用者角度進行名單開發優化阿肯 KEN studio
 
Web前端性能优化 2014
Web前端性能优化 2014Web前端性能优化 2014
Web前端性能优化 2014Yubei Li
 
塑造产品核心亮点的设计
塑造产品核心亮点的设计塑造产品核心亮点的设计
塑造产品核心亮点的设计麦哥UE
 
Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享Abby Chiu
 
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)阿肯 KEN studio
 
Google analytics教學手冊
Google analytics教學手冊Google analytics教學手冊
Google analytics教學手冊煜庭 邱
 
设计好的用户体验 郑磊
设计好的用户体验 郑磊设计好的用户体验 郑磊
设计好的用户体验 郑磊麦哥UE
 

Destaque (20)

Material design分享
Material design分享Material design分享
Material design分享
 
手机浏览器竞品分析(Home页诉求)0714
手机浏览器竞品分析(Home页诉求)0714手机浏览器竞品分析(Home页诉求)0714
手机浏览器竞品分析(Home页诉求)0714
 
葡萄酒淺談
葡萄酒淺談葡萄酒淺談
葡萄酒淺談
 
20130317
2013031720130317
20130317
 
Obs教學
Obs教學Obs教學
Obs教學
 
E-mail Marketing - 設計一封客戶會愛上你的電子報
E-mail Marketing - 設計一封客戶會愛上你的電子報E-mail Marketing - 設計一封客戶會愛上你的電子報
E-mail Marketing - 設計一封客戶會愛上你的電子報
 
Git 零基础介绍
Git 零基础介绍Git 零基础介绍
Git 零基础介绍
 
最终 大屏手机上的设计策略
最终 大屏手机上的设计策略最终 大屏手机上的设计策略
最终 大屏手机上的设计策略
 
Let's Redux!
Let's Redux!Let's Redux!
Let's Redux!
 
Design in Agile Development
Design in Agile DevelopmentDesign in Agile Development
Design in Agile Development
 
从钢铁侠与美国队长看用户体验
从钢铁侠与美国队长看用户体验从钢铁侠与美国队长看用户体验
从钢铁侠与美国队长看用户体验
 
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
 
20150626 - 從使用者角度進行名單開發優化
20150626 - 從使用者角度進行名單開發優化20150626 - 從使用者角度進行名單開發優化
20150626 - 從使用者角度進行名單開發優化
 
Web前端性能优化 2014
Web前端性能优化 2014Web前端性能优化 2014
Web前端性能优化 2014
 
塑造产品核心亮点的设计
塑造产品核心亮点的设计塑造产品核心亮点的设计
塑造产品核心亮点的设计
 
Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享
 
Node way
Node wayNode way
Node way
 
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
 
Google analytics教學手冊
Google analytics教學手冊Google analytics教學手冊
Google analytics教學手冊
 
设计好的用户体验 郑磊
设计好的用户体验 郑磊设计好的用户体验 郑磊
设计好的用户体验 郑磊
 

Semelhante a Axure高级技巧和文档礼仪

Mvc training
Mvc trainingMvc training
Mvc trainingxioxu
 
业务需求分析入门
业务需求分析入门业务需求分析入门
业务需求分析入门zhoujg
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程yiditushe
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程appollo0312
 
Se2009 ch8
Se2009 ch8 Se2009 ch8
Se2009 ch8 浒 刘
 
软件工程 第八章
软件工程 第八章软件工程 第八章
软件工程 第八章浒 刘
 
性能测试实践1
性能测试实践1性能测试实践1
性能测试实践1yiditushe
 
C++中级培训胶片
C++中级培训胶片C++中级培训胶片
C++中级培训胶片ff1
 
05產品分析 -產品機能分析-高都企家班-大葉大學-詹翔霖副教授
05產品分析 -產品機能分析-高都企家班-大葉大學-詹翔霖副教授05產品分析 -產品機能分析-高都企家班-大葉大學-詹翔霖副教授
05產品分析 -產品機能分析-高都企家班-大葉大學-詹翔霖副教授文化大學
 
Azure Functions
Azure FunctionsAzure Functions
Azure FunctionsDino Wang
 
软件工程 第十一章
软件工程 第十一章软件工程 第十一章
软件工程 第十一章浒 刘
 
Jira 3.12.3不完全手册
Jira 3.12.3不完全手册Jira 3.12.3不完全手册
Jira 3.12.3不完全手册YUCHENG HU
 
Refactoring with Patterns in PHP
Refactoring with Patterns in PHPRefactoring with Patterns in PHP
Refactoring with Patterns in PHPJace Ju
 
同济优秀课程设计 - 软件测试报告
同济优秀课程设计 - 软件测试报告同济优秀课程设计 - 软件测试报告
同济优秀课程设计 - 软件测试报告Kerry Zhu
 
做一个“懒惰”的程序员-LCP框架系列交流
做一个“懒惰”的程序员-LCP框架系列交流做一个“懒惰”的程序员-LCP框架系列交流
做一个“懒惰”的程序员-LCP框架系列交流lichengdongdong
 
Er introduction
Er introductionEr introduction
Er introductionYubei Li
 
Struts学习笔记
Struts学习笔记Struts学习笔记
Struts学习笔记yiditushe
 
Lotus domino开发教程
Lotus domino开发教程Lotus domino开发教程
Lotus domino开发教程dyzm_2000
 
共通性應用程式介面規範
共通性應用程式介面規範共通性應用程式介面規範
共通性應用程式介面規範Audrey Tang
 

Semelhante a Axure高级技巧和文档礼仪 (20)

Mvc training
Mvc trainingMvc training
Mvc training
 
业务需求分析入门
业务需求分析入门业务需求分析入门
业务需求分析入门
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
 
Se2009 ch8
Se2009 ch8 Se2009 ch8
Se2009 ch8
 
软件工程 第八章
软件工程 第八章软件工程 第八章
软件工程 第八章
 
性能测试实践1
性能测试实践1性能测试实践1
性能测试实践1
 
Uml
UmlUml
Uml
 
C++中级培训胶片
C++中级培训胶片C++中级培训胶片
C++中级培训胶片
 
05產品分析 -產品機能分析-高都企家班-大葉大學-詹翔霖副教授
05產品分析 -產品機能分析-高都企家班-大葉大學-詹翔霖副教授05產品分析 -產品機能分析-高都企家班-大葉大學-詹翔霖副教授
05產品分析 -產品機能分析-高都企家班-大葉大學-詹翔霖副教授
 
Azure Functions
Azure FunctionsAzure Functions
Azure Functions
 
软件工程 第十一章
软件工程 第十一章软件工程 第十一章
软件工程 第十一章
 
Jira 3.12.3不完全手册
Jira 3.12.3不完全手册Jira 3.12.3不完全手册
Jira 3.12.3不完全手册
 
Refactoring with Patterns in PHP
Refactoring with Patterns in PHPRefactoring with Patterns in PHP
Refactoring with Patterns in PHP
 
同济优秀课程设计 - 软件测试报告
同济优秀课程设计 - 软件测试报告同济优秀课程设计 - 软件测试报告
同济优秀课程设计 - 软件测试报告
 
做一个“懒惰”的程序员-LCP框架系列交流
做一个“懒惰”的程序员-LCP框架系列交流做一个“懒惰”的程序员-LCP框架系列交流
做一个“懒惰”的程序员-LCP框架系列交流
 
Er introduction
Er introductionEr introduction
Er introduction
 
Struts学习笔记
Struts学习笔记Struts学习笔记
Struts学习笔记
 
Lotus domino开发教程
Lotus domino开发教程Lotus domino开发教程
Lotus domino开发教程
 
共通性應用程式介面規範
共通性應用程式介面規範共通性應用程式介面規範
共通性應用程式介面規範
 

Mais de 麦哥UE

格子里的设计
格子里的设计格子里的设计
格子里的设计麦哥UE
 
重构之道 触屏篇
重构之道 触屏篇重构之道 触屏篇
重构之道 触屏篇麦哥UE
 
重构之道 触屏篇
重构之道 触屏篇重构之道 触屏篇
重构之道 触屏篇麦哥UE
 
html5和移动web应用
html5和移动web应用html5和移动web应用
html5和移动web应用麦哥UE
 
★快乐的iOS手机游戏
★快乐的iOS手机游戏★快乐的iOS手机游戏
★快乐的iOS手机游戏麦哥UE
 
见微知著——无线产品交互细节
见微知著——无线产品交互细节见微知著——无线产品交互细节
见微知著——无线产品交互细节麦哥UE
 
Android那些事儿
Android那些事儿Android那些事儿
Android那些事儿麦哥UE
 

Mais de 麦哥UE (8)

格子里的设计
格子里的设计格子里的设计
格子里的设计
 
重构之道 触屏篇
重构之道 触屏篇重构之道 触屏篇
重构之道 触屏篇
 
重构之道 触屏篇
重构之道 触屏篇重构之道 触屏篇
重构之道 触屏篇
 
html5和移动web应用
html5和移动web应用html5和移动web应用
html5和移动web应用
 
像素画
像素画像素画
像素画
 
★快乐的iOS手机游戏
★快乐的iOS手机游戏★快乐的iOS手机游戏
★快乐的iOS手机游戏
 
见微知著——无线产品交互细节
见微知著——无线产品交互细节见微知著——无线产品交互细节
见微知著——无线产品交互细节
 
Android那些事儿
Android那些事儿Android那些事儿
Android那些事儿
 

Axure高级技巧和文档礼仪