1.相关介绍
全部产品所在的店铺地址：https://www.axureshop.com/shop/3039
与此相关的完整版高保真实战项目(UE&UI)原型设计(针对于全息中继器组件)地址：https://www.axureshop.com/a/249709.html
与此相关的完整版高保真实战项目(UE&UI)原型设计(PC端+手机端)地址（这个性价比很高，推荐路过的朋友购买）：https://www.axureshop.com/a/234122.html#comment-287804
与此相关的完整版高保真实战项目(UE&UI)原型设计(手机端)地址：https://www.axureshop.com/a/246479.html
与此相关的完整版高保真实战项目(UE&UI)原型设计(PC端)地址：https://www.axureshop.com/a/298707.html
本项目完整版高保真实战原型(UE&UI)设计(PC端)地址：https://www.axureshop.com/a/674824.html
1.1页面布局
1.1.1页面设定
在【左右设限滑块页眉菜单栏】内新建命名为【【左右设限滑块页眉菜单栏】的动态面板，动态面板的【State1】更改为【全部】，在【全部】内新建一个命名为【右浮图标】的【组合文件】和一个命名为【切换菜单】的【动态面板】，【切换菜单】内的【State1】更改【文本】。
1.1.1.1【右浮图标】
从元件库内分别拉入两个【矩形】元件分别做图标的图标背景1和图标背景2。
图标背景1的【填充】色为#ffffff，透明度为30%，图标背景2的【填充】色为#ffffff，透明度为90%，切图标背景2的X大于图标背景2X的8px，然后将图标嵌入图标背景1和图标背景2两者形成的半透明上下左右居中区域。
1.1.1.2【切换菜单】
从元件库内分别拉入14个【文本标签】元件依次在切换菜单规定的区域范围内排序成行，并依次将内容更改为1至14的数字。
【文本标签】的【填充】色皆为透明，字体颜色#666666。
1.2动态交互
1.2.1效果设计
1.2.1.1图标交互样式设置
选中【图标】，进行【交互样式设置】，将鼠标悬停、鼠标按下、选中的交互样式的另一种状态的【图片】导入。
1.2.1.2文本标签的交互样式设置
选中表现1至14个数字的【文本标签】元件，进行【交互样式设置】，将鼠标悬停、鼠标按下、选中的交互样式的【字体颜色】进行设置。
1.2.2.1实现左右设限滑块页眉菜单栏的动态交互
选中【左右设限滑块页眉菜单栏】动态面板内的【全部】，在【属性】中设定【向左拖动结束时】和【向右拖动结束时】的用例，配置相关的动作。
步骤一：设置【向左拖动结束时】用例的配置动作
在case1【组织动作】中添加【移动】动作，在【配置动作】内勾选【切换菜单】动态面板，设置【移动】为【经过】状态，x=-150，y=y，【动画】为【缓进缓出】，时间t=2000毫秒，【界限】中添加【左侧】边界，且大于等于-338。
步骤二：设置【向右拖动结束时】用例的配置动作
在case1【组织动作】中添加【移动】动作，在【配置动作】内勾选【切换菜单】动态面板，设置【移动】为【经过】状态，x=-200，y=y，【动画】为【缓进缓出】，时间t=2000毫秒，【界限】中添加【左侧】边界，且小于等于0。
1.3预览效果
1.4结语
结语：请路过的朋友们多多支持哈，卧枕江山在这里先谢谢了，以后会有更多优质的文章和产品在这个平台上进行发布，请尽请期待呦！
