html5自定义教学（HTML5的切肤之痛）
html5自定义教学（HTML5的切肤之痛）而H5则不同，H5的用户标识是站点随机分配的一串唯一码，被存储在浏览器的缓存中，如果缓存被清除或者浏览器被卸载，那么用户就会丢失，站点再也无法找到用户，即使同一个用户来访问，站点也没有办法识别出。对于H5来说，只有登录才能识别用户，只有存储在远端服务器上的信息才是真正保存下来的信息。APP的用户标识经常采用的是IMEI（IOS是IFA)或者其他安卓标识经过计算而得出的一串用户唯一码，特征是这些信息要么是与设备本身相关的，要么是与用户本身相关的固定信息，比如IMSI，而这些信息基本上是不变的，即使APP被卸载之后重新安装得到的用户标识也是一样的。APP使用手机上的各种资源可以说是信手拈来，通讯录、通话记录、短信、照片、相机、日历、地理位置等等，而H5与这些美好的资源之间永远隔着一道墙，这道墙就是浏览器，H5想要访问这些资源首先需要浏览器提供接口上的支持，并且效果上也只能依赖浏览器。举个例子，
加入人人都是产品经理【起点学院】产品经理实战训练营，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快速向前发展。
本文由搜狗高级产品经理 @李云强 原创发布于人人都是产品经理 ，未经许可，禁止转载。
