網站設計特效的細節 - 滑順的頁面切換,提升使用者等待的感受

在網站中通常換到下一頁時,會有個讀取的時間。如果在這時候,做一些讀取時的特效,可以創造頁面之間的貫連性,不僅能提升使用者感受,甚至也能增加些趣味性。在這裡我們沒有要做過多的範例展示,主要在聊聊整個流程以及細節。

常見的網站頁面切換特效有,透明度變化、頁面位移變化、或者放上一個讀取 Spinner 等等。但以上這些對現在的使用者來說過於普通了,而且頁面切換是一個非常好的時間點置入品牌視覺,如果只做一個不相干的 Spinner,實在是非常浪費了這個空間。

在較於注重形象的網站,適當的加入各種品牌元素、視覺,能非常好的提升使用者對於該品牌的細心與感受。

傳統常用網站換頁特效

頁面切換時有幾個非常重要的時刻,離場時 → 中間等待時 → 進場時,這三個步驟是最常見的流程。

1. 離場時、進場時

在頁面離場時能做與進場時相對應的設計,例如整體網站想要做翻頁的感覺,離場時,我們可以利用 css transform translate 移動向左方移動,進場時再從右方向左移動進來。這兩個步驟必須得是相呼應一組的。

這裡推薦一個很基礎的頁面切換範例組合 https://tympanus.net/Development/PageTransitions/ ,在此範例中可以看到許多翻頁感的頁面切換特效。在此範例網站中,如果你仔細觀察會發現,換頁的細節其實並沒有那麼簡單。

範例中每一個範例離場時可能會有兩種或者以上的特效加在一起,例如離場時頁面往左邊移動,並且透明度變 0,背景壓個黑色底色,此時就能有整個頁面往左移動並且變暗,讓使用者眼睛聚焦到進場頁面,而漸漸的去忽略離場頁面。

2. 中間等待時

換頁範例

如果你的網站速度飛快,並且你的品牌形象或者你的網站體驗不想在這時注入任何東西,那就不一定要使用中間等待的特效。但這在技術上有一定程度的難度,並沒有太多的工程師能完美做到,由於頁面切換關係到前端工程師後端工程的共同合作。

你以為的網站設計特效、互動、動畫,就是那麼一兩秒。但其實工程師為了這一兩秒可能要花上一週兩週。

要達到這種無縫接軌的技術,需要做的事前架構準備非常多,在這邊就先講講傳統程式(非 Headless)的做法,傳統的網站是統一由後端渲染前端頁面,首先後端要能有個資料夾是存取已經渲染好的 HTML、CSS、Javascript 檔案,預先儲存起來,當要調取該頁面時就不用再重新渲染。

這時候前端工程師需要準備切分好幾個 HTML,當離場時將原本頁面的 HTML 先準備離開 → 這時候進行頁面切換讀取下一個頁面 → 當下個頁面讀取好時,這時將原本頁面開始跑動畫離場,並且在離場完之後移除 → 下一個頁面進場。工程師要非常熟悉各種 Promise 的等待、進行、結束。

好加在,傳統後端渲染網站的方式,已有許多工具可以達成,例如爸爸 js https://barba.js.org/ ,其實原本想寫的是如何使用 barba.js,但有很多情況需要花時間製作範例,這邊就先推薦工具就好。使用 barba.js 你可以將原本都是 ASP.NET 、PHP 渲染的頁面輕鬆做到滑順的頁面轉場。

但你的網站速度無法達到以上的飛快技術,建議還是需要特別去設計離場、進場。例如我們的作品案例 https://e-s.tw/works/guiji-drinks 龜記飲品,就是在非常早期時,使用傳統 WordPress 主題所製作,我們將所有的 <a href=""></a> 連結先防止動作,加上頁面離場特效,當特效跑完時再跑連結換頁,最後製作每頁的進場特效。

創意的龜記飲品換頁特效
創意的龜記飲品換頁特效

創意網站換頁特效

在這個越來越難抓住、越來越難滿足使用者的時代,全世界頂尖高手們也開創了更多創意性的換頁體驗特效。你可以發現明明很簡單的事情...大家卻把它越做越難啊 ~ 😵這就是細節的重要性,市場競爭的激烈,當然在細節上就要更加琢磨。

根據 Awwwards 這篇範例文章 Page Transition Examples 可以看到很多更屌更有創意的做法,裡面不外乎高成本的應用了許多 3D、煙霧、Shader、空間、筆刷。這也是我們一直在嘗試希望能找到願意與世界接軌的客戶,與我們一起創作更多的突破式體驗。

Awwwards 還有另外每日更新的換頁特效案例可以參考,Transitions Collection

更多離場、進場的小細節

ES的作品頁面切換細節
ES的作品頁面切換細節

再來就是更多細節的部分,離場、進場能做的設計,不僅僅只有頁面離開頁面進入,甚至還能增加做到各種元素上。在這又可以拆分多出兩個步驟,元素的離場 → 頁面離場 → 等待中讀取 → 頁面進場 → 元素進場,這其實才算是一個完整的流程。

通常我們在滾動頁面時,會製作當元素進入視窗時,進行漸變進入等特效。如果這個特效不要使用 CSS Animation 我指的是使用例如 animation: fadeUp 0.3s 這種方式,而是用 Class 去驅動。這樣的好處是,當你移除 Class 時他可以再多跑一個返回原本狀態的特效。這時你就能輕鬆的將元素離開進場用頁面狀態來驅動。

對使用者來說,其實感受到的並不多,但如果這樣做,能為細節再添加更多的加分。

市面上有非常多方式可以做到換頁特效

除了上述的爸爸js,如果你與 ES 的工程師一樣強的話,也可以自己客製化寫出自己的架構,或者使用 React.js 框架。

ES 目前所使用的架構是 Nuxt3 x WordPress 的 Headless 技術,可以嘗試看看使用我們已整合好的 Nuxt3 x WordPress 結構,永久免費開源給大家使用 https://github.com/esdesignstudio/es-nuxt3-template ,目前不定期會增加更新與維護。