手机版 欢迎访问人人都是自媒体网站
选项卡,就是用多个页签来切换展示不同的功能页面,通过点击相应页签来切换相应选项卡页面的效果,相信大家在绘制原型中常常会遇到,并不陌生。但是如何优化选项卡的展示效果?以及如果选项卡过多,如何做到像真正系统或APP中一样可手动滚动页签,做到效果美观、高保真?
这就是我下面要分享给大家的内容啦:
首先为大家回顾传统选项卡的制作过程,再展示可滚动页签的选项卡制作过程。
一、最常见的传统选项卡最常见的选项卡,一般有三四个页签,分别对应各自页面,通过鼠标点击页签,来切换到相应的页面。
几个关键步骤如下:
1. 准备元素准备几个矩形(作为页签)和一个动态面板(状态数与矩形数相同)。
全选所有矩形,在鼠标右键的“设置选项组”菜单中或页面右侧属性栏中键入选项组名称。设置为同一个选项组的元素,一次只能选中一个。
单独为每个矩形设置鼠标单击时事件:
①选中当前元件;②设置动态面板的状态为对应的状态页(设好一个矩形的事件后可直接将事件复制到其他矩形上,再进行事件微调)。
为动态面板中每个状态下添加一些示意文字作为区分。
至此预览原型,已经达到了点击选项卡页签切换选项卡的效果。为了样式更美观,全选所有页签矩形,为其添加选中效果(添加悬停和按下效果后原型会更生动);为动态面板添加边框,并为其切换添加过渡效果。
当页签的个数过多时(如10个),可能页面样式不允许我们把所有页签都平铺开展示,这时需要将后面的页签隐藏,需要点击时再让其展示。
由于页签处需要做出滚动效果,故在上述步骤中的页签选中效果和事件需要做出一些变化。
几个关键步骤如下:
1. 微调样式并新增元素修改上面为页签设置的选中效果,主要是把边框样式去掉了。取而代之的是增加了一个小矩形蓝条,与页签同宽,高度3px,默认先摆放在第一个页签的下边框处对齐。
这个小蓝条是为了之后在进行页签的滚动时,达到同步滑动至所选页签的效果。
将动态面板的状态增加为10个,并将选项卡的页签增加为10个。
全选所有页签和小蓝条,右键点击“转换为动态面板”,将该动态面板命名为“移动面板”,并选择“自动调整为内容尺寸”。
此时“移动面板”内部包含10个页签和1个小蓝条:
右键“移动面板”,将该动态面板再转换为动态面板,并命名为“外部面板”,不勾选“自动调整为内容尺寸”,将尺寸调整为和下方动态面板同宽。
此时“外部面板”内部包含“移动面板”:
(1)选中第一个选项卡页签,双击打开其鼠标单击时事件窗口
在左侧找到“移动”,在右侧输入框中输入“小蓝条”(之前已经将小矩形命名为“小蓝条”),在下方勾选“小蓝条”。
(2)在下方的移动下拉框处选择“绝对位置”,点击x坐标的“fx”标识,打开编辑值窗口
Copyright © 2018 DEDE97. 织梦97 版权所有 京ICP