入人人都是產品經理【起點學院】產品經理實戰訓練營，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吧，讓我們一起創造更美好的網絡世界！