來了!一年一度搞死人的網頁設計、技術、趨勢…分享,其實大概去年 12 月就開始在寫了,但是除了擬大綱,也花很多時間找相關的趨勢分享,不過最後還是挑了對我而言重要的、覺得滿有潛力的內容來談,但寫到後面想不到要整理哪些資訊,所以就一直拖著… 直到最近這前陣子玩一些小程式,不小心看到有趣的東西,於是今天就迅速把後面寫完了!(可以掌聲鼓勵了😂)

去年覺得看到不少有趣的網站,所以今年打算把設計跟技術一併整理起來,也方便做創意網站的參考,主要分為以下五大部分,最後一部分是觀察小結論:

  1. 流行的視覺設計
  2. 流行的互動玩法
  3. 網頁元素新思維
  4. 持續演進的程式思考
  5. 重要資訊更新

可以直接拉到最下面點簡報出來看,以下文字都只是補充說明而已。

第一個部分,視覺設計,我一定先貼個 behance 的趨勢做參考!(不過它這個文章竟然是去年 10 月就寫好了耶~看來人家年底就在寫趨勢,我每次都 delay 到四五月…哈哈哈)behance 的這篇《2019 Design Trends Guide》文章是涵蓋了各方面的數位設計,主要以視覺圖案為主,坦白說就我個人感覺,前幾年的風格大概清一色是極簡、扁平 2D、高彩度,後來則是有一批厲害的 3D 設計師讓整體設計風格多了一堆立體 3D、特殊配色,但我覺得這陣子比較延續以前的設計,不管我們的科技媒介、媒體平台有多少種,風向都沒有那麼集中,反而很多元,個人認為的兩個大重點是:流動感、不規則

滑順、Smooth 感的視覺前幾年就一直提倡,但我覺得這群設計都變本加厲喔(?!)哈哈哈是更要求啦😂,因為不僅是 Motion Graphic,有時候連平面稿都呈現一種流動的感覺,乍看之下,好像也在動(我可能要去看眼科@@);而一直以來都會有一批喜歡跳出框架的設計,但這幾年似乎越來越多不規則的排版,相信在這最過渡的時代,大家都在找出新的方式、新的可能,超越過往、打破規則,開創一條新的設計之路吧!同時也表示有越多人在思考「設計的本質是什麼」吧?所以會發現,這種情形不只會顯示在平面視覺,連網站的風向都有這些傾向…

因此我在「流行的視覺設計」那章節挑了幾個我印象特別深刻的分類,然後順道對應 Awwwards 的網站分類項目,像是把文字變主視覺,意思是把文字當「圖案」看待,這就是一種思考演進!在 Awwwards 裡將這種類型稱為 Typography(字體排版學,我記得以前我非常喜歡早期歐美風格的海報排版,復古色調、以文字排版就是屬於這種風格,回去看古老排版,現在的你一定會很瘋狂哈哈哈

然後 Brutalism(粗獷主義這個詞最早是在建築學上,表示一種不修邊幅的感覺,在網頁上呈現就會有種我們現在俗稱的「ㄎㄧㄤ」的感覺,有點扁平、可是帶點幽默、戲謔的港覺~

至於 Retro,全名應該是 Retro-futurism(復古未來主義,剛好我去年底不知發什麼瘋想來做做看那種圖,一問有在接觸的設計同事才知道這種風格叫做「Vaporwave(蒸氣波」,兩種講法可能只是在背後意義有所差異,因為視覺很類似,我也不太會區分,總之會有一種 1990s 的電子、電玩感,大概是那個網路剛崛起的時代,為社會帶來一種對未來科技憧憬的風氣,帶點古典時期的懷舊,而現在的我們就是在懷舊那個時代的懷舊…(供啥毀啦😂)所以一定會有一堆 GIF 動圖和 windows、IE 的元素(現在終於懷念起 IE 了ㄅ😆)是說我發現現在的電腦和手機似乎也不太能跑一堆 GIF 的網站~對於現代瀏覽器來說,GIF 不是一個很美好的元素耶~哈哈哈,我在那篇幅上面寫了一堆相關元素,若要仿復古風格的設計,可以從這幾點執行!

很久以前,在 HTML4 的年代還有跑馬燈這個標籤 <marquee>(天啊!我一搜 Google,竟然發現他有跑馬燈這個彩蛋哈哈哈,傳送門),HTML5 後就移除了!以前經常用來推播最新消息,跟實體的 LED 跑馬燈是相同的道理,感覺會很俗氣,不過去年我就看到一些很摩登的網站用了一堆跑馬燈!感覺非常潮的說!以前有標籤可以直接用,但現在卻都要靠 JavaScript 套件,突然感覺技術退步了😂

另一個是我個人非常喜歡的無限循環插畫風格,這個技術探討非常有趣!我想應該有很多方式可以進行,但我比較清楚的概念是:以前端技術來說,實際上是將不同張插畫不斷從小放到大,在設計的技術重點,在於要畫好插畫的銜接處,否則無法延續!最有趣的是它的第一張要銜接上最後一張圖,就會有種一直前進、不斷循環、永無止境的概念,對我而言這是一個非常有哲學價值的概念…「宇宙中的宇宙、大與小都是宇宙呀!」

流體視覺則是因為 WebGL 技術的進步,大量使用 Shader(著色器的開發者越來越多,因為看起來太酷了!隨便放都很嚇唬人!😂這種用 Shader 產生的物理流動感,跟整個設計風向為什麼越來越強調流動性,這兩者是有一定程度的關係!而不規則的排版也顯現在網頁設計上,雖然懷舊復古,但是用了現代技術去相容舊技術卻會蹦出新的設計風格,這是最近看到這些設計的心得呀~


第二個部分是整理了一些比較明顯的互動玩法分類,首先先介紹 MV 的互動方法,這篇章都是相當厲害的作品,大概也是很淋漓盡致的 WebGL 玩法,前幾年還有看到一個也是 MV 的網站,是一位 DJ 的網站,很可惜網站掛了!不然那也是一篇很珍貴的參考,通常 MV 就是太過讓人印象深刻了!我貼的參考中,一個很像散佈在這個網頁世界裡,非常療癒;另一個像是在網頁世界中尋寶,是另一種互動呈現,這種 MV 互動的作品不多,因為做起來還滿累 der…最經典的還是 Google 做的,可是我最早看到的互動 MV 網站,用切換視角去呈現故事情境…非常有錄像藝術中未來電影的感覺呢!😳

其他的就是將過往的游標互動、遮罩濾鏡、錯視設計玩到極致,有越來越多種不同視角切入的方法,甚至更多意想不到的玩法,都可以參考看看!


第三部分我是針對前端在處理 CSS 時,可以稟持新思維去製作,都是 RWD,但卻有三種方法,這是依據我看的網站中整理出來的,因為別於一般作法,讓我覺得很有意思!最扯的應該是 CSS3 也能做出幾近 WebGL 的 3D 風格,就能理解一個小蝦米發揮到極致,也能成為大鯨魚!😂 我只能說這些大大真的是太瘋狂惹~


第四部分進入到前端框架了,當然還是三國鼎立的時代!這次的簡報我都特別標上了出品公司,為什麼呢?因為我覺得全部標出來後,會發現在網頁前端框架裡的龍頭不是 Facebook 就是 Google 耶!Vue 這種獨立的框架太特別了,根本一枝獨秀!APP 也是一樣,標明了年代也是想看看後來跟上的框架到底能追到多少咧?!然後我前陣子做了好幾個 PWA 的 APP,覺得滿好玩的,結果我今天才發現他還能做桌面應用程式!!!真的是瘋了!到底想把網頁技術推到什麼絕境呢?!😂😂😂 其實我也不太懂,為什麼在原生程式和軟體裡技術沒有這麼大的波動,但在網頁技術真的套一句一位老師說的「三年一小改、五年一大改」,幾乎想吃了全部的功能!

前端的程式概念中,我發現兩個有趣的東西,分別是:有限狀態機(Finite-StateMachine)和 FLIP,最早聽到有限狀態機是在去年 2018 七月的 FEDC 前端大會,當時我在聽 David Khourshid 解說時,真的不知道這什麼東東耶!而且連中文翻起來都超怪的~後來跑去稍稍研究一下 Rx.js 才有點明白這個概念太偉大了!😂然後後來看到 FLIP 這個技術,我就聯想到 FEDC 上另外一位印度講者 Johny Vino 在解說 App 動線規劃的部分,看來不僅是趨勢、更是很需要使用到的概念,這兩項技術基本上都是針對視覺動畫做「有效且效率」的處理,是有點新的思考方式,需要一點時間消化釐清。


最後一部分的資訊更新非常有趣,這個篇章是這幾天才迅速整理完畢的,大概是做完 ChatBot 有感,想起去年下半年似乎有多一些鳥事,於是決定將想得到的資料整理一下,其中絕對包含最重大的歐盟資料保護條款了!去年年中有耳聞此事,但不會太過在意,只是有發現很多網站都出現惱人的聲明視窗要關閉,後來因為朋友問起,我才好好去找資料 der(感謝老天爺都會派人叮嚀我吼 😂)

因為玩 ChatBot 的關係,才去注意到 LINE 在今年有很重大付費機制變更,導致有很多官方帳號發現一個月要繳的錢貴到無法支付,所以「目標好友」變得如此重要,廣告不亂槍打鳥打,而是精準投放,不過我還是覺得挺難的,這部分我就沒研究過,無法探討啦!Facebook 的話去年就有預告會有一個可怕的大更新!所以這件事情我就放心裡,因為我是前端不是後端啊哈哈哈,也是因為玩 ChatBot 要送審才知道會這麼機車~不然我個人是沒什麼興趣研究第三方平台的 😌

另一個最有趣的是 Google,沒想到短網址突然收掉!導致有很多需要用到短網址的網站面臨要去找別家短網址或自己做(幫後端 QQ),然後,前年就有注意到一堆新技術產品的上市,但是連 Google Map 都要收費… 我覺得相當難過 😢前陣子有玩一下 Google 的自然語意判斷,發現也是要填信用卡,還莫名被扣了幾十塊… 感覺估狗啊!也是回不去了~~😭😭

講完軟體技術資訊,當然要說一下也是在瘋狂改變的硬體!小不隆咚的 Apple Watch 也可以瀏覽網頁了!這一點我也不意外,早知道會有這天到來的!只好把網頁真的變成水了(?!)~👻

很巧地前幾天去了通信行,欣賞了現下流行的手機是什麼樣子,因為我仍然停留在古老哀鳳時代,最新的 iPhoneX 瀏海又全屏也沒有掀起我太大的波瀾,直到我看了一堆安卓手機,才發現全世界都在「全屏」!可能哀鳳很潮吧!引領時尚~😌因此多出了一些怪名詞(因為沒有正式的中文規定翻譯,我只能用我的中文說明):

  • notch 就是我們俗稱的「瀏海」(中國話稱「瀏海屏」)
  • punch hole 就是把瀏海縮得更小一些,像是打洞一樣(中國話稱「水滴屏」)
  • Infinity 則是別於兩者的新概念,由 Samsung 提出的 U, V, O… 各種形狀的設計,終極目的是要達成超級全屏

其實我也不懂耶,搞成超級全屏會比較爽嗎? 😂好吧!手機產業也要能變出新花樣才能賺錢!但因為他們這樣搞,所有製作的 APP 和 Web 人員就要為了這些手機讀新的 guideline、研究新的解法… 只能說沒事找事做,真的是找碴了~

以上就是我整理的資訊,有興趣可以下載 pdf 看看唷!
大概是受復古風格影響,這次的簡報風格走一種怪怪的、怪怪的、怪怪的… 感覺啦!😆

2 則迴響

發佈留言

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