如何9步完成可交互原型制作？

对于从事互联网产品相关工作人员来说，产品的设计过程中存在太多不确定因素，很多情况下经过权衡取舍后仍然会得出多个不同方案。在正式进入开发之前，最好的办法就是将这些不同的方案全部都以可交互原型的方式展现出来，让老板、客户、团队成员、目标用户亲自测试，以此来收集有价值的反馈信息，然后根据这些信息再次审视产品目标与用户目标是否与项目目标吻合，并逐步将产品原型推向最终版本。

在该阶段，原型的设计效率显得尤为突出，下面就使用 Axure7作一个简单的小案例作为演示，只需几分钟时间，就可以做出可交互的原型了。

先来展示一下，这是网易云课堂首页课程分类菜单 :)

考虑到这可能是你的第一个交互原型，我们先来分解一下目标交互效果：

默认情况下，左侧这些课程分类菜单都是黑色背景，白色文字。

当鼠标移入菜单1时，背景变为白色、文字变为黑色，并且在右侧同时显示出与之对应的子菜单。

当鼠标移入菜单2时， 菜单1状态恢复为默认，并且隐藏1的子菜单；同时菜单2触发相与菜单1鼠标移入时同的交互。

当鼠标完全移出左侧菜单时，菜单状态恢复为默认，隐藏子菜单。

为了减少操作步骤，我使用截图代替菜单中课程分类标签的制作，下面是准备好的截图。

下面就打开Axure7开始操作。

第一步：将图像 menu1 拖放到Axure的设计区域中，见图1。

第二步：右键点击该图像，在弹出的关联菜单中选择“转换为动态面板”并给其命名为menu1，见图2。

第三步：双击该动态面板，在弹出的对话框中点击State1，并点击 “快速复制”，这样会新增一个State2，见图3。

第四步：双击 State2，然后将图像替换为鼠标悬停时的样式（白底黑字），见图4。

第五步：将菜单1对应的子菜单图像拖放到Axure的设计区域中，并给其命名为submenu1，见图5。

第六步：参考前五步，将 menu2，menu3，menu4，menu5，和他们对应的submenu都放到设计区域中，见图6。

第七步：选中 submenu1，submenu2，submenu3，submenu4，submenu5，将他们默认设置为“隐藏”，因为默认情况下他们是不显示的，见图7。

到这里，准备工作就都完成了，下面就来给这些menu添加交互事件。我们之前设置的每个menu都有2个状态，State1（黑底白字）和 State2（白底黑子）。

第八步：当鼠标移入menu1时，就让其显示State2并且同时显示对应的submenu1，并且让其它的menu都显示State1并且隐藏他们的submenu就可以了，非常简单，看图8。

第九步：参考第八步，给其它几个menu添加同样的交互事件就可以了，添加完毕后见图9。

有些人认为制作原型尤其是高保真原型，是一件枯燥、无趣的事情，但在项目早期，使用可交互的产品原型测试各种假设，将需求可视化的表现出来，并根据不同设计概念制作多个web和移动App产品原型，交互的原型帮助我们快速学习和迭代，这样我们可以创造出真正符合公司目标与用户需求的产品。

以上内容节选自网易云课堂原型库 老师的最新课程《AxureRP7.0标准教程》。

如果你想系统学习这门专业有效、简单实用的课程，可以点击《AxureRP7.0标准教程》