|Axure案例解析：不同形式的单选效果( 二 )
本文插图
设置选项组：
右键菜单选择“选项组” ， 设置名称为group1 。
本文插图
复制元件：
复制“我的”矩形框三个 ， 修改文字内容分别为“发现”、“云村”、“视频” 。 选中“我的”矩形框 ， 右键菜单中选择“选中” ， 设置默认选中状态 。
案例2：
设置步骤同案例1 ， 样式设置如下 ， 左边是默认样式 ， 右边是选中时样式 。
本文插图
选项组名称为group2 ， 复制三个矩形 ， 第一个“推荐”右键设置为选中 。
案例3：
设置步骤同案例1 ， 样式设置如下 ， 左边是默认样式 ， 右边是选中时样式 。
默认有灰色边框 ， 圆角大小为3 ， 选中样式修改下文字颜色和边框颜色 。
本文插图
选项组名称为group3 ， 复制三个矩形 ， 第一个“黑色”右键设置为选中 。
案例4：
设置步骤同案例1 ， 不过使用的是一个图片元件 ， 样式设置如下 ， 左边是默认图片 ， 右边是选中时图片 ， 也是通过交互样式的选中状态设置的 。
本文插图
选项组名称为group4 ， 复制三个图片 ， 第一个图片右键设置为选中 。
案例5：
从案例5开始有点复杂了 ， 因为每一项里包括的内容比较多 。 默认状态是一个大的矩形框和三个文本标签 ， 在垂直方向上居中 。
默认状态：灰色矩形边框 ， 边框圆角大小为5；第一个标签黑色文字 ， 第二个标签红色 ， 第三个标签灰色文字 ， 文字大小不同 。
选中状态：设置边框的选中状态的边框为红色 ， 第一个月份标签的选中样式文字颜色为红色 ， 注意这里分别设置了两个元件的选中样式 。
本文插图
为了设置整体的样式 ， 我们将矩形框和三个标签选中后 ， 转成动态面板 ， 然后再设置动态面板的选项组名称为group5 。 复制动态面板 ， 修改里面的文字内容 ， 设置第一个动态面板为默认选中状态 ， 注意下图中第一个默认选中时的月份颜色是红色的 。
本文插图
案例6：
开动你的脑筋 ， 看看如何设置这种开关类型的单选效果？
来看一下最终案例1~5的各个单选按钮的整体样式效果 。
本文插图
二、交互处理
每一组的单选按钮的每一项单击事件处理是一样的 ， 单击后让当前元件处于选中状态 。
以第一个为例：
本文插图
把这个单击事件复制到其它元件上 ， 包括前面那个动态面板 。
最后来预览一下效果 。
本文插图
三、小结
单选效果应用真的是非常普遍 ， 它的样式设置和交互设置的方法也比较通用 ， 一定要掌握哦~
本文由 @Axure原型设计工场 原创发布于人人都是产品经理 。 未经许可 ， 禁止转载 。
【|Axure案例解析：不同形式的单选效果】
推荐阅读
- 极客码头|i7级八核游戏主机解析，配置真有那么强？别以为自己捡到宝
- iQOO手机|低价骁龙765G值得买吗？iQOO Z1x优缺点解析
- 屏幕|魅族16s Pro全面解析魅族旗舰升级，绝对值得期待
- 智能机器人|快商通智能客服云平台荣获CSDN“AI优秀案例实践奖”
- 行业互联网|快商通智能客服云平台荣获CSDN“AI优秀案例实践奖”
- 魅族手机|魅族16s Pro全面解析魅族旗舰升级，绝对值得期待
- 熟料|轴承案例 | 熟料破碎机轴承座降温的简易方法
- 山西黑金网|轴承案例 | 熟料破碎机轴承座降温的简易方法
- IOS系统|从ios企业签名的机制及原理解析掉签的原因
- 黑科技|火星人E4Z集成灶解析：无烟黑科技解锁新厨房