轩枫阁

前言

关于H5的发展，分享几个最近看到的惊人数据和新闻：

1、截至2015，有80%的App将全部或部分基于HTML5。这意味着大部分App的内容都将是以网页的形式呈现，典型的例子包括微信、Facebook、Twitter等。（数据来源：国际科技媒体 ReadWriteWeb，2015）

2、浏览量最高的1000个H5作品中，42%是心灵鸡汤，最高17,358,480 uv；27%是测试题，最高49,940,339 uv；15%是社交互动游戏，最高2,892,047 uv; 5%是大型品牌宣传，最高551,195 uv。（数据来源：在线h5工具平台ih5.cn，2015.9）

3、谷歌浏览器于9月1日起不再自动播放Flash。亚马逊宣布旗下网络(包括Amazon.com门户在内)的所有广告将不再使用Flash。在可预见的未来，Flash广告将被HTML5广告所替代。

4、朋友圈广告上线（http://ad.weixin.qq.com），据传起投20万， CPM 40元。详情外链的H5页面可以用微信提供的模板，也可以自行定制。

注：本文提到的H5特指基于HTML5技术的动态交互页面。 查看全文

一份来自腾讯互娱-创意设计中心的移动页面用户行为报告

查看全文

前言

由于 H5 页面适用于移动网络传输，跨终端，且方便快速迭代，此外在 App 应用里加入h5的混合开发越来越普遍，如微信里面即将要上线的 H5 微信运动等。

Norman 的认知处理的 3 个层次：本能层、行为层、反思层。相当于对事物或信息的最初认知，之后才会产生行为，这时候才要更多地考虑物理操作的负荷，即手指的操作频次，不同输入模式的切换。所以将本能层放到了首位吧，否则即使操作再简单，认知不正 确或不清楚，直接会影响用户对产品的整体验。就像我们在考虑如何扩大功能的时候，要兼顾到如何简化界面。但是过度重视本能设计而虚弱行为设计（沉浸在产品中以完成日常任务和活动等的功能设计），炫酷的效果也只能是昙花一现？而且在实现 H5 页面的时候还要考虑各终端性能，屏幕大小等因素，所以用渐进式的方式来权衡本能设计与行为设计。 查看全文

前言

在制作移动页面的时候常会考虑页面在不同手机分辨率下的显示效果，通过一些布局技巧使页面从最小的iphone4 兼容至 较大的iphone6 plus及其他android手机。

然而却常常忽略了一个小细节：用户在使用时有时会切换横/竖屏，而制作页面的时候很少考虑用户切换后的效果。

示例

先来看一下如果没有经过考虑横/竖屏切换后的效果（竖版设计为例）。 查看全文

前言

本文将解释，何为贝塞尔曲线，及其如何运用在动画中。

工具及应用

这里给出两个在线动画调试工具。

cubic-bezier还是比较少用到，PC端中，有浏览器不兼容。但是手机端中，可以使用并带来炫酷的动画及体验。

• 缓动函数速查表： http://www.xuanfengge.com/easeing/easeing/
• Ceaser： http://xuanfengge.com/easeing/ceaser/
• cubic-bezier：http://cubic-bezier.com/

贝塞尔曲线

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋。

cubic-bezier即为贝塞尔曲线中的绘制方法。图上有四点，P0-3，其中P0、P3是默认的点，对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]。

而在CSS3中，常用的几个动画效果，用cubic-bezier表示分别为：

贝塞尔曲线进阶

查看全文