Axure-RP基础知识课件.ppt

1、.1Axure RP Axure RP 基础知识基于Axure RP 软件版本 6.5.9.3040内部培训产品设计部潘健斌.2目录.3一、基本功能.4搭建网站页面布局搭建网站页面布局通过使用不同的部件，以及文字和图片，可以搭建出一张网站页面的结构布局，设计完成后，可以生产html文档，在浏览器中预览效果。一、基本功能.5设计交互规则和效果设计交互规则和效果设计页面的基本交互规则以及效果，用户点击某按钮后页面会给出怎样的反馈，或是产生怎样的变换。例如：超链接、锚点、弹出层等。一、基本功能.6二、界面模块.7菜单栏菜单栏工具栏工具栏站点地图站点地图部件栏部件栏母版管理母版管理页面属性页面属性动态

2、面板管理动态面板管理部件属性部件属性页面编辑区域页面编辑区域二、界面模块.8菜单栏菜单栏新建、打开、保存、视图设置、生成html等命令操作，其他所有窗口的操作均能在菜单栏中找到对应的选项。工具栏工具栏各种快捷操作按钮，包括部件的背景、边框设置，文字字体、字号、颜色设置、部件的对齐方式，排列方式，层次顺序等设置。二、界面模块.9站点地图站点地图用于编辑网站的基本结构，以及页面之间的层级关系，并对页面进行命名。部件栏部件栏选取部件的区域，系统默认提供了“线框图”和“流程图”的部件，在做网站的原型设计时通常使用“线框图”中的部件。也可以导入其他已经只做好的部件，或自己制作模块后导入。母版管理母版管理

3、母版：可以复用的部件组合，对母版的编辑将会影响的所有使用了该母版的位置。二、界面模块.10部件属性部件属性标注：编辑部件名称、备注部件的内容格式：部件位置、大小尺寸、边距、对齐方式、填充、边框等设置；交互：设置部件的交互规则，例如：超链接、页面跳转等。动态面板管理动态面板管理动态面板：模块化的部件组合，主要用于实现各类交互效果，例如：弹出层、页面内容变化等。二、界面模块.11页面编辑区域页面编辑区域用于编辑页面的基本内容，将部件栏中的部件拖拽到此区域，组合构成网站页面的基本结构。左侧和上方的标尺单位为像素，用于精确衡量每个模块的大小以及位置页面属性页面属性页面注释：备注页面的内容页面交互：设置

4、页面载入时触发的行为页面格式：设置页面基本样式二、界面模块.12三、常用部件.13三、常用部件框类部件框类部件通常用来表示页面的结构布局，具有多种形状（如右侧菜单），最常用的有以下三种：矩形：表示页面的模块结构；占位符：表示图片站位；圆角矩形：表示按钮，也可与矩形用法一致。.14三、常用部件图片图片可以通过双击已经拖拽到页面编辑区域的图片部件来打开需要用的图片，或直接在屏幕截图复制粘贴。图片可以被调整大小、裁剪、设置alt提示等。文本文本文本框：单独编辑需要出现文字的内容。在图片、框类组件中也可以直接编辑文本。文本内容的字体、字号、颜色、对齐方式等均可以设置。.15三、常用部件选项类部件选项类

5、部件单选按钮：可以展示出所有选项，供用户选择；复选框：选择多个选项内容时使用；下拉列表：当选项较多时，可以选择使用下拉列表，更节省空间，使页面显得更简洁。输入类部件输入类部件单行文本框：一般用作少量文本输入，例如：搜索框、用户名、密码等；文本区域：为大量文字输入准备，例如：博客文章编辑框、论坛发帖编辑框。.16三、常用部件按钮按钮用于吸引用户点击，达到Call-to-Action的效果表格表格用于展示格式化的信息内容，由于Axure中的表格功能较弱，一般可用矩形框来代替实现。分割线分割线用于区别两块级别不同或内容不同的信息。.17四、动态面板.18四、动态面板状态状态一个动态面板可以用多个状态

6、，每个状态的都是单独的一个模版，可以独立编辑，但是显示的范围不能超过动态面板的大小。同一时间只能展示一个状态，并且状态时有顺序的，动态面板默认展示排在最前面的一个状态，可以通过交互规则来展示不同的状态。每个状态都可以独立的命名，便于后期做交互的效果时进行选择使用。.19四、动态面板可见性可见性显示：在屏幕中可以看到当前动态面板的内容；隐藏：无法看到动态面板的内容，一般在触发了某交互规则后变为显示，例如：弹出层。隐藏了的动态面板仍然可以发生状态的变换，在被设为显示后，展示其当前的状态。同时仍然具有层次顺序，在其显示后，图层顺序不发生改变。浏览器固定浏览器固定动态面板可以相对浏览器的位置进行定位，

7、使其在页面滚动时，保持固定的位置。.20五、交互设计.21五、交互设计触发规则触发规则一般的部件具有3种基本的触发规则，分别是点击、鼠标移入、鼠标移出；动态面板具有多种触发规则；页面加载也可以作为触发规则。针对不同的触发规则我们可以设置交互的动作，当触发规则达到时，就会发生我们设置好的动作。每个规则可以触发多个动作。.22五、交互设计动作动作当满足了交互效果的触发条件，就会发生我们设置好的动作，这些动作包括：链接类动态面板类部件和变量类其他类其中链接类和动态面板类最为常用.23五、交互设计链接类动作链接类动作可以在当前窗口/新浏览器标签/新窗口打开指定的页面，这里的页面可以为当前站点地图内的页面，也可以是指定的URL或文件。在弹出窗口中打开页面时，可以设置弹出窗口的大小、位置、是否显示浏览器工具栏等。.24五、交互设计动态面板类动作动态面板类动作动态面板的动作主要分为4大类：状态切换可见性切换（显示/隐藏）位置移动层次顺序切换其中最常用的是状态和可见性的切换状态切换时可以设置要切换的面板，切换到的状态、以及进入/退出的动画效果和用时。.25五、交互设计案例演示案例演示登录弹出层.26五、交互设计案例演示案例演示登录弹出层.27