Creative Website 開發入門地圖

前言

這篇文章是想寫給對於互動設計網頁有興趣的人，因為工具和框架很多很雜，為了幫助釐清整體脈絡，讓學習起來見樹又見林，從 top down 的角度去理解大框架，所以整理了以下的內容：Creative Website 的來源和興起、會需要甚麼工具開發、不同專案場景下工具的搭配方式；除了記錄此學習歷程，也希望可以幫助到對這些內容有興趣的人～

甚麼是 Creative website?

是不是瀏覽完一些網頁之後，你好像體驗了一個故事，透過動畫和特效，讓你覺得網頁像是遊戲或是電影一樣，可以沉浸在其中，這些網頁並統稱為 Creative Website，透過增加感官回饋讓使用者從互動體驗中留下深刻的印象。

在資訊大爆炸，短影音盛行，科技跌代快速的當今，一個品牌或是故事要吸引人，在標準化網頁已成紅海的今天，Creative Website 追求的是情緒的傳遞，它讓網頁不再只是冷冰冰的資訊載體，而是一個具備生命力、能與使用者產生共鳴的數位空間。

從 Flash 再到現在的 Creative website

Creative Website 的前身 Flash 在 2000~2010 年盛行，被賈伯斯點出說有安全疑慮和效能問題之後，被 CSS, HTML5 取代，網頁趨於效能好並且安全但是互動性變少，在 2015 年之後，原本在 Flash 上的動畫引擎 GSAP 轉向支援 Javascript，讓大家再度可以在網頁上自由發揮創意創作動畫式體驗，而 WebGL 的在 2011 年的誕生，讓網頁能處理更龐大的即時運算，它給了瀏覽器一把打開 GPU（顯示卡）大門的鑰匙，從此網頁開發者從只能設計平面的介面進化成了數位造物主，能夠在瀏覽器中操縱數萬顆粒子（Particle system）、即時運算光影（Shader），甚至構建出一整個 3D 宇宙。

硬體效能的升級

在硬體上，GPU 的平民化以及手機的算圖能力的提升，讓現在的普通手機的算力都超過了 Flash 鼎盛時期一台桌機的能力，這意味著沉浸式體驗不再是高階電腦的專利。現在，每個人口袋裡的手機，都具備了跑動一個微型電影院的算力，這讓 Creative Website 的受眾從少數擴張到了全球數十億的行動用戶。

獎項文化的推動

而網站像是 Awwwards、The FWA、和 CSS Design Awards 會透過定期評選網站，讓網站昇華成藝術品，好的沉浸式網站除了是一項說故事的工具，更像是音樂或是電影一樣可以被認可被大眾看到！這些獎項不僅是技術的肯定，更是品牌的榮譽勳章。獲得 Awwwards 年度網站的背後，代表的是極高的品牌溢價與全球性的曝光，這讓許多追求注重形象和體驗的企業願意投入預算，去打造一個能夠獲獎的數位作品。

形成網頁的架構

一個靜態網頁需要運用到 HTML, CSS 去架構和賦予型態，在這裡可以將網頁排列組合出好的排版、文字、配色、圖片，能讓使用者更好閱讀，抓到重點，也更能感受到網頁想帶給大家的氛圍，而靜態網頁的意思就是沒有資料傳輸，單純只顯示文字圖片在靜態網頁中加入 Javascript, 就可以讓資料變得可傳輸，使用者可以在網站上讀取動態的資料像是新聞或是訊息，電腦這端也可以追蹤到使用者的資訊。

網站框架組合技

透過 CSS, HTML, Javascript 是最簡單的網頁架構地基，但是有各式各樣的框架可以去乘載這個地基，不同框架決定了你的網站如何載入、如何管理資料、還有如何切換頁面，不同框架都有各自最適合運用的場景。

要決定用甚麼框架，可以有以下幾個判斷點：

專案的生命週期有多長？

生命週期短，不需要考慮複雜的組件維護，只要使用單純的 HTML + CSS + Javascript；需要長期維護，就用 React + Next.js，東西好找好管理。

SEO 重要嗎？

部落格或是店商就會很注重 SEO，但對後台或是 Web App 就不重要，SEO 重要的話就選擇 Astro，他是為了內容導向網站所設計的。

是要沉浸式的體驗還是只是組件間的微型互動？

如果是較沉浸的體驗，網頁間的轉場就會很重要，Barba.js 就是一個好幫手，但它不適合搭配 React 使用。

專案是由一個大型團隊去管理嗎？

大型團隊會更趨向用 React，因為好管理，程式碼架構得很整齊，東西要用不會找不到。反之如果想進入大型團隊，可以上手 React 會有很大的加分。

總結以上的問題，下面是 4 個常見的網頁場景可以使用的框架：

當今也有很多 No-code 工具如 Webflow 和 framer 可以選擇，也有 Spline 可以直接在網頁上製作 3D 模型並且嵌入到網頁上，但那又是另外一個話題了～

Creative Website 初級工具包

打完地基之後，讓網站活起來的工具包來了！雖然只使用 JavaScript 也可以做出一些體驗互動，但如果要做出複雜的動畫排列，或是追蹤滑鼠軌跡等等效果，也可以使用 Libraries (函示庫) 來讓動畫和互動方式更加升級成，最常用的兩大 libraries 是 GSAP 和 Motion (本來名為 Framer Motion) 。GSAP 成立的時間長，資源多，能處理極其複雜且具連續性的動畫劇本，許多沉浸式體驗網站都是使用它，而且它可以基本上跟任何框架搭配。相比之下 Motion 需要依賴 React 的架構，它能處理的更多是微互動，按鈕的點擊，圖表的流線，在一些互動細節的地方可以做得恰到好處不會讓人覺得煩但是又絲滑，很適合應用在後台或工具類型網站。

Creative Website 進階工具包

上面提過的 WebGL 讓網頁得以直接調用 GPU (顯示卡) 的算力，這徹底解放了網頁的視覺瓶頸。它最常被運用在處理複雜的粒子系統 (Particle Systems)、動態的光影運算 (Shaders) 、以及 3D 模型渲染。這些應用對應的語言和技術都比較難上手，在處理像素級的視覺特效與自定義材質時，我們會直接撰寫 GLSL (著色器語言)；若要營造電影感的氛圍，則會運用 Post-processing (後置處理) 技術來疊加景深或發光濾鏡。而在 3D 模型中，Three.js 是目前業界公認的基石，如果你使用的是 React 體系，React Three Fiber (R3F) 則能幫你把複雜的 3D 空間轉化為易於管理的組件，再搭配 Drei 這個強大的工具庫，讓我們能像搭積木一樣，快速地建構出極具專業水準的沉浸式場景，而因為要操作 3D 模型，3D 模型的製作工具也很常會一併使用，Blender 是我覺得比較好上手資源也蠻多的工具之一。

在地基上加上 Creative website 工具包 可以總結成以下的搭配：

結語

當然技術選擇上沒有最好，只有比較適合，像是我的部落格網頁是使用 Next.js + React + React Three Fiber，因為在首頁有一個 3D 星球模型所以用了 React Three Fiber，同時也需要注重 SEO，所以使用了 Next.js。

我一開始接觸的時候覺得眼花撩亂，所以想要寫這篇文章做個學習記錄，當然新工具也會不斷出現，所以需要不斷學習，希望大家都可以做出自己喜歡和滿意的專案！～