axure基础知识交流解析ppt课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,Axure RP,基础知识交流,基于Axure RP 7.0.0.3155,Axure RP 基础知识交流基于Axure RP 7.0,1,目 录,Axure,上手指南,3,Axure,基础介绍,2,原型和草图,1,Axure,实例演示,4,目 录Axure上手指南3Axure基础介绍2原型和草图1A,2,什么是原型,原型来源于集体无意识,“,“,什么是原型原型来源于集体无意识“,3,草图不是原型,从草图到原型是一个从概念到实现的过程,“,“,草图不是原型从草图到原型是一个从概念到实现的过程“,4,设计过程,设计是一个折中的过程，通过不断地探索不断地试错,任何设计都伴随着草图,设计过程设计是一个折中的过程，通过不断地探索不断地试错,5,原型设计,纸上原型是一种原型设计方法，手绘草图是一种设计表现形式。手绘草图不是低保真原型的一种,原型精度是一个多维概念，它包括广度、深度、表现、感觉、仿真度等多个指标。,原型设计纸上原型是一种原型设计方法，手绘草图是一种设计表现形,6,动手前建议,设计情境的考虑,设计初期，重要的是体验,过程,的真实性，而不是,原型、草图及技术,的真实性，不要被工具限制了你的思维。,在熟练使用,2B,铅笔前，请不要打开,Axure,“,“,动手前建议设计情境的考虑在熟练使用2B铅笔前，请不要打开Ax,7,Axure,上手指南,3,Axure,基础介绍,2,原型和草图,1,Axure,实例演示,4,目 录,Axure上手指南3Axure基础介绍2原型和草图1Axur,8,为什么是,Axure,为什么不是Axure,工具只是用来为我们工作的，一个工具用的顺手比会用一堆工具更有用。,想学习难吗,想的话一点都不难，要学习还是要多练习。,码方块字用中文软件,这么爱国，必须中文汉化版，不过还是建议与国际接轨。,从哪儿开始,上,HTTP:/PMLAND.NET,下载汉化软件和学习所需的材料,现在就开始！,为什么是Axure 为什么不是Axure,9,界面介绍,界面介绍,10,菜单栏,新建、打开、保存、视图设置、生成,html,等命令操作，其他所有窗口的操作均能在菜单栏中找到对应的选项。,工具栏,各种快捷操作按钮，包括部件的背景、边框设置，文字字体、字号、颜色设置、部件的对齐方式，排列方式，层次顺序等设置。,菜单栏和工具栏区域,菜单栏工具栏菜单栏和工具栏区域,11,工具栏及右键菜单介绍,文字编辑,组合、顺序对齐、分布,填充、边框,文字分布,锁定控件,右键菜单,表格属性,视图比例,选择、连线,位置大小,箭头形状,线条样式,工具栏及右键菜单介绍文字编辑组合、顺序对齐、分布填充、边框文,12,站点地图区域,站点地图是一个页面导航面板,在这里面可以对所设计的页面进行添加、删除、重命名和组织层级,站点地图区域 站点地图是一个页面导航面板,在这里面,13,部件区域,所有的部件都是用鼠标单击选中后拖入到工作区域，进行交互设计,系统默认提供了“线框图”和“流程图”的部件。也可以导入其他已经制作好的部件，或自己制作后载入。,部件区域所有的部件都是用鼠标单击选中后拖入到工作区域，进行,14,母版区域,母版的拖放行为三种类型：,任何位置，可以随意摆放，改动该模板调用他的模板也做相应改变,锁定母板位置，不可随意摆放，改动该模板调用他的模板也做相应改变,从母板脱离，可以随意摆放，一个部件而已，修改模板调用不受改变,母版区域母版的拖放行为三种类型：,15,页面编辑区域,用于编辑页面的基本内容，将部件栏中的部件拖拽到此区域，组合构成网站页面的基本结构。,左侧和上方的标尺单位为像素，用于精确衡量每个模块的大小以及位置,广阔天地，大有可为,“,“,页面编辑区域用于编辑页面的基本内容，将部件栏中的部件拖拽到,16,页面属性区域,页面注释：备注页面的内容 建议将一些说明直接写在页面上,页面交互：设置页面载入时触发的行为,页面格式：设置页面基本样式,页面层级的触发事件：,OnPageLoad,，在原型载入页面时触发。,“,“,页面属性区域页面注释：备注页面的内容 建议将一,17,部件属性交互区域,标注：编辑部件名称、备注部件的内容,交互：设置部件的交互规则，例如：超链接、页面跳转等。,格式：部件位置、大小尺寸、边距、对齐方式、填充、边框等设置；,标签是让部件名花有主，方便后续按照名字找到该部件。,“,“,部件属性交互区域标注：编辑部件名称、备注部件的内容标签是让,18,动态面板管理区域,动态面板管理区域，主要用于实现动态面板层级管理、状态添加等功能,动态面板管理区域动态面板管理区域，主要用于实现动态面板层级,19,部件介绍,部件介绍,20,通常用来表示页面的结构布局，具有多种形状（如右侧菜单），最常用的有以下三种：,矩形：表示页面的模块结构；,占位符：表示图片站位；,自定义形状：可以自定义形状，默认为按钮，也可与矩形用法一致。,矩形部件,通常用来表示页面的结构布局，具有多种形状（如右侧菜单），最常,21,状态,一个动态面板可以用多个状态，每个状态的都是单独的一个模版，可以独立编辑，但是显示的范围不能超过动态面板的大小。,同一时间只能展示一个状态，并且状态时有顺序的，动态面板默认展示排在最前面的一个状态，可以通过交互规则来展示不同的状态。,每个状态都可以独立的命名，便于后期做交互的效果时进行选择使用。,动态面板,状态动态面板,22,可见性,显示：在屏幕中可以看到当前动态面板的内容；,隐藏：无法看到动态面板的内容，一般在触发了某交互规则后变为显示，例如：弹出层。,隐藏了的动态面板仍然可以发生状态的变换，在被设为显示后，展示其当前的状态。同时仍然具有层次顺序，在其显示后，图层顺序不发生改变。,浏览器固定,动态面板可以相对浏览器的位置进行定位，使其在页面滚动时，保持固定的位置。,动态面板,可见性浏览器固定动态面板,23,图片,可以通过双击已经拖拽到页面编辑区域的图片部件来打开需要用的图片，或直接在屏幕截图复制粘贴。,图片可以被调整大小、裁剪、设置,alt,提示等。,文本,文本框：单独编辑需要出现文字的内容。,在图片、框类组件中也可以直接编辑文本。,文本内容的字体、字号、颜色、对齐方式等均可以设置。,常用部件,图片文本常用部件,24,选项类部件,单选按钮：可以展示出所有选项，供用户选择；,复选框：选择多个选项内容时使用；,下拉列表：当选项较多时，可以选择使用下拉列表，更节省空间，使页面显得更简洁。,输入类部件,单行文本框：一般用作少量文本输入，例如：搜索框、用户名、密码等；,多行文本框：为大量文字输入准备，例如：博客文章编辑框、论坛发帖编辑框。,常用部件,选取多个按钮，按下鼠标右键，并选择“编辑单选按钮,-,分配单选组,”,来设定单选按钮的群组关系。就可以实现单选效果了哦,选项类部件输入类部件常用部件选取多个按钮，按下鼠标右键，并选,25,按钮,按钮功能和自定义形状的按钮有点重复，且没悬浮选中效果，因此用处不大。,表格,用于展示格式化的信息内容，由于,Axure,中的表格功能较弱，一般可用矩形框来代替实现。,分割线,用于区别两块级别不同或内容不同的信息。,箭头、线条样式在工具栏调整,常用部件,按钮表格分割线常用部件,26,内部框架,主要用来做嵌套或外部文件调用，如播放本地文件，功能页面引用其他页面等,图片热区,一个可不见的层，神一般存在的东西。,常用部件,内部框架图片热区常用部件,27,Axure,上手指南,3,Axure,基础介绍,2,原型和草图,1,Axure,实例演示,4,目 录,Axure上手指南3Axure基础介绍2原型和草图1Axur,28,Axure,怎么做原型,Axure RP,使用主要包括两个方面：,布局：,根据需求戒产品规划思路布局页面，将部件,(Widgets),拖进线框图面板（,Wireframe Pane,），通过对部件,(Widgets),的操作（如移动、改变尺寸、组合、排序、对齐、锁定等）、编辑风格和属性来完成页面的布局和排版。,交互：,在交互面板（,Interactions Pane,）通过定义线框图中部件,(Widgets),的行为，包括定义简单的链接和复杂的应用行为，所定义的交互都可以在将来生成的原型中迚行操作执行。,Axure怎么做原型Axure RP使用主要包括两个方面：,29,交互的三要素,Axure,的交互要牢记三要素对部件发生的“,事件、用例、动作”,，连贯起来记忆，就是用什么样的部件、在什么事件下、通过什么用例、完成什么动作最终达到交互的需要,交互的三要素Axure的交互要牢记三要素对部件发生的“事件、,30,3,种基本的触发事件：,分别是单击、鼠标移入、鼠标移出；,动态面板具有多种触发事件；,页面加载也可以作为触发事件。,针对不同的触发规则我们可以设置交互的动作，当触发规则达到时，就会发生我们设置好的动作。每个规则可以触发多个动作。,交互的触发事件,3种基本的触发事件：交互的触发事件,31,交互的用例条件,用例：,什么事件前提，做什么,条件：,满足什么前提下什么事件前提，做什么,交互的用例条件用例：条件：,32,当满足了交互效果的触发条件，就会发生我们设置好的动作，这些动作包括：,链接类,动态面板类,部件和变量类,杂项类,其中链接类和动态面板类最为常用,部件和变量为相对比较高级的应用,交互的动作,“,“,当满足了交互效果的触发条件，就会发生我们设置好的动作，这些动,33,链接类动作,可以在当前窗口,/,新浏览器标签,/,新窗口打开指定的页面，这里的页面可以为当前站点地图内的页面，也可以是指定的,URL,或文件。,在弹出窗口中打开页面时，可以设置弹出窗口的大小、位置、是否显示浏览器工具栏等。,交互的动作,链接类动作交互的动作,34,动态面板类动作,动态面板的动作主要分为,4,大类：,状态切换,可见性切换（显示,/,隐藏）,位置移动,层次顺序切换,其中最常用的是状态和可见性的切换,状态切换时可以设置要切换的面板，切换到的状态、以及进入,/,退出的动画效果和用时。,交互的动作,动态面板类动作交互的动作,35,第一个原型,-,添加部件,选取部件，拖拽到页面编辑区,键盘输入部件文字,选取颜色进行填充,第一个原型-添加部件选取部件，拖拽到页面编辑区,36,第一个原型,-,设置交互事件,添加快速链接事件,选择链接用例,选取用例结果,第一个原型-设置交互事件添加快速链接事件,37,第一个原型：生成原型,第一个原型：生成原型,38,原型的生成,已经生成的,html,是不可逆的，随手保存文件是好习惯。,“,“,F,8,原型的生成已经生成的html是不可逆的，随手保存文件是好习惯,39,见证奇迹的时刻来了,靠，发生了什么事情？,见证奇迹的时刻来了靠，发生了什么事情？,40,原型的观看,internet,选项,弹出窗口,选择高级,允许活动内容在我的计算机上的文件中运行,”。,猎豹的设置,Chrome,设置,原型的观看internet选项弹出窗口选择高级允,41,原型的救命草,随手保存，有备无患才是根本。,“,“,原型的救命草随手保存，有备无患才是根本。“,42,Axure,上手指南,3,Axure,基础介绍,2,原型和草图,1,Axure,实例演示,4,目 录,Axure上手指南3Axure基础介绍2原型和草图1Axur,43,二级菜单导航,TAB,标签,二级菜单导航TAB标签,44,不要太依赖软件，软件只是我们的工具；,“,“,不要太依赖软件，软件只是我们的工具；“,45,产品经理聚集地(PMLanD)以“求知”“分享”“交友”“互动”为产品经理搭建一个交流平台，并以免费提供产品经理常用图书、工具、Axure教程、各类互联网相关文档分享与下载为特色；结合QQ群互动，线下交流等多重方式,为产品经理提供不间断的业界资讯、学习资料、招聘求职、培训、工具等内容，倾心打造产品经理互动平台。,让我们共同携手，为了让更多的产品经理（PM）便捷的获取知识，为