Axure画原型图教程:tab页签组件

2023-12-2408:29:24原型设计Comments1,499 views字数 827阅读模式

画原型图使用比较多的一个组件形式——tab页签,之前一直用多个动态面板来设置tab页签的选中和未选中状态,比较复杂且麻烦,最近发现了一个简单便捷的方法,分享给大家,先展示一下最终效果,感兴趣的就一起来试一下吧~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

首先我们先画几个矩形,分别写上页签名称(我这里就直接写页签1234),当前矩形的样式就是你页签未选中状态下的样子(我这里是无边框+黑色字体,大家可以根据自己的需求设置)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

Axure画原型图教程:tab页签组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

我们选中添加的几个页签,在右侧【交互】栏,点击【显示全部】会出现一个【选项组】,我们给这个选项组命名(我这里就起名“tab页签”)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

Axure画原型图教程:tab页签组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

现在给每个页签设置选中效果,选择一个页签,在右侧【交互】栏,【交互样式】选择【元件选中样式】进行样式的编辑,我这边是希望选中的元件文字颜色改变,并且下方会出现选择线,将每一个页签都设置选中样式,可以直接复制粘贴。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

具体操作如下图,可参考。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

Axure画原型图教程:tab页签组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

如果还想鼠标悬停的时候也有相应效果,也可以参照上一条进行【鼠标悬停样式】编辑。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

Axure画原型图教程:tab页签组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

现在需要的就是在每次点击到对应的元件时,元件为选中状态:选择元件,在右侧【交互】栏新建交互,选择【单击时】-【设置选中】-【当前元件值为真】,将每一个页签都设置选中交互,可以直接复制粘贴,具体操作如下图,可参考。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

Axure画原型图教程:tab页签组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

其实到这一步我们的效果已经出来了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

Axure画原型图教程:tab页签组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

但是感觉好像缺了点啥,按理说我进入这个页面应该会有一个默认选中的tab页签,这个时候我们就需要对页面载入时默认选中的tab页签添加一个交互了:在右侧【交互】栏新建交互,选择【载入时】-【设置选中】-【当前元件值为真】。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

Axure画原型图教程:tab页签组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

上一步完成之后效果如下,页面载入时就会默认选中第一个tab页签。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

Axure画原型图教程:tab页签组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

这个时候搭配一个动态面板,就可以实现切换tab页签,展示不同的内容了,我们添加一个动态面板(我这里命名为内容展示),新增4个state,分别命名为1234,每个state内放入对应需要展示的内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

Axure画原型图教程:tab页签组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

接下来我们添加对应的交互就ok了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

Axure画原型图教程:tab页签组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

完成啦,现在来看一下最终效果吧~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

Axure画原型图教程:tab页签组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

本文由 @六元 原创发布于人人都是产品经理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

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

Comment

匿名网友 填写信息

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

确定