HTML5的切膚之痛 | 你中了哪那幾槍
之前做過安卓開發,最近一年一直做頁面端的產品,在項目進行中明星感覺到與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快速向前發展。
本文由搜狗高級產品經理 @李云強 原創發布于人人都是產品經理?,未經許可,禁止轉載。
在項目進行中明星感覺到與APP相比??明星感覺?是明顯感覺還是明星選擇?
好