Axure做单选框

在后台管理系统等表单中，单选按钮和复选按钮是使用最平凡的使用元件。

本文深入解析Axure RP中单选按钮分组和下拉框禁用的3个关键优化技巧，帮助设计新手避免常见交互陷阱。重点讲解原生单选按钮组的正确配置、下拉框禁用与只读的隐藏差异，以及高级下拉框联动交互的实现方案，提升原型设计的严谨性和用户体验。

本文详细介绍了如何在Axure中使用中继器打造动态可交互的下拉单选框，包括滚动加载与状态切换等高级技巧。通过数据驱动的设计方法，实现选项内容的动态更新和样式统一，显著提升原型设计的灵活性和交互体验。特别适合需要快速迭代的敏捷开发场景。

1、先画字段名。从Axure默认元件库拖动“文本标签”到画布合适位置，双击输入文字“性别”。2、再画选项。从Axure默认元件库拖动多个“矩形1”到字段名后面位置，尺寸修改为合适大小100*30px，然后依次排列。3、设置选中样式。同时选择这些选项，右键点击“交互样式”，在弹窗“交互样式”中切换到“选中”，勾选填充颜色并设置为蓝色#0000FF，勾选字色并设置为白色#FFFFFF，点击“确定”按钮。4、设置选项组。同时选择这些选项，右键点击“选项组”，在弹窗“选项组”中输入任意组名称，然后点击“确定”按钮。

在Axure RP中，通过结合中继器的强大功能，我们可以轻松实现动态加载的单选框列表，不仅可以根据数据自动调整选项宽度，还能实时更新选中状态。本教程将引导你完成一个使用中继器制作动态单选框列表的项目，包括案例分析、设计思路及详细的实现步骤。

实现目标： 选择任一项，其他项变成非选中状态。 最终效果如下： 图1 实现过程： 1、  需要的组件：3个单选框 2、  将单选框文字改为：男、女、保密，标签分起个名字比如叫男、女、保密 3、  分别设置三个单选框的onclick事件为：如果该单选框被选中的话，其他单选框变为未选中状态； 下图以“男”举例： 第一步，双击男单选框的OnClick事件，弹出图2

在Axure RP中，使用中继器（Repeater）可以实现许多复杂而动态的用户界面组件，比如下拉单选框。本文将详细介绍如何通过中继器创建一个美观且功能丰富的下拉单选框。

少罗嗦，先看效果！设置步骤：从元件库，表单元件中将单选框原件拖动到工作区，需要几个就拉出来几个；选中你需要的所有单选框元件，点击axure顶部工具栏的中的“组合”按钮，将几个单选框组合成为一个组；在右侧设置单选组按钮名称中，设置一个名称，此时就可以实现单选框按钮功能；从此以后不需要再去设置选中A时，取消选中B了。新技能get！！！ 转载于:https://juejin.im/post/5a17df...

实现目标： 选择任一项，其他项变成非选中状态。 -实现方式： （1）单选按钮组的设置；（2）通过事件动作来实现 最终效果如下： 详细步骤： 拖拽组件：3个单选框，将单选框文字分别改为男、女、保密 方式一：设置单选按钮组 （性别1） 选中三个单选框 > 单击鼠标右键调出菜单栏 > 指定单选按钮的组 将组名称命名为：性别 预览，实现单选效果 方式二：通过事件动作来实现（性别2）...

复选框 拖动复选框至页面中，双击进行修改；单击方框可以选中。 单选框 操作与复选框类似。 但工作中是多个单选框，选择一个选项，这时就需要把多个单选框选中，右击选择“设置单选按钮组”。 在“设置选项组名称：”对话框中输入组名，点击“确定”。 效果展示 ...

1.拉出两个圆形直径为30，两个圆形边框颜色为#333333，填充颜色为#FFFFFF。 2.再拉出两个圆形直径为20，放置在直径30的圆形上面， 填充颜色为#FFFFFF。 3.把两个直径20的圆形的交互样式设置的选中，设置填充颜色为#0000FF。 4.把两个直径20的圆形设置在一个选项组里面。 5.将四个圆形设置成两个组。 6.在两个组的交互上设置鼠标单击时选中当前元件。 7.在其中的一组中设置选中。 8.预览并完善细节处。 ...

打打打开Axure，为什么每次都要说这句话呢？ 鸭鸭想说 首先看一下Axure8给我们的单选按钮和复选框 怎么样，漂亮？ 漂亮不敢说，可以说经典，但是某些情况下我们需要些更美丽的。 比如带一点圆角，不同颜色 所以就要自制了 自制也很简单 单选按钮自制： 我们搞的大一点，两个圆形元件，一个60一个40 将内部⚪进行隐藏边框 设置内部⚪的选中状态 再同时设置nei，wai两个⚪的鼠标单击时 切...

常用控件使用常用场景使用技巧Axure中怎样使单选按钮可以在预览时单选互斥：Axure中怎样使一个多选按钮全选：总结 常用场景 单选按钮我们主要使用在表单中；而多选按钮我们最常用在表格中（进行批量操作的选择）、其次是表单中。 使用技巧 Axure中怎样使单选按钮可以在预览时单选互斥： 我们需要实现，选择A时，B、C不选中，选择B时，A、C不选中，以此类推 我们可以设置交互事件，设置A按钮选中时，B、C按钮设置不选中；以此类推； 可以设置为动态面板，设置A选中，B、C不选中为第一种状态，以此类推得三种状态

第一步：创建一个多选项的页面，如下所示：第二步：实现单选效果，选中需要设置单选效果的原件添加用例：第三步：设置原件的选中状态当前原件，其值设置为“toggle":第四步：设置原件点击后发生的样式变化，在“选中”中对原件的样式进行设置：第五步：原件单选效果已经设置完毕，如下图：第五步：对每一个参与多选的原件都进行单选样式的设置，包括全选原件，如下图所示：第六步：对全选原件选中状态样式的改变进行用例增...

专业的快速原型设计工具以上就是所有的基本原件了这里是他们在页面中所呈现出来的样子其中热区是可以放在页面的任何地方，我们可以给热区编辑功能，比如我们将热区放置一张图片中给他设置一个单击旋转的功能这个时候我们去页面中点击图片中热区所在的位置他就会进行你所设置的一个功能，这里我们看到我们放入的图片太贴近页面边框了，我们可以使用热区的第二个功能这个时候我们可以看到图片离边框就有间隔了。

很多业务系统之中都会有以列表的形式展现数据的情况，那么问题来了，对列表选择时会出现多选、全选、反选的问题，今天就来介绍如何使用axure原型工具实现复选框的多选、全选和反选。

先看下视觉效果(想怎么好看，完全看你的个人设计水平)图层原件复选按钮单选按钮开始制作，两种选框图层元素的是一样的，此处不做重复，拿复选框作案例1、 首先从元件库，拖一个复选框进来随便起个名字，这里我起的名字叫“原件”，并且将原件设置为隐藏2、画个圆角矩形，颜色随意，你自己喜欢起名为“背景”(叫什么不重要，重要的是方便)3、画个选中状态从元件库Icons里拖一个对号进来，起名为“选中”，调整合适大小...