自從入行以來(lái)涣易，本人的產(chǎn)品經(jīng)理工作一直以移動(dòng)端網(wǎng)站為主画机，也就是大家常說(shuō)的WebApp。接觸的時(shí)間久了新症，對(duì)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ì)
寫到這里吴超，其實(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ò)智亮，而封鎖與封殺，只是其中之一罷了点待。
有關(guān)微信WebApp設(shè)計(jì)的差異阔蛉，就先分析歸納到這里。以上我所說(shuō)的癞埠，當(dāng)然不是事情的全部状原，等我產(chǎn)生新的靈感之后，再分享給大家吧苗踪。
作者：李翔? 微信號(hào)：haoyuebinghe颠区，電商產(chǎn)品經(jīng)理? 以夢(mèng)喂馬 便得自由
