創(chuàng)新互聯(lián)一直以網(wǎng)站建設(shè)為主，對(duì)移動(dòng)端網(wǎng)站也就是大家常說(shuō)的WebApp這種產(chǎn)品形態(tài)產(chǎn)生了較多的認(rèn)識(shí)和感悟，在這里分享給大家。希望給在這個(gè)方向上有工作需要的同學(xué)，帶來(lái)一些幫助。

WebApp與NativeApp的對(duì)比

這已經(jīng)是老生常談了，網(wǎng)上的分析文章一搜一大堆，我相信只要是合格的移動(dòng)產(chǎn)品經(jīng)理，對(duì)這個(gè)問(wèn)題都能回答的八九不離十。所以關(guān)于WebApp與NativeApp，我只想談其中一點(diǎn)，也就是它們之間差距大的地方：NativeApp需要下載安裝，而WebApp不需要。

最開(kāi)始我以為這是WebApp的優(yōu)勢(shì)所在，后來(lái)發(fā)現(xiàn)自己真的是too young too simple。原來(lái)這世上，你在某些方面的優(yōu)勢(shì)，會(huì)成為埋藏在另一個(gè)地方的禍根。NativeApp初次使用的門檻高，但一旦下載，產(chǎn)品就能在用戶的手機(jī)桌面獲得一個(gè)穩(wěn)定的入口，只要不卸載，用戶和產(chǎn)品就有可能產(chǎn)生持續(xù)的連接，這是WebApp所辦不到的。在實(shí)際的工作中我發(fā)現(xiàn)，通過(guò)手機(jī)瀏覽器把網(wǎng)站保存在桌面這個(gè)功能，90%的用戶要么不會(huì)，要么不習(xí)慣。

WebApp雖然在便捷性上勝出，但在入口這件最重要的事情上卻輸?shù)膹氐?。過(guò)去業(yè)界一直在談?wù)揥ebApp與NativeApp之爭(zhēng)誰(shuí)勝誰(shuí)負(fù)，現(xiàn)在看來(lái)毫無(wú)疑問(wèn)是NativeApp壓倒了WebApp，手機(jī)瀏覽器也不再是移動(dòng)互聯(lián)網(wǎng)中最重要的入口。而且智能手機(jī)時(shí)代發(fā)展到現(xiàn)在，用戶的使用習(xí)慣基本已經(jīng)建立，個(gè)人認(rèn)為WebApp再翻盤的機(jī)會(huì)也不大。

為什么還要做WebApp

Web端和客戶端是互聯(lián)網(wǎng)的兩種最典型的產(chǎn)品形態(tài)，PC時(shí)代Web端更強(qiáng)盛，智能手機(jī)時(shí)代則是客戶端更主流。在不同歷史時(shí)期會(huì)出現(xiàn)一強(qiáng)一弱的格局，但誰(shuí)也沒(méi)有能力把另一方打垮、消滅，反而會(huì)相互融合，產(chǎn)生新的產(chǎn)品形態(tài)(Hybrid APP)。

所以，哪怕不是目前的主流，WebApp依然有它的生存空間，也能活的很好。這也是我目前依然從事WebApp產(chǎn)品工作的意義。那么，哪些領(lǐng)域和場(chǎng)景是適合WebApp發(fā)展的呢?我的經(jīng)驗(yàn)是：輕體驗(yàn)、輕入口、重傳播、重轉(zhuǎn)化。

怎么理解呢?就是指那些對(duì)產(chǎn)品體驗(yàn)要求沒(méi)那么高，不在意用戶是否每天固定訪問(wèn)(相對(duì)而言)，重視單個(gè)頁(yè)面的傳播率和轉(zhuǎn)化率的領(lǐng)域。比如媒體、微商、官網(wǎng)、營(yíng)銷活動(dòng)等等。

另外，很多互聯(lián)網(wǎng)公司產(chǎn)品都是橫跨多個(gè)平臺(tái)的，雖然從戰(zhàn)略意義上講，手機(jī)web端往往只能排第三，要么PC端第一，要么APP第一。但誰(shuí)不敢忽視手機(jī)web端給其他平臺(tái)產(chǎn)品帶來(lái)的傳播和引流作用。

面向微信的移動(dòng)網(wǎng)站設(shè)計(jì)

寫(xiě)到這里，其實(shí)一個(gè)結(jié)論已經(jīng)呼之欲出：社交網(wǎng)絡(luò)是滿足WebApp特性最好不過(guò)的生長(zhǎng)土壤。社交網(wǎng)絡(luò)用戶基數(shù)大，傳播效應(yīng)強(qiáng)，內(nèi)容時(shí)效性短，天生就適合WebApp的使用場(chǎng)景，所以我們?cè)谖⑿胖性絹?lái)越多地看到別人分享的網(wǎng)站鏈接，以及各種花哨炫酷的H5網(wǎng)頁(yè)活動(dòng)。

相信很多細(xì)心的產(chǎn)品同學(xué)應(yīng)該能留意到，同一款產(chǎn)品，在微信上和手機(jī)瀏覽器上會(huì)是不一樣的兩個(gè)版本。那么，為什么要面向微信單獨(dú)設(shè)計(jì)一個(gè)產(chǎn)品版本?基于微信的WebApp和基于手機(jī)瀏覽器的WebApp有哪些差異?這也是我這篇文章要重點(diǎn)向大家說(shuō)明的內(nèi)容。

微信是目前國(guó)內(nèi)移動(dòng)互聯(lián)網(wǎng)最具核心地位的一款A(yù)PP，也是大的移動(dòng)流量入口。它是如此的重要，以至于創(chuàng)業(yè)者完全有必要單獨(dú)設(shè)計(jì)出一個(gè)版本，來(lái)迎合微信的產(chǎn)品特性，或者說(shuō)是，適應(yīng)微信生態(tài)里的游戲規(guī)則。在微信內(nèi)使用WebApp，實(shí)際上就是用微信內(nèi)置的瀏覽器來(lái)打開(kāi)網(wǎng)頁(yè)，它與其他瀏覽器上的WebApp，有以下幾個(gè)方面的不同：

1.注冊(cè)登錄

瀏覽器上的WebApp只能通過(guò)郵箱或手機(jī)號(hào)注冊(cè)登錄，沒(méi)辦法像PC站點(diǎn)或NativeApp那樣使用第三方賬號(hào)登錄，相關(guān)的接口遲遲沒(méi)有放開(kāi)。但微信內(nèi)網(wǎng)頁(yè)可以通過(guò)授權(quán)，獲得用戶的微信ID、頭像、名稱等，從而達(dá)到免注冊(cè)登錄的效果。這一操作極大地降低了用戶進(jìn)一步使用產(chǎn)品功能的門檻，給WebApp獲取注冊(cè)用戶帶來(lái)方便。所以在設(shè)計(jì)微信內(nèi)WebApp的注冊(cè)登錄時(shí)，必須要把微信登錄這一因素考慮進(jìn)去。

2.導(dǎo)航設(shè)計(jì)

NativeApp通常會(huì)采用底部一級(jí)導(dǎo)航，頂部二級(jí)導(dǎo)航的信息架構(gòu)，這樣做的好處是讓一、二級(jí)導(dǎo)航在上有很好的區(qū)隔，同時(shí)底部一級(jí)導(dǎo)航更方便用戶點(diǎn)擊。但對(duì)于WebApp而言，瀏覽器窗口本身就占據(jù)了屏幕不少的空間，再把導(dǎo)航固定顯示的話，內(nèi)容展示的區(qū)域就更小了。比如淘寶WebApp在iPhone5s上就會(huì)是這樣的效果：

尤其是瀏覽器底部操作欄，跟WebApp的一級(jí)導(dǎo)航放在一起，感覺(jué)非常別扭，所以WebApp采取這種導(dǎo)航結(jié)構(gòu)的并不多見(jiàn)。但在應(yīng)用在微信內(nèi)的WebApp就不一樣，它的設(shè)計(jì)可以趨同于NativeApp，因?yàn)槲⑿艃?nèi)置的瀏覽器底部沒(méi)有固定顯示的工具欄，同時(shí)，把底部導(dǎo)航設(shè)計(jì)得和微信APP一致，會(huì)讓用戶以為并沒(méi)有脫離微信，從而產(chǎn)生熟悉感和安全感。

所以我們可以經(jīng)?？吹?，點(diǎn)擊某些公眾號(hào)的底部菜單，明明已經(jīng)跳轉(zhuǎn)到某個(gè)外部WebApp上了，但感覺(jué)上還是像停留在公眾號(hào)里面。

3.頭部設(shè)計(jì)

對(duì)于一個(gè)網(wǎng)站來(lái)說(shuō)，頭部設(shè)計(jì)是要花很大精力的，它代表了一個(gè)產(chǎn)品給人的第一印象。特別是網(wǎng)站logo，老板可能會(huì)糾結(jié)好長(zhǎng)時(shí)間。微信內(nèi)WebApp在這一點(diǎn)上就又不一樣了，因?yàn)槲⑿抛詭Я艘粋€(gè)頭部，同時(shí)還會(huì)顯示當(dāng)前的網(wǎng)頁(yè)名稱。所以，一般的網(wǎng)站在微信內(nèi)會(huì)出現(xiàn)兩個(gè)頭部，一個(gè)是微信的，一個(gè)是自己的，顯得冗余并浪費(fèi)空間。比如唯品會(huì)：

我們?cè)賮?lái)看看京東是怎么做的：

京東很巧妙地把原本屬于頭部的品牌logo、搜索框放在了banner圖上，同時(shí)加大了banner的高度。這樣既避免了雙頭部的美觀問(wèn)題，又讓banner圖更大更有沖擊力。果然還是兒子最懂爹的心事啊。

用于微信的WebApp，采用無(wú)頭部設(shè)計(jì)會(huì)在視覺(jué)上感覺(jué)更清爽。參考案例：

4.分享

從瀏覽器打開(kāi)的WebApp，是沒(méi)辦法把某個(gè)頁(yè)面分享到微信的。所以幾乎每個(gè)NativeApp都會(huì)在內(nèi)容頁(yè)提供分享按鈕，但在對(duì)應(yīng)的WebApp上，很少有這個(gè)按鈕，這也就意味著瀏覽器內(nèi)的WebApp缺失傳播功能。這一點(diǎn)在微信上得到了彌補(bǔ)，微信網(wǎng)頁(yè)通常會(huì)提供分享操作，但這個(gè)操作并不是真的把該網(wǎng)頁(yè)分享出去，而是出現(xiàn)一個(gè)彈出層提示：點(diǎn)擊微信右上方的分享按鈕。

這種曲線救國(guó)的分享方式，想必大家已經(jīng)司空見(jiàn)慣了吧。千言萬(wàn)語(yǔ)化成一句話，都是微信給逼的啊。。

WebApp在微信和手機(jī)瀏覽器上的不同表現(xiàn)形式，很多都是Web端和客戶端之間的通信不順暢造成的，這其中既有技術(shù)層面的原因，也有公司或產(chǎn)品從商業(yè)利益出發(fā)，主動(dòng)設(shè)置的障礙。技術(shù)上的問(wèn)題，到最后肯定都不是問(wèn)題。但人為的因素，就很難說(shuō)了。畢竟在互聯(lián)網(wǎng)的江湖里，什么樣的競(jìng)爭(zhēng)手段都出現(xiàn)過(guò)，而封鎖與封殺，只是其中之一罷了。

網(wǎng)站題目：微信移動(dòng)端網(wǎng)站使用WebApp的優(yōu)劣勢(shì)
當(dāng)前路徑：http://www.rwnh.cn/news6/262606.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、Google、小程序開(kāi)發(fā)、App設(shè)計(jì)、軟件開(kāi)發(fā)、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)