Axure原型设计入门.ppt

《Axure原型设计入门.ppt》由会员分享，可在线阅读，更多相关《Axure原型设计入门.ppt（51页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、快速入门课程Axure原型原型设计快速入快速入门互娱研发部LeoSong快速入门课程课课程程简简介介面向学员产品相关、交互设计相关、以及与需求沟通相关的全体同事课程目标掌握AxureRP制作产品原型的基础知识授课时长3小时课程大纲Axure简介基础知识软件界面，线框图与注解，基础交互，动态面板，模块，流程图，交互原型，规格书实战案例学习快速入门课程目目录录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板模块流程图交互原型规格书课程小结及案例快速入门课程什么是什么是Axure RP？What is Axure RP?（摘自官方网站）（摘自官方网站）Axure RP is a w

2、ireframing,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？WordDreamWeaverVisioPowerPointPhotosho

3、p其它？快速入门课程Axure RP 能做什么？能做什么？快速入门课程Axure RP还还能做什么？能做什么？低保真线框图高保真原型快速入门课程目目录录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板母板流程图交互原型规格书课程小结及案例快速入门课程Axure RP 软软件界面件界面1.菜单和工具条2.站点地图3.原件面板4.母板5.编辑工作区域6.页面注释、交互7.控件交互及注释快速入门课程目目录录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板母板流程图交互原型规格书课程小结及案例快速入门课程站点地站点地图图站点地图：层级的导航列表添加，删除页面页面位置

4、排序（上移、下移）页面层级组织（增加缩进，减少缩进）重命名页面双击页面名称进入编辑设计快速入门课程元件元件组件：用以UI设计的若干组用户界面控件选择一个元件库，在元件库中搜索需要的控件载入指定的组件库，创建属于自己的组件库拖动元件到编辑工作区进行界面设计对元件的编辑设计操作基本同PowerPoint选择元件库元件搜索载入创建库编辑元件快速入门课程元件元件库库快速入门课程注解注解注解：澄清设计意图的标注文字有注解或交互的空间右上角显示黄色标签脚注（1、2、3）决定在规格书中的排序自定义注解的字段页面级的注释,可以针对不同对象进行注释对元件进行样式的调节，已达到更好的展示效果快速入门课程课课堂堂练

5、习练习（1）第一步：利用线框图元件库画一个导航原型第二步（以下可选）导入一个自定义组件库画一个手机客户端界面第三步标注一个元件练习时间（10分钟）快速入门课程目目录录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板模块流程图交互原型规格书课程小结及案例快速入门课程初初识识交互交互基础概念事件（操作行为）场景（条件）动作（执行结果）第一个交互多场景交互快速入门课程元件的交互元件的交互WhenThenIF快速入门课程事件事件大多对象只具备常见的三种触发事件：OnClick、OnMouseEnter与OnMouseOut某些控件可触发的事件有些不同：单选框和复选框则具有OnFocu

6、s、OnLostFocus事件文本框、文本域、下拉框、列表框则具有OnKeyUp、OnFocus、OnLostFocus事件下拉框和列表框具有OnChange事件页面加载或模块被载入时则发生OnPageLoad事件说明事件说明OnClick鼠标点击OnMouseEnter鼠标的指针移动到对象上OnMouseOut鼠标的指针移动出对象外OnFocus鼠标的指针进入文字输入状态OnLostFocus鼠标的指针离开文字输入状态OnChange下拉框或列表框中的选项改变OnPageLoad页面或模块载入OnKeyUp按下然后松开键盘上的键快速入门课程动动作作英文中文OpenLinkinCurrentW

7、indow在当前窗口打开一个页面OpenLinkinPopupWindow在弹出的窗口中打开一个页面OpenLinkinParentWindow在父窗口中打开一个页面CloseCurrentWindow关闭当前窗口OpenLinkinFrame在Frame框架内打开一个页面OpenLinkinParentFrame在父页面的嵌框架中打开一个页面SetPanelstate(s)toState(s)为动态面板设定要显示的状态ShowPanel(s)显示面板HidePanel(s)隐藏面板ToggleVisibilityforPanel(s)切换（显示/隐藏）面板的显示状态MovePanel(s)根

8、据绝对坐标或相对坐标来移动动态面板BringPanel(s)toFront将动态面板移至最上层，让动态面板能够不被其它图层覆盖SetVariableandWidgetvalue(s)equaltoValue(s)设定变量的值或控件的值ScrolltoImageMapRegion滚动页面到ImageMap所在位置EnableWidget(s)把对象状态变成可用状态DisableWidget(s)把对象状态变成不可用状态SetWidget(s)toSelectedState指定控件选择后的样式SetFocusonWidget设定焦点在指定的控件上WaitTime(s)等待多少毫秒(ms)后再进行这

9、个动作Other显示动作的文字说明快速入门课程第一个交互：基第一个交互：基础链础链接接123快速入门课程多多场场景交互景交互多场景交互：应用于条件判断登录按钮在OnClick事件中出现的2种场景的处理登录成功，跳转登录后页面登录失败，给出错误提示文字1选择登录按钮2为OnClick事件增加两个场景和动作3原型效果快速入门课程变变量量传递传递变量传递元件值赋值到页面加载变量页面加载变量赋值到元件123快速入门课程变变量量传递传递变量传递元件值赋值到页面加载变量页面加载变量赋值到元件页面与页面之间的变量传递12页面一（登录页面）页面二（登录成功提示页面）变量（元件名）量（元件名）变量（元件名）量（

10、元件名）OnLoadVariable全局全局变量量快速入门课程课课堂堂练习练习（2）第一步制作登录及登录成功的跳转页面第二步将用户名变量值传递到登录成功页面练习时间（10分钟）快速入门课程目目录录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板模块流程图交互原型规格书课程小结及案例快速入门课程动态动态面板面板动态面板可以包含多种状态（类似层）动态面板的状态每一种状态均可单独编辑设计，在不同场景下显示不同状态动态面板管理器动态面板的导航器显示/隐藏动态面板动态面板的属性面板可见面板隐藏状态A状态B状态C状态N快速入门课程用用动态动态面板面板隐隐藏藏显显示切示切换换动态面板：具有

11、多种状态的层可设置可见/隐藏可由动作对动态面板的各种状态和可见属性进行切换123编辑这个状态，写上提示文字4对按钮onclick操作增加事件和点击动作快速入门课程课课堂堂练习练习（3）第一步制作示例交互:Helloworld第二步制作动态面板状态切换效果第三步标注一个组件练习时间（10分钟）快速入门课程目目录录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板母板流程图交互原型规格书课程小结及案例快速入门课程用母板制作用母板制作页页面模板面模板一组可以复用的设计集（积木）l常用于导航、页脚、页眉等常出现在所有页面中，但不常进行修改的部分快速入门课程母板母板模块属性说明应用正常使

12、用时可移动，不可修改如登录框，用户信息等作为背景使用时不可移动，不可修改如页面模板，或者页眉、页脚自定义组件使用时可移动，可修改如特定样式的文字块快速入门课程课课堂堂练习练习（3）第一步制作一个页面模块第二步用模块快速制作多个页面练习时间（5分钟）快速入门课程目目录录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板模块流程图交互原型规格书课程小结及案例快速入门课程线线框框图图、流程、流程图图用线框图组件画出界面、示意图用流程图组件画出逻辑、关系；流程图控件可以直接引用页面线框图流程图快速入门课程图图表表类类型：型：线线框框图图/流程流程图图指定为流程图只是方便识别当前页面是一

13、个流程图可以直接生成流程图线框图流程图快速入门课程自自动动生成流程生成流程图图根据站点地图直接生成流程图，默认使用站点地图的层级结构两种类型：纵向和横向快速入门课程目目录录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板模块流程图交互原型规格书课程小结及案例快速入门课程基于基于浏览浏览器的交互原型器的交互原型快速入门课程生成原型生成原型菜单：生成-原型（快捷键F5）常规：修改目录及原型打开方式页面：可以选择要生成原型的页面注释：是否显示页面注释，显示哪些注释，是否显示注释名标注：是否显示控件标注交互：对于事件场景描述的显示选项，流程图的显示选项标志：在原型内添加logo手机/

14、移动设备：方便导出手机等移动设备的原型发布：生成一个chm格式（微软帮助格式）的交互原型高级：是否将文本块转化为图片，是否以磅(pt)代替像素(px)作为字体大小单位，是否应用草图效果讨论：需要申请在axure官网申请导论id，原型使用者可在页面进行讨论，讨论内容会上传到服务器快速入门课程基于基于浏览浏览器的原型交互界面器的原型交互界面原型交互区域站点导航及页面注释区域快速入门课程目目录录AxureRP简介快速入门知识软件界面线框图与注解基础交互动态面板模块流程图交互原型规格书课程小结及案例快速入门课程规规格格说说明明书书(原型定原型定义义)快速入门课程规规格格书书生成器配置生成器配置可生成W

15、ord2007、Word2003及Word2000格式规格书快速入门课程配置格式定配置格式定义义选项说明常规（General）生成的规格说明书存放的目录页面（Pages）选择要包含哪些页面模块（Masters）选择要包含那些模块。可以设置是否将模块显示在页面部分页面注释（Notes）选择在规格说明书中显示那些页面注释项和显示的顺序界面插图（Screenshot）选择是否显示线框图插图控件注释（Annotations）选择显示哪些控件注释项和显示的顺序。点击AddNewTable按钮，可以将控件注释项分成多个表格，在表格中设置要显示哪些注释项和显示的顺序。控件（Widgets）可以设置特定控件的

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