花了一些時間搜集資料和整理思緒,然後今天剛好正式分享完這份簡報(雖然沒有全部都分享),難得有點空可以把它發佈上來!

大概介紹一下大綱:

  1. 視覺方法
  2. 提高效能的方法
  3. 程式語法架構
  4. 網頁新技術
  5. 資訊更新

最後還有觀察小結論,算是最後整理完、也試玩過多種方法之後,有的一點小心得。

那就先從視覺談起,今年和去年毫無疑問的,不管是平面設計還是網站設計的風格,都有一大堆 Glitch(脈衝干擾)、 Holographic(全像攝影)、Double Exposure(重曝)的視覺,偏向一種實驗、破碎、數位藝術性的畫面,因為科技演進才有的視覺風格,其中我覺得相較於 Glitch 和 Double Exposure 這兩個風格,個人認為 Holographic 更具今年的代表性!畢竟電視和相機感覺上是上一個世紀的產物啊(呵),把全息投影放上平面稿上,真的是這個時代對於未來充滿了各種可能的想像啊!這風格其實也很電漿感(Plasma)或彩虹膜,不管叫什麼,都不像是自然現象,比較是數位和科技引發的視覺,一種時代的交融感~~~(亂講)

另一件事是傾向 3D 的狀態,當然網頁設計不用說,WebGL 這幾年就很豐富了,但連平面設計都要 3D 參一腳,對平面設計師來說真的要多學一套工具了…透過 3D 打完光再放入設計中,視覺真的強超多倍的!但這也表示一件事:「所有的畫面都需要透過數位運算」,讓我想起以前曾經有學長姐用 processing 設計平面稿!會不會設計走到後來都要寫程式呢?讓我們敬請期待吧 XD

而最近逛網站,常會看到大量的偽 3D(也就是俗稱 2.5 D),通常會使用 sprite 貼圖來製作,這個東西本身就是一個 3D 世界的哲學思考——「一個不管怎麼樣都會面向你」的圖,是我一直以來覺得很酷的發明!最近發現非常多人用插畫去製作 sprite 素材,這不僅就不用建 3D 模型,卻又有很豐富的視覺效果,而且使用這個效能又會提升很多,還有它本身的“無破綻”特性會讓視覺有種錯位的感覺,這件事情實在是一舉多得啊!

再來講一下提高效能的方法,剛好都是自己遇到、偶然看到、不然就是幫別人看到(我到底在說什麼),總之都是些筆記心得罷了!特別想講一下,把所有內容全部壓在 Canvas 裡這件事真的很潮!要不是剛好看到那個網站,還不知道有這種方法!全部壓在 Canvas 我還可以理解,但第一次看到有人把字都隱藏,但可以選取、而且有響應式!我覺得顧及效能之外,還特地做這個 UX 和 SEO 的人真的是非常認真、神級的人啊啊啊!

在查找資料的過程中,發現一件奇妙的事…原來不只有假 3D,還有假 2D!但兩者其實都可以稱 2.5D,其實以前玩 3D 軟體就知道有假 2D 這件事,但當時都沒想過做假 2D 竟然在網頁的即時渲染中有降低 CPU 運算的功能,因為在網頁上用 3D 的方式去做 2D 的畫面會讓瀏覽器去呼叫 GPU,因此可以分擔 CPU 的工作,比起只用 2D 去跑還要快,在 CSS 上,以前會用 transform 2D 去減輕 DOM 元素變化的負擔,現在用 transform 3D 又可以跑得更順,不過說實在,大家的視覺胃口被養得越大,就逼得瀏覽器技術(和設備)要不斷提升… ˊ_>ˋ

剛好今年 1 月買了一本書,叫做《移動 Web 前端高效開發實戰》,拿到的當天就看得欲罷不能!看到到凌晨兩點… XD 這是一本中國某個前端團隊一起寫的現代網站前端大全,應有盡有,將這兩年最新的應用、工具、框架通通都列了出來,並解析整個前端所需的技能… 因為看了這本書,所以也參考了一些,列在上面,雖然有很多進階的網頁技能我沒有學過,只是標上去給自己當筆記看,這些響噹噹的名字,也是該要自己實作看看了!另外,網頁製作的概念有非常多,光分工的架構有一大堆新名詞(MVC、MVVM…),可能是這些概念永遠沒有最好的、永遠滿足不了各種情況,總是要一直推陳出新,讓前後端的工作要分不分的,只能說「分久必合、合久必分」啦!

在網頁前端,「效能」是這幾年一直被談論的問題,不僅只是因為現代人容易不耐煩(噗),還有為了移動裝置以及即時渲染問題,為求網頁效能的進步,有越來越多技術將前端推到一個看不見盡頭的高處,像是 WebAssembly 就是一個活生生的例子,這個詞我最早在 2015 年看到這篇文章《JS 之父:wasm 格式能讓網頁快 20 倍,不是取代而要讓 JS更強》,當時覺得這會是劃時代的網頁演變,可是這兩年也沒看到很多人討論或使用,所以一直覺得是個離我很遙遠的東西,直到我發現了有越來越多 js 框架朝向 C 語言和其他基礎語言邁進… 才察覺單純使用網頁的時代過去了!他們想將網頁做的更大,全面應用在各種平台上,變手機 APP、變桌面應用、變移動 VR…等等,甚至拿來做機器人判斷(我想 AI 是人類科技目前的終極目標吧),為了能夠應付類神經網絡的速度,勢必使用更基礎的語言去運算,因為效能會比 JavaScript 強,雖然 JavaScript 本身效能沒不強、又是有點髒髒的弱型別語言,但卻也沒有被淘汰,反倒火紅起來!只是轉變成一種通用的開發語言罷了!就像我們要用英語當國際語言一樣,誰也沒想到,以前那個被人唾棄的 JavaScript,最後走到一種新的境界呢…

最後想說,前端是條沒有盡頭的路,網頁最後會長什麼樣子,有可能會像當年從 DOS 轉換到介面操作的時代,一樣令人驚呼吧!當然,我也會繼續跟著這個潮流緩緩移動的!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *