H5手機網站設計總結
你不可能什么都得到,所以你應該學會放棄。
最近一直在做一個app的h5版,結合其中遇到的各種問題,踩的各種坑,做出了一些總結,希望大家以后能夠順利跳過這些坑。
一、功能的選擇和取舍
首先,在做h5版的時候,你一定要明白自己想要什么,想要達到什么要的效果。結合自己的時間成本和人力成本,決定你應該保留什么功能,去掉什么功能。如果你覺得必需都得有,不好意思,出門左拐,你不是我的目標用戶。
再者,由于h5頁面在手機中打開會存在諸多兼容性和穩定性問題,所以保證產品的流暢和輕便就顯得更加重要。因此,必需想明白保留哪些內容,去掉哪些內容。從而既保證用戶的使用效果,又能達到引流效果。
至于如何選擇功能,可以根據自身產品的定位,結合kano模型,對你的功能進行分類,看哪些功能是滿足必備型需求,哪些是滿足期望型需求,而哪些是滿足興奮型需求。即使是h5版,滿足興奮型需求的功能還是需要優先考慮的,這個是你產品的核心點,是你的產品價值的體現。
二、緩存優化的問題。
這個算事一個易用性bug,之前的第一版由于沒有考慮到這個問題,結果頁面打開效果不是很理想。后來參考了一下目前市面上的h5,借鑒了以下的加載緩存優化策略:
- 點擊某一個內容的時候,內容進行加載,給出加載進度條,確保下級頁面打開的時候能夠頁面完整。圖片可以是系統默認圖。
- 刷新和導航切換的時候給出加載效果(類似于微博的刷新效果)。
這樣做的優點主要有以下兩點:
- 滿足用戶對于進程的感知。如果沒有給出刷新加載動畫,直接給出結果,用戶會感到不知所措。
- 加載過的頁面不致于出現大面積的錯落等情況,給用戶留下不好的體驗。
三、觸控反饋的問題
觸控反饋是讓用戶感知到產品依然是活的最好的方式。這個在很多細節上都是需要體現的,例如在列表頁點擊的時候需要有點擊效果,按鈕需要有三種狀態等。當然,這個是需要時間成本的。按照kano模型,這個就應該屬于是期望型需求。在時間和人力陳本不允許的情況下可以適當放棄。
四、避免返回的坑
這里主要有兩個問題:首先是在詳情頁觸發登錄操作的時候,如果采用原路返回的機制,則無法達到我們想要的返回到上一層級的效果。
再者就是app分享出去的內容,用手機端打開,這個時候如果你點擊返回的話,才用原路返回方式則打開的是瀏覽器首頁,而我們想要的是能夠返回上一級,讓用戶能在這個h5上多停留一會。當然,這個是有很多策略的,具體的可以參考第五條。
五、分享出去的頁面h5打開后怎么更好的引流
關于分享出去的頁面主要關注的點是頭部和尾部,中間肯定是內容。頁面的頭部目前來看主要有以下幾種形式。
1、純內容頁分享
類似于網易新聞和懂球帝,分享出去的內容僅僅是文章的正文,附帶下載app的入口。
優勢:簡潔而統一
缺點:用戶無法了解產品
2、加上全局導航
類似于人人都說產品經理分享出去的效果,加上一個全局導航。這樣更加便于用戶去了解產品。
優勢:便于用戶了解產品,增加用戶停留時間
缺點:較為復雜
3、可以順利返回上級頁面的詳情頁
類似于騰訊手游寶,分享出去的頁面和用戶在原生上看到的效果是一致的,并且,點擊返回,也和在原生種一樣能夠返回上一層級。
優點:便于用戶理解
缺點:開發難度增大
4、加上統一的平臺頭部,可以點擊進入平臺首頁
類似于貼吧和知乎(當然,兩者在策略上也有所不同),將分享出去的頁面統一加上具有平臺屬性的頭部。點擊后可以快速進入平臺首頁。
優點:同樣便于用戶理解,并且可以將用戶帶入到平臺首頁,增加內容的曝光量
缺點:無法篩選用戶,特別是涉及到不同分組的用戶。將其帶入到平臺首頁可能并不能引起這類用戶興趣。
5、隱藏頭部
類似于興趣部落,將原生的二級導航去掉,其它的點擊效果和原生一致。
優點:滿足用戶原先的操作習慣
缺點:用戶很難理解,實用性不強
6、原頁面,返回為原路徑返回
類似于微博在瀏覽器中的效果,點擊返回后進入瀏覽器首頁。
優點:簡單
缺點:無法講用戶引導到平臺上,沒能更好的發揮h5的效能。
關于頁面結尾,大致有以下幾種形式
- 在文章尾部增加相關內容。(這個可能是熱門話題,也可能是首頁推薦,每個平臺想要展示的不一樣,但本質都是將更多的內容曝光出來,從而增加用戶的停留時間。)
- 沒有任何修改,和原生中展示效果一致。
- 增加下載或者打開app的操作。
六、多看,多學,多嘗試
原本以為h5版的設計應該不會有什么問題,但是,在實際的設計過程中還是遇到了各種問題,還好目前市面上可以借鑒的產品較多。因此每次遇到問題的時候,都會看很多現有的h5版,學習和思考別人為什么這么做,有什么優缺點。
總之,很感謝這個機會讓我能夠讓自己去思考和推進一個項目,將之前學到的各種理論知識在實際的過程中加以運用??与m然還是會有,但是嘗試也必然不會停止。
本文由 @ 心似琉璃 原創發布于人人都是產品經理。未經許可,禁止轉載。
實在不解為什么在已經擁有app的情況下,要做手機網頁版改版。。。而且還要加大運營。。。而且還弱化了下載引導
正在負責app的H5版,意見很中肯。謝謝!
第四點,微信瀏覽器的返回,可以指定頁面。