H5移动端页面设计心得分享
来源：页设计
去年JDC出了很多优秀的武媚娘…不，H5呢，大家都很拼，同时固然也积累了一些经验和教训，今天结合我们的实战案例，从字体，排版，动效，音效，适配性，想法这几个方面好好聊一聊关于H5的设计，希望对同学们有帮助。
字体
排版
在有限的屏幕空间内，我们积累的经验告知我们最好的效果是简单集中，最好有一个核心元素，中心元素不宜过量，突出重点为最优。
比如JDC的“拍拍12星座实用手册”的项目，只用了最简单的图形和文字居中摆放。
以可口可乐的这个“我们在这我们在意”为例，相较而言，越左侧的排版会越容易引发
动效
1/前期跟前端设计师进行沟通，讨论页面中元素的动效出现。例如一些元素的位移，旋转，翻转，缩放，逐桢，淡入淡出，粒子效果，照片处理等等，还有3D展现效果。(
以上两款，包括今年最火的H5案例都在这了《如此风骚!年刷爆朋友圈的10大HTML5技术案例》
2/背景动效其实比较推荐缓动效果，如“京东管培生招聘”的例子里星空中一闪而过的流星，间歇性出现不抢主角风头再好不过了.
3/复杂多变的动效不一定是好的，要考虑到加载速度等用户体验问题。
音效
1/考虑到用户使用场景的多样性，那种介绍类的如果要加背景音乐，尽可能不要太粗鲁。有一点按部就班最好，给用户留时间在骚扰他人之前可以关闭。
或可以在开始时是关闭状态。但做游戏h5页面的时候，音乐可以没有关闭开启按钮，由于用户对接下来产生的事是有预知的。
2/斟酌每一页音乐按钮放置的明显性。如果能用其他页面元素去替换音乐符号作为按钮也是极好的。
给前端设计师的音乐文件：格式为mp3等，单轨，最好30秒之内。为了加载速度，文件大小尽可能控制在：k之内最好，可以用AdobeAudition等软件来紧缩。作为无穷循环的背景音乐，截取时一定要注意头尾得连接得上。
交互
1/展现型:有很多种不同的交互方式，最常见的是翻页，这类方式制作起来相对简单，多用于展现一些新的产品，功能，或活动介绍等。技术上现在市面上已有H5生成器，基本上给图片和文字就可以帮你进行处理。
除翻页之外，还有点击，输入文字，擦除屏幕，滑动屏幕等，玩法非常丰富。在“拍拍圣诞活动”里就用到了重力感应，摇一摇可以随机判断，让用户有了自己参与的乐趣。
2/游戏型：像是起初朋友圈红过的围住神经猫，或是我们的“拍拍Jump”这类需要计算逻辑，得出分数或结论的小游戏。
3/产品型：有一些H5是作为一个长时间运营的产品存在的，用户的访问可能会更固定，比如
响应式设计：页面的设计与开发应当根据用户行动和装备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调剂。具体的实践方式由多方面组成，包括弹性格和布局、图片、CSSmediaquery的使用等。
为不同电子设备单个布局，尽可能使用纯色而非渐变
想法
被大众主流乐于分享的信息大概有这么几种：
最直接的利益驱动，分享有奖或需要众筹等，
对自己有用并且也对周围人也会有新鲜感的信息，
自己参与游戏或测试得到的结果。
不管是分享给朋友或朋友圈还是对话，让用户主动去分享你的带有很大性质的广告意味的信息在自己的社交群体中，此条信息与自己相干并且他人也能参与进来固然是最理想的。
可口可乐北极熊求合影的例子就是一个很好的宣扬方式，借由简单的合成照片技术让人们有意愿去分享自己努力创作的照片。还有UJEANS的设计延续了品牌的调性就是实用，在选择你的牛崽裤喜好时也同时穿插了商品的说明，显得不那末僵硬，它比较符合理由3。
在我们设计一个H5页面时，很重要的一点就是站在自己的角度跳出来去看你做的东西，首先一点是你和你周围的人愿意转发分享这个东西吗?它有趣吗?它对其他人也是有用的信息吗?
在做“陪你一二到底”的时候，我们的设计师要在最后引出有优惠券领取这个信息，前面也用用尽了节操去设计文案和人物，在此体会一下文案的重要性，它是贯穿全部H5的灵魂。第二张图上的小字“海外大牌足不出户购遍全球”是产品想说的硬广告台词，但在小小的屏幕里，碎片时间中，我们必须先抓人眼球，再捉住人心，所以”身体和快递，最少一个在路上“。
对展现型和互动型H5来讲最重要的还是想法。对设计师来讲，或许他们给到我们的只有几行文字，那时候前期构思这个H5的时间有可能比真正做的时间还要长。
比如拍拍全球同步发售iPhone6的这个消息要做成H5，如果我们只是做一张炫酷的图片告知大家我们这里有iphone6分享朋友圈有可能中奖，也会有利益驱动的诱惑让人去转发分享。但通过大家的脑爆，我们将这句话变成“关于Phone6的哥德巴赫料想”，根据测试结果得出有趣的结论，这样转发的并不是赤果果的求中奖行动，还带着有趣的插图和自己测出来的杀马特范，是否是显得更涵蓄更不经意呢。这样终究转发的理由上述1，2，3好像都有了呢。
今年JDC大概做了十多个H5页面，产量颇丰。H5和app比起来优势在于开发周期时间短，传播起来有效率，并且在更新迭代的本钱上要小很多。特别在游戏上，未来H5会有更多的可能性。我们也会坚持去研究和尝试，不管是新技术，还是更有趣的营销方式，和大家共勉。
谢谢大家收看，我们下期再见~~敬请期待噢!
贵阳治疗白癜风的医院白癜风能治好