你不可能什么都得到，所以你應(yīng)該學(xué)會(huì)放棄。

最近一直在做一個(gè)app的h5版，結(jié)合其中遇到的各種問題，踩的各種坑，做出了一些總結(jié)，希望大家以后能夠順利跳過這些坑。

一、功能的選擇和取舍

首先，在做h5版的時(shí)候，你一定要明白自己想要什么，想要達(dá)到什么要的效果。結(jié)合自己的時(shí)間成本和人力成本，決定你應(yīng)該保留什么功能，去掉什么功能。如果你覺得必需都得有，不好意思，出門左拐，你不是我的目標(biāo)用戶。

再者，由于h5頁面在手機(jī)中打開會(huì)存在諸多兼容性和穩(wěn)定性問題，所以保證產(chǎn)品的流暢和輕便就顯得更加重要。因此，必需想明白保留哪些內(nèi)容，去掉哪些內(nèi)容。從而既保證用戶的使用效果，又能達(dá)到引流效果。

至于如何選擇功能，可以根據(jù)自身產(chǎn)品的定位，結(jié)合kano模型，對(duì)你的功能進(jìn)行分類，看哪些功能是滿足必備型需求，哪些是滿足期望型需求，而哪些是滿足興奮型需求。即使是h5版，滿足興奮型需求的功能還是需要優(yōu)先考慮的，這個(gè)是你產(chǎn)品的核心點(diǎn)，是你的產(chǎn)品價(jià)值的體現(xiàn)。

二、緩存優(yōu)化的問題。

這個(gè)算事一個(gè)易用性bug,之前的第一版由于沒有考慮到這個(gè)問題，結(jié)果頁面打開效果不是很理想。后來參考了一下目前市面上的h5,借鑒了以下的加載緩存優(yōu)化策略：

• 點(diǎn)擊某一個(gè)內(nèi)容的時(shí)候，內(nèi)容進(jìn)行加載，給出加載進(jìn)度條，確保下級(jí)頁面打開的時(shí)候能夠頁面完整。圖片可以是系統(tǒng)默認(rèn)圖。
• 刷新和導(dǎo)航切換的時(shí)候給出加載效果（類似于微博的刷新效果）。

這樣做的優(yōu)點(diǎn)主要有以下兩點(diǎn)：

1. 滿足用戶對(duì)于進(jìn)程的感知。如果沒有給出刷新加載動(dòng)畫，直接給出結(jié)果，用戶會(huì)感到不知所措。
2. 加載過的頁面不致于出現(xiàn)大面積的錯(cuò)落等情況，給用戶留下不好的體驗(yàn)。

三、觸控反饋的問題

觸控反饋是讓用戶感知到產(chǎn)品依然是活的最好的方式。這個(gè)在很多細(xì)節(jié)上都是需要體現(xiàn)的，例如在列表頁點(diǎn)擊的時(shí)候需要有點(diǎn)擊效果，按鈕需要有三種狀態(tài)等。當(dāng)然，這個(gè)是需要時(shí)間成本的。按照kano模型，這個(gè)就應(yīng)該屬于是期望型需求。在時(shí)間和人力陳本不允許的情況下可以適當(dāng)放棄。

四、避免返回的坑

這里主要有兩個(gè)問題：首先是在詳情頁觸發(fā)登錄操作的時(shí)候，如果采用原路返回的機(jī)制，則無法達(dá)到我們想要的返回到上一層級(jí)的效果。

再者就是app分享出去的內(nèi)容，用手機(jī)端打開,這個(gè)時(shí)候如果你點(diǎn)擊返回的話，才用原路返回方式則打開的是瀏覽器首頁，而我們想要的是能夠返回上一級(jí)，讓用戶能在這個(gè)h5上多停留一會(huì)。當(dāng)然，這個(gè)是有很多策略的，具體的可以參考第五條。

五、分享出去的頁面h5打開后怎么更好的引流

關(guān)于分享出去的頁面主要關(guān)注的點(diǎn)是頭部和尾部，中間肯定是內(nèi)容。頁面的頭部目前來看主要有以下幾種形式。

1、純內(nèi)容頁分享

類似于網(wǎng)易新聞和懂球帝，分享出去的內(nèi)容僅僅是文章的正文，附帶下載app的入口。

優(yōu)勢(shì)：簡(jiǎn)潔而統(tǒng)一

缺點(diǎn)：用戶無法了解產(chǎn)品

2、加上全局導(dǎo)航

類似于人人都說產(chǎn)品經(jīng)理分享出去的效果，加上一個(gè)全局導(dǎo)航。這樣更加便于用戶去了解產(chǎn)品。

優(yōu)勢(shì)：便于用戶了解產(chǎn)品，增加用戶停留時(shí)間

缺點(diǎn)：較為復(fù)雜

3、可以順利返回上級(jí)頁面的詳情頁

類似于騰訊手游寶，分享出去的頁面和用戶在原生上看到的效果是一致的，并且，點(diǎn)擊返回，也和在原生種一樣能夠返回上一層級(jí)。

優(yōu)點(diǎn)：便于用戶理解

缺點(diǎn)：開發(fā)難度增大

4、加上統(tǒng)一的平臺(tái)頭部，可以點(diǎn)擊進(jìn)入平臺(tái)首頁

類似于貼吧和知乎（當(dāng)然，兩者在策略上也有所不同），將分享出去的頁面統(tǒng)一加上具有平臺(tái)屬性的頭部。點(diǎn)擊后可以快速進(jìn)入平臺(tái)首頁。

優(yōu)點(diǎn)：同樣便于用戶理解，并且可以將用戶帶入到平臺(tái)首頁，增加內(nèi)容的曝光量

缺點(diǎn)：無法篩選用戶，特別是涉及到不同分組的用戶。將其帶入到平臺(tái)首頁可能并不能引起這類用戶興趣。

5、隱藏頭部

類似于興趣部落，將原生的二級(jí)導(dǎo)航去掉，其它的點(diǎn)擊效果和原生一致。

優(yōu)點(diǎn)：滿足用戶原先的操作習(xí)慣

缺點(diǎn)：用戶很難理解，實(shí)用性不強(qiáng)

6、原頁面，返回為原路徑返回

類似于微博在瀏覽器中的效果，點(diǎn)擊返回后進(jìn)入瀏覽器首頁。

優(yōu)點(diǎn)：簡(jiǎn)單

缺點(diǎn)：無法講用戶引導(dǎo)到平臺(tái)上，沒能更好的發(fā)揮h5的效能。

關(guān)于頁面結(jié)尾，大致有以下幾種形式

• 在文章尾部增加相關(guān)內(nèi)容。（這個(gè)可能是熱門話題，也可能是首頁推薦，每個(gè)平臺(tái)想要展示的不一樣，但本質(zhì)都是將更多的內(nèi)容曝光出來，從而增加用戶的停留時(shí)間。）
• 沒有任何修改，和原生中展示效果一致。
• 增加下載或者打開app的操作。

六、多看，多學(xué)，多嘗試

原本以為h5版的設(shè)計(jì)應(yīng)該不會(huì)有什么問題，但是，在實(shí)際的設(shè)計(jì)過程中還是遇到了各種問題，還好目前市面上可以借鑒的產(chǎn)品較多。因此每次遇到問題的時(shí)候，都會(huì)看很多現(xiàn)有的h5版，學(xué)習(xí)和思考別人為什么這么做，有什么優(yōu)缺點(diǎn)。

總之，很感謝這個(gè)機(jī)會(huì)讓我能夠讓自己去思考和推進(jìn)一個(gè)項(xiàng)目，將之前學(xué)到的各種理論知識(shí)在實(shí)際的過程中加以運(yùn)用。坑雖然還是會(huì)有，但是嘗試也必然不會(huì)停止。

本文由 @ 心似琉璃 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。