H5頁(yè)面跳轉(zhuǎn)的交互設(shè)計(jì)方法

今年做了大量的H5項(xiàng)目,遇到了很多坑,有自家的也有第三方的,在這個(gè)過程中g(shù)et到了一些之前不具備的知識(shí),所以這一篇,就簡(jiǎn)單分享一下這方面的話題吧。

 

一、傳統(tǒng)的MPA

首先,說一個(gè)比較古老的東西,叫做MPA。

MPA的全稱是Multi-page Application,意思是整個(gè)應(yīng)用(站點(diǎn))由多個(gè)完整的html構(gòu)成。用戶在頁(yè)面1點(diǎn)擊跳轉(zhuǎn),需要向服務(wù)端請(qǐng)求頁(yè)面2,請(qǐng)求成功后渲染。而用戶返回時(shí),相當(dāng)于是點(diǎn)擊了瀏覽器的返回,頁(yè)面退回到之前的歷史記錄,并重新加載出來。

在這樣的模式下,頁(yè)面間切換慢、不流暢的問題比較突出,尤其是在移動(dòng)端。

同時(shí),它還產(chǎn)生了幾個(gè)小問題:

? 跳轉(zhuǎn)動(dòng)畫:頁(yè)面間的跳轉(zhuǎn)無(wú)法實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫效果。

? 如果前一個(gè)頁(yè)比較長(zhǎng),用戶滑動(dòng)到頁(yè)面比較靠下方的位置后點(diǎn)擊,返回時(shí),頁(yè)面無(wú)法默認(rèn)停留在原位置。

? iOS右滑返產(chǎn)生問題,從頁(yè)面1跳轉(zhuǎn)到頁(yè)面2,再?gòu)捻?yè)面2跳轉(zhuǎn)到頁(yè)面3,右滑返回,會(huì)直接回到頁(yè)面1再之前的頁(yè)。

 

二、SPA

隨著對(duì)移動(dòng)端體驗(yàn)需求的提高以及技術(shù)的進(jìn)步,另一種模式SPA(Single-page Application)逐漸成為主流。

SPA簡(jiǎn)單來說,就是原來在MPA中的多個(gè)html,現(xiàn)在被放在了一個(gè)html中,并被分成若干個(gè)片段。跳轉(zhuǎn)、返回的本質(zhì)變成了分段的“隱藏”與“顯示”。跳轉(zhuǎn)不需要反復(fù)對(duì)服務(wù)端進(jìn)行請(qǐng)求,從而使得頁(yè)面與頁(yè)面之間切換更加快速流暢。

在這樣的機(jī)制下,跳轉(zhuǎn)與返回完全由代碼控制,所以可以通過代碼定義頁(yè)面轉(zhuǎn)場(chǎng)的效果、返回。

在設(shè)計(jì)轉(zhuǎn)場(chǎng)動(dòng)畫時(shí),我們需要留意的是導(dǎo)航欄是Native的還是H5的。如果導(dǎo)航欄是Native的,那H5頁(yè)面不包括導(dǎo)航欄,它相當(dāng)于是網(wǎng)頁(yè)外的元素,不在轉(zhuǎn)場(chǎng)效果的設(shè)計(jì)范圍內(nèi)。

 

三、WebView

說H5的跳轉(zhuǎn),就不得不說WebView。簡(jiǎn)單來說,WebView是在App中用于顯示web內(nèi)容的容器。 上文提到的MPA和SPA,都裝在了這個(gè)叫做WebView的容器中。

用戶點(diǎn)擊頁(yè)面中的元素進(jìn)行跳轉(zhuǎn),除了前述的兩種方式外,還有第三種:新打開WebView的方式。在這樣的方式下,跳轉(zhuǎn)的本質(zhì)是H5“告訴”Native,由Native執(zhí)行打開新WebView,并在新WebView中加載頁(yè)面。

因?yàn)镹ative的機(jī)制,打開新WebView的同時(shí),之前的WebView會(huì)被自然、完整的保留。所以這時(shí),之前的幾個(gè)問題就變?yōu)椋?

? 跳轉(zhuǎn)動(dòng)畫:頁(yè)面間的跳轉(zhuǎn)動(dòng)畫由WebView之間的跳轉(zhuǎn)動(dòng)畫來決定。

? 返回后頁(yè)面停留在原位置:完美支持。

? iOS右滑返回:完美支持。

不過需要注意的地方是,打開新WebView是一個(gè)資源消耗比較大的操作。如果我們?cè)谠O(shè)計(jì)一個(gè)流程時(shí),需要比較多地連續(xù)使用這種方式,需要和研發(fā)同學(xué)進(jìn)行充分的溝通。

 

四、比較特殊的Replace

前述的三種跳轉(zhuǎn),都會(huì)產(chǎn)生歷史記錄。MPA、SPA的歷史記錄是在H5中產(chǎn)生,新開WebView中的記錄是在Native中產(chǎn)生。

在MPA或SPA中,如果跳轉(zhuǎn)時(shí)使用Replace方法,它會(huì)用新頁(yè)面替換之前的頁(yè)面,歷史記錄中沒有之前頁(yè)面的記錄。

這是一種特殊的跳轉(zhuǎn)方式,在設(shè)計(jì)一些不可逆的流程時(shí)可考慮使用。

 

五、多頁(yè)面回退

了解了上述的幾種機(jī)制后,我們來看一個(gè)小的應(yīng)用場(chǎng)景-多頁(yè)面回退。

我們?cè)趯?shí)際業(yè)務(wù)中,經(jīng)常會(huì)有這樣的需求。假設(shè)我們有1、2、3三個(gè)頁(yè)組成的一個(gè)流程,在頁(yè)面3上有個(gè)"完成"按鈕點(diǎn)擊回到頁(yè)面1。在不同的交互模式下,實(shí)現(xiàn)這樣的跳轉(zhuǎn)有著不同的機(jī)制:

1,SPA模式下的正常跳轉(zhuǎn)

這種模式是3個(gè)頁(yè)面都在一個(gè)WebView中。點(diǎn)擊頁(yè)面3中的“完成”按鈕,回退-2,即回退2步歷史記錄,到頁(yè)面1。

 

2, 新打開WebView

打開新WebView又分三種方式:

a,如果我們把3個(gè)頁(yè)面,拆分到2個(gè)WebView中,如下圖,點(diǎn)擊完成按鈕,即關(guān)閉自身所在的WebView。

b,同樣是打開新的WebView,如果我們按如下圖的方法拆分會(huì)稍微復(fù)雜。這時(shí)點(diǎn)擊完成按鈕,首先關(guān)閉自身所在的WebView,當(dāng)頁(yè)面2“意識(shí)”到自己重新被展現(xiàn)時(shí),自動(dòng)退回1步到頁(yè)面1。

c,每次打開新的WebView,這時(shí)點(diǎn)擊完成,回退的本質(zhì)是H5“告訴”Native關(guān)閉多個(gè)WebView。需要特別注意的是,H5中實(shí)現(xiàn)這種方式不是天然具備的,它需要Native具有一次關(guān)閉多個(gè)WebView的能力。所以我們?cè)谠O(shè)計(jì)方案時(shí),需要了解清楚自家的Native是否有這樣的能力。

 

小帖士

以上,簡(jiǎn)單說了幾種H5的跳轉(zhuǎn)方式。這些跳轉(zhuǎn)方式,沒有絕對(duì)的對(duì)與錯(cuò),我們?cè)谠O(shè)計(jì)方案時(shí),需要根據(jù)實(shí)際的業(yè)務(wù)需求與技術(shù)的限制,來整體考慮解決方案。

根據(jù)個(gè)人經(jīng)驗(yàn),也有幾點(diǎn)小帖士分享給大家:

? 前后邏輯交織不復(fù)雜的單個(gè)頁(yè)面,可以考慮使用新WebView打開跳轉(zhuǎn)。

? 如果是一個(gè)任務(wù)型的流程,可以考慮將一個(gè)任務(wù)流包在一個(gè)WebView中,在任務(wù)內(nèi)使用SPA跳轉(zhuǎn)。不同的任務(wù)使用不同的WebView。保持任務(wù)之間的關(guān)系清晰明了。

? 設(shè)計(jì)上需要著重表現(xiàn)頁(yè)面間轉(zhuǎn)場(chǎng)動(dòng)畫的效果,優(yōu)先考慮使用SPA跳轉(zhuǎn)。

? 為防止流程過于復(fù)雜,盡量不要自定義關(guān)閉、返回的行為。保持關(guān)閉為默認(rèn)的關(guān)閉行為,保持返回為默認(rèn)的返回行為。

 

 

 

作者:花生Design

公眾號(hào): 花生Design

每天更新,
全站高品質(zhì)素材免費(fèi)下載!