Axure下拉列表框可以直接使用内置Droplist元件:拖入画布,双击编辑选项,再设置默认选中项。需要“选完后页面跟着变化”时,给下拉框添加Selection changed事件,把当前选项传给文字、变量或其他目标。
下文从添加Axure下拉框到预览交互逐步说明,再用“选择商品类别后更新提示”演示选项如何影响页面。若团队使用浏览器协作,也可以用墨刀原型编辑下拉框并演示基本选择效果。
怎么制作Axure下拉列表框交互
添加下拉框组件
打开Axure的元件库,在表单元件中找到Droplist,拖拽到画布。它的外观是带下拉箭头的输入区域,适合从一组选项中单选。

编辑下拉框选项
双击下拉框打开编辑窗口。少量选项可逐项Add添加;已有一份选项清单时,用Edit Many批量编辑更直接。

逐项添加后可以修改名称。选项文本应能独立说明含义,避免“其他1、其他2”这类读者无法区分的名称。

批量编辑时,每行代表一个选项。下面沿用电脑、相机、手机、手表的商品类别示例。


录入完成后可以上移、下移或删除选项。按稳定的业务顺序排列,比每次随机排序更方便用户查找。

选择默认项并确认后,画布会显示初始内容。点击预览,在浏览器里展开并选择,确认最终显示的文字正确。

默认值、空值与禁用要分别设置
默认值应有业务理由。“电脑”不是用户已经选过的结果时,不宜无声地替他作选择。可以把“请选择商品类别”作为提示项,并在提交时把它视为未选择;也可以按原生元件支持的方式保留空的默认选择,但应保证用户仍能理解这里要填什么。
Axure的选项编辑窗口可指定默认项;下拉框也有Disabled禁用设置。禁用适合当前不允许修改的情况,例如上一项尚未确定。只把文字变灰而不禁用,用户仍可能操作。详细属性可查看Axure Droplist官方说明。
选择“手机”后,让说明文字同步变化
基础下拉框做出来后,再加一个可看见的结果,就能区分“已经选中”和“页面真正使用了选择”。
- 在下拉框旁添加一个矩形或文本,初始内容为“请选择商品类别”。
- 选中Droplist,在Interactions里新建交互,选择Selection changed事件。
- 添加Set text动作,目标选择刚才的说明文字。
- 单击Value旁的fx,在文本编辑框填入“当前类别:[[This.text]]”。这里的This.text读取触发选择变化的下拉框当前文字。
- 预览并先选“手机”、再选“相机”,说明文字应分别显示“当前类别:手机”和“当前类别:相机”。
这条思路来自Axure用下拉框设置文字的官方教程。如果初始选项已经有值,初始说明也要与它一致,不能等用户改过一次才显示正确内容。
普通Droplist用于预先定义的选项,不是带搜索、异步加载或复杂级联的通用控件。需要在浏览器中动态改变整组选项时,先确认方案是否要切换到自定义结构;不要把“选择一个已有选项”与“动态增删选项”当成同一种操作。
怎么用墨刀制作下拉框交互
添加下拉框
在墨刀原型的素材或组件库中找到下拉框,将它放入画布。先确定尺寸与所在表单位置,再设置内容。

编辑下拉框文本内容
双击下拉框进入内容编辑。每一行代表一个备选项,可以沿用本例的电脑、相机、手机、手表。


编辑完成后点画布空白处,确认选项已正确保存,默认显示也符合表单的初始状态。

修改下拉框样式
单击选中下拉框,在外观属性中调整填充、边框与文字。让它与同页的输入框保持相同的高度和文字层级,展开区域也要有足够空间,避免被其他元素遮挡。

预览下拉框交互
进入预览,展开选项并选中不同内容。重点检查点击范围、选项显示与收起后的结果;如果还连接了后续页面,再检查选择结果是否被正确带入。

下拉框能展开,还不代表交互完整
| 要验证的情形 | 应能说明的结果 |
|---|---|
| 首次进入 | 是明确默认值,还是等待用户选择 |
| 连续选择两个选项 | 显示与后续反馈均使用最后一次选择 |
| 选项文本很长 | 内容仍能识别,展开区域不被遮挡 |
| 未完成前置条件 | 是否禁用,旁边是否说明原因 |
| 返回或重新进入 | 保留先前选择还是恢复初始值 |
| 提交时仍为提示项 | 在字段附近给出可理解的提示 |
先把原生单选下拉做清楚,再决定是否需要搜索、分组或联动。如果还在评估原型复杂度,可阅读Axure的项目场景与能力边界。最终交付时,将默认值、选项来源和选择后的动作写到原型说明里,研发就不必靠截图猜测规则。