Question

怎么使用Axure制作交互文档？

Answer 1

Axure是一款快速原型软件，用于软件产品(如WEB界面和APP界面)的交互原型。它是互联网产品经理、交互设计师、架构师等的必备软件之一。Axure作为交互式原型软件，交互式文档具有互操作性和兼容性的优点。那么，我们如何使用Axure来制作交互式文档呢?备注：为准备学习Axure、正在学习Axure的小伙伴提供了专业系统的Axure自学视频课，视频教学，知识点清晰，方便快速地掌握~

使用Axure制作交互文档教程：

首先我们先大致划分整个文档的布局。上方为整个文档的导航部分，下方为内容部分。

为导航4个部分建立子页面，并把导航制作成按钮

右键「首页」添加4个「子页面」，分别为「更新日志」「通用规则」「功能列表」「交互说明」。

下面我们来把导航制作成按钮。首先把文本框扩大，扩大的范围就是你想要制作成的按钮大小。在拉大选框的时候可能会出现文本定位在了选框左上角，选中文本后在右边样式栏里选择「居中对齐」和「中部对齐」即可。按钮样式设置好之后，我们就可以编辑它们的交互了。

选择「更新日志」文本框后，点击右边的「交互」选项。我们的目的是想点击这个按钮后可以跳转到「更新日志」页。因此我们点击右侧的「新建交互」，选择「单击时」—「打开链接」—「更新日志」。这时我们点击右上方的预览就会发现该文本框已经可以点击并跳转了。剩下的3个按钮做相同操作，分别连接到对应页面。并把制作好的导航栏分别复制到4个子页面中。

下一步我们要细化这个按钮样式，分别到不同的子页面中去掉对应的按钮交互样式，并在显示样式中改变填充颜色，使其看起来像是选中态。

为每个模块添加内容时切记要进入到对应页面后进行

「更新日志」和「功能列表」里面我们只需要添加表格即可。在左边元件里搜索「表格」，选择第一个拖到页面上。我这里制作了一个可供大家参考

「通用规则」里有不同类型的内容，因此我们需要制作一个在同页面下的切换按钮。首先我们先在页面内画出想要切换的按钮。还需要在左侧的元件里向右拉出「动态面板」，双击动态面板选取，在动态面板上建立3个页面。「动态面板」其实就是我们切换不同选项的内容区域，根据内容的不同，可以随意拉伸区域范围。

接着我们来制作页面内的切换按钮了。先为每个按钮链接到对应动态面板。选择「弹窗/浮层」按钮，新建交互，选择「单击时」—「设置动态面板」—「动态面板」，在下方的「STATE」里选择想要链接的动态面板层，也就是刚才我们建立的「弹窗/浮层」，最后点击完成。

同样的，我们依然需要给按钮设置选中态。继续添加动作，选择「设置选中」—「当前元件」，点击确认。在下方的交互样式中点击「添加类似“鼠标悬停”的交互样式」按钮，选择「元件选中的样式」勾选填充颜色并修改色值，点击确定。后面两个按钮同理。

把所有的按钮设置好之后，我们在浏览器中预览发现，按钮虽然可以点击链接到相应的动态面板。但是点击后的按钮样式不会随着另外按钮的点击而刷新。导致我们把所有按钮都点一遍后，按钮样式都变成了点击后样子，这和我们常见的按钮逻辑显然是不对的。解决这个问题也很简单。我们先全部选中这3个按钮，然后右键选择「选项组」，为选项组命名，例如：通用规则。点击确定。

我们在进入这一页的时候，默认应该是选择第一个标签的，也就是「弹窗/浮层」标签。所以我们右键这个按钮，选择「选中」。这时我们在浏览器预览就可以达到我们想要的效果啦。

交互说明页其实效果和通用规则页类似，也可以自己根据实际情况自行编辑。

以上即是关于“怎么使用Axure制作交互文档？”的分享内容了，希望能够帮助到你~！更多Axure原型技巧，尽在Axure相关文章！很多小伙伴学习Axure都选择了在网上学习，但是很多都是东拼西凑的学，以致于学习到和实际操作的可能就有所出入了~所以学习Axure，还是系统化比较好！选择的Axure自学视频课，相信能够给予你知识的收获以及动手实操的经验~