axure新手入门基础
Axure培训资料课件(2024)
33
信息架构搭建与页面规划
设计信息架构
根据需求分析结果，设 计合理的信息架构，包 括页面层级、导航方式 等，确保用户能够顺畅 地浏览和使用APP。
2024/1/29
规划页面布局
针对每个页面，规划合 理的布局和排版，包括 页面元素的大小、位置 、颜色等，确保页面美 观且易于使用。
风格定位
根据项目需求，确定整体风格，如扁平化、拟物化等。
2024/1/29
色彩运用
运用色彩心理学原理，选择合适的色彩搭配，营造特定的氛围和情绪。
26
动画Байду номын сангаас果添加与优化
动画类型
了解Axure支持的动画类型，如淡入淡出、滑动、旋 转等。
动画设置
通过时间轴面板，精确控制动画的持续时间、延迟等 参数。
动画优化
2024/1/29
降低开发风险
通过原型验证设计方案，减少后期开发过程 中的修改和返工。
促进创新
快速尝试和验证新想法，激发团队创造力。
10
原型设计流程与规范
2024/1/29
明确设计目标
确定原型要解决的问题和验证的 假设。
制定设计计划
规划原型的设计范围、时间表和 所需资源。
11
原型设计流程与规范
设计原型
运用Axure等工具进行原型设计，包括界面布局、交互逻辑等。
评估与测试
组织团队成员和利益相关者评估原型，并进行用户测试以收集反馈 。
迭代与优化
根据评估和测试结果，对原型进行迭代和优化。
2024/1/29
12
原型设计流程与规范
保持简洁明了
Axure基础功能介绍
墨刀、Mockplus等 移动端 低，满足一般演示需求 低，大量模板、封装效果调用 快速出图，给领导客户演示产品效果
// 01
Axure概述
Axure 原型工具是美国 Axure Software Solution公司的旗舰产品， 主要用于定义需求规格、功能设计、界面 设计， 使用对象为用户体验设计师、 交互设计师、 业务分析师、 信息架构师、 可用性专家和产品经理。
AXURE 基础功能介绍
C 目录 ONTENTS
1 原型设计工具基础 2 Axure概述 3 Axure功能介绍 4 Axure设计流程
原型设计工具基础
AXURE
墨刀、Mockplus（摹客）等
适用范围 功能 学习成本 场景
Axure 多场景（移动、Web、后台） 高，满足任何高保真度原型 高，高阶功能不易理解 大量页面，多细节讲解演示
元件属性：在此设置选
中元件的标签、样式，添 加与该元件有关的注释， 以及设置页面加载时触发
5 的事件；
动态面板：重要区域
，在此可以动态面板的 状态、标签进行操作，
6 双击状态进入编辑。
Axure介绍—站点地图
1.页面的添加、删除和重命名
在要进行操作的页面上右键选择要添加或者要删除的页面机及 子页面 右键单击选择“Rename Page”菜单项可对页面进行重命名。
3 原型 效果
Axure介绍—线框图
线框图
线框图是产品设计的低保真呈现方式。目标简单直接： 1. 呈现主体信息群 2. 勾勒出结构和布局 3. 用户交互界面的主视觉和描述
正确的线框图，类似于产品的骨干框架。能够完整的表达出软件的功能、信 息架构、用户体验、用户交互流程图、可用性等所需信息
Axure教程axure新手入门基础(一)
Axure教程axure新手入门基础（1）名词解释：线框图：一般就是指产品原型，比如：把线框图尽快画出来和把原型尽快做出来是一个意思。
axure元件：也叫axure组件或axure部件，系统自带了一部分最基础常用的，网上也有很多别人做好的，软件使用到一定阶段可以考虑自己制作元件，以便提高产品原型的制作速度。
生成原型：是指把绘制好的原型通过axure rp生成静态的html页面，检查原型是否正确，同时，方便演示。
建议生成时选择用谷歌浏览器打开（第一次会有提示安装相关插件），ie会每次都有安全提示，不如谷歌浏览器方便。
（一）Axure rp的界面1-主菜单工具栏：大部分类似office软件，不做详细解释，鼠标移到按钮上都有对应的提示。
2-主操作界面：绘制产品原型的操作区域，所有的用到的元件都拖到该区域。
3-站点地图：所有页面文件都存放在这个位置，可以在这里增加、删除、修改、查看页面，也可以通过鼠标拖动调整页面顺序以及页面之间的关系。
4-axure元件库：或者叫axure组件库、axure部件库，所有软件自带的元件和加载的元件库都在这里，这里可以执行创建、加载、删除axure元件库的操作，也可以根据需求显示全部元件或某一元件库的元件。
5-母版管理：这里可以创建、删除、像页面头部、导航栏这种出现在每一个页面的元素，可以绘制在母版里面，然后加载到需要显示的页面，这样在制作页面时就不用再重复这些操作。
6-页面属性：这里可以设置当前页面的样式，添加与该页面有关的注释，以及设置页面加载时触发的事件onpageload。
7-元件属性：这里可以设置选中元件的标签、样式，添加与该元件有关的注释，以及设置页面加载时触发的事件；A-交互事件:元件属性区域闪电样式的小图标代表交互事件；B-元件注释：交互事件左面的图标是用来添加元件注释的，在这里我们能够添加一些元件限定条件的注释，比如：文本框的话，可以添加注释指出输入字符长度不能超过20。
Axure原型设计基础教学ppt课件(完整版)
Axure RP是一款快速原型设计工具。Axure代表美国Axure Software Solution公 司;RP则是Rapid Prototyping(快速原型)的缩写。Axure RP是该公司旗舰产品, 是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的用 户能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。 它不需要用户具备任何编程或写代码基础,就可以快速、高效地创建原型,设计出 交互效果良好的产品原型,常用于互联网产品设计、网页设计、UI设计等领域。 作为专业的原型设计工具,它还能同时支持多人协作设计和版本控制管理。
图2-1 线框图
图2-2 线框图式思维转化
Axure线框工具可以帮助用户简化烦琐的设计过程,为用户节省时间和精力。在制 作线框图的时候,尽量创建可编辑、可重复使用的元素,如图2-3、图2-4所示。这 样,制作原型的时候,在之前的基础上继续细化这些元素即可。
图2-3 线框图元素一
图2-4 线框图元素二
2.1 Axure RP的工作环境
Axure的可视化工作环境可以让用户轻松快捷地以鼠标操作的方式创建带有注释 的线框图。不用进行编程,就可以在线框图上定义简单连接和高级交互。软件可 以在线框图的基础上自动生成HTML原型和Word格式的文件,见表2-1。
表2-1 产品对比
随着Axure RP原型设计工具的广泛应用,Axure RP已经被很多大型企业所采用,使 用者越来越趋于广泛,不但包括了最初Axure RP原型工具的主推对象:产品经理、 需求工作人员、专注功能交互和界面设计的交互设计师、可用性专家、UI设计师 等,甚至产品规划、设计、开发、测试、运营环节的参与人员,如:商业分析师、信 息架构师、IT咨询师、架构师、程序开发工程师也在使用Axure。
AxureRP9forMac的新手入门指南
AxureRP9forMac的新⼿⼊门指南Axure RP是⼀种线框图，原型设计，流程图和⽂档⼯具。
使⽤它来创建和设置图表样式，为图表页⾯和元素添加交互性和注释，在本篇⽂中，你可以学习创建和共享原型的基础知识，了解页⾯，⼩部件和交互。
你还可以学习如何在Web浏览器中查看原型并将其与Axure Cloud共享。
有兴趣的⼩伙伴们和新⼈宝宝可以收藏哦页数Axure RP⽂件被组织为pages，您可以在Pages窗格中进⾏管理。
要添加页⾯，请单击“ 页⾯”窗格右上⽅的“ 添加页⾯”按钮。
在“ 页⾯”窗格中双击页⾯名称，以在画布上将其打开。
帆布画布是您构建设计的地⽅。
您可以不受限制地⼯作，也可以根据要设计的⽬标设备设置页⾯尺⼨。
⼩部件您将使⽤⼩部件来构建设计，这些⼩部件在“ 库”窗格中被组织到库中。
Axure RP预先安装了四个⼩部件库- 默认，流程，图标和⽰例UI模式 -但您也可以创建⾃⼰的库或添加由队友创建的库。
要将⼩部件添加到画布，请将其从“ 库”窗格中拖动。
您也可以使⽤“ 插⼊”菜单中的选项来添加⽂本，图像和形状。
要编辑⼩部件上的⽂本，请双击它，或选择它并按ENTER。
要更改⼩部件的外观，请转到“ 样式”窗格。
诸如填充颜⾊和字体之类的许多属性也位于画布顶部的样式⼯具栏中，以便快速访问。
互动互动画布上有⼀些⼩部件后，可以在“ 交互”窗格中向它们添加交互性。
链接到另⼀页在原型中的页⾯之间创建链接⾮常简单快捷。
在“ 页⾯”窗格中，添加⼀个新页⾯。
您现在应该有两个页⾯，第1页和第2页。
在第1页上，将⼀个按钮⼩部件从“ 库”窗格拖到画布上。
选择按钮，然后在“ 交互”窗格中单击“ 单击”或“点击”→“打开链接 ” 。
在出现的列表中选择Page 2，然后单击OK。
单击UI右上⽅的“ 预览”按钮，以在Web浏览器中打开原型。
单击按钮转到第2页。
共享您的原型单击UI右上⽅的“ 共享”按钮，并为您的项⽬指定名称和密码。
2024版Axure8.0基础教程
通过设置交互事件和动作，测试原型的交互逻辑 是否正确、流畅。
兼容性测试
在不同设备和浏览器上测试原型的显示效果和交 互功能，确保良好的用户体验。
发布原型到云端或本地服务器
发布到Axure Cloud
通过Axure8.0内置的发布功能，可以将原型发布到Axure Cloud上，方便团队 成员在线查看和评审。
Axure8.0基础教程
目录
• Axure8.0概述与安装 • 基本操作与设置 • 交互设计基础 • 高级交互设计技巧 • 原型测试与发布 • 总结与展望
01 Axure8.0概述与 安装
Axure8.0简介及功能特点
专业的原型设计工具
Axure8.0是一款专业的原型设计 工具，支持快速创建高质量的交
对未来学习的建议与展望
• 深入学习Axure8.0的高级功能：在未来的学习中，建议学员们进一步探索Axure8.0的高级功能，如自定义函数、 复杂条件逻辑等，以应对更加复杂的设计需求。
• 关注行业动态与趋势：鼓励学员们关注UI/UX设计行业的最新动态和趋势，了解前沿的设计理念和技术，不断 提升自己的设计水平和竞争力。
交互样式
通过设置元素的交互样式，实现鼠标悬停、 点击等状态下的视觉效果。
案例：制作一个简单的交互式原型
设计界面布局
使用Axure8.0的组件和布局工具， 设计登录页面的布局和元素。
添加交互效果
为登录按钮添加点击事件，实现
跳转到另一个页面的效果；为输 入框添加输入验证，确保用户输
入正确的信息。
确定需求和目标
率等参数。
点击“保存”按钮，将项目保存在指定位置。建议将项目文件
03
和所有相关素材保存在同一个文件夹中，以便于管理。
axure教程
优秀原型设计案例赏析
案例一
某社交应用原型设计
亮点
简洁的界面设计，清晰的社交功能布局，以及流畅的 交互体验。
启示
在社交应用的设计中，需要注重用户体验和社交功能 的完善性。
优秀原型设计案例赏析
案例二
某电商网站原型设计
亮点
丰富的商品展示方式，个性化的推荐功能，以 及便捷的购物流程。
启示
在电商网站的设计中，需要关注用户需求，提供多样化的商品展示和个性化的 推荐服务。
界面设计及交互实现
界面设计
运用Axure的设计工具，进行界面设 计，包括色彩搭配、图标设计、字体 选择等，打造美观且符合用户习惯的 界面。
交互实现
利用Axure的交互功能，为界面添加 交互效果，如点击、滑动、拖拽等， 提升用户体验。
原型测试与优化调整
原型测试
将设计好的原型进行测试，邀请目标用户参与，收集他们的反馈和建议，了解原型在实际使用中的表 现。
优秀原型设计案例赏析
案例三
某在线教育平台原型设计
亮点
生动的课程内容展示，互动性的学习体验， 以及完善的学习辅助功能。
启示
在线教育平台的设计需要注重课程内容的呈 现方式和学习体验的互动性。
03
Axure核心功能详解
页面管理
创建新页面
在Axure中，可以通过简单的操作创建新的页面，以满足不同设 计需求。
axure教程
目录 CONTENT
• Axure基础入门 • 原型设计基础 • Axure核心功能详解 • 高级功能应用与技巧 • 实战案例：从0到1完成一个APP
原型设计 • 总结与展望
01
Axure基础入门
软件安装与启动
axure基本用法
axure基本用法===========一、Axure简介-------Axure是一款非常受欢迎的快速原型设计工具，它可以帮助用户快速创建高保真度的产品原型，同时也可以用于产品设计和开发。
通过Axure，你可以创建动态、交互式的原型，并模拟各种用户行为和场景。
--------### 1. 创建项目首先，打开Axure软件，创建一个新的项目。
在创建项目时，你需要选择一个合适的名称和保存位置。
### 2. 添加页面在Axure中，你需要通过添加页面来构建原型的基础结构。
你可以通过菜单栏中的“页面”选项来添加新的页面。
在页面编辑器中，你可以设置页面的标题、背景色、导航栏等。
### 3. 添加元素在每个页面中，你可以添加各种元素，如按钮、文本框、图像、列表等。
你可以通过工具栏中的相应工具来选择和放置元素。
同时，你也可以通过属性面板来编辑元素的属性，如大小、位置、颜色、字体等。
### 4. 交互设计Axure的强大之处在于它的交互设计功能。
你可以通过设置元素的交互事件，如点击、悬停、按下、松开等，来模拟各种用户行为。
同时，你还可以设置元素的动态效果，如淡入淡出、滑动、缩放等。
### 5. 预览原型完成原型的设计后，你可以通过菜单栏中的“预览”选项来查看原型。
在预览模式下，你可以测试各种用户行为和交互效果，并随时调整原型的设计。
### 6. 导出原型最后，你可以将原型导出为多种格式，如HTML、PNG、PDF等，以便在各种设备和平台上进行测试和展示。
--------### 1. 动态面板和交互效果Axure提供了许多高级的交互效果和动态面板，如滑动门、时间轴、条件逻辑等。
这些功能可以帮助你创建更加复杂和精细的交互设计。
### 2. 页面串联和跳转在Axure中，你可以将多个页面串联起来，形成一个完整的使用流程。
同时，你也可以设置页面的跳转和返回机制，以实现更加灵活的用户体验。
### 3. 变量和函数Axure支持使用变量和函数来增强你的设计逻辑和可复用性。
Axure RP基础知识 ppt课件
三、常用部件
16
➢ 按钮
用于吸引用户点击，达到Call-to-Action的 效果
➢ 表格
用于展示格式化的信息内容，由于Axure中 的表格功能较弱，一般可用矩形框来代替 实现。
➢ 分割线
用于区别两块级别不同或内容不同的信息。
ppt课件
四、动态面板
17
一、基本功能 二、界面模块 三、常用部件 四、动态面板 五、交互设计
三、常用部件
12
一、基本功能 二、界面模块 三、常用部件 四、动态面板 五、交互设计
ppt课件
三、常用部件
13
➢ 框类部件
通常用来表示页面的结构布局，具有多种形状（如 右侧菜单），最常用的有以下三种： • 矩形：表示页面的模块结构； • 占位符：表示图片站位； • 圆角矩形：表示按钮，也可与矩形用法一致。
ppt课件
二、界面模块
9
➢ 站点地图
用于编辑网站的基本结构，以及页面之间的层级 关系，并对页面进行命名。
➢ 部件栏
选取部件的区域，系统默认提供了“线框图”和 “流程图”的部件，在做网站的原型设计时通常 使用“线框图”中的部件。也可以导入其他已经 只做好的部件，或自己制作模块后导入。
➢ 母版管理
母版：可以复用的部件组合，对母版的编辑将会
ppt课件
一、基本功能
5
➢ 设计交互规则和效果
设计页面的基本交互规则以及效果，用户点击某按钮后页面会给出怎样 的反馈，或是产生怎样的变换。例如：超链接、锚点、弹出层等。
ppt课件
二、界面模块
6
一、基本功能 二、界面模块 三、常用部件 四、动态面板 五、交互设计
ppt课件
站点地图 部件栏 母版管理
Axure基本使用指南
Axure基本使用指南目录原型工具的选择 (1)axure文件的使用 (2)axure文件的制作与生成 (4)文档管理(Document) (6)模板复用(Templates) (10)Widget工具 (14)注释annotations (19)交互interactions (26)Axure RP Pro 5.5 中文翻译教程 (30)原型工具的选择纸笔：简单易得，上手难度为零。
有力于瞬间创意的产生与记录，有力于对文档即时的讨论与修改。
但是保真度不高，难以表述页面流程，更难以表述交互信息与程序需求细节。
Word：上手难度普通。
可以画wireframe，能够画页面流程，能够使用批注与文字说明。
但是对交互表达不好，也不利于演示。
Excel：上手难度普通。
易于画表单类的页面，易于做批注，但演示效果一般。
PPT：上手难度普通。
易于画框架图，易于做批注，也可以表达交互流程，也擅长演示。
但是不利于大篇幅的文档表达。
Visio：功能相对比较复杂。
善于画流程图，框架图。
不利于批注与大篇幅的文字说明。
同样不利于交互的表达与演示。
Photshop/fireworks：操作难度相对较大，易于画框架图、流程图。
不利于表达交互设计，不擅长文字说明与批注。
Dreamweave：操作难度大，需要基础的html知识。
易于画框架图、流程图、表达交互设计。
不擅长文字说明与批注。
以上这些工具，都是产品经理经常会使用到的，但是从根本上来说，这些工具都不是做prototype design的专门利器，需要根据产品开发不同的目的，不同的开发阶段，选择不同的工具搭配使用，才能达到表达、沟通的目的。
比如使用纸笔，更适合在产品创意阶段使用，可以快速记录闪电般的思路和灵感；也可以在即时讨论沟通时使用，通过图形快速表达自己的产品思路，及时的画出来，是再好不过的方法。
而word则适合在用文字详细表达产品，对产品进行细节说明时使用，图片结合文字的排版，是word最擅长的工作。
Axure8.0基础教程AxureRP8实战手册
Axure8.0基础教程AxureRP8实战手册目录Axure8.0基础教程（1-10）AxureRP8实战手册 (1)Axure8.0基础教程（11-20）AxureRP8基础操作 (8)Axure8.0基础教程（21-30）新手必须掌握的基础操作 (15)Axure8.0基础教程（31-40）新手必须掌握的基础操作 (22)Axure8.0基础教程（41-50）新手必须掌握的基础操作 (28)Axure8.0基础教程（51-56）新手必须掌握的基础操作 (35)Axure8.0基础教程（1-10）AxureRP8实战手册本篇包含56种常见的基础操作，初学者应在掌握本篇内容后再进行实战案例篇的学习，以免产生学习障碍。
同时，建议具备一定基础的读者学习本篇中相对生疏的内容，并加以掌握。
本文目录基础1. 添加元件到画布基础2. 添加元件名称基础3. 设置元件位置/尺寸基础4. 设置元件默认角度基础5. 设置元件颜色与透明基础6. 设置形状或图片圆角基础7. 设置矩形仅显示部分边框基础8. 设置线段/箭头/边框样式基础9. 设置元件文字边距/行距基础10. 设置元件默认隐藏正文基础1. 添加元件到画布在左侧元件库中选择要使用的元件，按住鼠标左键不放，拖动到画布适合的位置上松开。
（图1-1）基础2. 添加元件名称文本框属性中输入元件的自定义名称，建议采用英文命名。
建议格式：PasswordInput01或Password01名称含义：序号01的密码输入框格式说明：“Password”表示主要用途；“Input”表示元件类型，一般情况下可省略，当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用；“01”表示出现多个同名元件时的编号；单词首字母大写的书写格式便于阅读。
（图1-2）基础3. 设置元件位置/尺寸元件的位置与尺寸可以通过鼠标拖拽调整，也可以在快捷功能或元件样式中进行输入调整。
（图1-3）x：指元件在画布中的x轴坐标值。
axure基本用法
axure基本用法Axure是一款强大的原型设计工具，广泛应用于产品设计、UI设计等领域。
以下将介绍Axure的基本用法，帮助大家更好地掌握这款工具。
1.Axure简介与特点Axure是一款功能丰富、易于上手的原型设计工具。
它具有以下特点：- 界面简洁，操作直观- 丰富的元件库和组件库- 强大的动态效果和交互设置- 支持团队协作和版本控制- 生成高保真原型2.Axure基本操作与界面布局Axure的界面主要包括工具栏、菜单栏、工作区域和状态栏。
熟悉这些区域和基本操作，是掌握Axure的基础。
3.Axure元件与组件的使用Axure提供了丰富的元件库和组件库，可以帮助设计师快速搭建原型。
元件分为页面元素和交互元素，组件则可用于构建复杂的交互效果。
4.Axure动态效果与交互设置Axure支持多种动态效果，如渐变、滑动、缩放等。
通过设置交互，可以实现元件间的联动和用户操作反馈。
5.Axure团队协作与版本控制Axure支持多人实时协作，团队成员可以在同一项目中进行修改和讨论。
此外，Axure还提供了版本控制功能，便于管理项目迭代。
6.Axure原型测试与评估在设计过程中，可通过Axure的测试功能邀请用户进行测试，收集反馈意见。
这有助于评估原型的可用性和改进设计。
7.实战案例与应用场景Axure广泛应用于互联网、移动应用、软件等领域。
以下将介绍一些实战案例，帮助大家更好地了解Axure的应用场景。
8.Axure进阶技巧与学习资源熟练掌握Axure进阶技巧，可以提升原型的质量和效率。
同时，学习资源如教程、案例和插件等，可以帮助设计师更深入地了解Axure。
Axure培训资料课件pptx
03
资源推荐
为了支持学员们的持续学习，我们推荐了一些优质的Axure学习资源，
包括官方文档、在线教程、交流社区等。学员们可以根据自己的需求和
兴趣选择合适的资源进行学习。
THANKS FOR WATCHING
感谢您的观看
降低开发成本和风险
原型设计重要性
提高项目沟通效率
验证产品想法的可行性
原型设计流程与规范
原型设计流程 1. 明确设计目标
2. 分析用户需求
原型设计流程与规范
3. 设计原型结构和交互 4. 添加注释和说明
5. 评审和修改原型
原型设计流程与规范
原型设计规范 保持简洁明了的设计风格
统一设计元素和交互方式
解决方案
采用版本控制策略，避免多人同时编辑同一个页面元素。 如有必要，可通过沟通协商确定最终方案。
问题3
项目文件过大，导致保存或打开速度缓慢，影响团队协 作效率。
解决方案
对项目文件进行优化，删除不必要的页面和元素，压缩 图片等资源文件大小。同时，可考虑将项目拆分成多个 子项目，提高团队协作效率。
CHAPTER 06
CHAPTER 03
Axure核心功能详解
页面管理
01
02
03
创建页面
在Axure中，可以通过简 单的拖拽操作创建新的页 面，实现原型设计的快速 搭建。
页面跳转
通过设置链接，实现不同 页面间的跳转，模拟实际 产品的导航流程。
页面排序
根据设计需求，可以方便 地调整页面的顺序，使原 型更加符合逻辑。
信息架构搭建
梳理产品功能与内容
03
需求分析与信息架构搭建
设计信息架构与导航
制定页面流程与跳转逻辑
Axure RP基础教程
Axure RP pro教程目录（一）Axure介绍 (2)（二）界面与功能 (3)（三）文档管理 (6)（四）模板复用 (10)（五）widgets工具-上 (13)（六）widgets工具-下 (16)（七）注释annotations (18)（八）交互interactions（上） (26)（八）交互interactions（中） (29)（一）Axure介绍Axure RP 能帮助网站需求设计者，快捷而简便的创建基于目录组织的原型文档、功能说明、交互界面以及带注释的wireframe网页，并可自动生成用于演示的网页文件和word文档，以提供演示与开发。
Axure RP 的特点是：∙快速创建带注释的wireframe文件，并可根据所设置的时间周期，软件自动保存文档，确保文件安全。
∙在不写任何一条html与javascript语句的情况下，通过创建的文档以及相关条件和注释，一键生成html prototype演示。
∙根据设计稿，一键生成一致而专业的word版本的原型设计文档。
接下来我会结合图片，分几个步骤分享我对Axure的认识，一、界面与功能二、工具栏三、站点地图四、组件与使用方法五、复用模板与使用六、交互功能与注释七、实例（二）界面与功能不论学习什么，打基础是很重要的。
关于基础练习，我印象最深的故事是王羲之练习书法的故事，将一池水染黑，需要怎样的毅力？再有就是达芬奇与鸡蛋的故事，一个简单的鸡蛋，达芬奇画了无数次。
我相信正是他们的一步一个脚印，才让他们有了后来伟大的成就。
故事老套，道理浅显，可是我认为很重要。
学习软件，应该先熟悉每个面板，每个基础功能，才能够真正谈到运用。
所以我的学习方法是了解软件的基础功能开始。
一、欢迎界面与功能运行Axure RP后，首先弹出的是欢迎界面，它拥有的功能和其他软件的欢迎界面没有什么特别的不同。
功能区1：文档区，这个区域显示用户最近打开的Axure RP文件，用户可以快捷的打开之前编辑的文件。
Axure基础教程：合理使用母版进行模块化设计
Axure基础教程：合理使用母版进行模块化设计合理地使用母版进行模块化设计，会使你的原型制作事半功倍。
Axure原型的制作过程中，你一定遇到过这样的问题，出现在不同页面的功能模块，如果你是通过复制粘贴来完成的，那么当该模块发生变动需要修改时，麻烦就大了，个个需要改，可能改的不一致，也有可能会漏改，以至于辛辛苦苦改了半天，一演示，看到的是没有改过的旧版，表示很心痛。
此时，就该母版发挥作用了，合理地使用母版进行模块化设计，会使你的原型制作事半功倍。
针对母版如何高效使用，下面进行较详细的说明：一、母版的作用减少重复工作，提高制作效率；统一修改维护，提高中途修改效率；共用资源，提高原型运行效率。
二、模板的基本操作母版窗口位于软件工作环境的左下角，基本操作同其他功能一样：新建，窗口顶部的添加按钮可以添加，也可以把页面中已经做好的模块选中后，通过右键转换为母版；删除，母版窗口中，选中母版后按delete键删除，或者右键菜单删除；重命名，选中母版后，再次点击可对母版名称进行修改，或者右键菜单重命名；编辑，母版窗口中，双击母版，主窗口打开母版页面进行编辑，或者在有使用母版的页面中双击母版，打开母版页面进行编辑；新建文件夹，窗口顶部的新建文件夹按钮，或者右键菜单中新建选项；对母版进行组织管理，直接在窗口中拖动母版调整母版顺序活层级关系，或者通过右键菜单“移动”选项进行调整；添加到多个页面，通过右键菜单添加到多个页面选项（Add to Pages），可以选择要添加到的页面，并可以设定添加到页面的位置；从多个页面中删除，右键菜单操作，这个值得一提的是，当母版已经被页面使用时，是无法被删除的，需要先从页面中删除母版，此时可以用到这个功能，进行一次性删除；三、模板的导入功能当一个新的文件想要使用现有文件中的母板时，可以通过新文件的导入功能，将文件中的母版导入新文件。
具体操作步骤：菜单“文件”→“从RP文件导入”→选择目标文件→跳过“页面导入”步骤→选择要导入的目标母版→确定导入动作（add/action）→跳过其他导入选项（导入自适应视图、导入配置文件、导入页面说明字段、导入元件说明字段、导入页面样式、导入元件样式、导入变量、导入参考线）这样，新文件的母版窗口就会出现导入的母版，从而可以在新文件中使用。
Axure
如果要取消隐藏，就选择”非隐藏文本“就可以了，文本框默认是”非隐藏文本“模式。
3、显示/隐藏边框：
输入框默认是显示边框的，我们可以选择隐藏掉，如下图所示。
当隐藏之后看起来就有点像一个普通的文本，但是生成页面原型后是可以进行文字输入的。
4、设置只读/非只读：
axure对于文本框还有个很奇怪的设置，就是可以把文本框设置为只读状态，这样就无法编辑里面的文字了（文本框为啥不让编辑啊….），具体效果请看例子。
5、分配提交按钮：
这个功能光看上面的字眼可能比较难理解，但是实际作用其实我们经常遇到，比如我们经常在各种登录界面时，在输入框输入完直接按回车，就会直接登录，相当于点击”登录“按钮。
这个”分配提交按钮“的功能就是如此，当我们设置这个选项时，会让我们选择某个按钮（或是
矩形），当在对应的输入框里面点击回车时，就相当于点击了之前选择好的那个按钮。
在作者的例子里面，是有个”跳转到页面2“的按钮（下图中的那个），已经设置好交互。
在上面的输入框里面输入回车键，就相当于点击了按钮，读者尝试一下就能理解了。
Axure8从入门到精通
样式管理器
3
通过样式管理器，可以对页面中的样式进行统一 管理。可以添加、修改或删除样式，使得设计更 加灵活、高效。
2024/1/26
18
03
交互设计实战
2024/1/26
19
事件触发与动作设置方法
事件触发
在Axure8中，可以通过点击、双击、鼠标移入/移出、键盘操作等 事件来触发交互效果。选择需要添加事件的元素，然后在“属性 ”面板中选择“添加事件”进行设置。
2024/1/26
8
界面介绍与功能概览
功能概览
支持多种交互效果设计；
提供丰富的UI控件和图标库；
2024/1/26
9
界面介绍与功能概览
可生成HTML原型或高保真原型； 支持团队协作和版本控制。
2024/1/26
10
基本操作与常用快捷键
新建文件
选择“文件”菜单下的“新建”命令 ；
保存文件
选择“文件”菜单下的“保存”命令 或使用快捷键Ctrl+S（Mac上为 Command+S）；
为进度条添加鼠标悬停、 点击等交互效果，提升用 户体验。
在Axure中对进度条组件 进行调试和测试，确保在 各种情况下都能正常工作 。
将进度条组件打包成插件 格式，发布到Axure官方 市场或其他平台供他人使 用。
2024/1/26
32
06
总结回顾与展望未来
2024/1/26
33
关键知识点总结回顾
2024/1/26
16
布局管理器使用技巧
启用布局管理器
在Axure8中，可以通过布局管 理器对页面元素进行快速布局 。启用布局管理器后，可以选 择不同的布局方式进行设计。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
axure新手入门基础名词解释：线框图：一般就是指产品原型，比如：把线框图尽快画出来和把原型尽快做出来是一个意思。
axure元件：也叫axure组件或axure部件，系统自带了一部分最基础常用的，网上也有很多别人做好的，软件使用到一定阶段可以考虑自己制作元件，以便提高产品原型的制作速度。
生成原型：是指把绘制好的原型通过axurerp生成静态的html页面，检查原型是否正确，同时，方便演示。
建议生成时选择用谷歌浏览器打开（第一次会有提示安装相关插件），ie会每次都有安全提示，不如谷歌浏览器方便。
（一） Axurerp的界面1-主菜单工具栏：大部分类似office软件，不做详细解释，鼠标移到按钮上都有对应的提示。
2-主操作界面：绘制产品原型的操作区域，所有的用到的元件都拖到该区域。
3-站点地图：所有页面文件都存放在这个位置，可以在这里增加、删除、修改、查看页面，也可以通过鼠标拖动调整页面顺序以及页面之间的关系。
4-axure元件库：或者叫axure组件库、axure部件库，所有软件自带的元件和加载的元件库都在这里，这里可以执行创建、加载、删除axure元件库的操作，也可以根据需求显示全部元件或某一元件库的元件。
5-母版管理：这里可以创建、删除、像页面头部、导航栏这种出现在每一个页面的元素，可以绘制在母版里面，然后加载到需要显示的页面，这样在制作页面时就不用再重复这些操作。
6-页面属性：这里可以设置当前页面的样式，添加与该页面有关的注释，以及设置页面加载时触发的事件onpageload。
7-元件属性：这里可以设置选中元件的标签、样式，添加与该元件有关的注释，以及设置页面加载时触发的事件；A-交互事件:元件属性区域闪电样式的小图标代表交互事件；B-元件注释：交互事件左面的图标是用来添加元件注释的，在这里我们能够添加一些元件限定条件的注释，比如：文本框的话，可以添加注释指出输入字符长度不能超过20。
C-元件样式：交互事件右侧的图标是用来设置元件样式的，可以在这里更改原件的字体、尺寸、旋转角度等，当然也可以进行多个元件的对齐、组合等设置。
8 动态面板：这个是很重要的区域，在这里可以添加、删除动态面板的状态，以及状态的排序，也可以在这里设置动态面板的标签；当绘制原型动态面板被覆盖时，我们可以在这里通过点击选中相应的动态面板，也可以双击状态进入编辑。
Axurerp的界面就介绍到这里，界面中的各个区域基本上在做产品原型的过程中，使用都很频繁，所以建议不要关闭任何一个区域。
如果不小心关闭了，可以通过主菜单工具栏—视图—重置视图来找回。
（二）Axurerp的线框图元件l 图片图片元件拖入编辑区后，可以通过双击选择本地磁盘中的图片，将图片载入到编辑区，axure会自动提示将大图片进行优化，以避免原型文件过大；选择图片时可以选择图片原始大小，或保持图片元件的大小。
l 文本在网页中文本的名称是lable，用于页面中添加说明文字、文字连接，或一些动态的提示。
l 矩形矩形的应用比较广泛，比如作为页面的背景、按钮、以及一些元件的遮盖等；矩形的形状可以通过鼠标右键点击–编辑选项—改变形状，来变成我们需要的形状，比如做选项卡时候我们需要顶部圆角的矩形，就可以通过改变矩形的形状来实现。
l 占位符制作原型时，可以用它来代替对一些没有交互或者交互比较简单容易说明的区域；也可以做成关闭按钮。
占位符在保真比较高的产品原型中作用不大。
l 圆角矩形这个个人认为是因为圆角矩形应用广泛，所以单独拿出来作为元件给使用者，免去了对矩形的设置。
l 动态面板非常重要的axure元件，必须要学会使用的元件，动态面板的显示、隐藏、多状态等，都是非常有用的。
在这里不过多介绍，详细介绍请参考：小楼axure图文教程（五）动态面板的使用。
l 水平线就是一条水平的线，可以作为表示页面一些区域分割时使用，比如在两块不同区域之间添加一条水平线，来明显的区分。
水平线可以通过设置元件属性中的角度Rotº变成斜线来使用。
l 垂直线没什么好说的，和水平线一样的作用。
l 图片热区用于点击图片中某个区域产生交互事件时使用，图片热区也是矩形的一种，可以通过设置矩形无边框，背景色100%透明度来实现。
l 文本框（单行）用于输入文字的axure元件，用于登录、标题、密码框（鼠标右键–编辑选项–隐藏文本）等功能。
l 文本框（多行）从字面意思就知道了它的功能，用于实现更多文字内容输入的axure 元件，用于回复、评论、微博发布框这类的功能。
l 下拉列表（框）鼠标点击时展开多个选项的axure元件，主要用来类别选择或多条件查询效果时使用。
l 列表框一个多选项的列表，带滚动条效果，个人认为样子很丑，应用不是很多，应用场景可以参考word自定义快速访问工具栏中选择添加项的效果。
l 复选框复选框用于同类别内容可以同时选择多个时候使用，比如注册时候个人兴趣的选择，又比如批量删除邮件时选择多个邮件的功能。
l 单选按钮多个选项仅能选择其一时候使用，比如性别选择。
多个单选按钮联动效果需要同时选中多个需要联动的单选按钮—鼠标右键—编辑选项–指定单选按钮组来实现。
不嫌麻烦的话也可以通过设置每个单选按钮的onclick事件来实现。
l 内部框架用于在页面中嵌入其他页面的axure元件，可以设置好大小后双击它，指定要嵌入的页面。
框架可以通过编辑选项取消滚动条，应用场景多见于网站后台原型和移动互联网产品原型。
l 表格表格很常见，就不多做解释，每个表格都可以设置单独的事件，但是axure还不支持单元格的合并。
l 菜单纵向主要用于网站导航。
多使用于网站后台。
l 菜单横向主要用于网站导航，多使用于网站前台。
l 树主要用于网站导航。
多使用于网站后台。
用上述所有axure元件做的示例：【点击下载】（三）Axurerp元件的触发事件l OnClick（点击时）: 鼠标点击事件，除了动态面板的所有的其他元件的点击时触发。
比如点击按钮。
l OnMouseEnter（鼠标移入时）: 鼠标进入到某个元件范围时触发，比如当鼠标移到某张图片时显示该图片的介绍。
l OnMouseOut（鼠标移出时）: 鼠标离开某个元件范围时触发。
比如鼠标离开图片时，图片介绍消失。
l OnKeyUp（按键弹起时）: 文本框（单行与多行）编辑时，键盘按下某一个按键松开时触发，不支持其他axure元件。
比如统计文本框输入的字数。
l OnFocus（获取焦点时）: 当一个元件通过点击或切换获取焦点时触发。
比如搜索框编辑时，清空“请输入关键字”的提示。
l OnLostFocus（失去焦点时）: 当一个组件失去焦点时触发。
比如用户名、密码的验证。
l OnChange（选中项改变时）:下拉列表框或列表框的选中项改变时触发，不支持其他元件。
比如选择地址时，选择不同的省份，显示对应的省内城市。
动态面板专属事件l OnMove（移动时）：当动态面板移动时触发。
是指通过其他事件的触发控制面板移动时，比如当进度条移动时，进度比例的变化。
l The OnShow and OnHide events（显示或隐藏时）：当动态面板隐藏或显示时触发。
比如图片显示时按钮文字是关闭图片，图片隐藏时按钮文字变为打开图片。
l OnPanelStateChange（状态改变时）：当动态面板更改面板的状态时触发。
比如通过改变动态面板状态实现的进度条效果，当状态改变时改变相应的进度比例。
l OnDragStart: Occurs when the drag begins（开始拖动面板时）：当开始拖动动态面板时触发。
比如在动态面板拖动开始时，显示“拖动开始”的文字提示。
l OnDrag: Occurs as the panel is dragged（面板拖动时）：动态面板拖动时触发，比如拖动一块动态面板另外一块跟随移动。
l OnDragDrop: Occurs when the panel is dropped（面板拖动结束时）：当拖拽结束时触发。
比如滑动解锁，面板拖动结束时根据滑块的位置设置相应的效果。
（四）条件生成器在axure原型制作的过程中，很多时候我们需要触发一个又一个事件，以交互设计效果展示的需求。
在这些事件里我们经常需要在满足某一条件时完成指定的动作。
比如：文本框文字为空的时候点击按钮无效。
或者拖动动态面板没到达指定位置退回原位等。
这一节教程我们就讲一下，如何使用条件生成器，至于条件的设置，以后结合相关的案例再逐渐深入。
（一）条件逻辑条件生成器是在我们双击某一事件打开用例编辑器后才能打开。
如截图里1的位置，蓝色的“添加条件”点击后即打开条件生成器。
打开条件生成器后，2的位置有2个选项，一个是“全部”一个是“任何”。
全部：是指事件触发后必须同时满足条件生成器里设置的所有条件时才继续下一步动作，否则不执行任何动作。
用白话来举例：如果个税满五年（条件1）并且缴纳时间未间断（条件2），就能参加摇号（下一步动作）。
这个例子举得好心酸：（。
任何：是指事件触发后只要满足条件生成器里的任意一个条件即执行下一步动作。
用白话举例：如果连续5年缴纳个税（条件1）或者连续60个月缴纳社保（条件2），就可以买房（下一步动作）。
尼玛，心更酸了！（二）可设置的条件可设置的条件是指图片中3的位置包含的内容。
分别是：l 变量值：软件内自带了一个变量“onloadvariable”，也可以添加、删除、重命名变量，管理变量可以从菜单栏左数第四个（汉化版本的“线框图”）中的第三项“管理变量”进行上述操作。
当然在条件编辑器里选择变量时最后一项“新建”也可以完成对变量的管理。
变量值可以是字母、数字、特殊字符和汉字或者是它们的任意组合。
l 变量长度：是指变量值的字符个数，在axure里一个汉字的长度是1。
变量长度的值可以通过axure自带函数进行获取。
l 元件文字：是指每个元件上面可编辑的文字。
不包含：动态面板、图片热区、垂直线、水平线、内部框架、下拉列表、列表框。
l 元件值长度：仅包含单行和多行文本框、下拉列表和列表框。
l 选中于：仅适用于单选按钮和复选框，选中时值为“真”，未选中时值为“假”。
l 选中项于：仅适用于下拉列表和列表框，通过获取元件当前值来确定选中状态。
l 动态面板状态：动态面板专用，以获取事件激发时动态面板的状态作为判断条件。
l 动态面板可见性：动态面板专用，以动态面板显示或隐藏作为判断条件。
l 焦点元件上的文字：即通过鼠标点击或Tab切换被选中的元件上的文字，比如文本框获取焦点时，光标在文本框内闪动；按钮获取焦点时四周会出现虚线。
l 值：可以是字母、数字、汉字、符号、函数、公式；可以直接输入，或者点击fx进入编辑。
可以设置等于、不等于大于、包含、是、不是等条件。