「體驗升級」時髦有趣,高轉化的移動商城怎麼玩?

網絡發展中,“唯一的不變就是變化”!

Web環境瞬息萬變,用戶期望不斷升級,內容需被隨時訪問,尤其是在移動端的訪問。80%的互聯網用戶正在使用智能手機,據TechCrunch調查,用戶在移動設備的平均時間逐年增長,且每天超過5小時...

不言而喻,構建引人入勝、有趣直觀的數字瀏覽體驗將比以往任何時候都更為重要!

「體驗升級」時髦有趣,高轉化的移動商城怎麼玩?

雖然響應式網站近年幾乎成為各大品牌的強制性標配,但是用戶有限的移動設備內存和不穩定的網絡環境卻向之不斷提出艱鉅挑戰。

當下圖情況超過3秒時,53%的用戶就已經放棄您的網站了。

「體驗升級」時髦有趣,高轉化的移動商城怎麼玩?

錯落的網頁內容未經策略性的組織與設計,而僅僅適應性的向下堆砌,將致使大家瀏覽受累,體驗降低。

「體驗升級」時髦有趣,高轉化的移動商城怎麼玩?

如今問題不再是“我們的網站是否適用於移動設備?”,而是“它將如何在移動設備上獲得最佳的表現?”

早在2017,我們發佈過一篇PWA (Progressive Web App)這種輕應用規範對於移動電商領域的影響,與在全球使用趨勢,以及它與本地APP的區別。錯過的小夥伴,可以點擊 進行深入瞭解。

「體驗升級」時髦有趣,高轉化的移動商城怎麼玩?

如果說上篇只是基於理論分享的話,今天我們將向大家分享一下以React JS進行PWA開發的實例:

從瀏覽器添加到主屏幕

並感受身臨其境的全屏體驗

「體驗升級」時髦有趣,高轉化的移動商城怎麼玩?

通過預先緩存關鍵性內容

用戶可以減少對網絡的依賴

確保為用戶提供即時和可靠的瀏覽體驗

「體驗升級」時髦有趣,高轉化的移動商城怎麼玩?

針對移動優化又順滑的交互

無需無限滾動

「體驗升級」時髦有趣,高轉化的移動商城怎麼玩?

移動用戶不希望過於複雜的事情。他們渴望直觀,並快速找到他們想要的東西,做他們想做事。雜亂越少越好,只有這樣才能在您的網站上實現可用性和轉化率。

上方的GIF動圖演示來自於

Escher - ShopNow Cloud,一款基於React開發的PWA。

React 有哪些優點?

React 起源於 Facebook 的內部項目, 它的設計思想極其獨特,屬於革命性創新,性能出眾,越來越多的人開始關注和使用,認為它是將來 Web 開發的主流工具。

附:ReactJS官網地址 https://reactjs.org/

飛速運轉

React極簡的代碼邏輯可有效消解用戶網絡和CPU不佳帶來的緩慢加載問題,甚至可輕鬆實現離線緩存,為用戶帶來更流暢的瀏覽體驗。

跨瀏覽器兼容

它提供了標準化的API,甚至在IE8中都沒有問題。

模塊化

每個組件都可以進行獨立的開發和測試,並且它們可以引入其它組件。代碼的可維護性大幅提升。

搜索引擎優化

React可以在服務器上預渲染應用再發送到客戶端。而搜索引擎的爬蟲程序依賴服務端響應而非JavaScript的執行,所以預渲染你的應用有助於搜索引擎優化。

專業人員怎麼評價React?

Jacky,一位來自TMO經驗豐富的全棧工程師。聽一聽Jacky怎麼評價React?

Q1:React開發難度如何?在中國有成熟的社區嗎?

A1:React是非常成熟的前端技術,且已在國內形成良好的社區氛圍。成熟的社區分享互助無疑為React帶來了更為完善的技術支持,進而大大降低React的開發難度,並能不斷提供更多前沿卓越的的技術解決方案。

Q2:現在有哪些著名公司是使用React進行應用開發的呢?

A2:Facebook, Instagram, Airbnb這些國外公司都有在使用React。

Q3:您本身對React 在中國的前景怎麼看?

A3:React正憑藉其優異特性逐漸被各大國內公司加以運用,比如阿里、滴滴、餓了麼等。而且,React代碼更加靈活輕便,可以快速響應商業決策帶來的開發改動。對於快速迭代試錯的中國互聯網環境,提供了更輕便的試驗成本。

Q4:除了React, 還有那些框架可以用作PWA的開發?

A4:Angular和Vue等成熟的框架也可以用來開發PWA。

PWA成功案例

PWA好處多多,那麼伴隨著PWA的應用,品牌們又獲得了何種程度的增長呢?

蘭蔻Lancôme PWA

頁面加載時間有效降低84%,移動端訪問次數大幅提升51%,用戶跳出率有效減少15%,最終銷售轉化率提升17%。

「體驗升級」時髦有趣,高轉化的移動商城怎麼玩?

Twitter Lite PWA

平均用戶停留時長增長65%,Web 站點發推的數量增長75%,跳出率降低20%。

「體驗升級」時髦有趣,高轉化的移動商城怎麼玩?

AliExpress PWA

提供驚人的用戶體驗能力幫助AliExpress將所有瀏覽器中新用戶的轉化次數提高了104%,在iOS上提高了82%。

「體驗升級」時髦有趣,高轉化的移動商城怎麼玩?

PWA的哪些優點將為品牌電商提供更多機遇?

PWA將如何為品牌自有化電商探索之路提供更多機遇?

強交互(APP-Like)

提供原生手機APP樣式的導航和交互,減少加載和卡頓。

即時更新

基於Web端的更新讓用戶打開WebAPP即登陸最新版本,免除更新煩惱。

拓展性

運用React Native,即可將PWA輕鬆轉換為手機原生APP。而通過PWA作為品牌自有化電商的初步探索,低成本驗證商業模式會是不錯的選擇。

PWA在中國市場應用前景

PWA在中國市場環境之下,又可以被如何有效運用,併為品牌帶來增長呢?

相比微信小程序和Html5,PWA構建的微商城加載更迅速,交互更豐富。並能向用戶提供更革新的購物體驗。

「體驗升級」時髦有趣,高轉化的移動商城怎麼玩?

移動端信息流廣告

移動端信息廣告與電商鏈接,並縮短購買流程逐漸成為未來趨勢。將PWA作為廣告的電商落地頁,可以提供更快的加載速度,更豐富的交互體驗,有效降低頁面跳出率,提高轉化率。

「體驗升級」時髦有趣,高轉化的移動商城怎麼玩?

關於ShopNow 與 Escher

ShopNow

ShopNow Cloud是為中國市場設計和優化的基於雲計算的電子商務系統。我們將行業領先的技術與電商生態系統的各個環節相連接,以移動為中心和全渠道電商創新相結合,必將賦予您融入中國電商生態新能量。

Eshcer

Escher是ShopNow中一個創新的Theme。Escher 的靈感來自於知名荷蘭版畫藝術家Maurits Cornelis Escher 艾雪。 Escher 的創作探討宇宙秩序奧密的渴望,他創造演繹了很多複雜奇幻的變形結構,顛覆了自然的規律。

Escher的作品常使用到幾何的概念,對於“錯視”藝術極為拿手。Escher也極大的啟發了我們的UX設計師,將中國先進的移動用戶體驗設計與國際化的應用場景結合起來,無論國際品牌想在中國進一步優化移動用戶體驗,還是中國品牌想要走向海外, Escher都能助您在移動策略上佔盡先機。


分享到:


相關文章: