Axure原型设计入门ppt课件

Axure原型快速入门互娱研发部LeoSong课程简介面向学员产品相关、交互设计相关、以及与需求沟通相关的全体同事课程目标掌握AxureRP制作产品原型的基础知识授课时长3小时课程大纲Axure简介基础知识软件界面，线框图与注解，基础交互，动态面板，模块，流程图，交互原型，规格书实战案例学习目录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板模块流程图交互原型规格书课程小结及案例什么是AxureRP？WhatisAxureRP?（摘自官方网站）AxureRPisawireframing,prototypingandspecificationtoolusedbyuserexperiencedesigners,informationarchitects,businessanalystsandproductmanagerstodesignapplicationsandwebsites.应用web网站RP:RapidPrototypingAxureAxureRP可以用在哪？为什么要用AxureRP？WordDreamWeaverVisioPowerPointPhotoshop其它？AxureRP能做什么？AxureRP还能做什么？低保真线框图高保真原型目录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板母板流程图交互原型规格书课程小结及案例AxureRP软件界面1.菜单和工具条2.站点地图3.原件面板4.母板5.编辑工作区域6.页面注释、交互7.控件交互及注释目录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板母板流程图交互原型规格书课程小结及案例站点地图站点地图：层级的导航列表添加，删除页面页面位置排序（上移、下移）页面层级组织（增加缩进，减少缩进）重命名页面双击页面名称进入编辑设计元件组件：用以UI设计的若干组用户界面控件选择一个元件库，在元件库中搜索需要的控件载入指定的组件库，创建属于自己的组件库拖动元件到编辑工作区进行界面设计对元件的编辑设计操作基本同PowerPoint选择元件库元件搜索载入创建库编辑元件元件库注解注解：澄清设计意图的标注文字有注解或交互的空间右上角显示黄色标签脚注（1、2、3）决定在规格书中的排序自定义注解的字段页面级的注释,可以针对不同对象进行注释对元件进行样式的调节，已达到更好的展示效果课堂练习（1）第一步：利用线框图元件库画一个导航原型第二步（以下可选）导入一个自定义组件库画一个手机客户端界面第三步标注一个元件练习时间（10分钟）目录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板模块流程图交互原型规格书课程小结及案例初识交互基础概念事件（操作行为）场景（条件）动作（执行结果）第一个交互多场景交互     元件的交互When…Then…IF…事件大多对象只具备常见的三种触发事件：OnClick、OnMouseEnter与OnMouseOut某些控件可触发的事件有些不同：单选框和复选框则具有OnFocus、OnLostFocus事件文本框、文本域、下拉框、列表框则具有OnKeyUp、OnFocus、OnLostFocus事件下拉框和列表框具有OnChange事件页面加载或模块被载入时则发生OnPageLoad事件说明事件说明OnClick鼠标点击OnMouseEnter鼠标的指针移动到对象上OnMouseOut鼠标的指针移动出对象外OnFocus鼠标的指针进入文字输入状态OnLostFocus鼠标的指针离开文字输入状态OnChange下拉框或列表框中的选项改变OnPageLoad页面或模块载入OnKeyUp按下然后松开键盘上的键动作英文中文OpenLinkinCurrentWindow在当前窗口打开一个页面OpenLinkinPopupWindow在弹出的窗口中打开一个页面OpenLinkinParentWindow在父窗口中打开一个页面CloseCurrentWindow关闭当前窗口OpenLinkinFrame在Frame框架内打开一个页面OpenLinkinParentFrame在父页面的嵌框架中打开一个页面SetPanelstate(s)toState(s)为动态面板设定要显示的状态ShowPanel(s)显示面板HidePanel(s)隐藏面板ToggleVisibilityforPanel(s)切换（显示/隐藏）面板的显示状态MovePanel(s)根据绝对坐标或相对坐标来移动动态面板BringPanel(s)toFront将动态面板移至最上层，让动态面板能够不被其它图层覆盖SetVariableandWidgetvalue(s)equaltoValue(s)设定变量的值或控件的值ScrolltoImageMapRegion滚动页面到ImageMap所在位置EnableWidget(s)把对象状态变成可用状态DisableWidget(s)把对象状态变成不可用状态SetWidget(s)toSelectedState指定控件选择后的样式SetFocusonWidget设定焦点在指定的控件上WaitTime(s)等待多少毫秒(ms)后再进行这个动作Other显示动作的文字说明第一个交互：基础链接123多场景交互多场景交互：应用于条件判断登录按钮在OnClick事件中出现的2种场景的处理登录成功，跳转登录后页面登录失败，给出错误提示文字变量传递变量传递元件值赋值到页面加载变量页面加载变量赋值到元件123变量传递变量传递元件值赋值到页面加载变量页面加载变量赋值到元件页面与页面之间的变量传递12页面一（登录页面）页面二（登录成功提示页面）变量（元件名）变量（元件名）OnLoadVariable全局变量课堂练习（2）第一步制作登录及登录成功的跳转页面第二步将用户名变量值传递到登录成功页面练习时间（10分钟）目录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板模块流程图交互原型规格书课程小结及案例动态面板动态面板可以包含多种状态（类似层）动态面板的状态每一种状态均可单独编辑设计，在不同场景下显示不同状态动态面板管理器动态面板的导航器显示/隐藏动态面板动态面板的属性面板可见面板隐藏状态A状态B状态C状态N用动态面板隐藏\显示切换动态面板：具有多种状态的层可设置可见/隐藏可由动作对动态面板的各种状态和可见属性进行切换123编辑这个状态，写上提示文字4对按钮onclick操作增加事件和点击动作课堂练习（3）第一步制作示例交互:Helloworld第二步制作动态面板状态切换效果第三步标注一个组件练习时间（10分钟）目录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板母板流程图交互原型规格书课程小结及案例用母板制作页面一组可以复用的设计集（积木）常用于导航、页脚、页眉等常出现在所有页面中，但不常进行修改的部分母板模块属性说明应用正常使用时可移动，不可修改如登录框，用户信息等作为背景使用时不可移动，不可修改如页面模板，或者页眉、页脚自定义组件使用时可移动，可修改如特定样式的文字块课堂练习（3）第一步制作一个页面模块第二步用模块快速制作多个页面练习时间（5分钟）目录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板模块流程图交互原型规格书课程小结及案例线框图、流程图用线框图组件画出界面、示意图用流程图组件画出逻辑、关系；流程图控件可以直接引用页面线框图流程图图表类型：线框图/流程图指定为流程图只是方便识别当前页面是一个流程图可以直接生成流程图线框图流程图自动生成流程图根据站点地图直接生成流程图，默认使用站点地图的层级结构两种类型：纵向和横向目录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板模块流程图交互原型规格书课程小结及案例基于浏览器的交互原型生成原型菜单：生成-原型（快捷键F5）常规：修改目录及原型打开方式页面：可以选择要生成原型的页面注释：是否显示页面注释，显示哪些注释，是否显示注释名标注：是否显示控件标注交互：对于事件场景描述的显示选项，流程图的显示选项标志：在原型内添加logo手机/移动设备：方便导出手机等移动设备的原型发布：生成一个chm格式（微软帮助格式）的交互原型高级：是否将文本块转化为图片，是否以磅(pt)代替像素(px)作为字体大小单位，是否应用草图效果讨论：需要申请在axure官网申请导论id，原型使用者可在页面进行讨论，讨论内容会上传到服务器基于浏览器的原型交互界面原型交互区域站点导航及页面注释区域目录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板模块流程图交互原型规格书课程小结及案例规格说明书(原型定义)规格书生成器配置可生成Word2007、Word2003及Word2000格式规格书配置格式定义选项说明常规（General）生成的规格说明书存放的目录页面（Pages）选择要包含哪些页面模块（Masters）选择要包含那些模块。可以设置是否将模块显示在页面部分页面注释（Notes）选择在规格说明书中显示那些页面注释项和显示的顺序界面插图（Screenshot）选择是否显示线框图插图控件注释（Annotations）选择显示哪些控件注释项和显示的顺序。点击AddNewTable按钮，可以将控件注释项分成多个，在表格中设置要显示哪些注释项和显示的顺序。控件（Widgets）可以设置特定控件的配置。例如，可以设置在说明书中显示下拉列表框，并可以指定要显示的标题。Word模板（WordTemplate）为规格说明书设置文档模板。点击―ImportAxureTemplate‖可以导入预置的axure中的模板，或点击―import‖导入自己的模板。一个模板是一个标准的.docx文件，在.docx文件中的―[[INSERTAXURESPEC]]‖位置会自动生成规格说明书的内容。另外，还可以设置是两栏布局，还是单栏布局。生成规格书示例规格书自动汇总站点地图、页面、用户界面、模块、交互、注解等信息，按顺序自动出现在word里。目录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板模块流程图交互原型规格书课程小结及案例课堂练习（4）第一步把课堂练习生成原型（请尝试各种选项）第二步把课堂练习生成规格书（请尝试各种选项）练习时间（10分钟）Axure使用小tips不要过分追求交互效果，而忽略需求自身简单小细节让原型看起来更上流圆角矩形的使用渐变色填充线条样式的修改快捷键让操作更便捷Ctrl+G（元件组合）Ctrl+Shift+GCtrl+]（上移一层）Ctrl+[（下移一层）Ctrl+Alt+L（左对齐）谢谢！感谢亲观看此幻灯片，此课件部分内容来源于网络，如有侵权请及时联系我们删除，谢谢配合！