最近支付宝进行了一次比较大的版本更新，引起了很多人的关注，无论从视觉还是交互体验上都有了很大的改变，但是从原型制作来说，实在比之前更加大略了。
通过临摹这些有名厂商的产品，是快速进步的一种办法，可以更好的借鉴他们的交互与逻辑，比体验不雅观看，更能深刻的理解，从而更好的改进自己的产品。
说到原型，很多人就会想到Axure，这类常用的原型工具，他们利用的都是HTML规范，动效以及交互大部分引入的jQuery库或者封装的JS库，厥后果可以在软件预览以及导出HTML文件在浏览器预览，同样类别的还有Justinmind等等。
与其事理类似的也有很多，如定位于开拓工具的Animate，其动画效果比Axure要强大的多，以及谷歌的web design，还有向海内线上制作平台的iH5，他们面向的是根本交互，可自由编辑度高，不仅可以做出H5实例，同样也可以用于原型。
这些工具可以分为线上与离线两种制作办法，我个人倾向利用线上的制作工具，由于离线工具天生的原型未便利发给别人那看，而且制作严重依赖于软件安装，不便与即时查看与他人沟通。
对付临摹来说，事先无需过多剖析，理解一下大致交互，直接上手就可以。
工具：iH5
材料准备：用手机把新版支付截屏，调到PS用切片把其分为各个模块，如导航栏，对话框等等。
Step1：页面切换
描述：底部导航的切换交互，跳转页面并且图标变为蓝色。可以用点击事宜掌握两种状态，一是遮罩的移动，二是页面的跳转。
新建韶光轴，在其下面新建一个画布，将蓝色与灰色两个底部导航栏，以及一个与图标大小的白色矩形，放入个中，在蓝色导航图片的属性——遮罩，选择白色矩形。然后在矩形下建立轨迹，四个关键帧分别对应四个图标。
在舞台上建四个页面用来存放导航里的内容。
在图标位置添加透明按钮，在其下方添加事宜，当轻触时跳转页面，以及跳转到该韶光轴的某一帧。
Step2：浮动导航
描述：当页面滑动一段间隔，顶部导航栏发生变换。通过监测韶光轴滑动的韶光，来触发菜单栏的改换。
在页面一，新建滑动韶光轴，所有素材放入个中，将两个顶部导航叠放在一起，为内容添加轨迹，让其让下滑动，一秒时滑动到底部，为初始默认的导航添加两个事宜，当滑动韶光轴滑动0.1秒时，置于底层，当时间为0时，至于顶层。
Step3：滑动切换
描述：类似图片的轮播效果，将未显示的图片放在屏幕之外或者隐蔽，通过手指的旁边滑动来掌握图片的进出。
在页面二，把准备好三张轮播的图，带有三个镂空圆点的PNG图片，以及一个大小与圆点差不多的矩形，都放入滑动韶光轴下面，新建轨迹，创建三个关键帧，通过调度图片坐标来掌握在每一帧上显示的图片，当你滑动时，就会涌现图片的轮播效果，如果须要在图片上加入链接，直接在该图片添加点击事宜，动作设置为跳转页面即可。
Step4：弹框
描述：点击按钮时弹框涌现，然后点击其周围弹框消逝。为弹框设置好动画之后，利用事宜，来掌握其正向与反向播放即可。
在页面三上，准备一张黑背景图片以及设计好的弹框，将其放入韶光轴下，利用轨迹制作出想要的效果，在背景上的“+”添加一个透明按钮，增加一个事宜，当点击时让该韶光轴从头播放，然后在玄色背景下添加同样的事宜，把动作改为反向播放。
其他的一些交互无外乎都是页面的跳转，原型制作上并没有多少压力。
制作完成之后，就可发布了，会天生一个网址链接与二维码，可以在线编辑与查看。
总结：
工欲善其事，必先利其器，工具的选择不是越多人用越好。像Axure这类专业的原型制作软件，在标尺、对齐上面，是上面所利用的iH5远比不上的（后者得通过x|y坐标等精确掌握），而且其还拥有浩瀚有手机图标等模板，可以大大加快原型制作，但后者在与人沟通以及查看时有着上风，并且随着H5营销的盛行，其也可以快速制作出干系的营销案例，并迅速在网上传播，不用再依赖别人，或者重新学习其他制作工具，拥有更多的可操作性。
本文由 @iood 原创发布于大家都是产品经理。未经容许，禁止转载。
