Axure原型设计入.ppt

《Axure原型设计入.ppt》由会员分享，可在线阅读，更多相关《Axure原型设计入.ppt（51页珍藏版）》请在三一办公上搜索。

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

2、ication 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？,Word,DreamWeaver,Visio,PowerPoint,Photoshop,其它,？,Axure RP 能做什么？,Axure RP还能做什么？,低保真线框图,高保

3、真原型,目录,Axure RP 简介快速入门知识软件界面线框图与注解基础交互动态面板母板流程图交互原型规格书课程小结及案例,Axure RP 软件界面,1.菜单和工具条,2.站点地图,3.原件面板,4.母板,5.编辑工作区域,6.页面注释、交互,7.控件交互及注释,目录,Axure RP 简介快速入门知识软件界面线框图与注解基础交互动态面板母板流程图交互原型规格书课程小结及案例,站点地图,站点地图：层级的导航列表添加，删除页面页面位置排序（上移、下移）页面层级组织（增加缩进，减少缩进）重命名页面双击页面名称进入编辑设计,元件,组件：用以UI设计的若干组用户界面控件选择一个元件库，在元件库中搜索

4、需要的控件载入指定的组件库，创建属于自己的组件库拖动元件到编辑工作区进行界面设计对元件的编辑设计操作基本同PowerPoint,选择元件库,元件搜索,载入创建库,编辑元件,元件库,注解,注解：澄清设计意图的标注文字有注解或交互的空间右上角显示黄色标签脚注（1、2、3）决定在规格书中的排序自定义注解的字段页面级的注释,可以针对不同对象进行注释对元件进行样式的调节，已达到更好的展示效果,课堂练习（1）,第一步：利用线框图元件库画一个导航原型第二步（以下可选）导入一个自定义组件库画一个手机客户端界面第三步标注一个元件练习时间（10分钟）,目录,Axure RP 简介快速入门知识软件界面线框图与注解基

5、础交互动态面板模块流程图交互原型规格书课程小结及案例,初识交互,基础概念事件（操作行为）场景（条件）动作（执行结果）第一个交互多场景交互,元件的交互,When,Then,IF,事件,大多对象只具备常见的三种触发事件：OnClick、OnMouseEnter 与OnMouseOut某些控件可触发的事件有些不同：单选框和复选框则具有OnFocus、OnLostFocus 事件文本框、文本域、下拉框、列表框则具有OnKeyUp、OnFocus、OnLostFocus事件下拉框和列表框具有OnChange事件页面加载或模块被载入时则发生OnPageLoad,动作,第一个交互：基础链接,1,2,3,多场

6、景交互,多场景交互：应用于条件判断登录按钮在OnClick事件中出现的2种场景的处理登录成功，跳转登录后页面登录失败，给出错误提示文字,变量传递,变量传递元件值赋值到页面加载变量页面加载变量赋值到元件,1,2,3,变量传递,变量传递元件值赋值到页面加载变量页面加载变量赋值到元件页面与页面之间的变量传递,1,2,页面一（登录页面）,页面二（登录成功提示页面）,变量（元件名）,变量（元件名）,OnLoadVariable,全局变量,课堂练习（2）,第一步制作登录及登录成功的跳转页面第二步将用户名变量值传递到登录成功页面练习时间（10分钟）,目录,Axure RP 简介快速入门知识软件界面线框图与注

7、解基础交互动态面板模块流程图交互原型规格书课程小结及案例,动态面板,动态面板可以包含多种状态（类似层）动态面板的状态每一种状态均可单独编辑设计，在不同场景下显示不同状态动态面板管理器动态面板的导航器显示/隐藏动态面板动态面板的属性,面板可见,面板隐藏,状态A,状态B,状态C,状态N,用动态面板隐藏显示切换,动态面板：具有多种状态的层可设置可见/隐藏可由动作对动态面板的各种状态和可见属性进行切换,1,2,3,编辑这个状态，写上提示文字,4,对按钮onclick操作增加事件和点击动作,课堂练习（3）,第一步制作示例交互:Hello world第二步制作动态面板状态切换效果第三步标注一个组件练习时间

8、（10分钟）,目录,Axure RP 简介快速入门知识软件界面线框图与注解基础交互动态面板母板流程图交互原型规格书课程小结及案例,用母板制作页面模板,一组可以复用的设计集（积木）,常用于导航、页脚、页眉等常出现在所有页面中，但不常进行修改的部分,母板,课堂练习（3）,第一步制作一个页面模块第二步用模块快速制作多个页面练习时间（5分钟）,目录,Axure RP 简介快速入门知识软件界面线框图与注解基础交互动态面板模块流程图交互原型规格书课程小结及案例,线框图、流程图,用线框图组件画出界面、示意图用流程图组件画出逻辑、关系；流程图控件可以直接引用页面,线框图,流程图,图表类型：线框图/流程图,指定

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

10、布：生成一个chm格式（微软帮助格式）的交互原型高级：是否将文本块转化为图片，是否以磅(pt)代替像素(px)作为字体大小单位，是否应用草图效果讨论：需要申请在axure官网申请导论id，原型使用者可在页面进行讨论，讨论内容会上传到服务器,基于浏览器的原型交互界面,原型交互区域,站点导航及页面注释区域,目录,Axure RP 简介快速入门知识软件界面线框图与注解基础交互动态面板模块流程图交互原型规格书课程小结及案例,规格说明书(原型定义),规格书生成器配置,可生成Word 2007、Word 2003 及Word 2000格式规格书,配置格式定义,生成规格书示例,规格书自动汇总站点地图、页面、用户界面、模块、交互、注解等信息，按顺序自动出现在word里。,目录,Axure RP 简介快速入门知识软件界面线框图与注解基础交互动态面板模块流程图交互原型规格书课程小结及案例,课堂练习（4）,第一步把课堂练习生成原型（请尝试各种选项）第二步把课堂练习生成规格书（请尝试各种选项）练习时间（10分钟）,Axure使用小tips,不要过分追求交互效果，而忽略需求自身简单小细节让原型看起来更上流圆角矩形的使用渐变色填充线条样式的修改快捷键让操作更便捷Ctrl+G（元件组合）Ctrl+Shift+GCtrl+（上移一层）Ctrl+（下移一层）Ctrl+Alt+L（左对齐）,谢谢！,