入人人都是产品经理【起点学院】产品经理实战训练营，BAT产品总监手把手带你学产品

之前做过安卓开发，最近一年一直做页面端的产品，在项目进行中明星感觉到与APP相比，H5页面设计时存在一些切肤之痛，今天想要整理一下与大家共同分享。

互动

虽然说手机的通知栏已经被各种各样的应用XX了，但不可否认的是通知依然是产品与用户之间进行互动的一种最为有效的方式。而H5想要实现与用户的互动是一件非常困难的事情，页面被关闭以后便再也没有办法主动找到用户，因为H5页面和用户之间建立的是短连接，用户一旦离开便再也无法主动触达。

举个例子，我在人人都是产品经理这个网站上写文章投稿，提交到后台系统进行审核，之后就关闭了页面等待审核结果，我很关心审核结果，需要一遍遍主动查询审核结果，套用写代码的说法是一个循环查询的逻辑，而如果是APP的话呢，可以做到主动提醒，用户不再需要反复查询，有了结果APP会通知你的，同样用写代码的说法是一个observer-notify的逻辑，效率上有巨大的差别。

手机资源的利用

APP使用手机上的各种资源可以说是信手拈来，通讯录、通话记录、短信、照片、相机、日历、地理位置等等，而H5与这些美好的资源之间永远隔着一道墙，这道墙就是浏览器，H5想要访问这些资源首先需要浏览器提供接口上的支持，并且效果上也只能依赖浏览器。

举个例子，想要在页面上实现用户上传照片并自主裁剪的功能，调用浏览器接口让用户选择照片的效果并不是很好，且安卓手机系统本身大多提供了裁剪照片的模块，APP可直接实现集成调用，但由于浏览器并没有这样的接口，页面上需要自己实现。

浏览器的兼容性

浏览器的兼容性问题是HTML各个版本的标准的兼容性问题，标签的支持、接口的支持等等。兼容性问题对于前端工程师来讲一直是一个头疼的问题，需要考虑到各个版本，而对于产品设计来说主要的问题是功能性的问题，比如页面中分享的功能，有的浏览器支持分享给微信好友和朋友圈，有的浏览器就不支持，就需要分别考虑。

用户标识

APP的用户标识经常采用的是IMEI（IOS是IFA)或者其他安卓标识经过计算而得出的一串用户唯一码，特征是这些信息要么是与设备本身相关的，要么是与用户本身相关的固定信息，比如IMSI，而这些信息基本上是不变的，即使APP被卸载之后重新安装得到的用户标识也是一样的。

而H5则不同，H5的用户标识是站点随机分配的一串唯一码，被存储在浏览器的缓存中，如果缓存被清除或者浏览器被卸载，那么用户就会丢失，站点再也无法找到用户，即使同一个用户来访问，站点也没有办法识别出。对于H5来说，只有登录才能识别用户，只有存储在远端服务器上的信息才是真正保存下来的信息。

这个问题对于页面想要实现个性化功能是一个不小的打击，这里面也会存在鸡生蛋蛋生鸡的问题，用户体会不到个性化带来的好处就不会登录，用户不登录就没有办法很好的体会个性化相关功能，或者至少说无法完整全面的去体会。

无痕模式

无痕模式对于用户来说很好的保护了用户的隐私，而对于页面设计来讲却不是一件好事。如果用户在浏览器上开启了无痕模式，那么页面对用户的行为便丢失掉很多信息，且也没有办法将与用户相关的信息保存在缓存中，除非用户进行了登录，否则这时的页面就会变成对所有用户都一样的通用页面，无法实现个性化，产品表现上就会受到很多限制。

有限的交互

APP可以实现复杂的交互形式，H5的交互则非常有限，而且有时候还与浏览器本身的交互产生冲突。

常见的一种情况是手指滑动，由于大部分的浏览器都有左右滑动实现页面的前进后退功能，想要在页面上实现这种手势操作存在一些技术上的困难。有的可以解决，有的则解决起来比较困难，导致不得不更换实现方式。另外对于一些比较炫酷的交互，H5基本上是无法实现的。比如一些炫酷的动画，一些复杂的交互流程和画面切换等等，H5便变得无能为力。

在进行H5产品的设计时，通常交互都比较简单，以点击、鼠标滑动为主，动画都比较少见。在很多页面设计的公司或者部门里是没有交互设计师这个职位的，交互的工作是由产品经理来完成的。这也从另外一个侧面说明了H5上产品设计中交互设计的现状：因为比较简单，所以不需要专门的交互设计师。而APP则大不相同，没有交互设计师，工作很难开展。

有限的存储

APP的存储介质是手机的存储设备，仅受手机内存的大小限定。而且用户一般情况下不会删掉，因为用户很难分清哪些是系统需要的文件，哪些是程序产生的文件，为了避免运行错误，用户一般情况下会选择不删。而一些清理的软件，如果写的比较规范的话，在APP没有被卸载的情况下也不会删除程序的文件。

另外一点，APP对文件、数据库等用来保存用户信息的介质具有很强大的控制力，增删改查操作很容易实现。而H5的存储能力很薄弱，5M的存储空间对于复杂的应用来说是远远不够的，一本小说都要好几M，另外一方面，H5对于保存用户信息的数据操作能力还不够强大。

运行速度

APP的运行速度与手机的内存有关，信息获取到之后直接是在设备的内存中运行就可以了，运行代码已经加载到内存中。而H5除此之外还与浏览器的内核解析速度有关：H5的运行代码js是在远端，从网络取回来以后才可能载入浏览器的内核中运行。从另外一个方面来讲，在同样没有网络的情况下，APP可以进行一些补救措施。比如展现上一次缓存的内容、让用户检查网络的提醒、让用户操作其他与网络无关的功能等，而H5这时远在天边，一点儿忙都帮不上……这给用户的体验感觉也是不一样的。

关于这一点举个例子，在地铁上玩微信，虽然可能发不出去消息，刷不出朋友圈，但至少我还可以看看通讯录有哪些朋友好久没有联系了，翻翻以前的聊天记录回味一下，浏览一下之前刷出来的朋友圈朋友动态，编辑一张新的照片准备换个头像等等。如果是H5呢，想要读一本在线小说，页面刷不出来就看不到任何内容，空荡荡的屏幕让你只能选择放弃。

展望：

新的APP还在被源源不断的开发出来，但用户手机上保留的APP数量已经开始出现萎缩的现象，也是，对于使用频率不高的APP或者页面和APP差别不大的情况下为什么要保留呢，统统在H5上完成就可以了，只保留那些经常使用的就可以了，一个浏览器在手，想打开什么页面就打开什么页面。虽然上面列出了这么多H5对比APP所受到的限制，但H5本身具有跨平台和版本升级部署简单的巨大优势，这也是大家看好H5未来的原因吧。希望H5能够加快发展的脚步，希望浏览器厂商尽早全面支持H5标准，推动H5快速向前发展。

本文由搜狗高级产品经理 @李云强 原创发布于人人都是产品经理 ，未经许可，禁止转载。

H5开发者交流会北京站，H5游戏从业者分别就行业发展趋势及产品做了宣讲，掌锋科技创始人详细介绍了《5玩对战》以及5玩runtime，《5玩对战》是全球首款竞技手游平台，是Html5游戏和竞技性的结合体，那么问题来了，掌锋科技为什么会开发这样一款产品呢?

自从2014年Html5标准公布之后，Html5游戏就一直出现在各大游戏媒体，游戏峰会，论坛以及各种大型展会上，虽然热度一直不减，并且还出现过神经猫、愚公移山等火爆游戏，但是Html5游戏仍然迟迟没有真正的引发燎原之势，究其原因，就在于还没有一款产品能够真正发掘出Html5游戏的本质。

《神经猫》的火爆与短暂

神经猫是一跨神奇的Html5游戏，关于它的数据令人咋舌，动用2个人开发，计时1.5天完成，上线发布24小时访问次数86.3万，3天超1亿。从这款游戏可以看出Html5游戏的优势，就是开发周期短、试错成本低、即点即玩、简单方便，并且能够很便捷的进行病毒式传播。“神经猫”的走红另外一个原因就是顺应了这个碎片化时代人们对于流水线小游戏的需求和游戏本身具备的“社交”功能，也就是抓住了忘记为了“晒”而玩，不是为了玩而玩的痛点。

随着大范围的传播，神经猫的弊端也展露无疑，那就是Html5游戏的代码易破解，由于代码安全性低，导致神经猫迅速被山寨成其他游戏分走了大批的用户。同时微信也枪打出头鸟，限制了神经猫的分享，加上游戏本身可玩性低，使得神经猫成为了Html5游戏的一个传说。神经猫的最大意义就是让业界知道Html5游戏是可以有发展和传播空间的。

《愚公移山》带来盈利和希望

在神经猫之后，很多公司开始效仿其在微信中进行病毒式传播的方法，于是各种Html5小游戏陆陆续续在朋友圈上火热起来，有的Html5游戏甚至可以达到一天千万独立IP的访问数据。Html5游戏借助社交媒体传播的爆发力让不少小型手游开发者收到了鼓舞。

但手游开发商是不满足于访问数据的，他们在乎的是Html5如何变现，这时，《愚公移山》出现了，这款Html5游戏达到了月入百万的流水，纵使不多，这个消息仍然给了众多游戏厂商新的希望，证实了H5游戏并不是完全没有赢利点。《愚公移山》借助白鹭引擎使得游戏体验与原生app游戏别无二致，解决了Html5游戏的弊端运行效率的问题。从愚公移山可以看出Html5从单纯的小游戏，到添加养成要素，再到道具付费模式的推出的整个过程，它是有不断进步的。

《5玩对战》深度挖掘Html5游戏本质

在传播和变现问题都得到解决的时候，问题来了，游戏的留存和转化该如何提高?Html5游戏最大的优势就是即点即玩，但这同时也是其致命缺点，如果玩家注意力被转移就可以直接退出Html5游戏，为了解决这个问题，《5玩对战》突破了Html5游戏的简单玩法，它将核心玩法立足于手游端从未出现却有极大需求的竞技社交。神经猫的爆红让大家看到了比拼分数所带来的感染力和传播效应，5玩对战也借鉴了这一点，充分利用人们的求胜心理，挑战对手，获取商城的胜利奖励。通过社交邀请好友挑战达成二次或者多次传播，这是5玩对战的“战术”。

除了竞技社交之王，5玩对战也接入了具有支付、统计功能的5玩runtime，使游戏的运行效率加速到60帧每秒。在目睹了神经猫的山寨坑之后5玩对战不愿再重蹈覆辙，以往在浏览器运行的H5游戏代码保密脆弱，只要打开浏览器的调试工具就可以看到游戏源码， 5玩runtime让5玩对战的游戏时刻处于加密状态，保护开发者创作。开发问题在技术上的壁垒已经打破，而随着wifi万能钥匙，猎豹等浏览器甚至是线下资源的支持，让入口问题迎刃而解。

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

纵观Html5游戏全局，Html5游戏已经可以做到与手机端有一样的品质，加上Html5游戏本身具有的优点，伴随技术的革新，一定会涌现更多的重度Html5游戏，并且衍生出更多新的运营模式。未来，Html5游戏所具备的发展空间一定远超原生游戏市场，我们拭目以待吧!

90%玩家直呼看得过瘾，玩得更过瘾!更多资讯，更多精彩，请关注5玩微信公众号：

five-game(长按复制)

TML5，作为互联网发展的一个里程碑，不仅推动了网页设计和开发的变革，也为用户带来了更为丰富和互动的体验。以下是现在就使用HTML5的十大原因，它们充分展示了HTML5在现代网络世界中的优势和应用价值。

一、更强大的语义化标签

HTML5引入了更多的语义化标签，如`<header>`、`<footer>`、`<article>`、`<section>`等，这些标签使得网页结构更加清晰，有助于搜索引擎优化（SEO），提高网站的可访问性和可读性。同时，语义化标签也为开发者提供了更丰富的选择，能够更好地表达网页的内容和结构。

二、跨平台兼容性

HTML5具有出色的跨平台兼容性，能够在各种浏览器和设备上流畅运行。无论是桌面电脑、移动设备还是平板电脑，HTML5都能提供一致的浏览体验。这为开发者提供了更广阔的舞台，使得他们能够开发出适应各种设备和浏览器的网页应用。

三、多媒体支持

HTML5内置了对音频和视频的支持，无需依赖第三方插件（如Flash）即可播放。这不仅提高了网页的加载速度，还减少了因插件兼容性问题而导致的浏览障碍。此外，HTML5还支持更丰富的媒体格式和更灵活的播放控制，为用户带来了更为丰富的视听体验。

四、图形和动画效果

HTML5通过Canvas和SVG等API提供了强大的图形和动画支持。开发者可以使用这些API创建复杂的图形和动画效果，提升网页的视觉吸引力和交互性。此外，HTML5还支持WebGL技术，使得开发者能够在网页上实现3D图形和动画效果，为用户带来更为震撼的视觉体验。

五、离线应用

HTML5引入了Application Cache（应用程序缓存）机制，使得网页应用能够在用户设备上缓存资源，实现离线访问。这为用户提供了更为便捷的使用体验，即使在网络不稳定或无法连接的情况下，用户也能正常访问和使用网页应用。

六、更好的表单功能

HTML5对表单元素进行了增强，提供了更多的输入类型（如日期、时间、电子邮件等）和验证功能。这使得表单输入更加直观和方便，同时也提高了数据的准确性和安全性。此外，HTML5还支持表单的自动完成和保存功能，为用户提供了更为人性化的使用体验。

七、更丰富的交互体验

HTML5通过拖放API、Web Workers等技术提供了更为丰富的交互体验。开发者可以使用这些技术实现拖放、多线程等复杂的交互功能，为用户带来更为流畅和自然的网页操作体验。同时，HTML5还支持WebSocket等实时通信技术，使得网页应用能够实现更为高效的实时交互和数据传输。

八、更好的可访问性

HTML5注重网页的可访问性，提供了更多的辅助技术（如屏幕阅读器）支持。这使得网页内容能够更好地被残障人士所访问和使用，提高了网页的社会价值和普适性。此外，HTML5还支持更多的辅助功能（如标题、描述等），使得网页内容更加易于理解和记忆。

九、安全性提升

HTML5在安全性方面进行了诸多改进，如引入了更严格的跨域策略、防止跨站脚本攻击（XSS）的Content Security Policy（CSP）等。这些措施有效地提高了网页应用的安全性，保护了用户数据和隐私不受侵犯。同时，HTML5还支持更安全的加密和认证机制，使得网页应用能够更好地保护用户的账号和密码等重要信息。

十、面向未来的技术趋势

HTML5作为现代网络技术的代表，不仅具备上述诸多优势，还代表了未来网络技术的发展趋势。随着移动互联网、物联网、人工智能等技术的不断发展，HTML5将在更多领域得到应用和发展。因此，学习和掌握HTML5技术对于未来的职业发展具有重要意义。

总之，HTML5凭借其强大的功能、跨平台兼容性、丰富的多媒体支持、图形和动画效果、离线应用、更好的表单功能、丰富的交互体验、更好的可访问性、安全性提升以及面向未来的技术趋势等优势，成为了现代网络世界中不可或缺的一部分。现在就使用HTML5吧，让我们一起创造更美好的网络世界！