Axure案例学习教程:不同形式的单选效果解析

2020-08-0714:25:57原型设计Comments2,350 views字数 1631阅读模式

单选效果在各种APP里或者页面上非常常见,最普遍的效果就是各类导航菜单,还有的是一些关于商品的属性选择,例如颜色、大小等等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

来看一下网易云音乐APP安卓版本里哪些是和单选相关的效果,以下是一些截图示例。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

点击这里查看效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

Axure案例学习教程:不同形式的单选效果解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

案例1:顶部导航菜单 – 我的、发现、云村、视频默认状态:灰色文字,小字。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

选中状态:黑色文字,大字。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

Axure案例学习教程:不同形式的单选效果解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

案例2:顶部导航菜单另一种形式 – 推荐、官方、精品、华语、流行默认状态:灰色文字选中状态:红色文字,有下边框。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

Axure案例学习教程:不同形式的单选效果解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

案例3:商品颜色选择默认状态:黑色文字,灰色边框选中状态:红色文字,红色边框。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

Axure案例学习教程:不同形式的单选效果解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

案例4:支付方式选择默认状态:灰色边框的圆选中状态:红色填充,中间有选中图标。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

Axure案例学习教程:不同形式的单选效果解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

案例5:费用选择默认状态:灰色边框,月份黑色选中状态:左上角选中状态的红色边框,月份红色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

Axure案例学习教程:不同形式的单选效果解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

案例6:黑胶VIP和音乐包的切换默认状态:红色文字,红色边框,白色填充,左边无边框,右边半圆形选中状态:白字文字,红色边框,红色填充,右边无边框,左边半圆形。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

这些单选效果在Axure中的样式设置有四个关键点:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

  1. 每一组选项都设置为同一个选项组名称;
  2. 设置每个元件选中时的样式;
  3. 设置每组选项中的第一个为默认选中状态;
  4. 给每一项添加单击事件,让当前项处于选中状态。

再来看一下这6种不同风格的单选效果的差异,看如何使用Axure中的样式来设置:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

Axure案例学习教程:不同形式的单选效果解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

案例1、2、3可以使用单一的矩形框或文本标签元件来实现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

案例4使用一个图片元件,但使用两个图片来实现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

案例5使用多个元件,需要应用元件组合或者动态面板让它们成为一个整体。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

案例6的单选类似开关按钮,也是多个元件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

下面具体来看一下样式和交互分别如何设置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

一、界面布局

案例1:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

布局:白色背景矩形框。默认样式:白色背景,无边框,灰色字体,字体大小14。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

Axure案例学习教程:不同形式的单选效果解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

选中样式:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

选中矩形框,右键弹出菜单中选择“交互样式”,设置选中样式,后续案例的选中样式设置方法一样,不赘述。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

Axure案例学习教程:不同形式的单选效果解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

设置选项组:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

右键菜单选择“选项组”,设置名称为group1。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

Axure案例学习教程:不同形式的单选效果解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

复制元件:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

复制“我的”矩形框三个,修改文字内容分别为“发现”、“云村”、“视频”。选中“我的”矩形框,右键菜单中选择“选中”,设置默认选中状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

案例2:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

设置步骤同案例1,样式设置如下,左边是默认样式,右边是选中时样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

Axure案例学习教程:不同形式的单选效果解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

选项组名称为group2,复制三个矩形,第一个“推荐”右键设置为选中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

案例3:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

设置步骤同案例1,样式设置如下,左边是默认样式,右边是选中时样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

默认有灰色边框,圆角大小为3,选中样式修改下文字颜色和边框颜色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

Axure案例学习教程:不同形式的单选效果解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

选项组名称为group3,复制三个矩形,第一个“黑色”右键设置为选中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

案例4:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

设置步骤同案例1,不过使用的是一个图片元件,样式设置如下,左边是默认图片,右边是选中时图片,也是通过交互样式的选中状态设置的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

Axure案例学习教程:不同形式的单选效果解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

选项组名称为group4,复制三个图片,第一个图片右键设置为选中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

案例5:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

从案例5开始有点复杂了,因为每一项里包括的内容比较多。默认状态是一个大的矩形框和三个文本标签,在垂直方向上居中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

默认状态:灰色矩形边框,边框圆角大小为5;第一个标签黑色文字,第二个标签红色,第三个标签灰色文字,文字大小不同。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

选中状态:设置边框的选中状态的边框为红色,第一个月份标签的选中样式文字颜色为红色,注意这里分别设置了两个元件的选中样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

Axure案例学习教程:不同形式的单选效果解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

为了设置整体的样式,我们将矩形框和三个标签选中后,转成动态面板,然后再设置动态面板的选项组名称为group5。复制动态面板,修改里面的文字内容,设置第一个动态面板为默认选中状态,注意下图中第一个默认选中时的月份颜色是红色的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

Axure案例学习教程:不同形式的单选效果解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

案例6:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

开动你的脑筋,看看如何设置这种开关类型的单选效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

来看一下最终案例1~5的各个单选按钮的整体样式效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

Axure案例学习教程:不同形式的单选效果解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

二、交互处理

每一组的单选按钮的每一项单击事件处理是一样的,单击后让当前元件处于选中状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

以第一个为例:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

Axure案例学习教程:不同形式的单选效果解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

把这个单击事件复制到其它元件上,包括前面那个动态面板。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

最后来预览一下效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

Axure案例学习教程:不同形式的单选效果解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

三、小结

单选效果应用真的是非常普遍,它的样式设置和交互设置的方法也比较通用,一定要掌握哦~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19962.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/19962.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定