现在H5 页面，产量颇丰。 H5和app比起来优势在于开发周期时间短，传播起来有效率，并且在更新迭代的成本上要小很多。特别在游戏上，未来H5会有更多的可能性。 我们也会坚持去研究和尝试，不管是新技术，还是更有趣的营销方式，和大家共勉

H5端默认中文字体，黑体-简（heiti SC）一般我们用华文黑体代替，两者之间差距小

默认英文字体helvetica neue LT, H5端不能自定义字体，其他字体只能是图片

建议最小字号不要超过18

最好的效果是简单集中，最好有一个核心元素，中心元素不宜过多，突出重点为最优

因为我们懒惰的大脑里最初看到这种简洁排版会立刻出现“嗯 我可以马上看完不费劲”的潜意识信息而带着轻松的态度去阅读

背景动效其实比较推荐缓动效果，不抢主角风头再好不过了

复杂多变的动效不一定是好的，要考虑到加载速度等用户体验问题

考虑到用户使用场景的多样性，那种介绍类的如果要加背景音乐，尽量不要太粗暴。有一点循序渐进最好，给用户留时间在骚扰别人之前可以关闭

或者可以在开始时是关闭状态。但做游戏h5页面的时候，音乐可以没有关闭开启按钮，因为用户对接下来发生的事是有预知的

考虑每一页音乐按钮放置的明显性。如果能用其他页面元素去替代音乐符号作为按钮也是极好的。

前端设计师的音乐文件：格式为mp3等 ，单轨，最好30秒以内 。为了加载速度，文件大小尽量控制在：100k以内最佳，可以用Adobe Audition等软件来压缩。作为无限循环的背景音乐，截取时一定要注意头尾得连接得上

 展示型: 有很多种不同的交互方式，最常见的是翻页，这种方式制作起来相对简单，多用于展示一些新的产品，功能，或者活动介绍等。技术上现在市面上已经有H5在线生成器，基本上给图片和文字就可以帮你进行处理。

除了翻页以外，还有点击，输入文字，擦除屏幕，滑动屏幕等，玩法非常丰富。在“拍拍圣诞活动”里就用到了重力感应，摇一摇可以随机判断，让用户有了自己参与的乐趣。

游戏型：像是起初朋友圈红过的围住神经猫，或者是我们的“拍拍Jump”这类需要计算逻辑，得出分数或者结论的小游戏。

产品型：有一些H5是作为一个长期运营的产品存在的，用户的访问可能会更固定，比如微信里的购物页面等。

手机端之间：一般我们先用640X1136进行设计，参考线会标在960高的地方，主要元素最好不要过高以适配各种机型。其他安卓机器前端切图时可以适当拉伸，变化不会太大就不用每个进行适配。

响应式设计：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。

为不同电子设备单个布局，尽量使用纯色而非渐变

被大众主流乐于分享的信息大概有这么几种：

最直接的利益驱动，分享有奖或者需要众筹等，

对自己有用并且也对周围人也会有新鲜感的信息，

自己参与游戏或者测试得到的结果。

不管是分享给朋友或朋友圈还是QQ对话，让用户主动去分享你的带有很大性质的广告意味的信息在自己的社交群体中，此条信息与自己相关并且别人也能参与进来当然是最理想的。

可口可乐北极熊求合影的例子就是一个很好的宣传方式，借由简单的合成照片技术让人们有意愿去分享自己努力创作的照片。还有UJEANS的设计延续了品牌的调性就是实用，在选择你的牛仔裤喜好时也同时穿插了商品的说明，显得不那么生硬，它比较符合理由3。

在我们设计一个H5页面时，很重要的一点就是站在自己的角度跳出来去看你做的东西，

首先一点是你和你周围的人愿意转发分享这个东西吗?它有趣吗?它对其他人也是有用的信息吗?

在此体会一下文案的重要性，它是贯穿整个H5的灵魂