Axure rp 65 基础教程

1 / 61 Axure rp 6.5 Axure rp 6.5 软件基础入门软件基础入门 非原型非原型 不设计不设计 我们： 分享和学习关于 Axure 的一切的一切！ 向交互设计师与产品经理方向努力！ Axure rp 6.5 中文教程网 : www.heguangming.com 非原型不设计 QQ 群：274339340 2 / 61 Axure rp 6.5 Axure rp 6.5 软件基础入门学习目录软件基础入门学习目录 AxureAxure 基础部分基础部分 把目前写的文章都目录整理了一下，方便各位查看，希望各位也给微博转转！ 给你推荐一条微博： - /非原型_不设计:#非原型 不设计# 想学 axure 的朋友们，还在找 axure 6.5 版本的教程吗，全部在这里，没有太多高深的变量和交互应用，却是最实际的入门教程，不断更新，希望大家喜欢！ - 原文地址：http:/weibo.com/1776765170/yFQeBoaom 关于 Axure rp 的相关介绍 爱上 axure 的十大理由 001.Axure rp 6.5 的软件安装、汉化与注册 002.认识 Axure 的软件界面 003. 生成网页原型的三种方法 004. 如何关闭 IE 浏览器在生成原型时候的安全警告 005.在 chrome 中使用 axure 生成原型的问题 006. 站点地图区域 007. 认识 axure 组件区域 008. 认识 axure 部件库中各个部件的属性 009.图片组件axure 线框图部件库介绍 010.文本面板axure 线框图部件库介绍 011.矩形、占位符组件axure 线框图部件库介绍 012.水平线、垂直线axure 线框图部件库介绍 013. 图片热区axure 线框图部件库介绍 014. 文本框、文本编辑框、按钮axure 线框图部件库介绍 015. 如何安装（装载）axure 组件（部件） 016. 动态面板axure 线框图部件库介绍 017. 单选按钮、复选按钮axure 线框图部件库介绍 018. 内部框架axure 线框图部件库介绍 019. 菜单组件axure 线框图部件库介绍 020.树axure 线框图部件库介绍 021.Axure 自动备份功能！让意外不在可怕！ 022.axure 母版（模板）区域介绍 023. axure 制作项目符号列表样式 024.axure 制作圆形组件axure 制作技巧 025. axure 网格设置 3 / 61 关于关于 Axure rpAxure rp 的相关介绍的相关介绍 Axure RP 能帮助网站需求设计者，快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计，并可自动生成用于演示的网页文件和规格文件，以提供演示与开发。 Axure 正确的英文发音应该是(ak shûr)，如果用中文来读是（爱克硕儿），其中的最后一个硕可以有点儿化音。完整的 AXURE 应该是 Axure Rapid Prototyping（AXURE 快速原型设计） Axure 诞生在 2002 年 5 月的加利福尼亚大学伯克利分校，由 Victor Hsu（维克多许） and Martin Smith（马丁史密斯）共同研发，前者是一名电气工程师转向软件开发再转向产品经理，后者则是一位经济学家和自学成才的黑客 （不知道学习黑客的经济学家是不是为了黑银行啊， 呵呵，玩笑），两人最初尝试用 PowerPoint，Visio 和 Word 的构建软件原型，后来由于使用效率较低，两人决定寻找更好的办法，这也就是 Axure 诞生的缘由 Axure 的第一个版本诞生在 2003 年的 1 月，是同类第一个专为基于浏览器的应用程序的原型之一，到现在将近 9 年过去了，Axure 已经推出到 6.0 版，这个软件已经被数以万计的用户体验、 业务分析、 产品设计等人员使用， 在中国， 很多知名企业 （百度、 新浪、 搜狐、 淘宝、 腾讯）的招聘，已经将掌握 Axure 作为必备技能，。 如今，两位创始者居住在圣地亚哥，享受者美味的拉面和煎饼（很中国的口味），继续着Axure 伟大的开发旅程。 天下没有免费的午餐，对于 Axure，目前的需要购买许可证才能长期使用，否则就只有 30天的免费试用期，有财力的朋友可以花 149 美元购买许可授权。至于在中国使用的朋友，有很多仁人志士发明了汉化版，也有长期破解使用的方法。 4 / 61 爱上爱上 axureaxure 的十大理由的十大理由 来源：网站蓝图Axure rp 高保真网页原型制作，axure 官方网站:使用软件自定义翻译的，个别表述不是特别清晰！ 10. 你的需求说明从未看起来如此的棒 让我们勇敢的面对吧，无论你对商业和系统的需求是多么的了解，写出所有相关人员都能够认真阅读并且确认的需求文档从来不是一件简单的事情。冗长而低效的会议让你无法忍耐，于是你决定来点不一样的，你迅速的使用 Axure rp 画出整个系统的工作流程，并且用一种可以互动点击的方式演示给所有相关的人员，在创记录的时间里面，你们达成了需求协议。所有相关人员都对项目前景十分兴奋。 “像业务需求的抽象的问题是，我们都读同一文件，但我们每个人的想象不同的东西。我们创建高水平的高保真原型和使用 Axure 的 RP Pro 来创建视觉点的协议， 所以我们可以扭转工程师的业务需求。我们成功讲商业语言的视觉效果，主要是由于 - 从根本上缩小差距 Axure 有助于我们到底在想些什么，并开始真正成为集中解决方案“！ 陈智思 Schokman 商业分析师和用户界面印象派 MyWare 09. 你的项目经理会爱上你！ 时间表似乎变短了，而功能的名单会越来越长，您的项目经理，他的头发失去了大把。由于一些你的同事一直使用 Axure，他们已经建立了一个库部件和工作的应用程序，你的主人。你在这个项目上的优势，并在几分钟之内，你必须建立原型的模板，并已开始设计的变化。与天的空闲时间，你达到了设计你感到自豪，并保存在印着下午数百美元。 “我一直使用 Axure 为 4 年，主要是作为一种通信工具，开发人员和企业业主和可用性测试。我创建了互动线框，以促进协同设计，出版远程可用性测试的原型，并创建高保真原型展示他们爱 Axure 复杂的相互作用，不同国家的开发人员和企业主，因为它传达的互动概念，显示它，而不是告诉我爱 Axure，因为它为我节省了时间，金钱和头痛。UX 的工具箱，我这是一个非常宝贵的一部分。“ 乔安妮· 赖特 用户体验设计师 CustomInk.com 08. Axure rp 可以在 PC 和 Mac 之间通用 您的团队使用的 PC 和 Mac 混合工作，其中许多人在家里使用的苹果电脑。在 Mac 上的虚拟化通过使用 Visio 的领导经常皱眉和偶尔的亵渎。和 IT 人不喜欢它要么多的额外费用。如果有一个线框工具，运行在 PC 和 Mac 本身不会是伟大的，文件是兼容的，而且价格是您的团队？ 07. 你可以提前知道用户到底是喜欢还是抱怨你的产品 很难知道客户如何将设计的感觉，直到他们在他们面前。这个时候你不想等待，直到释放后，找出。Visio 的样机是相当足够的互动，所以这个测试使用 Axure RP 的一些想法，使丰富的原型。看客户使用后的原型，你知道你最喜欢的是一个失败，并启发你在不同的方向去。几次反复后，平稳的发展周期，释放（和你）收到如潮的顾客评论。 5 / 61 “描述人机交互口头使用静态的线框只为止。 当用户实际上可以看到作为原型来设计生活，和自己互动，意念和应用之间的桥梁变得更加容易跨越。原型制作能力 axure 6 使人们有可能采取的原型为你去的方法来用户为中心的设计，这使得设计更有活力和设计过程中更多的乐趣！“ 丹尼斯 Crumbine 用户体验设计师 尼尔森公司 06. 你可以不再日夜的从 visio 中复制和粘贴 你花了更多的比你的时间，复制和粘贴从 Visio，Word 和格式问题的战斗中所占的份额。每到一个图的变化，似乎是另一个小时同步文件。这一次，你拿起 Axure 代替。你设置一个自定义的 Word 模板，其中包括您的标志和公司风格规范发生器，一个两列的布局和配置的内容。每次有需要改变，你花你的时间设计，只需点击一个按钮来提供一个更新的规范。 05. 你的分布式团队将感觉不怎么分布 你的工作项目上与世界各地的同事和断开，导致返工，错过了最后期限。你和你的队友在大洋彼岸决定在 Axure 创建一个共享的项目。你意识到，你不仅可以在同一时间同一文件上工作，但是当你在办公室和她在床上，你可以找出哪些网页，她是她没有醒来。和你也可以浏览该项目的历史，看看她的完成。这是很好的，不踩到对方的脚趾。 04. 你的客户迫不及待的为你的想法买单 你有一个好主意，但为你的客户，这将是一个艰难的销售。PowerPoint 幻灯片和素描都不会削减它，让您快速创建交互式原型在 Axure RP，运行你的开发中得到的估计，目前你的客户。她被吹走你表明她的东西“真实”，立即看到的价值，不能等待上手。 03. 工程师终于知道你想要什么了，而且他们喜欢你的想法！ 不知何故，最终产品似乎总是比你在头脑里有点不同，要求的文件添加到多页的文字和静态图像，也许会推动边缘的开发商。相反，你在 Axure RP 原型的使用情况，并添加详细的功能说明。开发商知道你想要什么，并决定他们只希望与您携手，从现在开始。 02. 你的客户可以真正使用你的产品，而你也可以立刻得到真正的反馈 你的客户经常有话要说的按钮或选择图像的颜色， 但试图得到的相互作用和功能上的投入，就像拔牙。，而不是拉出来的 Illustrator，达到为 Axure RP，并创建一个交互式原型的“sketchiness”设置为高。下一次当你满足你的客户，他似乎像变了一个人，自信和公开讨论的流动和功能。结束的结果. 快乐的客户，你高兴。 01. 使用 Axure rp 让你看起来帅呆了，美爆了！ 6 / 61 001.Axure rp 6.5001.Axure rp 6.5 的软件安装、汉化与注册的软件安装、汉化与注册 第一步：从网络上下载 axure 安装程序到本地电脑、汉化语言包、注册码，双击安装程序，如图： 第二步：安装过程截图 乱码的情况是正常的 7 / 61 直接下一步 点击我同意，直接下一步 8 / 61 选择你要安装的文件路径，我一般默认路径，点击下一步 下一步 9 / 61 下一步 安装过程中 10 / 61 选择运行 axure,点击完成，到这一步程序安装完成了！ 进入启动界面了，启动的时间会慢点，和电脑配置有关 11 / 61 程序的欢迎界面，这个是已经注册的和汉化的。 12 / 61 如何汉化：如何汉化：lang.rarlang.rar 文件文件 使用方法：使用方法： Windows 版本的汉化方法： 先关闭 Axure RP，然后打开 Axure 的安装目录， 一般是像这样 C:Program FilesAxureAxure RP Pro 6.5 然后把 lang 文件夹复制到该目录下即可。 如何注册：如何注册： 13 / 61 002.002.认识认识 AxureAxure 的软件界面的软件界面 Axure 的软件界面总的来说，可以分为 9 大模块 1. 菜单栏：和大部分的软件界面一样，都是一些常规的文件、编辑、视图 2. 工具栏：是页面进行编辑的一些快捷操作，主要有字体设置、大小设置、页面显示大小和 Axure 本身自带的一些快捷操作等 3. 站点地图：呈树状结构、可以添加、删除页面、也可以对设计中的页面进行重命名操作 4. 部件区域：组件集中地带：矩形组件、图片组件、动态面板组件使用方式是直接拖动部件到页面编辑区域 5. 母版区域：共用，复用 6. 页面编辑区域：拖动相关的部件进行线框图编辑和交互具体的实施 7. 页面交互区域： 8. 部件属性区域：组件的注视、组件的交互、组件的属性编辑 9. 动态面板区域：设置动态面板的可视与隐藏 14 / 61 003. 003. 生成网页原型的三种方法生成网页原型的三种方法 方法一：菜单生成法 路径： 生成原型弹出框 如图： 方法二：工具栏，快速按钮生成法 15 / 61 方法三：快捷键生成法：直接按键盘 F5，即可生成网页原型 弹出框：无论使用上面哪一种方法生成原型，最终都会弹出以下这个弹出框（如图） 我们需要做三步动作： 1. 目标文件夹：即我们要生成的网页原型文件要存放的位置，默认存放在 我的文档我的 AXURE RP 原型 文件夹中，如果你不想放在默认的位置，也可以点击进行自定义存放。 16 / 61 2. 选择浏览器或者不打开，一般选择默认浏览器 17 / 61 3. 点击“生成”按钮，生成网页原型，生成过后，如果你选择了默认浏览器，软件会直接启动你的浏览器，并打开生成的原型页面，如图： 一个简单的登录窗口，就生成了！你也试试吧！ 18 / 61 004. 004. 如何关闭如何关闭 IEIE 浏览器在生成原型时候的安全警告浏览器在生成原型时候的安全警告 在上一节中，我们学习了如何生成网页原型的三种方法，当时我们采用的默认浏览器，搜狗浏览器，没有弹出安全警告，一般情况下，如果你的浏览器是 IE 的话，在每次生成网页原型的时候都会弹出如下安全警告，如图： 暂时性去除方法：单机鼠标右键，选择允许阻止内容 19 / 61 20 / 61 彻底的方法： 工具彻底的方法： 工具internetinternet 选项选项弹出窗口弹出窗口选择高级选择高级把允许活动内容在我把允许活动内容在我的计算机上的文件中运行”，打上对勾点击“应用”即可的计算机上的文件中运行”，打上对勾点击“应用”即可。 21 / 61 005.005.在在 chromechrome 中使用中使用 axureaxure 生成原型的问题生成原型的问题 22 / 61 006. 006. 站点地图区域站点地图区域 站点地图呈树状的，以主页为根节点，可以方便我们对网站整体模块和不同栏目、功能划分有一个很清晰的了解，同时也方便我们对网站整体页面进行管理（添加、删除、重命名、调整层级、调整顺序） ：选择一个节点，点击这个按钮可以实现在这个节点下面添加子页面 ：首先选中一个页面，然后点击这个按钮，可以实现页面的删除，也可以单击右键选择删除 注：如果当前页面下含有子页面，Axure 会自动提示当前页面有子页面，点击提示中的“确认”后会同时删除所有子页面 ：选中一个页面，点击这个按钮可以向上调整页面的排序 ：选中一个页面，点击这个按钮可以向下调整页面的排序 ：选中一个页面，点击这个按钮可以调整页面的层级（降级） ：选中一个页面，点击这个按钮可以调整页面的层级（升级） ：选中一个页面，点击这个按钮可以进入页面编辑状态 23 / 61 ：搜索页面，在页面过多的时候可以使用，平时用的少 页面重命名：页面重命名： 将页面结构生成流程图： 24 / 61 007. 007. 认识认识 axureaxure 组件区域组件区域 组件区域也叫做部件区域，英文为 widgets，还有人称之为控件区域，组件是 axure 事先准备好的网站项目常用的零件，比如一些基本的页面元素 Axure 默认存在 2 个组件库，分别为线框图和流程图。同时我们也可以自己去制作一些组件加载进来，或者从网络上下载一些其他网友制作的组件 对于其中的每一个组件的属性和具体用法，我们在后面会一一详细的介绍！ 25 / 61 008. 008. 认识认识 axureaxure 部件库中各个部件的属性部件库中各个部件的属性 在 axure 中每一个部件都有自己的属性，下面这个表格，我们就首先来了解认识一下！以下内容来自网站蓝图，版权归原作者所有！ 属性属性名称名称 属性说明属性说明 属性举例属性举例 标签 用来标示部件的名称，在 axure 中，部件名称并不是唯一的。 也就是说，你可以在页面中同时有 2 个部件都叫做“用户名” 坐标 用于确定部件在页面中的位置， 页面的坐标以左上角为 X0：Y0 尺寸 部件本身的尺寸， 大部分部件都是可以设置尺寸的，比如矩形组件，也些组件事不可以设置尺寸的，如文本组件，他的高度是随着字体的大小而变化 字体 和 office 办公软件类似 字体大小 字体的尺寸大小，和 office 办公软件类似 字体样式 黑体、斜体、下划线 26 / 61 字体颜色 边框颜色 部件的边框的颜色 边框粗细 27 / 61 边框样式 填充颜色 部件的层次 部件在不同的时间拖动到编辑区域， 他们所在层次是不一样的，有时候需要调整彼此的层次，以免部件被其他层次部件遮盖 锁定部件 锁定过后，组件不可以进行编辑，除非解锁 字体对齐 和 office 办公软件类似 28 / 61 009.009.图片组件图片组件axureaxure 线框图部件库介绍线框图部件库介绍 我们在后面的组件使用中，都统一使用“从部件区域拖拽图片组件到页面区域中” 1. 图片载入 1.1 将图片组件拖拽到页面区域 1.2 双击图片组件 1.3 选择合适图片，点击打开 1.4 载入图片时会询问是进行优化。 29 / 61 1.5 载入图片时会询问是否自动调整图片大小。 2. 图片尺寸大小调整 30 / 61 3. 悬停图片设置 以同样的操作方式，我们还可以设置鼠标按下图片、编辑选中图片、编辑禁用图片 4. 图片切割 选择图片，单机右键，选择切割图片 根据需要，可以选择 十字切割，横向切割，纵向切割 在图片切割状态下，按下键盘上的 ESCESC 键键或者取消按钮取消按钮，可以退出切割状态 31 / 61 以上内容都比较简单，只需要每一个菜单都去尝试一下 就可以知道 具体怎么去使用了！一定要自己去尝试下！ 32 / 61 010.010.文本面板文本面板axureaxure 线框图部件库介绍线框图部件库介绍 文本部件用于在页面中显示文字，对于文字的格式可以随意的更改，设定不同的字体、尺寸和颜色。 特别注意：文本面板的高度无法直接调整，它的高度是随着字体的大小自动变化的 在 6.5 版本中，对文本的排版都有 2 个位置，可以进行调整，如图所示，设置文本的字体： 1.1. 设置文本的字体、颜色、大小设置文本的字体、颜色、大小 2.2. 设置文本的行间距设置文本的行间距 Axure 6.5 版本新增的属性：调整字体的行间距，当有多行文本的时候，我们可以像在 word 中一样去设置文本的行间距，这个是新增的功能，以往我们需要调整文本的行间距需要拖动多个文本面板进行布局！ 3.3. 给文本设置超连接给文本设置超连接 33 / 61 在 6.5 之前的版本都是有一个单独的超链接组件的，和文本组件最大的区别就是，超链接组件的颜色是蓝色的并且有下划线，6.5 版本后把这个组件融入到了工具栏中，不过个人认为这个组件的可用度并不大，因为 axure 本身提供了交互设置区域。交互设置区域。 第一步：选择需要添加超链接的文本 第二步：单击工具栏的超链接按钮 第三步：在弹出的对话框中输入需要连接的地址，单击确定即可 34 / 61 011.011.矩形、占位符组件矩形、占位符组件axureaxure 线框图部件库介绍线框图部件库介绍 矩形组件和占位符没有太多的区别，这里我们主要讲解矩形组件的操作和使用，占位符的操作各位可以按照矩形的操作方法进行练习一下。 矩形组件是一个矩形，它可以用来做很多的工作，比如页面上需要一块蓝色的背景，就可以用一个填充为蓝色的矩形组件，我们还可以用它来做页面布局，是我们最常用的部件。 1. 可以用来做页面布局 2. 可以变化成为其他的形状：三角形、圆形、椭圆等很多的形状 3. 可以填充颜色：用着背景和层次 4. 可以用来制作表格 5. 可以直接输入文字 6. 可以添加很多的交互 首先我们将矩形组件拖动到页面编辑区域 1.1. 调整矩形的形状：单击鼠标右键选调整矩形的形状：单击鼠标右键选择编辑按钮形状选择形状选择需要变换的择编辑按钮形状选择形状选择需要变换的形状形状 具体对应的每一种形状，自己尝试一下。比如我们在做导航的时候，就需要顶部是圆角的矩形。 35 / 61 2.2. 练习矩形的颜色填充和渐变练习矩形的颜色填充和渐变 如果要出现那种很有质感的填充效果，必须选择线性渐变，并且在数值填充处输入 90 3. 3. 屏幕取色器的使用屏幕取色器的使用 有时候，我们需要获取其他地方的颜色的 16 进制值，可以借助颜色取色器，通过直接在颜色输入宽输入数值的话会更加精准 屏幕取色器下载 4. 4. 更多的属性操作更多的属性操作: : 如边框颜色、粗细、层次，矩形的大小等参见： 008. 认识 axure 部件库中各个部件的属性 36 / 61 012.012.水平线、垂直线水平线、垂直线axureaxure 线框图部件库介绍线框图部件库介绍 1. 1. 将水平线、垂直线拖动到将水平线、垂直线拖动到 axureaxure 页面编辑区域，如图：页面编辑区域，如图： 2. 2. 水平线、垂直线相关属性设置水平线、垂直线相关属性设置 主要属性有、线条的颜色、粗细、线条的样式、箭头的样式 37 / 61 013. 013. 图片热区图片热区axureaxure 线框图部件库介绍线框图部件库介绍 首先，我们将图片热区组建拖动到 axure 页面编辑区域 1. 1. 图片热区为页面图片或者其他部件添加热区，添加交互图片热区为页面图片或者其他部件添加热区，添加交互 我们一般在做专题的时候，会遇到一些组合商品，但是又需要单独分别设置连接，如果是 2 张图片还好办点， 可是如果和下图一样是集成在一张图片中的， 可能就需要我们借用图片热区组件，给每一束鲜花添加热区，然后再设置交互，在新窗口打开链接地址。 我们为上面的图片添加热区，设置点击鲜花图片，单独开新的连接地址 38 / 61 2. 2. 图片热区作为页面锚点的使用图片热区作为页面锚点的使用 我们经常在有些网站看到一些楼层快速直达的链接按钮,如图: 其实,使用 axure 的页面锚点功能我们也可以制作出类似的效果 对于拖动出来的图片热区,我们必须首先给他设置标签,这样在设置交互的时候,我们才知道要滚动到哪一个锚点 如果页面没有发生相应的滚动效果，可能是你的页面设置不够长，随便放上个组件，把页面撑长。 页面够长了，点击按钮时才能体现出滚动效果。 3. 3. 图片热区相关属性设置图片热区相关属性设置 008. 认识 axure 部件库中各个部件的属性:http:/www.heguangming.com/?p=122 4.4. 点击下载源文件点击下载源文件 013. 图片热区axure 线框图部件库介绍 39 / 61 014. 014. 文文本框、文本编辑框、按钮本框、文本编辑框、按钮axureaxure 线框图部件库介绍线框图部件库介绍 1. 1. 与文本面板组合设计表单与文本面板组合设计表单 文本框主要是在设计页面表单的时候，用的最多，通过与文本面板的组合使用，下面我们通过文本面板和文本框设计了一个简单的注册表单 对于，文本框中的文字，只需要双击即可编辑文字 2. 2. 注册表单中的密码遮罩设置注册表单中的密码遮罩设置 选中需要设置密码隐藏的文本框，单击鼠标右键选择编辑文本字段选择隐藏文本（密码框）即可 40 / 61 3. 3. 文本框、文本编辑框组合设计留言表单文本框、文本编辑框组合设计留言表单 文本编辑框，适合做大面积内容输入的设计，比如一般的编辑器 4 4文文本框、文本编辑框的一些属性设置本框、文本编辑框的一些属性设置 008. 认识 axure 部件库中各个部件的属性:http:/www.heguangming.com/?p=122 5 5点击下载源文件点击下载源文件 014. 文本框、文本编辑框axure 线框图部件库介绍 41 / 61 015. 015. 如何安装（装载）如何安装（装载）axureaxure 组件（部件）组件（部件） 我们在网络上经常可以下载到很多网友精心设计的 axure 组件，这些组件给我们节省了很多的时间，方便了我们进行原型设计，可是对于很多刚刚接触 axure 的朋友就遇到了 2 个问题： 第一：到哪里去下载这些组件第一：到哪里去下载这些组件 1. 精选组件：http:/www.heguangming.com/?cat=1（我会不断去搜索常用的组件供大家下载） 2. axure 官方组件下载：http:/www.axure.com/download-widget-libraries（提示使用谷歌浏览器可以翻译英文） 3.webppd 精选组件下载：http:/www.webppd.com/forum-28-1.html （必须是会员，而且需要虚拟币） 第二：如何安装已经下载到本地的组件库第二：如何安装已经下载到本地的组件库 1. 点击部件中的 线框图下拉，选择 载入部件库 2. 选择部件的所在位置，并选中 42 / 61 3. 载入后的效果，单击选中 axure 图标 16*16，可到对应的组件库中 使用和线框图中的组件方法一样，都是直接点击选中然后直接拖拽到页面编辑区域，部分组件也可以进行相应属性的设置 以上我们就完成了一个组件的安装了，如果有什么问题欢迎留言 43 / 61 016. 016. 动态面板动态面板axureaxure 线框图部件库介绍线框图部件库介绍 1 1、什么是、什么是 AxureAxure 的动态面板的动态面板 按照 Axure 官方网站的解释 ：动态面板控件（Dynamic Panel）可以让你实现高级的交互功能，实现原型的高保真度。动态面板包含有多个状态（states），每个状态可包含一系列控件（你可以把一个状态理 解成一个独立的页面）。任何时候都只有一个状态（页面）是可见的，或整个动态面板可以被隐藏。 结合交互动作， 可以让动态面板的状态进行隐藏、 显示和改变。 像添加其它控件一样，可以在控件面板中拖放动态面板控件到线框图中。 简单的说，简单的说，动态面板就是展示在页面不跳转的情况下所动态面板就是展示在页面不跳转的情况下所能实现的交互状态。而动态面板的每一个状态都可以看作是产生的一个新的交互结果。 简单的说， 动态面板就是展示在页面不跳转的情况下所能实现的交互状态 “动态面板组件式 axure 中功能最强大的部件，是一个化腐朽为神奇的组件。通过这个组件，我们可以实现很多其他原型软件不能实现的动态效果。”网站蓝图 axure 一直想把动态面板的内容，放在最后面才介绍，因为这个组件，在刚开始学习的时候，很难让人去理解。其实如果不考虑复杂的交互行为，这个动态面板不去搭理她，我们也能设计出满足我们需求的线框图，但是想交互更加完美就必须见识一下动态面板的魅力。 2 2、AxureAxure 的动态面板可以用来做什么的动态面板可以用来做什么 1）tab 式页签的切换效果：Axure 的官方给出的实例就是这个 2）鼠标触发式和点击触发式的下拉菜单效果：这个可以结合 Axure 的默认组件中的“垂直菜单”、“水平菜单”来实现，常用于导航的原型制作。 3）鼠标触发式的浮窗效果：类似“Alt”的效果，常用于浏览提示和触发式广告。 4）JS 的鼠标点击弹层效果：这个是目前使用被广泛使用的效果之一。 5） 注册表单中的根据焦点判断提示的效果： 当焦点在输入框内的时候提示该表单栏目填写规范，当焦点离开输入框的时候根据填写的结果提示正确或者错误原因， 这个需要动用高级设计交互编辑功能结合 Axure 的逻辑条件和设置变量功能来实现。 3. 3. 关于动态面板和其中状态的理解关于动态面板和其中状态的理解 其实动态面板，我们可以这样的去理解它，首先动态面板是一个大的容器，这个容器中可以有很多的状态，在每一个状态中，都可以放置一定的内容，然后我们通过事件来选择显示动态面板的相应状态 44 / 61 在默认的状态下，只有位置一的内容是可见的，其他的是隐藏的，如果你想其他状态可见，只需要把这个状态移动到最上面 4. 4. 现实中关于动态面板不同状态的应用案例现实中关于动态面板不同状态的应用案例 以上摘取的使淘宝网 2 种不同登录方式的状态变化，使用动态面板就可以制作出来。 45 / 61 017. 017. 单选按钮、复选按钮单选按钮、复选按钮axureaxure 线框图部件库介绍线框图部件库介绍 有时候发现这做事情坚持下来是一件很不容易的，写教程也一样，不过听到很多朋友对我说 这个全部是图片的教程 对他们入门帮助很多，我就想想 在坚持坚持把基础部分先完善了！ 1. 1. 简单的问卷调查：简单的问卷调查： 您的性别？ 答案：男 女 当然我们首先需要分析一下，这个问题，问性别 你只可能是男或者是女，2 者只能是其一，不能即是男也是女是把，所以我们这个问卷调查的题目是一个单选题： 要设置这样的一个问题，其实学到这个教程这个阶段，很多人都很清楚该如何去做了，第一步是拖动你需要的单选按钮到页面编辑区域，和一个文本面板，分别双击设置对应的文字，如图： 您的爱好？ 篮球 足球 羽毛球 苍老师 同样我们也进行一下分析，一个人可以同时喜欢篮球 足球 羽毛球 还有苍老师（这个是世界的）所以啊，这个是一个多选题，只要你有精力 你可以全部喜欢 所以我们的问题设置，如图： 这样我们就简单的制作了问卷调研中最重要的 2 类题型。单选题，多选题 46 / 61 2.2.设定单选组问题设定单选组问题 做好上面的单选题设置后，肯定很多人在设置原型后，发现了，为什么我的男、女都可以选中，不是说是单选题吗，为什么不能像正规网站一样，只能选中一个了，其实这里面我们忘记了一个设置，就是设置单选按钮组，我们必须保证这 2 个单选选项是一组的，这样才能实现我们想要的效果：只能选中男或者女，如图： 3. 3. 源文件下载：源文件下载：单选按钮、复选按钮单选按钮、复选按钮 47 / 61 018. 018. 内部框架内部框架axureaxure 线框图部件库介绍线框图部件库介绍 网页框架代码<iframe border=0 name=lantk src="要嵌入的网页地址" width=400 height=400 allowTransparency scrollbars=yes frameBorder="0"></iframe> 看到上面这段代码，很多人肯定认出这是 html 语言中的框架引用，在 axure 中也可以实现这样的框架效果。可以在页面中引用另一页面的内容 1.1. 内部框架引用外部网页内部框架引用外部网页 弹出链接属性对话框，如果只是是链接原型中页面 可以选择 第一个 ，这里面链接的是我的个人博客 48 / 61 2. 2. 如何应用内部框架引用视如何应用内部框架引用视频内容频内容 如果只需要视频内容，不需要网页的内容，记得复制 flash 地址，框架的大小是视频播放的大小 3. 3. 源文件下载：源文件下载：018. 018. 内部框架内部框架axureaxure 线框图部件库介绍线框图部件库介绍 49 / 61 019. 019. 菜单组件菜单组件axureaxure 线框图部件库介绍线框图部件库介绍 软件类的教程，我写不出长篇大论，这里面的都是基础的操作，希望初学者，根据一个功能演示，可以自己测试其他功能菜单的效果！ Axure 自带的菜单组件，我几乎没有用到过，做菜单导航，我第一时间想到的还是矩形组件， 大家有兴趣可以看看我使用矩形制作的电商网站通用头部， 其中就有矩形组件制作的导航菜单。 菜单组件的分类（横向、纵向）菜单组件的分类（横向、纵向） 菜单组件的相关设置菜单组件的相关设置 这里我们选择的是添加子菜单，具体的每个选项的作用，大家挨个尝试一下 就可以看到效果 008. 认识 axure 部件库中各个部件的属性： http:/www.heguangming.com/?p=122 50 / 61 020.020.树树axureaxure 线框图部件库介绍线框图部件库介绍 终于到最后一个组件的介绍了！到这里基础的应用应该算完成了！ 1.1. 拖动树组件，到页面编辑区域拖动树组件，到页面编辑区域 2.2.添加节点，可以添加子节点也可以在该节点的前后添加平级节点添加节点，可以添加子节点也可以在该节点的前后添加平级节点 3.3. 编辑节点图标编辑节点图标 51 / 61 做好上面的那一步，图标还不会显示，还需要对树的熟悉进行编辑 效果图： 52 / 61 021.Axure021.Axure 自动备份功能！让意外不在可怕！自动备份功能！让意外不在可怕！ 忘记保存了。 电脑意外重启了。 不小心删除了。 每次做 axure 的时候，多有了太多的意外了！ 萧何今天在微博上碰到 2 位网友都是因为意外导致自己的 axure 原型没有保存，最后只能加班从新在去做重复的工作！ 这其实是非常辛苦的一件事情，其实 axure 是有自动恢复的功能的，那就让我们见识一下，如何让意外不在可怕！ 1. 1. 备份时间设置备份时间设置 默认备份时间是 15 分钟，你可以进行数值调整 53 / 61 2. 2. 从备份中恢复文件从备份中恢复文件 第二步：选择你最近的文件名称，然后单击恢复，选择新的保存路径即可 54 / 61 022.axure022.axure 母版（模板）区域介绍母版（模板）区域介绍 axure 的模板区域是非常重要的一个功能，网站的头部、尾部部分等很多页面同时用到的内容，都可以使用母版，因为在母版中只需要修改一次，就可以实现所有的页面更新，可以大大的加速原型的制作速度。需要重复理解复用的概念！ 1. 1. 母版图示介绍母版图示介绍 2. 2. 母版菜单工具操作介绍母版菜单工具操作介绍 ：选择一个节点，点击这个按钮可以实现在这个节点下面添加子模板 ：首先选中一个模板，然后点击这个按钮，可以实现页面的删除，也可以单击右键选择删除 注： 如果当前原型中下含有子母版，Axure 会自动提示当前母版正在使用中，必须先删除页面中的母版才能删除母版本身 ：选中一个模板，点击这个按钮可以向上调整模板的排序 55 / 61 ：选中一个模板，点击这个按钮可以向下调整模板的排序 ：选中一个模板，点击这个按钮可以调整模板的层级（降级） ：选中一个模板，点击这个按钮可以调整模板的层级（升级） ：选中一个模板，点击这个按钮可以进入模板编辑状态 3. 3. 母版重命名母版重命名 其他菜单，如：删除、添加、移动，和上面的工具菜单方式一直，大家可以尝试一下 4 4. . 母版的三种行为：标准、放在背景中、自定义组件母版的三种行为：标准、放在背景中、自定义组件 标准：普通的母版，就是一般的复用母版、是默认创建的行为，不能在页面中进行直接修改 放在背景中：这类的母版是定位于页面的底层，并且锁定模板在中的坐标，这类复用经常用来创建 head、foot 等明确定位的复用模块 自定义组件：这类的模板类似于自创一个组件，在拖动到页面后，可以对其编辑修改，独立于母版了 56 / 61 57 / 61 023. axure023. axure 制作项目符号列表样式制作项目符号列表样式 像这样的在文字前面添加项目符合列表，不只是在 word 中可以实现，在 axure 中也可以很方便添加 l Axure rp 6.5 的软件安装、汉化与注册 l 认识 Axure 的软件界面 l 生成网页原型的三种方法 l 如何关闭 IE 浏览器在生成原型时候的安全警告 l 在 chrome 中使用 axure 生成原型的问题 l 站点地图区域 操作步骤操作步骤 1. 拖动文本面板到页面编辑区域 2. 点击工具栏的【项目符合列表】 其他属性设置，参考：010.文本面板axure 线框图部件库介绍 58 / 61 024.axure024.axure 制作圆形组件制作圆形组件axureaxure 制作技巧制作技巧 Axure 本身是没有直接提供圆形组件的，所以很多朋友在微博上问，如何使用 axure 制作圆形，难道都要找美工 Axure 没有提供圆形组件，但是它提供了一个万能组件矩形组件，只要有矩形组件，我们就可以制作出圆形，下面让我们看看具体的制作步骤： 1. 1. 拖动矩形组件到页面编辑区域，并设置形状为椭圆拖动矩形组件到页面编辑区域，并设置形状为椭圆 59 / 61 2.2.设置椭圆的尺寸设置椭圆的尺寸 w: 80 hw: 80 h：8080 60 / 61 025. axure025. axure 网格设置网格设置 Axure 默认的界面是没有吧网格显示出来，没有网格在制作原型的时候，对齐方面不是很好，个人习惯还是把网格显示出来，便于组件对齐和布局。 其实本来这篇文章应该叫做网格与参考线，只是本人对参考线的应用还很局限，特别是栅格化应用。 1. 1. 网格的显示与隐藏网格的显示与隐藏 2. 2. 其他网格相关设置其他网格相关设置 最好在吧 对齐网格 同时勾选，这样在拖动组件的时候，可以让组件自动对齐到网格，使组件对齐更加智能化 把网格的间距设为 5 像素，更加利于组件的对齐，如图： 61 / 61