Axure RP原型软件：快速制作下拉选择组件教程

Axure RP原型软件：快速制作下拉选择组件教程

Axure RP是产品经理高频使用的原型设计工具，做网页、APP交互原型的时候，下拉选择框是高频组件。Axure组件库自带的下拉列表交互效果简单，很多产品需要自定义样式下拉菜单。本篇教程使用动态面板，不写一行代码，完成：点击输入框展开下拉选项，点击选项收起面板，点击空白区域关闭下拉菜单整套交互原型。适用于Axure RP9、10、11版本。

步骤1：绘制基础页面元件

1、拖拽矩形组件，作为下拉输入框容器；内部放置文本标签，作为默认提示文字“请选择”。

2、新建动态面板，命名为dp‑select；动态面板状态1里面绘制下拉弹窗：矩形背景，多行文本标签作为每一条下拉选项，比如选项A、选项B、选项C。调整动态面板尺寸刚好包裹全部下拉选项内容。

3、初始状态，dp‑select动态面板设置为「隐藏」，页面加载的时候下拉弹窗默认不显示。把动态面板摆放在输入框组件正下方。

步骤2：点击输入框，切换显示隐藏动态面板

选中输入框矩形，新建鼠标单击交互事件。

用条件判断：如果dp‑select是隐藏状态 → 设置面板为显示；否则设置面板隐藏。实现点击输入框切换展开收起。

步骤3：点击下拉选项，赋值文本并且收起下拉面板

选中每一条选项文本，添加鼠标单击交互：

1、设置文本，把输入框内提示文字替换为当前点击选项的文字；

2、设置动态面板dp‑select为隐藏。点击某条选项，完成选择并且关闭下拉弹窗。

进阶：点击页面空白处关闭下拉菜单

很多网页原型效果，点击页面空白位置，下拉菜单自动收起来。

1、页面最底层放一个全屏透明矩形，铺满整个浏览器页面；透明度设置0，看不见但是可以捕获鼠标点击。置于所有元件最底层。

2、透明矩形添加单击交互：设置dp‑select动态面板隐藏。这样点击空白页面区域就关闭下拉弹窗。注意：矩形要放在底层，不要遮挡其他组件。

原型预览校验

点击预览按钮，在浏览器打开原型测试交互。测试：点击输入框展开；点击选项赋值并关闭；再次点击输入框关闭；点击空白页面关闭下拉。逐个交互全部验证。

实操避坑

1、动态面板一定要初始状态隐藏，不然页面刚打开下拉弹窗直接露出来。

2、选项交互不要忘记赋值输入框文字，很多新手只做面板隐藏，没有回填选中文字。

3、透明全屏矩形层级，如果放在上层会挡住其他按钮交互，务必放到元件最底层。

4、如果下拉选项条目很多，可以给动态面板内部设置滚动条，动态面板属性勾选垂直滚动，模拟长下拉列表滚动效果。

这套动态面板方式制作的下拉组件可以复制复用到其他页面，产品经理做交互原型不用借助外部组件库，原生Axure就完成完整下拉交互效果。