Axure原型设计入门.ppt

快速入门课程Axure原型原型设计快速入快速入门互娱研发部  Leo Song快速入门课程课课程程简简介介•面向学员–产品相关、交互设计相关、以及与需求沟通相关的全体同事•课程目标–掌握Axure RP制作产品原型的基础知识•授课时长–3小时•课程大纲–Axure简介–基础知识 软件界面，线框图与注解，基础交互，动态面板，模块，流程图，交互原型，规格书–实战案例学习快速入门课程目目录录•Axure RP 简介•快速入门知识–软件界面–线框图与注解–基础交互–动态面板–模块–流程图–交互原型–规格书•课程小结及案例快速入门课程什么是什么是Axure RP？？•What is Axure RP?（摘自官方网站）（摘自官方网站）•Axure RP is a wireframing, prototyping and specification tool used by user experience designers, information architects, business analysts and product managers to design applications and websites.应用web网站RP :Rapid Prototyping Axure快速入门课程Axure RP可以用在哪？可以用在哪？快速入门课程为为什么要用什么要用Axure RP？？WordDreamWeaverVisioPowerPointPhotoshop其它？快速入门课程Axure RP 能做什么？能做什么？快速入门课程Axure RP还还能做什么？能做什么？低保真线框图高保真原型快速入门课程目目录录•Axure RP 简介•快速入门知识–软件界面–线框图与注解–基础交互–动态面板–母板–流程图–交互原型–规格书•课程小结及案例快速入门课程Axure RP 软软件界面件界面1.菜单和工具条2.站点地图3.原件面板4.母板5.编辑工作区域6.页面注释、交互7.控件交互及注释快速入门课程目目录录•Axure RP 简介•快速入门知识–软件界面–线框图与注解–基础交互–动态面板–母板–流程图–交互原型–规格书•课程小结及案例快速入门课程站点地站点地图图站点地图：层级的导航列表•添加，删除页面•页面位置排序（上移、下移）•页面层级组织（增加缩进，减少缩进）•重命名页面•双击页面名称进入编辑设计快速入门课程元件元件组件：用以UI设计的若干组用户界面控件•选择一个元件库，在元件库中搜索需要的控件•载入指定的组件库，创建属于自己的组件库•拖动元件到编辑工作区进行界面设计•对元件的编辑设计操作基本同PowerPoint选择元件库元件搜索载入创建库编辑元件快速入门课程元件元件库库快速入门课程注解注解注解：澄清设计意图的标注文字•有注解或交互的空间右上角显示黄色标签•脚注（1、2、3）决定在规格书中的排序•自定义注解的字段•页面级的注释,可以针对不同对象进行注释•对元件进行样式的调节，已达到更好的展示效果快速入门课程课课堂堂练习练习（（1））•第一步：–利用线框图元件库画一个导航原型•第二步（以下可选）–导入一个自定义组件库–画一个客户端界面•第三步–标注一个元件•练习时间（10分钟）快速入门课程目目录录•Axure RP 简介•快速入门知识–软件界面–线框图与注解–基础交互–动态面板–模块–流程图–交互原型–规格书•课程小结及案例快速入门课程初初识识交互交互•基础概念–事件（操作行为）–场景（条件）–动作（执行结果）•第一个交互•多场景交互     快速入门课程元件的交互元件的交互When…Then…IF…快速入门课程事件事件•大多对象只具备常见的三种触发事件：OnClick、OnMouseEnter 与OnMouseOut•某些控件可触发的事件有些不同： –单选框和复选框则具有OnFocus、 OnLostFocus 事件–文本框、文本域、下拉框、列表框则具有OnKeyUp、OnFocus、OnLostFocus事件–下拉框和列表框具有OnChange事件–页面加载或模块被载入时则发生OnPageLoad事件说明事件说明OnClick鼠标点击 OnMouseEnter鼠标的指针移动到对象上 OnMouseOut鼠标的指针移动出对象外 OnFocus鼠标的指针进入文字输入状态OnLostFocus鼠标的指针离开文字输入状态OnChange下拉框或列表框中的选项改变 OnPageLoad页面或模块载入 OnKeyUp按下然后松开键盘上的键 快速入门课程动动作作英文中文Open Link in Current Window在当前窗口打开一个页面Open Link in Popup Window在弹出的窗口中打开一个页面Open Link in Parent Window在父窗口中打开一个页面Close Current Window关闭当前窗口Open Link in Frame在Frame框架内打开一个页面Open Link in Parent Frame在父页面的嵌框架中打开一个页面Set Panel state(s) to State(s)为动态面板设定要显示的状态Show Panel(s)显示面板Hide Panel(s)隐藏面板Toggle Visibility for Panel(s)切换（显示/隐藏）面板的显示状态Move Panel(s)根据绝对坐标或相对坐标来移动动态面板Bring Panel(s) to Front将动态面板移至最上层，让动态面板能够不被其它图层覆盖Set Variable and Widget value(s) equal to Value(s)设定变量的值或控件的值Scroll to Image Map Region滚动页面到Image Map所在位置Enable Widget(s)把对象状态变成可用状态Disable Widget(s)把对象状态变成不可用状态Set Widget(s) to Selected State指定控件选择后的样式Set Focus on Widget设定焦点在指定的控件上Wait Time(s)等待多少毫秒(ms)后再进行这个动作Other显示动作的文字说明 快速入门课程第一个交互：基第一个交互：基础链础链接接123快速入门课程多多场场景交互景交互•多场景交互：应用于条件判断•登录按钮在OnClick事件中出现的2种场景的处理–登录成功，跳转登录后页面–登录失败，给出错误提示文字1选择登录按钮2为OnClick事件增加两个场景和动作3原型效果快速入门课程变变量量传递传递•变量传递–元件值赋值到页面加载变量–页面加载变量赋值到元件123快速入门课程变变量量传递传递•变量传递–元件值赋值到页面加载变量–页面加载变量赋值到元件–页面与页面之间的变量传递12页面一（登录页面）页面二（登录成功提示页面）变量（元件名）量（元件名）变量（元件名）量（元件名）OnLoadVariable全局全局变量量快速入门课程课课堂堂练习练习（（2））•第一步–制作登录及登录成功的跳转页面•第二步–将用户名变量值传递到登录成功页面•练习时间（10分钟）快速入门课程目目录录•Axure RP 简介•快速入门知识–软件界面–线框图与注解–基础交互–动态面板–模块–流程图–交互原型–规格书•课程小结及案例快速入门课程动态动态面板面板•动态面板–可以包含多种状态（类似层）•动态面板的状态–每一种状态均可单独编辑设计，在不同场景下显示不同状态•动态面板管理器–动态面板的导航器•显示/隐藏动态面板–动态面板的属性面板可见面板隐藏状态A状态B状态C状态N快速入门课程用用动态动态面板面板隐隐藏藏\显显示切示切换换动态面板：具有多种状态的层•可设置可见/隐藏•可由动作对动态面板的各种状态和可见属性进行切换123编辑这个状态，写上提示文字4对按钮onclick操作增加事件和点击动作快速入门课程课课堂堂练习练习（（3））•第一步–制作示例交互:Hello world•第二步–制作动态面板状态切换效果•第三步–标注一个组件•练习时间（10分钟）快速入门课程目目录录•Axure RP 简介•快速入门知识–软件界面–线框图与注解–基础交互–动态面板–母板–流程图–交互原型–规格书•课程小结及案例快速入门课程用母板制作用母板制作页页面模板面模板一组可以复用的设计集（积木）l   常用于导航、页脚、页眉等常出现在所有页面中，但不常进行修改的部分快速入门课程母板母板模块属性说明应用正常使用时可移动，不可修改如登录框，用户信息等作为背景使用时不可移动，不可修改如页面模板，或者页眉、页脚自定义组件使用时可移动，可修改如特定样式的文字块快速入门课程课课堂堂练习练习（（3））•第一步–制作一个页面模块•第二步–用模块快速制作多个页面•练习时间（5分钟）快速入门课程目目录录•Axure RP 简介•快速入门知识–软件界面–线框图与注解–基础交互–动态面板–模块–流程图–交互原型–规格书•课程小结及案例快速入门课程线线框框图图、流程、流程图图•用线框图组件画出界面、示意图•用流程图组件画出逻辑、关系；流程图控件可以直接引用页面线框图流程图快速入门课程图图表表类类型：型：线线框框图图/流程流程图图•指定为流程图只是方便识别当前页面是一个流程图•可以直接生成流程图线框图流程图快速入门课程自自动动生成流程生成流程图图•根据站点地图直接生成流程图，默认使用站点地图的层级结构•两种类型：纵向和横向快速入门课程目目录录•Axure RP 简介•快速入门知识–软件界面–线框图与注解–基础交互–动态面板–模块–流程图–交互原型–规格书•课程小结及案例快速入门课程基于基于浏览浏览器的交互原型器的交互原型快速入门课程生成原型生成原型•菜单：生成-原型（快捷键F5）–常规：修改目录及原型打开方式–页面：可以选择要生成原型的页面–注释：是否显示页面注释，显示哪些注释，是否显示注释名–标注：是否显示控件标注–交互：对于事件场景描述的显示选项，流程图的显示选项–标志：在原型内添加logo–/移动设备：方便导出等移动设备的原型–发布：生成一个chm格式（微软帮助格式）的交互原型–高级：是否将文本块转化为图片，是否以磅(pt)代替像素(px)作为字体大小单位，是否应用草图效果–讨论：需要申请在axure官网申请导论id，原型使用者可在页面进行讨论，讨论内容会上传到服务器快速入门课程基于基于浏览浏览器的原型交互界面器的原型交互界面原型交互区域站点导航及页面注释区域快速入门课程目目录录•Axure RP 简介•快速入门知识–软件界面–线框图与注解–基础交互–动态面板–模块–流程图–交互原型–规格书•课程小结及案例快速入门课程规规格格说说明明书书(原型定原型定义义)快速入门课程规规格格书书生成器配置生成器配置•可生成Word 2007、Word 2003 及Word 2000格式规格书快速入门课程配置格式定配置格式定义义选项说明常规（General） 生成的规格说明书存放的目录页面（Pages）选择要包含哪些页面模块（Masters）选择要包含那些模块。

可以设置是否将模块显示在页面部分页面注释（Notes）选择在规格说明书中显示那些页面注释项和显示的顺序界面插图（Screenshot）选择是否显示线框图插图控件注释（Annotations）选择显示哪些控件注释项和显示的顺序点击Add New Table 按钮，可以将控件注释项分成多个表格，在表格中设置要显示哪些注释项和显示的顺序控件（Widgets）可以设置特定控件的配置例如，可以设置在说明书中显示下拉列表框，并可以指定要显示的标题 Word 模板（Word Template）为规格说明书设置文档模板点击― Import Axure Template‖可以导入预置的axure中的模板，或点击― import‖导入自己的模板一个模板是一个标准的.docx 文件，在.docx文件中的―[[INSERT AXURE SPEC]]‖位置会自动生成规格说明书的内容另外，还可以设置是两栏布局，还是单栏布局快速入门课程生成生成规规格格书书示例示例•规格书自动汇总站点地图、页面、用户界面、模块、交互、注解等信息，按顺序自动出现在word里快速入门课程目目录录•Axure RP 简介•快速入门知识–软件界面–线框图与注解–基础交互–动态面板–模块–流程图–交互原型–规格书•课程小结及案例快速入门课程课课堂堂练习练习（（4））•第一步–把课堂练习生成原型（请尝试各种选项）•第二步–把课堂练习生成规格书（请尝试各种选项）•练习时间（10分钟）快速入门课程Axure使用小使用小tips1.不要过分追求交互效果，而忽略需求自身2.简单小细节让原型看起来更上流•圆角矩形的使用•渐变色填充•线条样式的修改3.快捷键让操作更便捷•Ctrl+G（元件组合） Ctrl+Shift+G•Ctrl+]（上移一层） Ctrl+[（下移一层）•Ctrl+Alt+L（左对齐）快速入门课程谢谢！。