原标题：为配合Axure，我用HTML5先临摹instagramAPP的交互界面

现在市面上有很多诸如Axure、Shireframe、Pencil Project等产品原型设计软件，每个产品都有其独特的优越性，目标都只有一个：高效产出可测试、可交互的产品原型。

毋庸置疑，这些软件的功能都十分强大，但是事实上并没我们想象中的高效，除开都需要完成软件的下载安装捆绑等繁琐操作外，便携性差是他们最令人不满的地方。

就比如老板急需要你在手机上给他展示新制作的APP原型，而你艰辛地在Axure上把原型文件导入到手机中，在手机打开却需要花费几分钟，且浏览时发现效果甚差——动画卡、链接按钮丢失、画面显示不全...同时满足高效、可测试、可互动、方便老板浏览做决策等特点就需要选用一些辅助用的工具或软件了，而HTML5工具似乎是不二的选择。

纵观国内的HTML5制作工具，做得比较好的有易企秀、iH5、MAKA等，三款工具各有利弊但鉴于其交互性的实现，个人还是倾向于iH5。这款工具并非是专业的原型制作工具，它只是能通过高效产出一个产品原型的H5，来弥补Axure等专业工具所不具备的便携式掌上展示功能(特别是动画、动效、交互等元素的展示)，以此作为辅助性使用。

下面向大家展示本人用该HTML5工具临摹的instagram APP中的一些交互界面(事先在手机上把各界面截图导出到电脑，然后用PS作切片处理)，以及叙述相应的逻辑：

页面跳转：页面的跳转主要用的逻辑为：透明按钮——置顶同层控件——显示/隐藏页面

以点击第一个icon和第二个icon的页面跳转为例，我们需要把已切片的素材导入，先隐藏初始不用显示的页面。在下方icon栏处设置画布，且对应地设置透明按钮，目的是为了用透明按钮+事件的逻辑实现页面跳转。

对于icon栏的切换，除了可以用iH5的时间轴+遮罩功能来实现，可以用“同层控件置顶”功能：在需要点击的按钮下设置事件，将对应的控件顶置即可。

另外这个工具带有“动效”功能，常见的向左进入、向右退出等动效都有，所以我们可以在页面下放置一个进入和退出的动效即可。

页面滑动：

页面滑动交互的主要逻辑为：固定顶、底栏——滑动时间轴——长图头尾设置轨迹关键帧

首先固定首尾栏，设置滑动时间轴，在滑动时间轴下放置用于上下滑动的长图，用轨迹控制长图的头和尾的位置(在时间轴上添加轨迹的关键帧add，然后点击头帧和尾帧设置坐标属性)。值得注意的是，滑动时间轴的属性栏下的“自动跳转控制点”应选为NO。如果勾选该选项，我们在滑动的过程中松手，长图会自动跳转到顶部或者尾部。

页面嵌入视频：

页面嵌入视频交互的主要逻辑为：透明按钮——事件控制播放/暂停

视频规格似乎是限定MP4格式且不大于50M，在设置属性时取消自动播放，通过在播放的图标上设置透明按钮让用户点击触发视频播放和暂停。当然这个播放图标也可以用时间轴+轨迹的配合实现图标闪烁、呼吸型伸缩等提示效果。

当然有很多页面我还没详细表达出来，包括：页面内的动画交互、图片预览时的放大收缩等，这些都能通过时间轴等功能实现，还有3D型翻转的相册类型交互都可以实现。

总而言之在整个体验的过程来说，操作的效率和实现的效果都很好。在使用Axure等工具制作原型时，不妨用H5来作辅助性展示，相信可以更加直观地提高与老板、交互设计师等对象沟通时的效率，便于作产品全局的决策。

文/尼古拉丝赵四 产品职场新人

【相关推荐】

Axure教程：滑动鼠标页面自动切换(一)

Axure教程：移动端原型横纵向滑动同时实现

Axure教程：动态面板实现广告循环播放

如何在Axure中创建自己的元件库

一套出自设计师之手的Axure组件库，让你的原型不再LOW返回搜狐，查看更多

责任编辑：