单选选择器是面向用户提供可枚举选项适用于移动端选项数量较少的场景、供用户完成单项选择的组件。其核心价值一方面在于降低用户输入成本无需手动填写内容以选择操作替代开放式输入另一方面可对用户输入内容进行约束与规范保障数据格式统一。本次共整理了4类主流的单选选择器样式分别为文字选项、图文选项、矩形选项弹框、矩形选项直选。1️⃣动图效果弹框与直选模式差异。前三种样式均采用弹框模式支持居中显示、底部显示两种呈现方式主要解决选项数量较多时表单内难以完成选项布局的问题最后一种为直选模式当选项数量较少时可直接嵌入表单页面用户仅需一步即可完成单选操作。选项值自动回填。用户确认选择后系统可自动将选中的选项值回填至对应表单输入框。取消操作状态回退。用户点击取消关闭弹框时本次临时变更的选择不会回填至表单输入框下次重新打开弹框时选项的选中状态将恢复为操作前的初始状态。2️⃣使用方法在元件库的【单选选择器】分类中选取符合需求的组件拖拽至原型画布即可完成添加。本次将以文字选项、矩形选项直选两类样式为例进行说明。若选择弹框模式的组件建议优先考虑共用页面已有的蒙层和弹框动态面板尤其页面中已经存在相关组件的场景。蒙层与弹框的合并使用方法可参考上一篇内容“3.弹框和蒙层”。若不进行共用处理组件虽可正常运行但会导致页面大纲层级冗余杂乱后续的维护管理与设计优化成本将大幅提升。若选择直选模式的组件操作更为简便直接将组件拖拽至目标位置即可。完成单选选择器的页面部署后即可根据实际设计需求对组件内容进行自定义配置。第一步修改表单上的组件标题与输入框提示语。第二步调整“选项列表”内的选项名称、选项图标或备注说明。字段说明OptionName选项名称所有样式都包含这一属性。按需调整。Comment选项说明文字选项样式包含这一属性。按需调整。Image选项未选中图标弹框样式包含这一属性。可不调整。SelectedImage选项选中图标弹框样式包含这一属性。可不调整。OptionImage选项图标图文选项样式包含这一属性。按需调整。3️⃣制作方法制作思路1. 单选选项列表实现Axure自带的单选组件存在明显局限性样式固定且不可自定义同时难以快速扩展多选项配置因此不建议使用原生组件进行开发。为实现选项的快速扩展可通过中继器承载单选选项满足灵活增减选项的需求。为实现勾选样式的灵活自定义可借助图片组件Image的多状态切换能力适配不同设计风格的勾选效果。2. 多选项展示方式设计完成单选选项列表的基础配置后需根据选项数量选择适配的排版方案。若选项数量较少可直接嵌入表单页面内将选项列表直接放置到目标位置即可。若选项数量较多表单页面布局承载存在难度则需要通过独立容器承载选项列表此时可结合弹框与蒙层实现展示。组件结构弹框模式的单选选择器共分为四个模块1. 输入模块输入模块直接展示在表单页面中包含选项标题与选项输入框。点击输入区域将触发选项弹框的显示事件。2. 选项模块选项模块封装在弹框动态面板内包含变量、标题、选项列表中继器与按钮组四个部分变量包含“选项选中值”存储本次临时选中的选项与“选项选中值-原值”存储上一次确认提交的选项两类。“选项选中值”用于点击确认按钮时为输入框提供回填数据“选项选中值-原值”用于点击取消按钮时恢复下次弹框打开时的选项选中状态。标题即弹框的头部标题需与输入模块的选项标题保持内容一致避免用户认知混淆。选项列表由中继器承载包含选项名称、选项图标、选项说明、选择图标等要素。需注意中继器必须嵌套在动态面板内否则弹框的居中或底部定位交互将失效该问题属于Axure的已知特性。按钮组包含“确定”与“取消”两个按钮按钮文本可根据业务需求灵活调整。点击确定按钮时将选中选项值回填至输入框点击取消按钮时仅执行关闭弹框操作不修改表单数据。3. 变量模块弹框模式因支持取消回退操作需要两个变量辅助完成选项列表中继器的选中状态恢复两类变量定义如下选中选项值存储用户当前选中的选项名称每次点击选项时触发更新。选中选项值-原值存储上一次确认并回填到输入框的选项名称每次点击确定按钮时触发更新。4. 公共共用模块公共共用模块包含卡片、背景板与蒙层。若页面中已存在同类型组件可删除组件内自带的对应模块直接复用页面已有公共组件即可。直选模式的结构相对简单直接将输入模块与选项模块整合整体嵌入表单页面展示。直选模式的组件仅包含选项标题与选项列表中继器两个部分无需额外的弹框、变量与公共模块。交互逻辑1. 弹框显示交互事件与上一篇内容“3.弹框和蒙层”的逻辑一致弹框显示的交互事件绑定在输入框的点击事件上。若采用底部显示的弹框样式需要调整移动交互动作Move的y轴参数适配底部定位需求。2. 选项列表中继器加载交互事件不同样式的选项列表中继器表格设计规范如下字段说明OptionName选项名称所有样式都包含这一属性。按需调整。Comment选项说明文字选项样式包含这一属性。按需调整。Image选项未选中图标弹框样式包含这一属性。可不调整。SelectedImage选项选中图标弹框样式包含这一属性。可不调整。OptionImage选项图标图文选项样式包含这一属性。按需调整。为简化中继器的表格字段配置可利用中继器的Mark属性标记选项的选中状态无需额外新增独立字段存储选中标记。3. 选项组合点击交互事件用户选中选项时同步标记该选项对应的数据行并为“选中选项值”变量赋值记录本次最新选择的选项。中继器内的单选元素需统一归属到同一个选项组Selection Group且选项组命名需全局唯一不可与其他组件的选项组重名避免单选逻辑冲突。4. 选项确定点击交互事件用户确认选择时首先调用“选中选项值”变量的内容回填至对应表单输入框完成选项值的同步更新。随后将本次选中的选项值赋值给“选中选项值-原值”变量记录当前最终确认的选项状态为后续取消操作的状态回退提供依据。最后按顺序执行隐藏蒙层、隐藏弹框动态面板、将蒙层与弹框置底的操作完成弹框关闭的标准流程。5. 选项取消点击交互事件点击取消按钮意味着放弃本次选择不对输入框的已有选项值进行修改。但用户在弹框内切换选项时已经临时修改了中继器的选中标记因此需要基于“选中选项值-原值”变量恢复中继器的选中状态具体流程如下首先校验本次操作是否变更了选中选项若未发生变更则无需执行恢复操作仅当选中状态发生变化时才触发后续恢复流程。恢复选中标记的第一步清除中继器所有已标记的数据行再根据“选中选项值-原值”变量重新标记对应选中项。第二步通过Remove Sort交互动作强制中继器重新加载确保状态恢复生效。第三步同步更新“选项选中值”变量使其与“选中选项值-原值”变量内容保持一致。第四步执行关闭弹框的标准操作流程。蒙层点击交互事件可参考“弹框和蒙层”组件中点击蒙层关闭弹框的交互逻辑。弹框场景下均需配置蒙层点击交互事件本组件的特殊点在于点击蒙层关闭时需复用上述取消按钮的交互逻辑除关闭弹框与蒙层外还需完成选项列表中继器的选中状态恢复。直选模式的单选选择器仅包含两类交互事件分别为上述“选项列表中继器加载交互事件”与“选项点击交互事件”逻辑与弹框模式对应部分一致此处不再赘述。4️⃣要点总结选项数量较少时通常不超过4个优先选用直选模式的单选选择器选项数量较多时建议采用弹框模式。弹框模式下取消操作需配套中继器选中标记的恢复逻辑确保下次打开弹框时选项列表的选中状态与操作前一致。