墨刀双十一 会员低至3.7折 限时加赠 15000 AI积分 立即前往 arrow

手把手教你做Axure下拉列表框交互

文章目录
免费使用墨刀
更新时间: 2026年10月09日

Axure下拉列表框可以直接使用内置Droplist元件:拖入画布,双击编辑选项,再设置默认选中项。需要“选完后页面跟着变化”时,给下拉框添加Selection changed事件,把当前选项传给文字、变量或其他目标。

下文从添加Axure下拉框到预览交互逐步说明,再用“选择商品类别后更新提示”演示选项如何影响页面。若团队使用浏览器协作,也可以用墨刀原型编辑下拉框并演示基本选择效果。

怎么制作Axure下拉列表框交互

添加下拉框组件

打开Axure的元件库,在表单元件中找到Droplist,拖拽到画布。它的外观是带下拉箭头的输入区域,适合从一组选项中单选。

Axure元件库中的Droplist与画布上的下拉框

编辑下拉框选项

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

Axure下拉框选项窗口的Add与Edit Many入口

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

Axure下拉框中新建并重命名一个选项

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

Axure下拉框的批量编辑选项入口
Axure Edit Many窗口中按行录入下拉选项

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

Axure下拉列表中调整选项顺序与删除选项

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

Axure画布中显示已经设置的下拉框默认选项

默认值、空值与禁用要分别设置

默认值应有业务理由。“电脑”不是用户已经选过的结果时,不宜无声地替他作选择。可以把“请选择商品类别”作为提示项,并在提交时把它视为未选择;也可以按原生元件支持的方式保留空的默认选择,但应保证用户仍能理解这里要填什么。

Axure的选项编辑窗口可指定默认项;下拉框也有Disabled禁用设置。禁用适合当前不允许修改的情况,例如上一项尚未确定。只把文字变灰而不禁用,用户仍可能操作。详细属性可查看Axure Droplist官方说明。

选择“手机”后,让说明文字同步变化

基础下拉框做出来后,再加一个可看见的结果,就能区分“已经选中”和“页面真正使用了选择”。

  1. 在下拉框旁添加一个矩形或文本,初始内容为“请选择商品类别”。
  2. 选中Droplist,在Interactions里新建交互,选择Selection changed事件。
  3. 添加Set text动作,目标选择刚才的说明文字。
  4. 单击Value旁的fx,在文本编辑框填入“当前类别:[[This.text]]”。这里的This.text读取触发选择变化的下拉框当前文字。
  5. 预览并先选“手机”、再选“相机”,说明文字应分别显示“当前类别:手机”和“当前类别:相机”。

这条思路来自Axure用下拉框设置文字的官方教程。如果初始选项已经有值,初始说明也要与它一致,不能等用户改过一次才显示正确内容。

普通Droplist用于预先定义的选项,不是带搜索、异步加载或复杂级联的通用控件。需要在浏览器中动态改变整组选项时,先确认方案是否要切换到自定义结构;不要把“选择一个已有选项”与“动态增删选项”当成同一种操作。

怎么用墨刀制作下拉框交互

添加下拉框

在墨刀原型的素材或组件库中找到下拉框,将它放入画布。先确定尺寸与所在表单位置,再设置内容。

在墨刀原型素材库中找到下拉框并放入画布

编辑下拉框文本内容

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

墨刀下拉框按行编辑备选项
墨刀下拉框录入电脑、相机、手机和手表四个选项

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

墨刀画布中完成选项编辑后的下拉框

修改下拉框样式

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

在墨刀原型外观面板中设置下拉框边框与样式

预览下拉框交互

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

墨刀预览中展开下拉框并选择商品类别

下拉框能展开,还不代表交互完整

要验证的情形应能说明的结果
首次进入是明确默认值,还是等待用户选择
连续选择两个选项显示与后续反馈均使用最后一次选择
选项文本很长内容仍能识别,展开区域不被遮挡
未完成前置条件是否禁用,旁边是否说明原因
返回或重新进入保留先前选择还是恢复初始值
提交时仍为提示项在字段附近给出可理解的提示

先把原生单选下拉做清楚,再决定是否需要搜索、分组或联动。如果还在评估原型复杂度,可阅读Axure的项目场景与能力边界。最终交付时,将默认值、选项来源和选择后的动作写到原型说明里,研发就不必靠截图猜测规则。

免费在线原型设计工具

内容丰富组件拖拽即用

多人在线编辑实时协作

海量模板素材快速复用

一键分享交付在线评论互动