心得分享，H5移动端页面设计心得分享

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

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

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

最直接的利益驱动，分享有奖或者需要众筹等，对自己有用并且也对周围人也会有新鲜感的信息，自己参与游戏或者测试得到的结果。

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

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

在我们设计一个H5页面时，很重要的一点就是站在自己的角度跳出来去看你做的东西，首先一点是你和你周围的人愿意转发分享这个东西吗？它有趣吗？它对其他人也是有用的信息吗？

在做“1212陪你一二到底”的时候，我们的设计师要在最后引出有优惠券领取这个信息，前面也用用尽了节操去设计文案和人物，在此体会一下文案的重要性，它是贯穿整个H5的灵魂。第二张图上的小字“海外大牌 足不出户购遍全球”是产品想说的硬广告台词，但在小小的手机屏幕里，碎片时间中，我们必须先抓人眼球，再抓住人心，所以”身体和快递，至少一个在路上“。

对于展示型和互动型H5来说最重要的还是想法。对于设计师来说，也许他们给到我们的只有几行文字，那时候前期构思这个H5的时间有可能比真正做的时间还要长。

比如拍拍网全球同步发售iPhone6的这个消息要做成H5，如果我们只是做一张炫酷的图片告诉大家我们这里有iphone6分享朋友圈有可能中奖，也会有利益驱动的诱惑让人去转发分享。但通过大家的脑爆，我们将这句话变成“关于Phone6的哥德巴赫猜想”，根据测试结果得出有趣的结论，这样转发的并不是赤果果的求中奖行为，还带着有趣的插图和自己测出来的杀马特范，是不是显得更含蓄更不经意呢。这样最终转发的理由上述1，2，3好像都有了呢。

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

谢谢大家收看，我们下期再见~~敬请期待噢！