Axure笔记

一、Axure的简单介绍

​ Axure RP是一款专业的快速原型设计工具，课通过拖拽方式，画出网页原型。主要用来帮助设计师设计出基于网站构架图的带注释页面示意图、操作流程图、以及交互设计，搭完架构图后可生成相对应的网页文件，可进行简单的交互。

二、Axure的下载及使用

2.1 Axure的下载

​ Axure RP 9 WIN正式版：https://axure.cachefly.net/versions/9-0/AxureRP-Setup-3727.exe

​ Axure RP 9 MAC正式版：https://axure.cachefly.net/versions/9-0/AxureRP-Setup-3727.dmg

2.1.1 步骤一

​ 下载相对应与电脑的版本，下载成功后进行解压缩

2.1.2 步骤二

​ 找到解压缩后的Axure RP 9目录，双击该目录，找到“AxureRP9.exe”文件，双击运行

2.1.3 步骤三

• 若出现该页面或者更新应用页面，选择取消
  
• 若出现下面的页面，则可直接使用
  
• 若出现需要输入授权码的提示，去下面的博客中找到授权码填入，则可正常使用
  https://blog.csdn.net/hongc93/article/details/107857318

2.1.4 步骤四

win7系统安装报错解决：https://blog.csdn.net/weixin_34186128/article/details/85749362
如果还是不行可以尝试安装低版本

2.2 Axure汉化包

​ Axure汉化包下载地址：http://www.chanpinban.com/downloads/

2.2.1 Axure汉化包教程

• 解压缩下载好的汉化包
• 打开该汉化包的文件夹，找到并复制里面的lang文件夹
• 进入你Axure所在的地址，将lang文件夹粘贴在该地址下
• 重新打开软件查看是否汉化

2.3 Axure的使用

2.3.1 菜单栏

常见的菜单栏功能：

• 文件——导出页面为图像：将当前页面导出为图片

• 编辑——快捷键：Ctrl+s 保存、Ctrl+z撤销、Ctrl+a 全选

• 视图——重置视图：当关闭某个窗口，可通过此菜单快速恢复窗口视图

• 视图——工具栏：选择是否显示工具栏以及定制工具栏

• 视图——面板：选择在面板窗口中显示的内容，例如页面、大纲、元件库、母版等

• 视图——显示网格和对齐参考线

• 布局——组合、对齐、分布，在工具栏也有快速按钮，包含shift键多选元件、组合后右键或者大纲中进行重命名

• 发布——预览、预览选项、生成HTML文件，在工具栏也有快速按钮

  2.3.2 工具栏

• 连接

将两个元件进行连接，连接线的线条颜色、线条粗细、线条样式、箭头样式等都可进行设置。根据不同的业务进行对应的连接线设置。

• 插入

插入中的钢笔工具：

1.双击或者esc结束钢笔工具

2.可画直线、折线

3.可画曲线：当前点位置左键鼠标按住不动，方向影响到曲线的方向，橘色的线长度影响到曲线的半径

4.样式：线条（颜色、粗细、样式）、填充（单色、渐变）

• 组合

• 预览

点击预览，使用默认浏览器打开该页面

2.3.2 站点地图

2.3.3 元件库和母版

• 有基本的元件可以选择，拖拽到工作区域进行使用
• 新建母版，进行设计，设计完成后可新增到所选择的页面，修改母版中的内容，每个页面的引用的母版内容就会改变，在页面中修改引用的母版内容，其他页面的母版内容也会改变
  

2.3.4 自适应

• 新建页面，点击右边样式中的添加自适应视图，跳出选择自适应视图窗口
  
• 点击新增，可在预设中快速选择视图大小，一般在预设中都有现在主要的视图大小，不需要自己手动配置
  
• 新增好三个主要的视图大小，点击确定
  
• 选中最大显示分辨率，添加五个矩形
  
• 选中iPhone8视图，可以看到可以工作的区域呈现白色，非工作区域显示灰色，在该视图中调整好矩形的位置
  
  • 同样的，在iPad4中也是一样的。我们在调整矩形间距时，可以将排在一行或者一列的选中，点击横向，则就会根据第一个选中的位置和最后一个选中的位置进行等间距排列好，再选择上下居中hi根据第一个选中的高度进行排列。
    
  • 预览的效果图
    

2.3.5 交互

• Axure里的交互动作大致包括四种类型：定义链接、设置动作、多个条件场景、页面上的交互

• 交互样式(仅对当前元件的样式进行更改)：选中元件，鼠标右键，选择【交互样式…】，选择交互触发类型，选择要更改的交互样式。

• 交互动作(带有逻辑性)：选中元件，在右侧交互面板选择交互事件类型，设置动作。

• 交互情形(带有逻辑性)： 设置交互动作，在交互动作中添加情形并设置情形对应的动作；当某个元件的值满足A情形的时候做A动作，满足B情形的时候做B动作。

• 鼠标单击时示例
  

• 链接自适应页面，我们也可以链接外部地址，链接外部地址时最好选择在新窗口中打开，否则可能被拒绝访问
  

• 切换菜单栏，显示不同的页面
  

• 双击动态面板，新增三个状态
  

• 选中这四个矩形，设定一个选择组的名字（为了选中时互斥），并添加选中时的样式
  
  

• 给每个矩形元件添加鼠标单击时的交互事件，若选中当前元件，则设置该元件被选中，即值为真，动态面板切换至相应的菜单栏页面
  

• 效果图
  

2.3.6 中继器

使用原因：

1.样式的频繁修改 2.数据的频繁修改 3.重复性工作需要调整

作用：

可在原型页面中保存数据，并提供增删改查等功能，完成复杂的交互场景。

实例：当前操作仅在页面中生效，不同步到实际数据中

• 拖动中继器到工作区，中继器内部一行一列对应外部三行一列，进入中继器，拖拽进矩形元件，图像元件，复选框，标题1，编辑和删除图标进行覆盖，并且调整至需要的大小，eg：可在右边样式的布局中，选择横向排列，一行三个，中继器外部即可变成一行三列
  
• 数据绑定，中继器的数据集位于样式右下角，将数据集数据补充完毕后，在交互面板中给中继器表格对应设置文本和图像，文本和图像内容为数据集的数据。
  
  
  • 新增：拖动按钮，给新增按钮绑定鼠标单击事件，点击后显示动态面板中的新增模态框
    
    
  • 点击确认按钮
    
  • 给image添加默认图片路径
    
  • 点击取消按钮
    
• 删除：给删除绑定点击事件， 删除当前行。
  
• 编辑：给编辑绑定点击事件，取消中继器中的标记的所有行，再将当前行进行标记，为了确保编辑框中的数据是当前选中的，显示出动态面板编辑状态中的模态框，设置文本，将名字数据渲染到编辑的文本框中，并更新行，将更新后的数据同步到页面中
  
• 批量删除：进入中继器，拖拽复选框，给复选框绑定选中时，标记行，未选中时，取消标记行。然后在表格外部添加批量删除按钮，绑定单击删除已标记行的交互动作。
  
  
• 查询：给查询按钮添加单击事件，添加新增过滤器动作，定义规则：如果文本框中输入的文本在中继器中存在，则筛选出来
  
  

2.3.7 顶部菜单栏

拖拽动态面板到工作区域中，拖拽矩形到动态面板中，给动态面板外部点击样式，点击固定到浏览器，勾选固定到浏览器窗口，设置垂直固定到顶部，横向固定居中，菜单栏则会固定到顶部

2.4 案例一 红包的制作

按照自己的喜好，设置好红包样式，再将红包里的每个元件组合起来

• 给这两个红包组合分别取名字为拆红包和开红包
• 选中右边的开红包，点击鼠标右键设置隐藏（隐藏部分会变成淡黄色）
• 选中左边的红包设置一个鼠标单击的交互事件，即点击开红包时，隐藏当前红包，显示出右边的红包。
  
  

2.5 案例二 轮播图

• 将动态面板元件拖拽到工作区域，在将图像元件拖拽到动态面板区域内，双击图像元件添加图片，在动态面板图像元件下添加四个椭圆，用于标记图片轮播到第几张
  
• 双击进入动态面板编辑状态，可以添加不同的状态，即每一张图对应一个状态
  
• 选中四个小椭圆元件，为它们统一设定一个选中时背景颜色为同一颜色的交互样式
  
• 点击选中动态面板，新建鼠标单击时和动态面板状态改变时的交互，当鼠标点击时跳转到下一张图片
  
• 点击交互动作的右方的新建用例，添加逻辑，如果动态面板的当前元件为img1，插入动作，相对应的小椭圆元件被选中，颜色改变
  
  
  
• 效果图
  

三、使用iconfont图标

下载好axhub插件安装包，打开google浏览器，点击右上角的三个点，选择更多工具中的扩展程序，打开开发者模式，将axhub插件拖拽到页面中，安装完成后可以直接复制自己喜欢的图标。

四、原型库地址

Axure中文学习网：https://www.axure.com.cn/

墨刀：https://modao.cc/