H5設(shè)計(jì)需注意的幾個(gè)問題
時(shí)間:2019-09-06 02:49:44 | 來源:
一、功能的選擇和取舍
首先,在做H5開發(fā)設(shè)計(jì)的時(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):
滿足用戶對(duì)于進(jìn)程的感知。如果沒有給出刷新加載動(dòng)畫,直接給出結(jié)果,用戶會(huì)感到不知所措。
加載過的頁面不致于出現(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)用??与m然還是會(huì)有,但是嘗試也必然不會(huì)停止。
關(guān)于我們:
藍(lán)暢信息技術(shù)有限公司成功為多家世界財(cái)富500強(qiáng)企業(yè)以及其他著名品牌提供優(yōu)質(zhì)服務(wù),是您靠譜的互聯(lián)網(wǎng)開發(fā)供應(yīng)商。
服務(wù)客戶遍及北京、上海、杭州、深圳、廣州、天津、青島、南京、寧波、蘇州、無錫、廈門、重慶、西安等大中型城市及地區(qū) 為您提供:H5開發(fā),H5設(shè)計(jì),H5外包,微信開發(fā)外包,H5商城開發(fā),小程序商城開發(fā),網(wǎng)站開發(fā)外包,H5游戲開發(fā),小程序開發(fā)外包,小程序設(shè)計(jì)、APP開發(fā)外包,UI設(shè)計(jì),SEO優(yōu)化,視頻后期制作等優(yōu)質(zhì)服務(wù)
微信開發(fā)解決方案:醫(yī)藥原料貿(mào)易中的加密訂單系統(tǒng)如何保護(hù)客戶采購隱私
微信小程序如何重塑會(huì)展活動(dòng)管理?展商名錄與觀眾預(yù)約的智慧化解決方案
微信開發(fā)公司:微信積分系統(tǒng)如何助力企業(yè)實(shí)現(xiàn)綠色采購轉(zhuǎn)型?
微信開發(fā)公司:食品添加劑企業(yè)如何借力企業(yè)微信社群打造行業(yè)認(rèn)證影響力?
企業(yè)微信對(duì)接庫存系統(tǒng):汽配經(jīng)銷商的區(qū)域代理管理智能化升級(jí)介紹
微信開發(fā)賦能飼料原料批發(fā),自動(dòng)化報(bào)價(jià)系統(tǒng)如何破解大宗交易定價(jià)難題?