🚪Axure RP 9 产品设计入门

Axure RP 9 软件的安装

可以直接官网下载，然后去某宝买一个账号的激活码，详情不再赘述，可以自行 Bing。
下载网址：https://www.axure.com/release-history/rp9
学习参考视频：https://www.bilibili.com/video/BV1hU4y1L77u/

Axure 软件的一些基础设置

1. 偏好设置
   • 文件 → Preferences（首选项、偏好设置）
2. 网格设置
   • 视图设置 → 标尺·网格·辅助线 → 网格设置
   • 我个人认为舒服的设置：网格对齐，间距 10 像素，样式更改为线段，颜色 #F2F2F2

如何预览、发给别人可以浏览的文件

发布 → 生成 HTML 文件（选择一个文件夹，会生成很多文件，因此最好选择一个独立的文件夹）

常用的设计尺寸

手机端：365*667

开始设计

绘制一个简单的UI界面

1. 用矩形绘制一个背景：使用线性方式填充
2. 用水平线绘制隔断
3. 用矩形绘制按钮

如何绘制按钮

使用矩形绘制一个按钮

1. 绘制矩形
2. 右键矩形 → 交互样式

美化输入框

1. 绘制矩形
2. Ctrl + D 复制一份，调整大小
3. 添加输入框和一个搜索图标

母版

选择绘制好的组件，右键选择转换为母版

单选框的使用和自定义单选框（美化操作）

使用单选框时，需要对单选框进行编组。
编组方式：框选对应组的单选框，右键选择指定单选按钮的组，然后命名组名即可。
自定义单选框操作步骤：

1. 使用圆形绘制一个大圆以及一个小圆
2. 内部的小圆的线条和填充设置为透明
3. 右键添加交互样式，设置当选中时，内部小圆的填充和线条更改颜色，外部大圆线条更改颜色
4. 添加文字后进行编组，对于编组内容设置交互（和交互样式不同），在菜单栏的右侧，交互面板

效果如下：

常用工具

页面工具

• 页面工具中可以创建多个页面
• 页面工具中可以按住 Ctrl + 左右方向键 来调整页面的级别
• 页面工具中可以按住 Ctrl + 上下方向键 来调整页面的顺序

概要工具

• 概要工具可以看到整个页面全部的元件
• 当存在遮罩关系时，可以选择概要工具中需要修改的元件，不需要破坏遮罩关系
• 可以通过筛选按钮来对元件进行筛选
• 建议给元件起好名字

钢笔工具

• 世上无难事，只怕有心人
• 使用钢笔工具来绘制自定义图案
  

绘制复杂的UI界面

常用的交互事件及操作

页面跳转

• 页面跳转原理：事件 → 动作 → 目标
• 对于跳转来说：事件（点击） → 动作（跳转） → 目标（页面2）
• 事件的选择在“交互”面板处（注：不是交互样式）
• 实现时点击右侧交互面板新建交互，选择单击时，动作设置为打开链接，目标设置为要切换到的界面
• 当点击预览时候，会发现元件的显示往往出现在屏幕中心位置，如果想要让元件按照画布的绝对位置显示，可以点击页面，选择样式中的“页面排列”，在其中调整相关显示样式。
  

热区

• 为什么使用热区？
  • 对于图片中的情况，如果我们想点击按钮完成跳转操作，可以直接给使用方式 ① 按钮添加一个交互事件。
  • 但是当我们想要点击这个区域时进行跳转，一个元件一个元件添加事件过于繁琐（技巧：可以通过 Ctrl + C 在右侧交互面板直接复制整个事件，然后点击想要添加该事件的元件，通过 Ctrl + V 粘贴到元件上），而且不方便后续的修改。
  • 于是可以使用方式 ② 将要整个部分编组，然后为整个组添加事件。但是当我们因为某种原因破坏了整个组时，可能会遗忘添加事件，导致整个事件消失。
  • 所以热区就是为了解决上面的问题，我们可以通过方式 ③ 给组件添加热区，只要点击这个区域即可完成指定事件。
  • 且热区占用内存更小。

显示和隐藏

设置文字

设置某元件上的文字

设置选中

设置一个元件为选中状态

启用或禁用

• 启用/禁用是针对于一个元件
• 常用场景是：当满足某条件时启用/禁用某元件
• 例如：当用户输入账号和密码后启用登录按钮（瞎编的），当用户同意协议才可进行下一步这种

移动

• 移动一个元件，可以在“移动”处设置经过（相对位置）、到达（绝对位置）来移动元件

等待

• 有时候等待看起来并不生效，需要观察是否是等待动作前的动作设置了动画。
• 例如：移动动作设置了 500ms 的动画，其实移动动作是瞬间完成的，动画只是一种呈现的方式。所以动画呈现的效果和等待是几乎同时进行的（“移动”动作设置 500ms 的动画和 500ms 的“等待”，动画开始播放时“等待”同时进行，动画结束播放时，“等待”结束）。

旋转

设置尺寸

设置透明度

制作更复杂的动效

• Axure RP 9 的动画效果是可以叠加的。
• 等待可以分割两个本来融合的叠加效果。
  
  使用该上图所示的操作，会导致“移动”和“旋转”的融合无法叠加，先执行“移动”，再执行“旋转”。
• 文本框的长度是可以固定或者跟随的，当文本框样式如下时，则说明文本框此时的长度是固定的。此时可以双击两侧中间的锚点来使文本框变为跟随模式。
  下图为固定长度：
  
  下图为跟随长度：
  
  双击角上的锚点可以设置是否跟随高度、宽度（若不跟随，则此时文本框高度和宽度完全固定）。

复杂动效总体流程：

滚动到元件

想要动画展示，一般设置动画的时间为 500ms，但是对于用户来说，500ms 看起来有些卡顿，所以 350ms 往往是个不错的选择

更多事件

事件	条件	备注
单击时	点击形状时	一般单击事件不能和“鼠标按下”/“鼠标松开” 事件同时使用
双击时	双击形状时
鼠标右击时	形状的上下文菜单被触发时（右键点击形状时候）
鼠标按下时	鼠标在形状上按下时
鼠标松开时	鼠标在形状上松开时
鼠标移动时	鼠标移动到形状上时
鼠标移入时	鼠标指针进入形状元件区域中时
鼠标移出时	鼠标指针离开形状元件区域中时
鼠标停放时	鼠标指针在停放在形状上超过 1s 时
鼠标长按时	鼠标指针在按压在形状上超过 1s 时
按键按下时	当焦点在形状上并按下键盘上的任意按键时
按键松开时	当焦点在形状上并按下键盘上的任意按键松开时
移动时	当形状发生移动时
旋转时	当形状发生旋转时
尺寸改变时	当形状尺寸发生改变时
显示时	当形状发生显示时
隐藏	当形状发生被隐藏时
获取焦点时	当形状获取焦点时
失去焦点时	当形状失去焦点时
选中	当形状被选中时
取消选中时	当形状取消选中时
选中改变时	当形状的选中状态发生改变时
载入时	形状已加载时（首次显示页面时）

更多动作

内部框架

• 若概念不明确，往往会将内部框架和快照混淆。
• 快照往往用于在一个页面预览所有的页面，点击快照后跳转到快照包含的页面，并且在跳转后的页面进行修改。
• 而内部框架和快照不同，内部框架相当于将需要包含的页面复制了一份，粘贴到了内部框架中，因此可以直接在内部框架中修改内容，修改内部框架中的内容不会影响原页面内容。

动态面板

• 动态面板也是一个元件，也可以显示或隐藏。
• 我们可以将动态面板形象的理解为一个盒子。在盒子里没有东西时，动态面板“无色无味”，看不见摸不到，双击后可以键入盒子内部。
• 盒子内部也可以添加很多层：
  
  • 我们可以通过一个按钮，添加“设置动态面板”动作来切换层，因此我们可以想到动态面板常用于实现轮播图（当然还有很多其他的玩法）

动态面板案例 1：遮罩

使用动态面板可以实现遮罩的一些操作，如：

1. 超出指定范围的元件可以使用动态面板，隐藏超出部分，右键直接将元件转换为动态面板即可：
   
2. 将元件一直固定再某一位置
   
   选择固定到浏览器，并且进一步选择固定位置，当浏览器页面过长需要滚动时，动态面板的位置不会发生改变。
3. 通栏
   
   选择 “100%宽度（仅浏览器中有效）”，即可将动态面板的宽度按照浏览器的宽度进行设置，也就是所谓的通栏（Banner，Banner也可以用来表示轮播图）
4. 动态面板是可以嵌套的

动态面板案例 2：浮窗

动态面板案例 3：弹窗

动态面板案例 4：轮播

动态面板案例 5：Tab切页

动态面板案例 6：列表切页

动态面板案例 7：拖动

• 使用动态面板实现拖动的难点在于使用“动态面板的嵌套”和“设置边界”
• 使用动态面板的嵌套是为了防止直接拖动最外层的动态面板，而是拖动动态面板内部的一个面板。
• 使用边界的难点在于 Axure RP 9 在设计这个功能时的让人难以理解。这里简单的理解是：
  • 对于“左侧”，$-35 <= x <= 0$
  • 对于“左侧”可以移动 0 像素或移动 -35 像素
  • 对于“左侧”，可以不移动，或者向左移动 35 像素
• 用不熟练的时候多尝试

中继器

添加局部变量的方式：

• 首先点击添加局部变量

变量

全局变量可以跨页面传参

判断

1. 添加判断
   
   当添加交互事件时，不进一步选择动作，而是选择“启用情形”，在启用情形中添加判断。
   

2. 局部变量获取元件位置，结合判断
   
   
   可以用 [[元件局部变量.x]] 获取元件的 x 位置

3. 多条件判断
   
   多条件判断可以通过在“添加情形”部分添加行来增加判断条件，“匹配所有”和“匹配任何”两个情况，分别代表的是 and 和 or。

4. 嵌套判断

案例：绘制注册

中间页