之前做過安卓開發(fā)，最近一年一直做頁面端的產(chǎn)品，在項目進行中明星感覺到與APP相比，H5頁面設(shè)計時存在一些切膚之痛，今天想要整理一下與大家共同分享。

互動

雖然說手機的通知欄已經(jīng)被各種各樣的應(yīng)用XX了，但不可否認的是通知依然是產(chǎn)品與用戶之間進行互動的一種最為有效的方式。而H5想要實現(xiàn)與用戶的互動是一件非常困難的事情，頁面被關(guān)閉以后便再也沒有辦法主動找到用戶，因為H5頁面和用戶之間建立的是短連接，用戶一旦離開便再也無法主動觸達。

舉個例子，我在人人都是產(chǎn)品經(jīng)理這個網(wǎng)站上寫文章投稿，提交到后臺系統(tǒng)進行審核，之后就關(guān)閉了頁面等待審核結(jié)果，我很關(guān)心審核結(jié)果，需要一遍遍主動查詢審核結(jié)果，套用寫代碼的說法是一個循環(huán)查詢的邏輯，而如果是APP的話呢，可以做到主動提醒，用戶不再需要反復(fù)查詢，有了結(jié)果APP會通知你的，同樣用寫代碼的說法是一個observer-notify的邏輯，效率上有巨大的差別。

手機資源的利用

APP使用手機上的各種資源可以說是信手拈來，通訊錄、通話記錄、短信、照片、相機、日歷、地理位置等等，而H5與這些美好的資源之間永遠隔著一道墻，這道墻就是瀏覽器，H5想要訪問這些資源首先需要瀏覽器提供接口上的支持，并且效果上也只能依賴瀏覽器。

舉個例子，想要在頁面上實現(xiàn)用戶上傳照片并自主裁剪的功能，調(diào)用瀏覽器接口讓用戶選擇照片的效果并不是很好，且安卓手機系統(tǒng)本身大多提供了裁剪照片的模塊，APP可直接實現(xiàn)集成調(diào)用，但由于瀏覽器并沒有這樣的接口，頁面上需要自己實現(xiàn)。

瀏覽器的兼容性

瀏覽器的兼容性問題是HTML各個版本的標準的兼容性問題，標簽的支持、接口的支持等等。兼容性問題對于前端工程師來講一直是一個頭疼的問題，需要考慮到各個版本，而對于產(chǎn)品設(shè)計來說主要的問題是功能性的問題，比如頁面中分享的功能，有的瀏覽器支持分享給微信好友和朋友圈，有的瀏覽器就不支持，就需要分別考慮。

用戶標識

APP的用戶標識經(jīng)常采用的是IMEI（IOS是IFA)或者其他安卓標識經(jīng)過計算而得出的一串用戶唯一碼，特征是這些信息要么是與設(shè)備本身相關(guān)的，要么是與用戶本身相關(guān)的固定信息，比如IMSI，而這些信息基本上是不變的，即使APP被卸載之后重新安裝得到的用戶標識也是一樣的。

而H5則不同，H5的用戶標識是站點隨機分配的一串唯一碼，被存儲在瀏覽器的緩存中，如果緩存被清除或者瀏覽器被卸載，那么用戶就會丟失，站點再也無法找到用戶，即使同一個用戶來訪問，站點也沒有辦法識別出。對于H5來說，只有登錄才能識別用戶，只有存儲在遠端服務(wù)器上的信息才是真正保存下來的信息。

這個問題對于頁面想要實現(xiàn)個性化功能是一個不小的打擊，這里面也會存在雞生蛋蛋生雞的問題，用戶體會不到個性化帶來的好處就不會登錄，用戶不登錄就沒有辦法很好的體會個性化相關(guān)功能，或者至少說無法完整全面的去體會。

無痕模式

無痕模式對于用戶來說很好的保護了用戶的隱私，而對于頁面設(shè)計來講卻不是一件好事。如果用戶在瀏覽器上開啟了無痕模式，那么頁面對用戶的行為便丟失掉很多信息，且也沒有辦法將與用戶相關(guān)的信息保存在緩存中，除非用戶進行了登錄，否則這時的頁面就會變成對所有用戶都一樣的通用頁面，無法實現(xiàn)個性化，產(chǎn)品表現(xiàn)上就會受到很多限制。

有限的交互

APP可以實現(xiàn)復(fù)雜的交互形式，H5的交互則非常有限，而且有時候還與瀏覽器本身的交互產(chǎn)生沖突。

常見的一種情況是手指滑動，由于大部分的瀏覽器都有左右滑動實現(xiàn)頁面的前進后退功能，想要在頁面上實現(xiàn)這種手勢操作存在一些技術(shù)上的困難。有的可以解決，有的則解決起來比較困難，導(dǎo)致不得不更換實現(xiàn)方式。另外對于一些比較炫酷的交互，H5基本上是無法實現(xiàn)的。比如一些炫酷的動畫，一些復(fù)雜的交互流程和畫面切換等等，H5便變得無能為力。

在進行H5產(chǎn)品的設(shè)計時，通常交互都比較簡單，以點擊、鼠標滑動為主，動畫都比較少見。在很多頁面設(shè)計的公司或者部門里是沒有交互設(shè)計師這個職位的，交互的工作是由產(chǎn)品經(jīng)理來完成的。這也從另外一個側(cè)面說明了H5上產(chǎn)品設(shè)計中交互設(shè)計的現(xiàn)狀：因為比較簡單，所以不需要專門的交互設(shè)計師。而APP則大不相同，沒有交互設(shè)計師，工作很難開展。

有限的存儲

APP的存儲介質(zhì)是手機的存儲設(shè)備，僅受手機內(nèi)存的大小限定。而且用戶一般情況下不會刪掉，因為用戶很難分清哪些是系統(tǒng)需要的文件，哪些是程序產(chǎn)生的文件，為了避免運行錯誤，用戶一般情況下會選擇不刪。而一些清理的軟件，如果寫的比較規(guī)范的話，在APP沒有被卸載的情況下也不會刪除程序的文件。

另外一點，APP對文件、數(shù)據(jù)庫等用來保存用戶信息的介質(zhì)具有很強大的控制力，增刪改查操作很容易實現(xiàn)。而H5的存儲能力很薄弱，5M的存儲空間對于復(fù)雜的應(yīng)用來說是遠遠不夠的，一本小說都要好幾M，另外一方面，H5對于保存用戶信息的數(shù)據(jù)操作能力還不夠強大。

運行速度

APP的運行速度與手機的內(nèi)存有關(guān)，信息獲取到之后直接是在設(shè)備的內(nèi)存中運行就可以了，運行代碼已經(jīng)加載到內(nèi)存中。而H5除此之外還與瀏覽器的內(nèi)核解析速度有關(guān)：H5的運行代碼js是在遠端，從網(wǎng)絡(luò)取回來以后才可能載入瀏覽器的內(nèi)核中運行。從另外一個方面來講，在同樣沒有網(wǎng)絡(luò)的情況下，APP可以進行一些補救措施。比如展現(xiàn)上一次緩存的內(nèi)容、讓用戶檢查網(wǎng)絡(luò)的提醒、讓用戶操作其他與網(wǎng)絡(luò)無關(guān)的功能等，而H5這時遠在天邊，一點兒忙都幫不上……這給用戶的體驗感覺也是不一樣的。

關(guān)于這一點舉個例子，在地鐵上玩微信，雖然可能發(fā)不出去消息，刷不出朋友圈，但至少我還可以看看通訊錄有哪些朋友好久沒有聯(lián)系了，翻翻以前的聊天記錄回味一下，瀏覽一下之前刷出來的朋友圈朋友動態(tài)，編輯一張新的照片準備換個頭像等等。如果是H5呢，想要讀一本在線小說，頁面刷不出來就看不到任何內(nèi)容，空蕩蕩的屏幕讓你只能選擇放棄。

展望：

新的APP還在被源源不斷的開發(fā)出來，但用戶手機上保留的APP數(shù)量已經(jīng)開始出現(xiàn)萎縮的現(xiàn)象，也是，對于使用頻率不高的APP或者頁面和APP差別不大的情況下為什么要保留呢，統(tǒng)統(tǒng)在H5上完成就可以了，只保留那些經(jīng)常使用的就可以了，一個瀏覽器在手，想打開什么頁面就打開什么頁面。雖然上面列出了這么多H5對比APP所受到的限制，但H5本身具有跨平臺和版本升級部署簡單的巨大優(yōu)勢，這也是大家看好H5未來的原因吧。希望H5能夠加快發(fā)展的腳步，希望瀏覽器廠商盡早全面支持H5標準，推動H5快速向前發(fā)展。

本文由搜狗高級產(chǎn)品經(jīng)理 @李云強 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。