产品原型图怎么做交互?学了案例你就会了

一直以来，Axure是产品经理的必备软件之一。

专业的快速原型设计工具

近几年，产品经理这个岗位越来越吃香，很多程序员、设计师、甚至工程师都转行去当产品经理，但新人产品经理往往因为不熟悉Axure，不清楚原型规范，导致原型制作效率低。

在网上也看到很多产品新人的心声：

“领导说什么功能就怎么画，完全没有了想法”

“原型画得十分粗糙，和开发沟通相当困难”

“已经改了十几版了，还是满足不了甲方爸爸”

可以看出，由于初期项目经历较少，在实际的工作中难免会遇到各种问题。

那产品新人想要更快地做出规范原型，该如何实现呢？优秀的做法是：熟练掌握原型工具Axure，在设计原型图的过程中根据需求进行设计；提升产品知识体系，知道如何正确的表达产品设计思想。

说一百遍不如实际做一遍，画原型图的实战案例，数艺君已经给大家整理好了，跟着教程一起来画一画。

综合实战案例：后台管理系统

本案例是制作软件后台管理系统或企业管理系统，操作终端为电脑端，直接按照管理系统的常规布局，使用Axure RP自带的元件库自己设计页面，制作交互效果。

页面框架

图为管理系统的主流布局方式，顶部显示系统名称和登录信息，左侧为导航菜单，右侧为数据区域。本节内容为搭建好页面框架，制作头像快捷入口和手风琴导航 菜单两部分的交互效果。

头像快捷入口

案例描述：

鼠标移入头像区域，显示下拉菜单；鼠标移出头像区域，隐藏下拉菜单，如图所示。

案例思路：

如果是移入/移出某个文本区域显示/隐藏下拉菜单，可以直接使用“水平菜单”元件，非常简单，但头像是一张图片，此方法行不通。

读者可能已经想到了制作此效果的方法，那就是直接给头像的“鼠标移入时事件”和“鼠标移出时事件”添加显示和隐藏的动作。但这个思路只对了一半，使用这种方法，鼠标移入头像区域显示下拉菜单是没有问题的，但当鼠标准备单击下拉菜单时，鼠标只要刚刚移出头像区域，下拉菜单就直接隐藏了，根本无法单击。

改进上述思路，使用动态面板的两种状态制作默认时、鼠标移出时的头像区域（只有头像）和鼠标移入时的头像区域（包含头像和下拉菜单）。

案例技术：

动态面板、鼠标移入时事件、鼠标移出时事件。

制作步骤：

（1）拖入“矩形2”元件至设计区域，尺寸为800像素 ×60像素，位置为（0,0），填充颜色为#1DAAE0，修改其文本为“公司业务管理系统”，在样式面板中修改其文本对齐方式为居左，左侧内填充距离为30，如图所示。

（2）拖入“文本标签”元件至设计区域，位置为（745,21），字体颜色为 #FFFFFF，修改其文本为“李明”。

（3）拖入“图片”元件至设计区域，导入默认头像，尺寸为30像素×30像素，位置为（700,15），圆角半径为15像素，执行右键菜单命令【转换为动态面板】。

（4）双击该动态面板，打开“面板状态管理”对话框，复制State1，此时动态面板有State1和State2两个状态，如图所示。

（5）进入动态面板的State2，拖入3个“矩形 1”元件至设计区域，尺寸均为 100 像素×35像素，位置分别为（0,40）、（0,75）和（0,110），边框颜色均为#CCCCCC，修改文本分别为“个人中心”“密码修改”“退出系统”。

（6）分别修改“个人中心”矩形和“退出系统”矩形的上圆角半径和下圆角半径为6像素，如图所示。

（7）鼠标移入头像区域时，显示下拉菜单，如图所示。

①关闭动态面板的 State2，选中动态面板，双击属性面板中的“鼠标移入时”事件，打开用例编辑器。

②选择【添加动作 > 元件 > 设置面板状态】。

③在右侧的配置动作区域勾选“当前元件”。

④选择状态为 State2。

（8）鼠标移出头像区域时，收起下拉菜单，如图所示。

①选中动态面板，双击属性面板中的“鼠标移出时”事件，打开用例编辑器。

②选择【添加动作 > 元件 > 设置面板状态】。

③在右侧的配置动作区域勾选“当前元件”。

④选择状态为 State1。

（9）设置完成后，按F5键在浏览器中预览效果，如图所示。

手风琴导航菜单

案例描述：

单击一级菜单，对应的二级菜单向下展开，再次单击该一级菜单，对应的二级菜单收起。

案例思路述

直接使用动态面板记录一级菜单的收起状态和一级菜单展开后显示二级菜单的状态。切换动态面板状态，来实现收起 / 展开的效果切换，并配合推拉元件效果。

案例技术：

动态面板、鼠标单击时事件、条件用例、显示 / 隐藏时的推拉元件效果。

制作步骤：

首先布局左侧导航菜单。

（1）拖入动态面板至设计区域并设置为两个状态，State1 代表一级菜单收起时的状 态，State2代表一级菜单展开并显示二级菜单的状态，在两个状态中分别按照“10.1.2 手风琴导航菜单 1”中的样式制作“人员管理”“任务管理”“数据统计”3 组一、二级菜单，其中“人员管理”的一、二级菜单如图所示。

（2）3组菜单即3个动态面板，分别命名为personnel、task 和 count。

（3）把3组菜单纵向排列，每组菜单（动态面板）之间要紧紧贴合，且不要有交叉重叠的部分，如图所示。

接下来制作菜单的展开和收起效果。

（1）当“人员管理”一级菜单为收起状态时，单击后变为展开状态，展开其二级菜单，如图所示。

①进入 personnel 的 State1，选中“人员管理”的矩形，双击属性面板中的“鼠标单击时”事件，打开用例编辑器。

②选择【添加动作 > 元件 > 设置面板状态】。

③在右侧的配置动作区域勾选 personnel。

④选择状态为 State2。

⑤勾选“推动 / 拉动元件”，方向为“下方”。

（2）当“人员管理”一级菜单为展开状态时，单击后变为收起状态，收起其二级菜单，如图所示。

①进入 personnel 的 State2，选中“人员管理”的矩形，双击属性面板中的“鼠标单击时”事件，打开用例编辑器。

②选择【添加动作 > 元件 > 设置面板状态】。

③在右侧的配置动作区域勾选 personnel。

④选择状态为 State1。

⑤勾选“推动 / 拉动元件”，方向为“下方”。

（3）用同样的方法给“任务管理”和“数据统计”两组菜单制作展开和收起效果。

（4）设置完成后，按F5键在浏览器中预览效果，如图所示。

提示：无论是手风琴导航菜单1还是手风琴导航菜单2，都需要配合使用“内联框架”元件来显示管理系统页面中的数据区域，也就是说当单击左侧手风琴菜单后，只需要在“内联框架”中切换页面即可。本节内容为了清晰地说明如何利用动态面板制作手风琴菜单，将3组菜单布局样式都制作出来之后才开始制作收起 / 展开的交互效果，并且每组菜单（即每个动态面板）中的交互动作都是一个一个按部就班添加的。在实战项目中，后台管理系统一定不止是3组菜单，有的菜单数量可能多达十几个，这时如果还是采取这种方法就会有些费时。可以先把一组菜单的布局样式和交互效果（不仅包括收起 /展开效果，还可以包括诸如二级菜单的选中、鼠标悬停交互样式的设置等）都制作完成，然后直接复制这组菜单（菜单的交互效果是可以同步复制的），接着修改这些菜单的文字内容和图标样式、修改菜单（动态面板）的命名，这样会简单许多。

思考：

本小节制作的手风琴导航菜单中，如何做到单击某个一级导航菜单展开对应二级导航菜单的同时，收起其他的二级导航菜单呢？读者可以按照下面的思路尝试一下。第1种思路，单击某个一级菜单（即鼠标单击时事件），把该动态面板设置为 State2 的同时，把其他动态面板设置为State1。但这种方法在菜单数量很多时操作起来会很麻烦，并且可维护性较差。

第2种思路，把一级菜单（State1中的矩形）的“选中时”和“取消选中时”代表展开和收起状态。单击一级菜单（State1中的矩形）时，设置当前元件为选中状态。当一级菜单（State1中的矩形）被选中时，设置动态面板为State2；取消选中时，设置动态面板为 State1，利用“同一选项组内的元件在同一时间只能有一个被选中”这个属性，就可以做到同一时间只能有一个动态面板的状态是 State2（展开状态），即展开某个一级菜单时，收起其他二级菜单。

数据查询与编辑页面

管理系统的大多数页面一般都是对数据列表的查询与编辑，查询操作少不了多个下拉列表的联合查询（联动下拉菜单）。编辑数据时如果涉及批量操作，进度条又是必不可少的，本节就来制作这两部分的交互效果。

进度条

案例描述

单击“上传数据”按钮，显示进度条区域（包括百分比），进度条逐渐填充完整，百分比显示为0% ～ 100%，如图所示。

案例思路：

进度条的填充物为矩形，初始宽度为1，单击“上传数据”按钮后，设置矩形的尺寸为逐渐变宽即可。进度条百分比的算法为填充物（矩形）的宽度占总体宽度的百分比。

如何不断地更新进度条百分比？因为百分比默认是隐藏的，当单击“上传数据” 按钮显示出来时，给其“显示时事件”添加“设置文本”动作，接着把它隐藏再显示，形成递归效果。

案例技术：

鼠标单击时事件、显示时事件、局部变量、Math.floor函数、width 函数。

制作步骤：

（1）使用矩形和水平线制作“导入数据”悬浮框，悬浮框中包含标题、“上传数据”按钮、进度条和“关闭”按钮，如图所示。图中蓝色部分为填充完整的进度条，命名为fill，尺寸为400像素×20像素，即当进度为 100%时进度条的宽度为400像素。灰色部分为进度条的边框底色，命名为border，其作用仅仅是为了美观，右侧的百分比命名为 percent。

（2）调整好样式后，把进度条fill的尺寸修改为1像素×20像素，也就是初始状态，把fill、border 和 percent设置为隐藏，如图所示。

（3）将悬浮框中的所有元件组合起来，命名为 input 并设置为隐藏。注意步骤

（2）中设置了3个元件为隐藏，此步骤再次设置整个组合为隐藏。

（4）拖入“按钮”元件至设计区域，尺寸为70像素×30 像素，位置为（220,80），填充颜色为#F 2F2F2，边框颜色为 #CCCCCC，修改其文本为“批量导入”。（5）单击“批量导入”按钮，弹出“导入数据”悬浮框，如图所示。

①选中“批量导入”按钮，双击属性面板中的“鼠标单击时”事件，打开用例编辑器。

②选择【添加动作 > 元件 > 显示 / 隐藏 > 显示】。③在右侧的配置动作区域勾选 input。

④动画为“向下滑动”，时间为 500 毫秒。

⑤ 更多选项为“ 灯箱效果”，背景色为#CCCCCC，不透明度为60%。

（6）单击“上传数据”按钮，显示进度条，并逐渐填充完整，如图所示。

①选中“上传数据”按钮，双击属性面板中的“鼠标单击时”事件，打开用例编辑器。

②添加“显示”动作，显示percent、fill 和border。③选择【添加动作 > 设置尺寸】。

④在右侧的配置动作区域勾选 fill。

⑤设置宽为400像素，高为20像素。

⑥选择锚点为“左侧”，动画为“线性”，时间为2000毫秒。

（7）进度条逐渐填充完整的同时，百分比动态变化，如图所示。

①选中 percent，单击属性面板中的“更多事件 > 显示时”事件，打开用例编辑器。

②选择【添加动作 > 元件 > 设置文本】。

③在右侧的配置动作区域勾选“当前元件”。

④设置文本为“值”，单击fx按钮，打开“编辑文本”对话框。

⑤添加局部变量为 tc、元件和 fill。

⑥输入 [[Math.floor(tc.width/400*100)]]%。

⑦添加“等待”动作，等待 0 毫秒。

⑧添加“隐藏”动作，隐藏当前元件。

⑨添加“显示”动作，显示当前元件。

（8）为了让页面看起来更加美观、完整，可以自行使用中继器制作数据列表，详细步骤不再赘述。

（9）设置完成后，按F5键在浏览器中预览效果，如图所示。