【Axure交互教程】可滑动的标签页效果

作品名称：可滑动的标签页效果

作品编号：Case002

软件版本：Axure9

作品类型：交互案例

原型预览链接（附源文件下载链接）：http://daisyaxure.com/demo/Case002

标签页式导航是移动端常见的一种导航形式，可以用于让用户在不同的视图中进行切换，今天我们来讲下如何用Axure实现制作一个可滑动的标签页。

交互效果说明

1.左右滑动查看所有标签。

2.鼠标点击时可选中当前标签，同时只能选中一个标签。

3.点击位于边缘位置的标签，该标签可移动到中间的位置。

效果预览：

制作单选组效果

1.拖入一个【文本标签】，设置文本颜色:#CECECE，文本内容：“关注”；

选中此文本标签，在右侧【交互】面板中添加【交互样式】，设置【选中】时字体颜色为：#333333。

2.拖入一个【矩形】，设置矩形大小：14*3px, 圆角大小：3，颜色透明度0%；

选中此矩形，在右侧【交互】面板中添加【交互样式】，设置【选中】时填充颜色为：#0B5AF0。

3.将上述两个元件选中，点击顶部的【居中】就可以快速将其居中对齐；

右键将其设置为组合，组名为：「关注」。

4.右侧交互面板里，将组合「关注」设置选项组名称为「单选组」，添加【单击时】时选中当前组合为【真】。

制作左右滑动效果

1.复制出多个「关注」组合，分别修改文本和组名，将所有的组合选中右键编组「标签组」；

选中第一个标签组合「关注」，在右侧【交互】面板中，勾选【选中】。

2.右键将「标签组」转换为动态面板，设置动态面板名称为：「滑动面板」；

设置动态面板的宽度和内容区一致，为375px。

3.给动态面板「滑动面板」添加【拖动时】的交互，目标为组合「标签组」，【跟随水平拖动】，点击【更多选项】，轨道为【直线】，添加边界【左侧≤0】【右侧≥-230】；

右侧的-230这个数值是【标签组】能向左滑动的最小坐标。

效果优化

做完上述步骤，标签页的选中和滑动效果已经完成了。但是我们希望点击边缘的标签时，能够使其自动滑动到中间的位置，以方便我们再次点击其他标签。

只需要分别找到对应的标签，添加【单击时】，移动「标签组」到对应的坐标即可。

最后添加一个带渐变的矩形和图标，效果就完成了。

更多高保真原型及交互案例请访问：http://daisyaxure.com