html5页面交互,H5的交互原型设计

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

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

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

纵观国内的HTML5制作工具，做得比较好的有易企秀、iH5、MAKA、爆米兔等，几款工具各有利弊但鉴于其交互性的实现，个人还是倾向于iH5。这款工具并非是专业的原型制作工具，它只是能通过高效产出一个产品原型的H5，来弥补Axure等专业工具所不具备的便携式掌上展示功能(特别是动画、动效、交互等元素的展示)，以此作为辅助性使用。之前有用过爆米兔给同学做校招的笔试题，网易春招的有道考神，效果还蛮不错的哦~~

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

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

个人作品页

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

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

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

2.页面滑动：

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

时间轴

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

3.页面嵌入视频：

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

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

首页

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

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