1. 设计师转型之路系列课程·工具篇
I ♥ wireframes
Axure RP使用技巧及进阶
用户体验部UDC 罗伟 2011/11/27

2. 为什么我们需要线框图
• 表达想法
• 低成本的迭代方式
• 沟通的基础
• 工作量的评估基础

3. 线框图设计指南
• 原型设计的目的：准确、快捷的表达产品设计意图
• 原型输出：根据不同对象输出不同的形态
• 不要被工具捆绑：
✦ 原型是用来正确表达设计思想，但并非掌握了原型工具就能
正确的表达设计思想
✦ 尽可能的掌握原型工具的新功能和技巧，在实际工作中灵活
运用

4. 常用的交互原型工具
• Axure RP(推荐)
• Microsoft Office Visio
• Balsamiq Mockups
• Mockflow
• Dreamweaver
• Pencil sketch
• Photoshop
• …

5. Axure RP 6.0特性
• 所见即所得
• 可交互操作的原型界面（Step-by-step脚本）
• 母版/Master
• 自动生成规格文档(Prototype, Specification ...)
• 组件可扩展
• ....

6. 基础界面
快捷工具栏
widget 属性面板
页面管理器
组件管理器
动态面板管理器
母版管理器
页面属性面板

7. 进阶
• 母版Matser
• 动态面板Dymantic
• 自定义组件
• 事件

8. 动态面板Dymantic panel
——可以理解为⼀一个包含多个状态的面板，可以灵活设置在何种情况下显示某个状态
动态面板 >
自定义组件
事件
1 2
2 3 4 1 3 4

9. 自定义组件
可以自定义组件样式以便在其他项目中共用
动态面板
自定义组件 >
事件

10. 事件
事件定义了可以检测到的使用者行为，通过对于发生事件后的设定，可以使得使用者
与原型进行复杂的互动过程。
动态面板
自定义组件 动作
事件 > onClick 当点击该元件时
onMouseEnter 当光标进入某个元件时
onMouseOut 当光标移出某个元件时
onKeyUp 当按键完成时
onFocus 当元件获得焦点时
onLostFocus 当元件失去焦点时
......

11. 小技巧：打造自己的工作区
• 修改页面默认样式
• 修改组件样式默认值
• 修改页面参考线默认值
• 设置文字行距

12. 小技巧：打造自己的工作区
• 修改页面默认样式
• 修改组件样式默认值
• 设置文字行距
选择组件，右侧组件属性编辑器选择文本按钮

13. 学习资源
• 新手入门
http://www.axure.com/online-training-beginner.aspx
• 熟练阶段
http://www.axure.com/online-training-intermediate.aspx
• 高级教程
http://www.axure.com/online-training-advanced.aspx

14. 学习资源
• 相关组件范例
nas/Alibaba/B2B/项目组/中文站UED/【交互】控件、规范、指南、资
料分享/通用组件

15. 当然
别忘记，
工具不是设计！
很多时候，
最好的设计工具就是——
思考+手中的 笔！

16. 其他
• Evernote
• Dropbox
• Things | Remember the milk
• Xmind

17. 谢谢！