? ? ? ? H5與原生本是計算機鄰域的專業(yè)名詞雌贱，是程序猿之間的口頭禪庄新，但是作為一個產(chǎn)品汪去思考這些問題，也是有必要的澄峰。不一樣的視角绕德，才有不一樣的價值。

如何把技術(shù)現(xiàn)實翻譯成用戶語言摊阀？

? ? ? ? 程序猿和產(chǎn)品汪之間就如同自然界的生物隔絕一樣耻蛇，兩種生物說著不一樣的語言踪蹬，但兩者又必須完成同一件事情，協(xié)同高效地工作臣咖；這就要保證兩者之間對同一句話跃捣，有著落地意義上完全一樣的理解，產(chǎn)品汪每天都要把業(yè)務(wù)邏輯翻譯成技術(shù)語言夺蛇，這也是很多互聯(lián)網(wǎng)公司偏向于招有技術(shù)背景的產(chǎn)品的原因之一疚漆；關(guān)于產(chǎn)品崗究竟是技術(shù)理解重要還是業(yè)務(wù)能力/用戶理解重要？這個問題就不在這里討論刁赦；我想強調(diào)的是娶聘，如何把技術(shù)現(xiàn)實翻譯成用戶語言？從一個產(chǎn)品層面甚脉，去思考技術(shù)現(xiàn)實對于用戶摸得著看得見的利與弊丸升！最大可能上把用戶體驗這個抽象的名詞定義到極致；

我口中的H5是你口中的H5嗎牺氨？

? ? ? ?現(xiàn)在不同業(yè)務(wù)的互聯(lián)網(wǎng)產(chǎn)品為了產(chǎn)品的用戶體驗和流量狡耻，在有能力的情況下都會做原生和H5開發(fā)；原生開發(fā)指的是基于系統(tǒng)語言的軟件開發(fā)猴凹，手機內(nèi)通過安裝包安裝的應(yīng)用基本都是原生開發(fā)夷狰，當(dāng)然原生app里偶爾也會有H5頁面；H5一詞估計大家都不陌生郊霎，畢竟現(xiàn)在已經(jīng)是一個被用濫的詞沼头，這個詞在大眾口中的意義遠(yuǎn)超出它本身，絕大多數(shù)人口中的H5指的是那些酷炫的小頁面书劝，依然記得騰訊和故宮合作和H5頁面在朋友圈刷屏的時刻(故宮H5)进倍，之后H5就成了這些酷炫的小頁面的代名詞；而H5是一種技術(shù)標(biāo)準(zhǔn)而非技術(shù)庄撮，這種標(biāo)準(zhǔn)需要瀏覽器廠商做支持才能實現(xiàn)；H5一詞剛火起來時毙籽，是網(wǎng)頁技術(shù)的發(fā)展擺脫了插件的局限性洞斯，能夠通過網(wǎng)頁代碼實現(xiàn)頁面在無插件支持下預(yù)加載頁面素材，播放音頻等等功能坑赡，能夠支持用戶和頁面之間更高級的交互烙如；本人亦非碼農(nóng)，到此為止毅否，就不再這里不懂裝懂了亚铁！

原生vsH5孰利孰弊？

? ? ? 最近在做一個項目螟加，原生與H5開發(fā)同時進(jìn)行徘溢，從前端頁面處理吞琐，到后端邏輯設(shè)計，在技術(shù)現(xiàn)實下然爆，有兩套不同的標(biāo)準(zhǔn)站粟；踩了很多坑，最后還是把項目啃上線了曾雕。原生開發(fā)的app在頁面交互奴烙、數(shù)據(jù)穩(wěn)定性安全性、接口安全性剖张、功能強大性切诀、用戶體驗方面有著天然的優(yōu)勢；在當(dāng)前普遍多包分發(fā)趨勢現(xiàn)狀下搔弄，更方便產(chǎn)品迭代和運營幅虑。但用戶接觸的成本較高，用戶必須通過安裝包才能使用肯污，不便于初級用戶翘单、非強需求用戶使用；H5頁面用戶可以通過多種場景使用蹦渣，各種瀏覽器哄芜，微信、QQ柬唯、微博认臊、第三方app，用戶只要能夠找到訪問鏈接锄奢，就能在不同平臺上使用失晴；這滿足了用戶用后即走的習(xí)慣。同時便于與不同的合作方合作拘央，獲取寶貴的流量入口涂屁；也可以依據(jù)不同平臺用戶特征有交集的地方做精細(xì)化運營推廣。但由于在不同平臺上使用灰伟，就要與各平臺現(xiàn)有技術(shù)現(xiàn)實結(jié)合拆又，而用戶打開鏈接的渠道很難預(yù)估，所以想做到與其他平臺百分百兼容是不可能的栏账，所以這就需要各平臺之間共用一套標(biāo)準(zhǔn)√澹現(xiàn)在的H5標(biāo)準(zhǔn)還是一種前端意義上的標(biāo)準(zhǔn)，跨平臺使用還有很大局限性挡爵，阿里現(xiàn)在在進(jìn)行的一項APPos的研究竖般，目的就在于能夠使阿里的產(chǎn)品能夠在不同的第三方合作平臺使用，而建構(gòu)一套聯(lián)合登錄的技術(shù)標(biāo)準(zhǔn)茶鹃，當(dāng)然這在某種程度上會涉及用戶信息安全風(fēng)險涣雕。對于一個產(chǎn)品而言艰亮，H5是大勢所趨，但原生開發(fā)在當(dāng)前技術(shù)現(xiàn)實下是不可替代的胞谭。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 原生與H5開發(fā)功能差異點

如何去優(yōu)化H5開發(fā)跨平臺實現(xiàn)的功能垃杖？

一.頁面樣式

1.交互手勢

? ? ? ?APP端H5頁面在pc設(shè)備打開時，是無法通過觸屏操作丈屹，現(xiàn)在僅有極少數(shù)pc設(shè)備支持觸屏操作调俘；當(dāng)pc端打開H5頁面時，你的鼠標(biāo)左鍵就相當(dāng)于你的一根手指旺垒，所以在設(shè)計H5頁面高頻核心功能時彩库，不要做復(fù)雜的交互手勢，不要設(shè)計雙指操作手勢先蒋；當(dāng)然用戶通過PC設(shè)備訪問APPH5頁面的情況還是比較少見的骇钦；

2.彈窗

? ? ? H5開發(fā)中，瀏覽器的返回與前進(jìn)無法控制竞漾；當(dāng)原生開發(fā)彈窗型強提示時眯搭，用戶是無法跳轉(zhuǎn)頁面，操作頁面功能按鈕的业岁，這避免了用戶出現(xiàn)異常操作的可能鳞仙；在H5頁面設(shè)計中，用戶可以通過瀏覽器返回上一級操作笔时，跳轉(zhuǎn)頁面棍好，如果彈窗的收起條件，是點擊頁面其他區(qū)域允耿，這就會出現(xiàn)彈窗出現(xiàn)在錯誤頁面的現(xiàn)象借笙；

3.單頁面與多頁面

? ? ? ?在把業(yè)務(wù)流程可視化為頁面流程時，究竟是拆分成多個頁面(多個URL)還是單個頁面(單個URL)呢较锡？還是通過單個頁面的多種狀態(tài)實現(xiàn)呢业稼？在原生開發(fā)中使用系統(tǒng)返回鍵能夠指定在同一頁面多種狀態(tài)，和不同URL之間的跳轉(zhuǎn)蚂蕴，在某些頁面也可以禁用返回鍵低散，或指定跳轉(zhuǎn)到特定URL；但在H5開發(fā)中掂墓，返回鍵不可禁用谦纱，不能更改瀏覽器歷史記錄看成。這就要求在H5開發(fā)中君编，把業(yè)務(wù)流程不可中斷，不可逆的頁面流程處理成單個頁面的多種狀態(tài)(單個URL)川慌，這樣既能保證頁面的信息承載量合理吃嘿，同時前端頁面流程又不可逆祠乃；當(dāng)用戶中斷任務(wù)流程時，必須重新開始完成任務(wù)兑燥。這樣可以避免后端接收重復(fù)的數(shù)據(jù)請求和提交亮瓷，如在充值流程和支付流程中，在生成訂單號后降瞳，頁面信息通過接口校驗時嘱支，任務(wù)成功時，用戶不會重復(fù)支付挣饥。單頁面適合業(yè)務(wù)流程不可逆除师，信息校驗程度高頁面流程。但僅僅依靠前端技術(shù)限制用戶誤操作是不安全的扔枫，后端攔截必不可少汛聚。多頁面，適合用戶輸入信息不需要校驗短荐，用戶需要重復(fù)修改的頁面流程設(shè)計倚舀。合理設(shè)計單頁面和多頁面，能夠保證用戶體驗和開發(fā)進(jìn)度上的最優(yōu)化忍宋。

4.頂欄

? ? ? ?在H5設(shè)計中痕貌，因為APP需要在不同用戶場景下的第三方平臺打開，而第三方平臺(以微信讶踪、QQ芯侥、微博為主)，第三方APP內(nèi)頂欄除返回鍵外不可以操作乳讥。除非第三方平臺為你的產(chǎn)品單獨設(shè)計操作按鈕柱查，這就要求你們和第三方平臺有很強的業(yè)務(wù)合作關(guān)系。所以在H5頁面設(shè)計時云石，合理布局你的頁面功能按鈕是很有必要的唉工。功能按鈕置頂和置底的處理，是依據(jù)頁面信息的承載量和重要性來設(shè)計的汹忠，如頁面信息較多且在底部具有非必填信息時淋硝，一般會把提交等功能按鈕放在頂部；這涉及到頂欄功能按鈕和頁面底部功能按鈕的布局差異宽菜，在這里就不再贅述谣膳。?

二.頁面導(dǎo)航

? ? ? ?頂欄返回鍵、系統(tǒng)返回鍵铅乡、頁面右劃返回上一級继谚、特殊導(dǎo)航入口；是app設(shè)計中最常見的基礎(chǔ)性功能阵幸，要保證使用不同的基礎(chǔ)性功能時花履，導(dǎo)航邏輯必須完全一致芽世，不然會對用戶理解app造成很大影響；在原生開發(fā)中這些功能基本都具備诡壁，且處理容易效果好济瓢；在H5中基本不設(shè)計頁面右劃返回上一級功能1.這會與第三方平臺的右劃返回上一級功能沖突2.在特點頁面我們不希望用戶放棄任務(wù)3.該功能在流程不可逆頁面都需要特殊處理且實現(xiàn)難道大。系統(tǒng)返回鍵只能返回上一級URL且不可被禁用妹卿，這一問題包括京東/淘寶處理的也不是很好 旺矾；微信中頂欄返回鍵操作后直接返回第三方平臺頁面，支付寶中頂欄就同時返回上一級和返回第三方平臺操作夺克，這一點差異對用戶體驗有極大的影響宠漩，差異也是支付寶和微信對平臺不同的定位和理解不同造成的；

三.網(wǎng)絡(luò)處理

? ? ? ?H5開發(fā)的頁面是通過加載顯示的懊直，如果出現(xiàn)無網(wǎng)絡(luò)扒吁，和網(wǎng)絡(luò)異常的狀況，第三方平臺的網(wǎng)絡(luò)異常處理有可能會和app設(shè)計的網(wǎng)絡(luò)狀態(tài)處理頁面沖突室囊；原生開發(fā)的頁面網(wǎng)絡(luò)異常是預(yù)設(shè)到安裝包內(nèi)的雕崩，H5頁面在網(wǎng)絡(luò)異常時是無法加載網(wǎng)絡(luò)異常頁面的；原生開發(fā)用戶能夠在無網(wǎng)絡(luò)狀態(tài)下訪問緩存數(shù)據(jù)融撞，和固定樣式頁面盼铁；H5中用戶則完全失去對app的操作控制權(quán)；

四.數(shù)據(jù)緩存

? ? ? ?H5是加載顯示頁面尝偎，優(yōu)點在于頁面更新迭代不需要發(fā)包可隨時替換饶火；缺點在于打開環(huán)境不確定，緩存會經(jīng)常被第三方平臺清理致扯，這就導(dǎo)致了兩個問題1.非聯(lián)合登錄情況下肤寝，用戶會頻繁退出2.頁面在網(wǎng)絡(luò)環(huán)境差時，頁面會出現(xiàn)大面積不可訪問和數(shù)據(jù)缺失的情況抖僵；（現(xiàn)在用戶的網(wǎng)絡(luò)環(huán)境都還不錯鲤看，不過還有很多群體設(shè)備和網(wǎng)絡(luò)更不上，你要對你們產(chǎn)品的使用者的設(shè)備現(xiàn)狀有基本的了解）在原生開發(fā)中耍群，數(shù)據(jù)緩存的穩(wěn)定性和安全性就會好很多义桂；

五.數(shù)據(jù)加載

? ? ? 下拉刷新功能一般在數(shù)據(jù)變動比較大的頁面出現(xiàn)，在數(shù)據(jù)過期蹈垢、數(shù)據(jù)更新快慷吊、用戶對當(dāng)前頁面信息不感興趣時，需要使用該功能曹抬。一般在內(nèi)容平臺該功能比較重要溉瓶，不僅做下拉刷新，抖音、內(nèi)涵段子等還會在頁面做獨立刷新按鈕嚷闭；在H5頁面中，刷新功能在瀏覽器中會出現(xiàn)功能重疊赖临，在微信胞锰、支付寶等第三方平臺也會出現(xiàn)沖突下拉功能沖突的情況；在原生開發(fā)中就不會出現(xiàn)這類問題兢榨；設(shè)計一個好的下拉刷新交互效果和邏輯是一件很有挑戰(zhàn)也很有意思的事情嗅榕，在以后文章中會和大家探討這個問題；

? ? ? ?在做下拉刷新功能時吵聪，需要后端做很強大的功能支持凌那，數(shù)據(jù)過期，導(dǎo)致接口崩潰吟逝，app閃退的情況在很多app中都發(fā)生過帽蝶；排查和解決這類問題難度很大，且app必須重裝后块攒，才能使用励稳，這就要求我們在不必要的頁面不要做下拉刷新操作；

六.分享功能

? ? ? 在原生開發(fā)中囱井，分享功能能夠幫助將app信息驹尼，特定H5頁面分享到不同平臺，甚至可以做到在第三方平臺直接使用庞呕；且支持分享到多個平臺新翎；在H5中僅可以在第三方平臺內(nèi)部流通，這就是很多H5開發(fā)沒有分享功能的原因住练；

七.快捷登錄

? ? ? ?快捷登錄功能與分享功能一致地啰，原生開發(fā)支持多平臺登錄，H5在第三方平臺打開時讲逛，僅可使用該平臺快捷登錄功能髓绽。快捷登錄涉及到用戶名妆绞、昵稱等用戶信息調(diào)用問題顺呕，各平臺有各自的規(guī)則和邏輯，產(chǎn)品需要設(shè)計一個好的能夠和多端平 臺兼容的調(diào)用顯示邏輯括饶；有些平臺還會涉及多個用戶名同時存在的情況株茶；

? ? ? ? 用戶可能存在第三方平臺未安裝、未運行图焰、未注冊等情況启盛，許多創(chuàng)業(yè)小公司在ios發(fā)包時踩過很多坑，這類問題需要前期就做出非常嚴(yán)謹(jǐn)?shù)倪壿嫞槐苊赓~號系統(tǒng)的紊亂僵闯，產(chǎn)生多米諾骨牌效應(yīng)卧抗；好的邏輯在前期就要考慮和可能合作的平臺賬號系統(tǒng)打通的問題；

八.接口暴露

? ? ? ?在登錄注冊鳖粟、更換手機號社裆、忘記密碼、一些涉及銀行卡充值提現(xiàn)的業(yè)務(wù)流程中向图，輸手機號并校驗短信驗證碼是必不可少的功能泳秀；為了業(yè)務(wù)的安全性考慮各平臺都會做短信防刷，短信防刷是不可能做到百分百天衣無縫的榄攀。在原生開發(fā)中接口不會暴露嗜傅，短信被刷的風(fēng)險小得多；在H5開發(fā)中檩赢，接口暴露吕嘀，短信被刷的風(fēng)險就大一點，技術(shù)難度更姓曷鳌币他；單純依靠參數(shù)來做用戶身份的唯一性識別，安全程度是不夠憔狞，現(xiàn)在大多數(shù)平臺都是將參數(shù)和圖形驗證碼結(jié)合來做短信防刷的蝴悉。對于一些競爭環(huán)境比較好的業(yè)務(wù)，為了用戶體驗考慮瘾敢，也不必做圖形驗證碼功能拍冠；如果你的業(yè)務(wù)為了安全性考慮，確定必須做短信防刷功能簇抵；一個好的防刷邏輯至關(guān)重要庆杜，不然用戶的使用體驗就會大打折扣；12306的接口防刷是做的最安全的碟摆，用戶體驗也是最無語晃财，春節(jié)搶票時，大家肯定都深有體會典蜕！

? ? ? ?1.平臺短信驗證碼和圖形驗證碼校驗接口和注冊接口是獨立分開的断盛；在短信防刷時，可以依靠圖形驗證碼識別是否發(fā)送短信的請求是否是人工輸入愉舔；但注冊沒有帶圖形驗證碼钢猛，這就導(dǎo)致可以通過機器重復(fù)試錯短信驗證碼，冒用別人手機號注冊的風(fēng)險轩缤；京東在這一問題的處理上是一點出現(xiàn)此類錯誤請求命迈，彈窗阻止用戶操作贩绕，要求用戶刷新頁面，重新輸入全部信息壶愤；實際用戶犯錯時淑倾，體驗不好；可以通過接口邏輯征椒，在注冊接口中帶圖形驗證碼娇哆，這樣用戶犯錯后的修改成本就會低很多；

? ? ? ?2.在H5中因為接口暴露和可帶的參數(shù)較少陕靠，所以有時候會要求用戶每次提交信息都必須輸圖形驗證碼；在原生開發(fā)中一般會限制一定時間內(nèi)僅前幾次請求后脱茉，輸圖形驗證碼剪芥，圖形驗證碼會做成隱藏觸發(fā)時的，如果手機單頁面信息過多時琴许，可做成蒙版彈窗時的税肪，但會出現(xiàn)蒙版彈窗上報錯的情形，哪怕是強提示報錯也不易再使用蒙版彈窗提示榜田，影響用戶使用益兄；如果信息不是很多時，可處理成下拉彈出時的箭券，這樣報錯提示净捅，和信息修改就比較簡單易懂，且使用舒暢辩块，可大大減少用戶的操作成本蛔六；H5頁面和原生頁面，一般共用相同接口废亭；設(shè)計防刷邏輯時国章，要一個邏輯適應(yīng)于不同的頁面，減少開發(fā)成本豆村；

? ? ? ?用戶在未登錄狀態(tài)下液兽，并不具備唯一性不可修改的標(biāo)識，圖形驗證碼的意義在于確保請求是人為行為掌动。而圖形驗證碼并不是百分百安全的四啰，這一切需要你對業(yè)務(wù)的安全需求理解，兼顧用戶體驗的同時粗恢，設(shè)計不同程度接口邏輯拟逮；

結(jié)語

? ? ? H5與原生最主要區(qū)別在于應(yīng)用的技術(shù)平臺不同，H5不光前端開發(fā)所要適應(yīng)的各種不同技術(shù)框架的平臺适滓，在數(shù)據(jù)緩存敦迄，接口支持等基礎(chǔ)性功能方面也沒有一套各平臺廣泛認(rèn)同且提供的技術(shù)框架，這就導(dǎo)致了H5開發(fā)在各平臺需要逐一處理，大大增加了開發(fā)成本和技術(shù)難度罚屋；但H5相對app的優(yōu)勢大勢所趨苦囱，現(xiàn)在H5的規(guī)范也在一步步構(gòu)建中，技術(shù)成熟之時脾猛，就是卸載app之期撕彤。