h5交互原型设计是什么样的？用什么工具制作？（中）

上篇文章给大家介绍了H5交互原型常用的一些工具“ h5交互原型设计是什么样的？用什么工具制作？（上） ”，接下来就分享一下我自己用HTML5工具临摹的instagram APP中的一些交互界面，以及叙述相应的逻辑。

一、页面跳转
页面跳转的主要逻辑是:透明按钮-顶部同层控制-显示/隐藏页面。

以点击第一个icon和第二个icon的页面跳转为例，我们需要导入切片材料，首先隐藏最初不需要显示的页面。在下面的icon栏中设置画布，并相应地设置透明按钮，以使用透明按钮+事件逻辑跳转页面。

对icon栏的切换，除了iH5的时间轴+遮盖功能外，还可以使用同层控件置顶功能：在需要点击的按钮下设置事件，将相应的控件置顶。

此外，该工具还具有动态效果功能，常见的动态效果如向左进入、向右退出等，因此我们可以在页面下放置一个进入和退出的动效即可。

二、页面滑动

页面滑动交互的主要逻辑是:固定顶部、底栏-滑动时间轴-长图头尾设置轨迹关键帧。
首先固定首尾栏，设置滑动时间轴，在滑动时间轴下放置上下滑动的长图，用轨迹控制长图的头尾位置(在时间轴上添加轨迹的关键帧add，然后点击头帧和尾帧设置坐标属性)。

值得注意的是，滑动时间轴属性栏下的自动跳转控制点应该是否定的。如果勾选选项，我们会在滑动过程中松手，长图会自动跳到顶部或尾部。

最后一个部分就是页面嵌入视频，下篇文章给大家详细说说这部分的内容，继续去看看吧！

以上就是“h5交互原型设计是什么样的？用什么工具制作？（中）”的内容了，如果你还想了解其他相关内容，可以来 产品壹佰 官方网站。