整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
具的选择不是越多人用越好。像Axure这类专业的原型制作软件，在标尺、对齐上面，是iH5远比不上的。但后者在与人沟通以及查看时有着优势。
最近支付宝进行了一次比较大的版本更新，引起了很多人的关注，无论从视觉还是交互体验上都有了很大的改变，但是从原型制作来说，其实比之前更加简单了。
通过临摹这些知名厂商的产品，是快速进步的一种方式，可以更好的借鉴他们的交互与逻辑，比体验观看，更能深刻的理解，从而更好的改进自己的产品。
说到原型，很多人就会想到Axure，这类常用的原型工具，他们使用的都是HTML规范，动效以及交互大部分引入的jQuery库或者封装的JS库，其效果可以在软件预览以及导出HTML文件在浏览器预览，同样类别的还有Justinmind等等。
与其原理类似的也有很多，如定位于开发工具的Animate，其动画效果比Axure要强大的多，以及谷歌的web design，还有向国内线上制作平台的iH5，他们面向的是基础交互，可自由编辑度高，不仅可以做出H5实例，同样也可以用于原型。
这些工具可以分为线上与离线两种制作方式，我个人偏向使用线上的制作工具，因为离线工具生成的原型不方便发给别人那看，而且制作严重依赖于软件安装，不便与即时查看与他人沟通。
对于临摹来说，事先无需过多分析，了解一下大致交互，直接上手就可以。
工具：iH5
材料准备：用手机把新版支付截屏，调到PS用切片把其分为各个模块，如导航栏，对话框等等。
描述：底部导航的切换交互，跳转页面并且图标变为蓝色。可以用点击事件控制两种状态，一是遮罩的移动，二是页面的跳转。
新建时间轴，在其下面新建一个画布，将蓝色与灰色两个底部导航栏，以及一个与图标大小的白色矩形，放入其中，在蓝色导航图片的属性——遮罩，选择白色矩形。然后在矩形下建立轨迹，四个关键帧分别对应四个图标。
在舞台上建四个页面用来存放导航里的内容。
在图标位置添加透明按钮，在其下方添加事件，当轻触时跳转页面，以及跳转到该时间轴的某一帧。
描述：当页面滑动一段距离，顶部导航栏发生变换。通过监测时间轴滑动的时间，来触发菜单栏的更换。
在页面一，新建滑动时间轴，所有素材放入其中，将两个顶部导航叠放在一起，为内容添加轨迹，让其让下滑动，一秒时滑动到底部，为初始默认的导航添加两个事件，当滑动时间轴滑动0.1秒时，置于底层，当时间为0时，至于顶层。
描述：类似图片的轮播效果，将未显示的图片放在屏幕之外或者隐藏，通过手指的左右滑动来控制图片的进出。
在页面二，把准备好三张轮播的图，带有三个镂空圆点的PNG图片，以及一个大小与圆点差不多的矩形，都放入滑动时间轴下面，新建轨迹，创建三个关键帧，通过调整图片坐标来控制在每一帧上显示的图片，当你滑动时，就会出现图片的轮播效果，如果需要在图片上加入链接，直接在该图片添加点击事件，动作设置为跳转页面即可。
描述：点击按钮时弹框出现，然后点击其周围弹框消失。为弹框设置好动画之后，利用事件，来控制其正向与反向播放即可。
在页面三上，准备一张黑背景图片以及设计好的弹框，将其放入时间轴下，利用轨迹制作出想要的效果，在背景上的“+”添加一个透明按钮，增加一个事件，当点击时让该时间轴从头播放，然后在黑色背景下添加同样的事件，把动作改为反向播放。
其他的一些交互无外乎都是页面的跳转，原型制作上并没有多少压力。
制作完成之后，就可发布了，会生成一个网址链接与二维码，可以在线编辑与查看。
工欲善其事，必先利其器，工具的选择不是越多人用越好。像Axure这类专业的原型制作软件，在标尺、对齐上面，是上面所使用的iH5远比不上的（后者得通过x|y坐标等精确控制），而且其还拥有众多有手机图标等模板，可以大大加快原型制作，但后者在与人沟通以及查看时有着优势，并且随着H5营销的流行，其也可以快速制作出相关的营销案例，并迅速在网上传播，不用再依靠别人，或者重新学习其他制作工具，拥有更多的可操作性。
本文由 @iood 原创发布于人人都是产品经理。未经许可，禁止转载。
TML5在国内一般称为H5，指的是HTML5网页，比如前两年大火的小游戏《围住神经猫》，就是H5网页的一种。近期比较出名还有看看新闻通过www.ih5.cn制作的H5《和宋仲基结婚合成器》，一天内浏览量破250万。
如果细心地观察那些阅读转发破万的H5，它们除了本身极具特色的创意之外，排版与动效功能的应用也是恰到好处。
所以今天我们就分别从【动效】来给大家阐释，如何让自己创作的H5更具传播性。
·
如今的消费者几乎手机不离身，手机移动端H5对公司宣传的影响愈加明显，可移动端相对于PC端与纸媒等其他渠道而言，具有以下几点特性：
为了大大降低这些特征对H5内容阅读吸引力的影响，针对不同的问题，我们可以在H5内容中添加相对应的动效，以达到优化的作用:
1、动效的作用
总结而言，动效对H5页面的作用主要体现在两个方面，分别为功能性以及趣味性。
功能性：
（1）引导用户进行点击、翻页等动作
（2）吸引用户并让其做长时间的视觉停留；
趣味性：通过一些充满趣味的特效，让用户的体验变得真正愉快以及难忘。
2、动效的类型
在H5内容展示中常见的动效有：移位、旋转、翻转、缩放、逐桢、淡入淡出、粒子效果、3D等，而我们能大致地将这些动效分为基础特效、招牌特效以及高难度特效三种类别。
（1）基础动效
基础动效分为指向性动效和空间展示动效，具体表现在：
指向性动效——H5元素的出现、滑动、弹出等
空间展示动效——页面的切换、翻动和放大。
基础动效最重要的目的是要让用户感到毫无负担，顺应自然规律，此类动效无需做到夺人眼球，而是要让动效舒服流畅。
为了能让大家更直观地理解基础特效的效果，不妨来看看下面这些关于动效设计中的物理关系。
首先，我们要理解“颜色是有重量的”，如下图所示，随着明度和饱和度的升高，颜色的重量在下降：
此外，物理规律也是动效考虑的关键因素。看起来舒服的动效，一定是符合真实物理运动规律的，比如小球从上往下掉，加速运动要比匀速运动更符合人眼的认知。
（2）招牌动效
招牌动效是基于基本动作有选择性的差异化展现，就像一个个有个性的Pose，让用户眼前一亮，建立对界面的独特印象。
这类动效目的是主要为了加深用户印象，但需要注意夸张个性化的表现，以及对于动效节奏的把控。
（3）高难度动效
高难度动效主要的目的是为了加深用户印象。如果运用在H5中会很酷很炫，可以让用户做长时间的视觉停留，但是也是起到锦上添花、画龙点睛的作用，需要根据切实需要来进行设计。
有时候大家会觉得这些酷炫的动效很难实现，其实如果你仔细分析，会发现他们都是基础动效的排列组合。比如下面这两个动效，只要拆分成不同的层，就能发现其中只是不同层之间平移和缩放的组合。
以上，仅是一些制作经验和思路分享，不过具体的情况还得具体分析，排版与动效的表现形式错综复杂，只有找到合适自己创作风格的才能打动读者。
【附：HTML5制作，建议使用www.ih5.cn，国内唯一提供可视化物理引擎、微信付费点、微信红包等功能的H5页面制作云服务平台。】
者： 卡特
转发链接：https://mp.weixin.qq.com/s/7g6hajYAvPBUQvGnPR3aag
*请认真填写需求信息，我们会在24小时内与您取得联系。
