来源：京东设计中心JDC去年JDC出了不少优秀的武媚娘...不，H5呢，大家都很拼哒，同时当然也是累计了一些经验和教训啦。今天就从字体，排版，动效，音效，适配型，想法这几个方向结合咱们的例子朕就关上门只跟你来好好聊一聊关于H5的设计吧~字体排版在有限的手机屏幕空间内，我们积累的经验告诉我们最好的效果是简单集中，最好有一个核心元素，中心元素不宜过多，突出重点为最优。比如JDC的“拍拍十二星座实用手册”的项目，只用了最简单的图形和文字居中摆放。还可以以可口可乐的这个“我们在这 我们在乎”为例，相较而言，越左边的排版会越容易引起关注。这是因为我们懒惰的大脑里最初看到这种简洁排版会立刻出现“嗯 我可以马上看完不费劲”的潜意识信息而带着轻松的态度去阅读。动效1 / 前期跟前端设计师进行沟通，讨论页面中元素的动效呈现。例如一些元素的位移，旋转，翻转，缩放，逐桢，淡入淡出，粒子效果，照片处理等等，还有3D展示效果。 （ 这个网站里有h5所能实现的效果）比如JDC出品的“京东HR招聘”里面就用了位移，缩放，淡入淡出的效果。而“京东微店七宗罪”的最慷慨这一屏则是用到了粒子效果，每个钱币翻转下落的速度不一样显得画面更真实。今年在朋友圈疯转的维多利亚和特斯拉的H5用的是擦除的效果，模糊的遮罩足够挑起人们的好奇心。2 / 背景动效其实比较推荐缓动效果，如“京东管培生招聘”的例子里星空中一闪而过的流星，间歇性出现不抢主角风头再好不过了.3 /复杂多变的动效不一定是好的，要考虑到加载速度等用户体验问题。音效1 / 考虑到用户使用场景的多样性，那种介绍类的如果要加背景音乐，尽量不要太粗暴。有一点循序渐进最好，给用户留时间在骚扰别人之前可以关闭。或者可以在开始时是关闭状态。但做游戏h5页面的时候，音乐可以没有关闭开启按钮，因为用户对接下来发生的事是有预知的。2 / 考虑每一页音乐按钮放置的明显性。如果能用其他页面元素去替代音乐符号作为按钮也是极好的。给前端设计师的音乐文件：格式为mp3等 ，单轨，最好30秒以内 。为了加载速度，文件大小尽量控制在：100k以内最佳，可以用Adobe Audition等软件来压缩。作为无限循环的背景音乐，截取时一定要注意头尾得连接得上。交互1 / 展示型: 有很多种不同的交互方式，最常见的是翻页，这种方式制作起来相对简单，多用于展示一些新的产品，功能，或者活动介绍等。技术上现在市面上已经有H5在线生成器，基本上给图片和文字就可以帮你进行处理。除了翻页以外，还有点击，输入文字，擦除屏幕，滑动屏幕等，玩法非常丰富。在“拍拍圣诞活动”里就用到了重力感应，摇一摇可以随机判断，让用户有了自己参与的乐趣。2 /游戏型：像是起初朋友圈红过的围住神经猫，或者是我们的“拍拍jump”这类需要计算逻辑，得出分数或者结论的小游戏。3 /产品型：有一些H5是作为一个长期运营的产品存在的，用户的访问可能会更固定，比如微信里的购物页面等。适配型手机端之间：一般我们先用640X1136进行设计，参考线会标在960高的地方，主要元素最好不要过高以适配各种机型。其他安卓机器前端切图时可以适当拉伸，变化不会太大就不用每个进行适配。响应式Web设计(Responsive Web design)：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。为不同电子设备单个布局，尽量使用纯色而非渐变。想法被大众主流乐于分享的信息大概有这么几种，1.最直接的利益驱动，分享有奖或者需要众筹等，2.对自己有用并且也对周围人也会有新鲜感的信息，3.自己参与游戏或者测试得到的结果。不管是分享给朋友或朋友圈还是QQ对话，让用户主动去分享你的带有很大性质的广告意味的信息在自己的社交群体中，此条信息与自己相关并且别人也能参与进来当然是最理想的。可口可乐北极熊求合影的例子就是一个很好的宣传方式，借由简单的合成照片技术让人们有意愿去分享自己努力创作的照片。还有UJEANS的设计延续了品牌的调性就是实用，在选择你的牛仔裤喜好时也同时穿插了商品的说明，显得不那么生硬，它比较符合理由3。在我们设计一个H5页面时，很重要的一点就是站在自己的角度跳出来去看你做的东西，首先一点是你和你周围的人愿意转发分享这个东西吗？它有趣吗？它对其他人也是有用的信息吗？在做“1212陪你一二到底”的时候，我们的设计师要在最后引出有优惠券领取这个信息，前面也用用尽了节操去设计文案和人物，在此体会一下文案的重要性，它是贯穿整个H5的灵魂。第二张图上的小字“海外大牌 足不出户购遍全球”是产品想说的硬广告台词，但在小小的手机屏幕里，碎片时间中，我们必须先抓人眼球，再抓住人心，所以”身体和快递，至少一个在路上“。对于展示型和互动型H5来说最重要的还是想法。对于设计师来说，也许他们给到我们的只有几行文字，那时候前期构思这个H5的时间有可能比真正做的时间还要长。比如拍拍网全球同步发售iPhone6的这个消息要做成H5，如果我们只是做一张炫酷的图片告诉大家我们这里有iphone6分享朋友圈有可能中奖，也会有利益驱动的诱惑让人去转发分享。但通过大家的脑爆，我们将这句话变成“关于Phone6的哥德巴赫猜想”，根据测试结果得出有趣的结论，这样转发的并不是赤果果的求中奖行为，还带着有趣的插图和自己测出来的杀马特范，是不是显得更含蓄更不经意呢。这样最终转发的理由上述1，2，3好像都有了呢。今年JDC大概做了十多个H5页面，产量颇丰。 H5和app比起来优势在于开发周期时间短，传播起来有效率，并且在更新迭代的成本上要小很多。特别在游戏上，未来H5会有更多的可能性。 我们也会坚持去研究和尝试，不管是新技术，还是更有趣的营销方式，和大家共勉。谢谢大家收看，我们下期再见~~敬请期待噢！—————————————————————————————微博 @Goodmor宁
合作微信 GDMN888Goodmor宁设计微信交流群开放了！加微信号：GDMN888，拉你进群！同时也可以加微信与我沟通交流！你可以和500人一起交流，形成圈子，分享资源，收获朋友。不定期会邀请资深创意人，优秀总监，设计达人进行微信讲座。QQ总群：（未满）QQ①群：（未满）Goodmor宁(g13188)　
　文章为作者独立观点，不代表大不六文章网立场
g13188中国首个面向青年设计师群体的咨询交流平台，致力于交流设计创意、分享设计心得、探讨设计疑点，提升设计水平，共同推动新一代青年设计群体的蓬勃发展，开创中国设计事业的美好未来。热门文章最新文章g13188中国首个面向青年设计师群体的咨询交流平台，致力于交流设计创意、分享设计心得、探讨设计疑点，提升设计水平，共同推动新一代青年设计群体的蓬勃发展，开创中国设计事业的美好未来。&&&&违法和不良信息举报电话：183-
举报邮箱：
Copyright(C)2016 大不六文章网
京公网安备78老人有些困倦，将双脚伸进了炉堂取暖。
哪知气温骤降，海浪一波波往上冲刷着车辆。
声明：本文由入驻搜狐公众平台的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
　　游戏人cnyouxiren
　　解惑游戏行业，助力移动互联。点击上面蓝色“游戏人”关注，邀你步入游戏精英行列。
　　时隔一年多之后，H5游戏又又开始火了起来，前有报道腾讯或将开放H5游戏入口，后有Facebook推出Instant Games项目，首发17款游戏。一时间，H5游戏又成为大家所关注的焦点。不过，H5游戏从2015年开始，已经被洗了一波又一波，而关于目前H5游戏的市场行情，您真的了解么？近日，笔者联系到资深的H5游戏从业者，聊了以下问题。
　　H5游戏的市场机会和趋势
　　在上周的白鹭H5移动生态大会上，白鹭时代CEO陈书艺大胆预测了H5游戏市场的未来发展，他表示，当H5游戏的商业化能力得到充分释放之后，2017年H5游戏的市场规模，必然会突破30亿大关，甚至达到50亿规模。
　　而从产品发展大的方向和市场趋势来看，精品化、重度化、3D化是未来的H5游戏的趋势和方向。目前CP竞争还不够大，还不舍得砸大钱，呈观望和试水的厂商居多。
　　H5游戏的市场渠道
　　H5游戏渠道有2000多家，多数为长尾渠道。H5游戏渠道的量主要来自四个方面，首先是来自投放、买量的一些流量，占H5游戏流量入口的20%；其次是社交平台，占H5游戏流量入口的50%；浏览器，占H5游戏流量入口的20%；热门App占H5游戏流量入口的10%。
　　H5游戏的研发周期
　　H5游戏因品质以及系统的深度不同，研发时间也会有所不同，有的产品长达一年，最快也要一到两个月。当前H5游戏的主流研发时间，还是在三个月到半年不等。
　　现在H5游戏的研发模式开始流行一种新的方式，就是先开发出玩家能玩一个月的版本。把这一个月的版本做好投入市场，如果数据不错，再继续迭代升级内容。如果改不好，就直接放弃。这种做法，两三个月就能出一个版本开始上线测试。H5游戏讲的是一个快字，快速让市场去检验游戏，可以减少厂商的试错成本，也可以大幅降低厂商的研发风险和成本，也不失为一种明智之举。
　　H5的美术水平
　　从目前的市场来看，H5游戏的美术水准完全可以达到APP的水准，Layabox有多款APP水准的H5游戏案例可以作为参考。
《无尽骑士》是福州境界基于LayaAir 引擎开发的3D地下城冒险类HTML5 ARPG游戏。
基于白鹭引擎打造的3D H5游戏的DEMO
　　但是美术好不一定就是收入好，游戏的本质还是可玩性，美术好可能会让玩家有兴趣多玩一会，但是多玩一会如果还是不好玩，一样会造成用户的流失。或者说是玩家觉得很好玩，但是没有付费欲望，那就变成了留存好付费差。所以说一款优秀的游戏要看综合素质。
　　当然，在同等的竞争条件下，美术与IP等加分项，会对游戏的成败有着重要影响。
　　H5游戏如何收费
　　目前H5游戏的运营模式可参见页游分发模式，有联合发行、独立发行、联运、CPS这几种方式。从目前市场上的数据来看：
　　2014年H5游戏的收入几乎百分百来自广告收入；
　　2015年H5游戏的道具付费收入占比达到47.2%；
　　2016年H5游戏的道具付费收入占比达到68%。
　　现在收入最好的H5游戏
　　目前收入最好的是拥有《传奇》IP的两款挂机类传奇游戏，都是过两千万月流水的游戏。但是该类型当前已经饱和，同质化产品非常严重，放开思路，拓展一些新的游戏类型才是最好的出路。
　　虽然现在很多大厂开始入局H5游戏，但是笔者建议厂商不要盲目乐观，毕竟目前市场上过千万流水的产品还是少数，厂商想做精品游戏，投入成本应该也不小。
　　H5游戏的目标用户
　　H5游戏的用户主要分成两类，一类是玩过游戏的重度玩家。一类是从来没玩过游戏或不常玩游戏的轻度玩家。2015年以前是通过H5小游戏转化来的轻度小白玩家居多，经过2015年的沉淀，加上2016年游戏开始重度化，玩过游戏的重度玩家逐步开始关注并开始向H5游戏转移。对于玩家而言游戏是采用什么技术实现并不是最关键的。
　　最关键的是游戏的可玩性，视觉的震撼性，操控等体验的流畅性。当H5精品游戏增多的时候，会有更多重度玩家转移到H5游戏中来。
　　H5游戏运营
　　由于H5游戏呈现快餐化、用户付费前置的特点。白鹭时代CEO陈书艺表示H5游戏流量获取主要通过IP导入、买量，H5游戏营销重视用户传播、IP转化、广告。而蝴蝶互动CEO凌海表示，游戏上线后一定要保持版本的快速更新，这样也能做好有效运营。
　　H5游戏的入口及游戏的连续性
　　H5游戏的入口有几种，第一是游戏渠道自有的入口，这种不用担心用户找不到入口。因为无论是公众号也好，APP渠道（比如唱吧APP，饿了么APP等）也好，这些平台只是在用户经常驻留的平台打开了一个H5游戏入口链接。所以，不会找不到入口。
　　第二是推广入口，推广入口，也分两种，一种是自传播入口，比如朋友圈。微信群等。另一种是广告链接。这种入口不是常驻入固定位置的。可能会产生下次难找或找不到的情况。通常的做法是进行游戏引导。引导到有固定入口的渠道平台里。或者是引导到非常小的APP包里。H5的APP安装包可以做到只有几M，这样的话，就可以把H5推广链接做为试玩版本或是广告推广版本。做为试玩体验和转化到APP游戏或APP渠道的方式。
　　目前， H5游戏内会做：1、微端收藏 ；2、好友分享；3、微信公众号入口 ；4、二维码扫描入口；5、创建桌面快捷方式 。这样用户只要做好其中一个保存，就可以继续游戏，避免游戏连续性的断开。
　　重头渠道腾讯态度
　　在12月7日的时候，有关腾讯暂停iOS微信公众号内游戏充值的信息在游戏行业引起不小的关注。根据一般宣传的套路来讲，如果厂商要有什么大的动作，一定会在动作前，放出一点风声，而一段时间之后才会有大动作。而目前来看的结果是，H5游戏厂商开始把微信用户导入自己的平台，筛选自己的用户。
　　但从另外一面来看，对于腾讯，也是处于筛选用户及厂商的一个阶段，如果其他厂商仍然肆无忌惮的导用户，以后是否能在微信发布自己的H5游戏都是一个未知数。
　　在上周的白鹭h5生态大会上，有嘉宾表示，腾讯已邀请多家国内开发商为腾讯平台定制H5游戏产品。届时，腾讯带来的不仅有过亿量级用户群，还有新的一轮市场厮杀。腾讯目前能展示的游戏数量有限 ，情况也许一开始比较糟糕 但是对于后期的发展是有利的。
　　不管H5游戏的市场份额有多大，没有好的产品，也是没有办法从市场上分一杯羹的。避免产品同质化，拓展新的产品类型，也是需要思考的问题。不要劳人伤财，最后还一无所获。
　　点击左下角“阅读原文”查看：
　　蝴蝶互动CEO凌海：H5游戏市场规模或突破300亿
　　游戏行业精英都在关注游戏人
　　游戏人微信号：cnyouxiren（←长按复制）
　　商务合作QQ:
　　这里是游戏人俱乐部
　　我们在这里 我们都是游戏人
　　长按上方图片，识别二维码，一键加关注
　　只有1%的人知道这么玩^_^
欢迎举报抄袭、转载、暴力色情及含有欺诈和虚假信息的不良文章。
请先登录再操作
请先登录再操作
微信扫一扫分享至朋友圈
搜狐公众平台官方账号
生活时尚&搭配博主 /生活时尚自媒体 /时尚类书籍作者
搜狐网教育频道官方账号
全球最大华文占星网站-专业研究星座命理及测算服务机构
主演：黄晓明/陈乔恩/乔任梁/谢君豪/吕佳容/戚迹
主演：陈晓/陈妍希/张馨予/杨明娜/毛晓彤/孙耀琦
主演：陈键锋/李依晓/张迪/郑亦桐/张明明/何彦霓
主演：尚格?云顿/乔?弗拉尼甘/Bianca Bree
主演：艾斯?库珀/ 查宁?塔图姆/ 乔纳?希尔
baby14岁写真曝光
李冰冰向成龙撒娇争宠
李湘遭闺蜜曝光旧爱
美女模特教老板走秀
曝搬砖男神奇葩择偶观
柳岩被迫成赚钱工具
大屁小P虐心恋
匆匆那年大结局
乔杉遭粉丝骚扰
男闺蜜的尴尬初夜
客服热线：86-10-
客服邮箱：iH5首度公开10个关于H5的绝密数据!_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
iH5首度公开10个关于H5的绝密数据!
||文档简介
iH5，一个专业的HTML5工具及创作服务平台，...|
总评分0.0|
&&今​年月​初​,​网​上​到​处​流​传​腾​讯​T​G​i​d​e​a​s​发​布​了​新​的​《​移​动​页​面​用​户​行​为​报​告​》​,​但​其​实​被​传​开​的​是​去​年​的​第​一​期​报​告​。​T​G​i​d​e​a​s​自​己​应​该​也​觉​得​尴​尬​,​因​为​他​们​的​确​在月​中​旬​发​布​了​第​二​期​报​告​,​却​无​人​问​津​。
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩7页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢}