最近一直在做一個(gè)app的h5版，結(jié)合其中遇到的各種問(wèn)題，踩的各種坑，做出了一些總結(jié)，希望大家以后能夠順利跳過(guò)這些坑。
一、功能的選擇和取舍
首先，在做h5版的時(shí)候，你一定要明白自己想要什么，想要達(dá)到什么要的效果。結(jié)合自己的時(shí)間成本和人力成本，決定你應(yīng)該保留什么功能，去掉什么功能。如果你覺(jué)得必需都得有，不好意思，出門左拐，你不是我的目標(biāo)用戶。
再者，由于h5頁(yè)面在手機(jī)中打開(kāi)會(huì)存在諸多兼容性和穩(wěn)定性問(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)化的問(wèn)題。
這個(gè)算事一個(gè)易用性bug,之前的第一版由于沒(méi)有考慮到這個(gè)問(wèn)題，結(jié)果頁(yè)面打開(kāi)效果不是很理想。后來(lái)參考了一下目前市面上的h5,借鑒了以下的加載緩存優(yōu)化策略：
點(diǎn)擊某一個(gè)內(nèi)容的時(shí)候，內(nèi)容進(jìn)行加載，給出加載進(jìn)度條，確保下級(jí)頁(yè)面打開(kāi)的時(shí)候能夠頁(yè)面完整。圖片可以是系統(tǒng)默認(rèn)圖。
刷新和導(dǎo)航切換的時(shí)候給出加載效果（類似于微博的刷新效果）。
這樣做的優(yōu)點(diǎn)主要有以下兩點(diǎn)：
滿足用戶對(duì)于進(jìn)程的感知。如果沒(méi)有給出刷新加載動(dòng)畫(huà)，直接給出結(jié)果，用戶會(huì)感到不知所措。
加載過(guò)的頁(yè)面不致于出現(xiàn)大面積的錯(cuò)落等情況，給用戶留下不好的體驗(yàn)。
三、觸控反饋的問(wèn)題
觸控反饋是讓用戶感知到產(chǎn)品依然是活的最好的方式。這個(gè)在很多細(xì)節(jié)上都是需要體現(xiàn)的，例如在列表頁(yè)點(diǎn)擊的時(shí)候需要有點(diǎn)擊效果，按鈕需要有三種狀態(tài)等。當(dāng)然，這個(gè)是需要時(shí)間成本的。按照kano模型，這個(gè)就應(yīng)該屬于是期望型需求。在時(shí)間和人力陳本不允許的情況下可以適當(dāng)放棄。
四、避免返回的坑
這里主要有兩個(gè)問(wèn)題：首先是在詳情頁(yè)觸發(fā)登錄操作的時(shí)候，如果采用原路返回的機(jī)制，則無(wú)法達(dá)到我們想要的返回到上一層級(jí)的效果。
再者就是app分享出去的內(nèi)容，用手機(jī)端打開(kāi),這個(gè)時(shí)候如果你點(diǎn)擊返回的話，才用原路返回方式則打開(kāi)的是瀏覽器首頁(yè)，而我們想要的是能夠返回上一級(jí)，讓用戶能在這個(gè)h5上多停留一會(huì)。當(dāng)然，這個(gè)是有很多策略的，具體的可以參考第五條。
五、分享出去的頁(yè)面h5打開(kāi)后怎么更好的引流
關(guān)于分享出去的頁(yè)面主要關(guān)注的點(diǎn)是頭部和尾部，中間肯定是內(nèi)容。頁(yè)面的頭部目前來(lái)看主要有以下幾種形式。
1、純內(nèi)容頁(yè)分享
類似于網(wǎng)易新聞和懂球帝，分享出去的內(nèi)容僅僅是文章的正文，附帶下載app的入口。
優(yōu)勢(shì)：簡(jiǎn)潔而統(tǒng)一
缺點(diǎn)：用戶無(wú)法了解產(chǎn)品
2、加上全局導(dǎo)航
類似于人人都說(shuō)產(chǎn)品經(jīng)理分享出去的效果，加上一個(gè)全局導(dǎo)航。這樣更加便于用戶去了解產(chǎn)品。
優(yōu)勢(shì)：便于用戶了解產(chǎn)品，增加用戶停留時(shí)間
缺點(diǎn)：較為復(fù)雜
3、可以順利返回上級(jí)頁(yè)面的詳情頁(yè)
類似于騰訊手游寶，分享出去的頁(yè)面和用戶在原生上看到的效果是一致的，并且，點(diǎn)擊返回，也和在原生種一樣能夠返回上一層級(jí)。
優(yōu)點(diǎn)：便于用戶理解
缺點(diǎn)：開(kāi)發(fā)難度增大
4、加上統(tǒng)一的平臺(tái)頭部，可以點(diǎn)擊進(jìn)入平臺(tái)首頁(yè)
類似于貼吧和知乎（當(dāng)然，兩者在策略上也有所不同），將分享出去的頁(yè)面統(tǒng)一加上具有平臺(tái)屬性的頭部。點(diǎn)擊后可以快速進(jìn)入平臺(tái)首頁(yè)。
優(yōu)點(diǎn)：同樣便于用戶理解，并且可以將用戶帶入到平臺(tái)首頁(yè)，增加內(nèi)容的曝光量
缺點(diǎn)：無(wú)法篩選用戶，特別是涉及到不同分組的用戶。將其帶入到平臺(tái)首頁(yè)可能并不能引起這類用戶興趣。
5、隱藏頭部
類似于興趣部落，將原生的二級(jí)導(dǎo)航去掉，其它的點(diǎn)擊效果和原生一致。
優(yōu)點(diǎn)：滿足用戶原先的操作習(xí)慣
缺點(diǎn)：用戶很難理解，實(shí)用性不強(qiáng)
6、原頁(yè)面，返回為原路徑返回
類似于微博在瀏覽器中的效果，點(diǎn)擊返回后進(jìn)入瀏覽器首頁(yè)。
優(yōu)點(diǎn)：簡(jiǎn)單
缺點(diǎn)：無(wú)法講用戶引導(dǎo)到平臺(tái)上，沒(méi)能更好的發(fā)揮h5的效能。
關(guān)于頁(yè)面結(jié)尾，大致有以下幾種形式
在文章尾部增加相關(guān)內(nèi)容。（這個(gè)可能是熱門話題，也可能是首頁(yè)推薦，每個(gè)平臺(tái)想要展示的不一樣，但本質(zhì)都是將更多的內(nèi)容曝光出來(lái)，從而增加用戶的停留時(shí)間。）
沒(méi)有任何修改，和原生中展示效果一致。
增加下載或者打開(kāi)app的操作。
六、多看，多學(xué)，多嘗試
原本以為h5版的設(shè)計(jì)應(yīng)該不會(huì)有什么問(wèn)題，但是，在實(shí)際的設(shè)計(jì)過(guò)程中還是遇到了各種問(wèn)題，還好目前市面上可以借鑒的產(chǎn)品較多。因此每次遇到問(wèn)題的時(shí)候，都會(huì)看很多現(xiàn)有的h5版，學(xué)習(xí)和思考別人為什么這么做，有什么優(yōu)缺點(diǎn)。
總之，很感謝這個(gè)機(jī)會(huì)讓我能夠讓自己去思考和推進(jìn)一個(gè)項(xiàng)目，將之前學(xué)到的各種理論知識(shí)在實(shí)際的過(guò)程中加以運(yùn)用?？与m然還是會(huì)有，但是嘗試也必然不會(huì)停止。