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

WebApp與NativeApp的對比

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

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

WebApp雖然在便捷性上勝出，但在入口這件最重要的事情上卻輸的徹底。過去業(yè)界一直在談論WebApp與NativeApp之爭誰勝誰負，現在看來毫無疑問是NativeApp壓倒了WebApp，手機瀏覽器也不再是移動互聯(lián)網中最重要的入口。而且智能手機時代發(fā)展到現在，用戶的使用習慣基本已經建立，個人認為WebApp再翻盤的機會也不大。

為什么還要做WebApp

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

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

怎么理解呢?就是指那些對產品體驗要求沒那么高，不在意用戶是否每天固定訪問(相對而言)，重視單個頁面的傳播率和轉化率的領域。比如媒體、微商、官網、營銷活動等等。

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

面向微信的移動網站設計

寫到這里，其實一個結論已經呼之欲出：社交網絡是滿足WebApp特性最好不過的生長土壤。社交網絡用戶基數大，傳播效應強，內容時效性短，天生就適合WebApp的使用場景，所以我們在微信中越來越多地看到別人分享的網站鏈接，以及各種花哨炫酷的H5網頁活動。

相信很多細心的產品同學應該能留意到，同一款產品，在微信上和手機瀏覽器上會是不一樣的兩個版本。那么，為什么要面向微信單獨設計一個產品版本?基于微信的WebApp和基于手機瀏覽器的WebApp有哪些差異?這也是我這篇文章要重點向大家說明的內容。

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

1.注冊登錄

瀏覽器上的WebApp只能通過郵箱或手機號注冊登錄，沒辦法像PC站點或NativeApp那樣使用第三方賬號登錄，相關的接口遲遲沒有放開。但微信內網頁可以通過授權，獲得用戶的微信ID、頭像、名稱等，從而達到免注冊登錄的效果。這一操作極大地降低了用戶進一步使用產品功能的門檻，給WebApp獲取注冊用戶帶來方便。所以在設計微信內WebApp的注冊登錄時，必須要把微信登錄這一因素考慮進去。

2.導航設計

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

尤其是瀏覽器底部操作欄，跟WebApp的一級導航放在一起，感覺非常別扭，所以WebApp采取這種導航結構的并不多見。但在應用在微信內的WebApp就不一樣，它的設計可以趨同于NativeApp，因為微信內置的瀏覽器底部沒有固定顯示的工具欄，同時，把底部導航設計得和微信APP一致，會讓用戶以為并沒有脫離微信，從而產生熟悉感和安全感。

所以我們可以經?？吹剑c擊某些公眾號的底部菜單，明明已經跳轉到某個外部WebApp上了，但感覺上還是像停留在公眾號里面。

3.頭部設計

對于一個網站來說，頭部設計是要花很大精力的，它代表了一個產品給人的第一印象。特別是網站logo，老板可能會糾結好長時間。微信內WebApp在這一點上就又不一樣了，因為微信自帶了一個頭部，同時還會顯示當前的網頁名稱。所以，一般的網站在微信內會出現兩個頭部，一個是微信的，一個是自己的，顯得冗余并浪費空間。比如唯品會：

我們再來看看京東是怎么做的：

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

用于微信的WebApp，采用無頭部設計會在視覺上感覺更清爽。參考案例：

4.分享

從瀏覽器打開的WebApp，是沒辦法把某個頁面分享到微信的。所以幾乎每個NativeApp都會在內容頁提供分享按鈕，但在對應的WebApp上，很少有這個按鈕，這也就意味著瀏覽器內的WebApp缺失傳播功能。這一點在微信上得到了彌補，微信網頁通常會提供分享操作，但這個操作并不是真的把該網頁分享出去，而是出現一個彈出層提示：點擊微信右上方的分享按鈕。

這種曲線救國的分享方式，想必大家已經司空見慣了吧。千言萬語化成一句話，都是微信給逼的啊。。

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

標題名稱：微信移動端網站使用WebApp的優(yōu)劣勢
文章位置：http://jinyejixie.com/news/262606.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供外貿網站建設、云服務器、網站制作、微信小程序、網站設計、服務器托管

廣告

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