1、Axure原型设计快速入门互娱研发部 Leo Song快速入门课程自我介绍 姓名：Leo Song (宋玥) 部门：互娱研发部 职位：产品经理快速入门课程课程简介 面向学员 产品相关、交互设计相关、以及与需求沟通相关的全体同事 课程目标 掌握Axure RP制作产品原型的基础知识 授课时长 3小时 课程大纲 Axure简介 基础知识 软件界面，线框图与注解，基础交互，动态面板，模块，流程图，交互原型，规格书 实战案例学习快速入门课程目录 Axure RP 简介 快速入门知识 软件界面 线框图与注解 基础交互 动态面板 模块 流程图 交互原型 规格书 课程小结及案例快速入门课程什么是Axure
2、RP？What is Axure RP?（摘自官方网站）Axure RP is a , and tool used by user , , and to and .线框图规格书交互原型商业分析师产品经理信息架构师UE设计师应用web网站RP :Rapid Axure快速入门课程Axure R
3、P可以用在哪？快速入门课程为什么要用Axure RP？其它？快速入门课程Axure RP 能做什么？快速入门课程Axure RP还能做什么？低保真线框图高保真原型快速入门课程目录 Axure RP 简介 快速入门知识 软件界面 线框图与注解 基础交互 动态面板 母板 流程图 交互原型 规格书 课程小结及案例快速入门课程Axure RP 软件界面1.菜单和工具条2.站点地图3.原件面板4.母板5.编辑工作区域6.页面注释、交互7.控件交互及注释快速入门课程目录 Axure RP 简介 快速入门知识 软件界面 线框图与注
4、解 基础交互 动态面板 母板 流程图 交互原型 规格书 课程小结及案例快速入门课程站点地图站点地图：层级的导航列表添加，删除页面页面位置排序（上移、下移）页面层级组织（增加缩进，减少缩进）重命名页面双击页面名称进入编辑设计快速入门课程元件组件：用以UI设计的若干组用户界面控件选择一个元件库，在元件库中搜索需要的控件载入指定的组件库，创建属于自己的组件库拖动元件到编辑工作区进行界面设计对元件的编辑设计操作基本同选择元件库元件搜索载入创建库编辑元件快速入门课程元件库快速入门课程注解注解：澄清设计意图的标注文字有注解或交互的空间右上角显示黄色标签脚注（1、2、3）决定在规格书中的
5、排序自定义注解的字段页面级的注释,可以针对不同对象进行注释对元件进行样式的调节，已达到更好的展示效果快速入门课程课堂练习（1） 第一步： 利用线框图元件库画一个导航原型 第二步（以下可选） 导入一个自定义组件库 画一个手机客户端界面 第三步 标注一个元件 练习时间（10分钟）快速入门课程目录 Axure RP 简介 快速入门知识 软件界面 线框图与注解 基础交互 动态面板 模块 流程图 交互原型 规格书 课程小结及案例快速入门课程初识交互 基础概念 事件（操作行为） 场景（条件） 动作（执行结果） 第一个交互 多场景交互 快速入门课程元件的交互事件 Event场景一 case1动作一 acti
6、on1动作二 场景二 case2动作一 动作二 快速入门课程事件大多对象只具备常见的三种触发事件：、 与某些控件可触发的事件有些不同： 单选框和复选框则具有、 事件文本框、文本域、下拉框、列表框则具有、、事件下拉框和列表框具有事件页面加载或模块被载入时则发生事件说明事件说明鼠标点击 鼠标的指针移动到对象上 OnMou
7、seOut鼠标的指针移动出对象外 鼠标的指针进入文字输入状态鼠标的指针离开文字输入状态下拉框或列表框中的选项改变 页面或模块载入 按下然后松开键盘上的键 快速入门课程动作英文中文Open Link in 在当前窗口打开一个页面Open Link in Popup 在弹出的窗口中打开一个页面Open Link in 在父窗口中打开一个页面Close 关闭当前窗口Open Link in Frame在Frame框架内打开
8、一个页面Open Link in Frame在父页面的嵌框架中打开一个页面Set Panel state(s) to State(s)为动态面板设定要显示的状态Show Panel(s)显示面板Hide Panel(s)隐藏面板 for Panel(s)切换（显示/隐藏）面板的显示状态Move Panel(s)根据绝对坐标或相对坐标来移动动态面板Bring Panel(s) to Front将动态面板移至最上层，让动态面板能够不被其它图层覆盖Set and value(s) equal to Value(s)设定变
9、量的值或控件的值 to Image Map 滚动页面到Image Map所在位置 (s)把对象状态变成可用状态 (s)把对象状态变成不可用状态Set (s) to State指定控件选择后的样式Set Focus on 设定焦点在指定的控件上Wait Time(s)等待多少毫秒(ms)后再进行这个动作Other显示动作的文字说明 快速入门课程第一个交互：基础链接123快速入门课程多场景交互多场景交互：应用于条件判断登录按钮在事件中出现的2种场景的处理登录成功，跳转登
10、录后页面登录失败，给出错误提示文字1选择登录按钮2为事件增加两个场景和动作3原型效果快速入门课程变量传递变量传递元件值赋值到页面加载变量页面加载变量赋值到元件123快速入门课程变量传递变量传递元件值赋值到页面加载变量页面加载变量赋值到元件页面与页面之间的变量传递12页面一（登录页面）页面二（登录成功提示页面）变量（元件名）变量（元件名）全局变量快速入门课程课堂练习（2） 第一步 制作登录及登录成功的跳转页面 第二步 将用户名变量值传递到登录成功页面 练习时间（10分钟）快速入门课程目录 Axure RP 简介 快速入门知识 软件界面 线框图与注解 基础
11、交互 动态面板 模块 流程图 交互原型 规格书 课程小结及案例快速入门课程动态面板动态面板可以包含多种状态（类似层）动态面板的状态每一种状态均可单独编辑设计，在不同场景下显示不同状态动态面板管理器动态面板的导航器显示/隐藏动态面板动态面板的属性面板可见面板隐藏状态A状态B状态C状态N快速入门课程用动态面板隐藏显示切换动态面板：具有多种状态的层可设置可见/隐藏可由动作对动态面板的各种状态和可见属性进行切换123编辑这个状态，写上提示文字4对按钮操作增加事件和点击动作快速入门课程课堂练习（3） 第一步 制作示例交互:Hello world 第二步 制作动态面板状态切换效果 第三步 标
12、注一个组件 练习时间（10分钟）快速入门课程目录 Axure RP 简介 快速入门知识 软件界面 线框图与注解 基础交互 动态面板 母板 流程图 交互原型 规格书 课程小结及案例快速入门课程用母板制作页面模板一组可以复用的设计集（积木）l 常用于导航、页脚、页眉等常出现在所有页面中，但不常进行修改的部分快速入门课程母板模块属性说明应用正常使用时可移动，不可修改如登录框，用户信息等作为背景使用时不可移动，不可修改如页面模板，或者页眉、页脚自定义组件使用时可移动，可修改如特定样式的文字块快速入门课程课堂练习（3） 第一步 制作一个页面模块 第二步 用模块快速制作多个页面 练习时间（5分钟）快速入门
13、课程目录 Axure RP 简介 快速入门知识 软件界面 线框图与注解 基础交互 动态面板 模块 流程图 交互原型 规格书 课程小结及案例快速入门课程线框图、流程图用线框图组件画出界面、示意图用流程图组件画出逻辑、关系；流程图控件可以直接引用页面线框图流程图快速入门课程图表类型：线框图/流程图指定为流程图只是方便识别当前页面是一个流程图可以直接生成流程图线框图流程图快速入门课程自动生成流程图根据站点地图直接生成流程图，默认使用站点地图的层级结构两种类型：纵向和横向快速入门课程目录 Axure RP 简介 快速入门知识 软件界面 线框图与注解 基础交互 动态面板 模块 流程图 交互原型 规格书
14、课程小结及案例快速入门课程基于浏览器的交互原型Axure RP交互原型（浏览器）简化需求文档精简多余需求避免细节丢失获得体验反馈设计线框图编辑注解增加交互生成原型快速入门课程生成原型菜单：生成-原型（快捷键F5）常规：修改目录及原型打开方式页面：可以选择要生成原型的页面注释：是否显示页面注释，显示哪些注释，是否显示注释名标注：是否显示控件标注交互：对于事件场景描述的显示选项，流程图的显示选项标志：在原型内添加logo手机/移动设备：方便导出手机等移动设备的原型发布：生成一个chm格式（微软帮助格式）的交互原型高级：是否将文本块转化为图片，是否以磅(pt)代替像素(px)作为字体大小单位，是否应
15、用草图效果讨论：需要申请在axure官网申请导论id，原型使用者可在页面进行讨论，讨论内容会上传到服务器快速入门课程基于浏览器的原型交互界面原型交互区域站点导航及页面注释区域快速入门课程目录 Axure RP 简介 快速入门知识 软件界面 线框图与注解 基础交互 动态面板 模块 流程图 交互原型 规格书 课程小结及案例快速入门课程规格说明书(原型定义)规格书原型定义文档化准确描述开发基准沟通基准快速入门课程规格书生成器配置可生成Word 2007、Word 2003 及Word 2000格式规格书快速入门课程配置格式定义选项说明常规（） 生成的规格说明书存放的目录页面（Pages
16、）选择要包含哪些页面模块（）选择要包含那些模块。可以设置是否将模块显示在页面部分页面注释（Notes）选择在规格说明书中显示那些页面注释项和显示的顺序界面插图（）选择是否显示线框图插图控件注释（）选择显示哪些控件注释项和显示的顺序。点击Add New Table 按钮，可以将控件注释项分成多个表格，在表格中设置要显示哪些注释项和显示的顺序。控件（）可以设置特定控件的配置。例如，可以设置在说明书中显示下拉列表框，并可以指定要显示的标题。 Word 模板（Word ）为规格说明书设置文档模板。点击
17、Axure 可以导入预置的axure中的模板，或点击 导入自己的模板。一个模板是一个标准的.docx 文件，在.docx文件中的 AXURE SPEC位置会自动生成规格说明书的内容。另外，还可以设置是两栏布局，还是单栏布局。快速入门课程生成规格书示例规格书自动汇总站点地图、页面、用户界面、模块、交互、注解等信息，按顺序自动出现在word里。快速入门课程目录 Axure RP 简介 快速入门知识 软件界面 线框图与注解 基础交互 动态面板 模块 流程图 交互原型 规格书 课程小结及案例快速入门课程课堂练习（4） 第一步 把课堂练习生成原型（请尝试各种选项） 第二步 把课堂练习生成规格书（请尝试各种选项） 练习时间（10分钟）快速入门课程Axure使用小tips1. 不要过分追求交互效果，而忽略需求自身2. 简单小细节让原型看起来更上流圆角矩形的使用渐变色填充线条样式的修改3. 快捷键让操作更便捷Ctrl+G（元件组合） Ctrl+Shift+GCtrl+（上移一层） Ctrl+（下移一层）Ctrl+Alt+L（左对齐）快速入门课程谢谢！
相关文章
