axure基础知识交流解析.ppt

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