手机版 欢迎访问人人都是自媒体网站

当前位置:主页 > 推广 >

Axure教程:多页签可滚动的选项卡制作(附源文件下载)

时间:2021-04-13 09:22|来源:网络整理|编辑:|点击:

选项卡,就是用多个页签来切换展示不同的功能页面,通过点击相应页签来切换相应选项卡页面的效果,相信大家在绘制原型中常常会遇到,并不陌生。但是如何优化选项卡的展示效果?以及如果选项卡过多,如何做到像真正系统或APP中一样可手动滚动页签,做到效果美观、高保真?

 Axure教程:多页签可滚动的选项卡制作(附源文件下载)

这就是我下面要分享给大家的内容啦:

首先为大家回顾传统选项卡的制作过程,再展示可滚动页签的选项卡制作过程。

一、最常见的传统选项卡

最常见的选项卡,一般有三四个页签,分别对应各自页面,通过鼠标点击页签,来切换到相应的页面。

几个关键步骤如下:

1. 准备元素

准备几个矩形(作为页签)和一个动态面板(状态数与矩形数相同)。

 Axure教程:多页签可滚动的选项卡制作(附源文件下载)

2. 设置选项组

全选所有矩形,在鼠标右键的“设置选项组”菜单中或页面右侧属性栏中键入选项组名称。设置为同一个选项组的元素,一次只能选中一个。

 Axure教程:多页签可滚动的选项卡制作(附源文件下载)

3. 为页签设置“鼠标单击时”事件

单独为每个矩形设置鼠标单击时事件:

①选中当前元件;②设置动态面板的状态为对应的状态页(设好一个矩形的事件后可直接将事件复制到其他矩形上,再进行事件微调)。

 Axure教程:多页签可滚动的选项卡制作(附源文件下载)

4. 优化样式

为动态面板中每个状态下添加一些示意文字作为区分。

至此预览原型,已经达到了点击选项卡页签切换选项卡的效果。为了样式更美观,全选所有页签矩形,为其添加选中效果(添加悬停和按下效果后原型会更生动);为动态面板添加边框,并为其切换添加过渡效果

 Axure教程:多页签可滚动的选项卡制作(附源文件下载)

5. 预览效果

 Axure教程:多页签可滚动的选项卡制作(附源文件下载)

二、可滚动页签的选项卡

当页签的个数过多时(如10个),可能页面样式不允许我们把所有页签都平铺开展示,这时需要将后面的页签隐藏,需要点击时再让其展示

由于页签处需要做出滚动效果,故在上述步骤中的页签选中效果和事件需要做出一些变化。

几个关键步骤如下:

1. 微调样式并新增元素

修改上面为页签设置的选中效果,主要是把边框样式去掉了。取而代之的是增加了一个小矩形蓝条,与页签同宽,高度3px,默认先摆放在第一个页签的下边框处对齐。

这个小蓝条是为了之后在进行页签的滚动时,达到同步滑动至所选页签的效果。

 Axure教程:多页签可滚动的选项卡制作(附源文件下载)

2. 创建移动面板

将动态面板的状态增加为10个,并将选项卡的页签增加为10个。

全选所有页签和小蓝条,右键点击“转换为动态面板”,将该动态面板命名为“移动面板”,并选择“自动调整为内容尺寸”。

 Axure教程:多页签可滚动的选项卡制作(附源文件下载)

 Axure教程:多页签可滚动的选项卡制作(附源文件下载)

此时“移动面板”内部包含10个页签和1个小蓝条:

 Axure教程:多页签可滚动的选项卡制作(附源文件下载)

3. 创建外部面板

右键“移动面板”,将该动态面板再转换为动态面板,并命名为“外部面板”,不勾选“自动调整为内容尺寸”,将尺寸调整为和下方动态面板同宽。

 Axure教程:多页签可滚动的选项卡制作(附源文件下载)

 Axure教程:多页签可滚动的选项卡制作(附源文件下载)

此时“外部面板”内部包含“移动面板”:

 Axure教程:多页签可滚动的选项卡制作(附源文件下载)

4. 设置“小蓝条”移动的关键事件

(1)选中第一个选项卡页签,双击打开其鼠标单击时事件窗口

在左侧找到“移动”,在右侧输入框中输入“小蓝条”(之前已经将小矩形命名为“小蓝条”),在下方勾选“小蓝条”。

 Axure教程:多页签可滚动的选项卡制作(附源文件下载)

(2)在下方的移动下拉框处选择“绝对位置”,点击x坐标的“fx”标识,打开编辑值窗口

Copyright © 2018 DEDE97. 织梦97 版权所有 京ICP