本篇文章為《不小心就學會!用 UI 設計方法製作網站》使用教材,有興趣的讀者可以到線上課程頁面參考。

嗨囉,我是設計師 Riven 🙂

在上一篇文章中呢,我們聊到西元 1990 年代網站的初次誕生,與接下來瀏覽器大戰帶來的網頁技術發展,同時也提到了在 2000 年初期呢,由於網站的使用者從被動瀏覽,轉變成自主產生內容的互動模式,UI/UX 的設計逐漸受到設計師與使用者的重視。

通常每一年都會在社群上看到類似「2020 年網頁設計趨勢」的文章,坦白說這類整理都還滿主觀的(畢竟沒有數據統計過),不過還是可以看一下長長見聞,就像偶然間翻閱美妝或穿搭雜誌時總會有一些意外的收穫。

而今天我們就接著來聊聊在網頁基礎建設穩定後的網頁設計趨勢,說不定能夠從其中得到一些網頁設計上的靈感哦。

十年之前 🎵

時間來到西元 2010 年 6 月 7 日,已故蘋果前任 CEO 賈伯斯(Steve Jobs),在展示台上向全世界介紹 Apple 最新的得意作品:iPhone 4,在科技圈滑起了一波大風向。在之後的短短幾年間,智慧型手機就成為每個人手上或褲子口袋內都會有的產品。

Steve Jobs reveals the iPhone 4 at a conference in 2010.
What Does the i in iPhone Stand For?

同年,網頁設計師 伊森·馬爾科特(Ethan Marcotte)發表了一篇叫《Responsive Web Design》的文章,裡面講述了一種方法,能將 HTML 程式碼乘載的網頁內容,針對不同裝置進行自適應,也就是現在網站都會要求的響應式設計。

https://alistapart.com/article/responsive-web-design/

在此之後的 10 年間(西元2010~2020),由於前面歷經瀏覽器戰爭與 Web 2.0 等網頁技術面的發展,在這些基礎設施之上,網頁的開發技術面相對穩定與安全,就跟人類在求溫飽滿足之後就會追求吃得更好一樣(八方雲集不吃鍋貼改點鮮蝦水餃),大家開始更關注網頁的視覺美觀,以及用起來好不好用,也就是網頁的開發重點轉移成設計、創意、視覺、互動等等;網路上統稱這些使用當代最新網頁技術的網站為—— Modern Web

而在台灣也有同名的資訊年會 Modern Web,每年都會舉辦大型活動來讓 IT 產業工作者參加。


而在接下來呢,讓我們一年一年來回顧,在當時的網頁都流行些什麼東西,當然這跟每年的流行穿搭一樣,並不是絕對的!但我們可能更容易在那時候從客戶那邊聽到說:「我想要 _______ 的風格。」而這些暫時流行的設計風格,拉長時間軸來看,就變成為了當年比較具有代表性的象徵。

但其實很多年前的網站啊,現在都已經不在網路上了,因此這篇文章我會挑選這些持續影響當代網頁的設計風格,也許是今年才架好的,不過仍保有當年代表的設計語彙在。

2010年:平面轉網頁

比如說 2010 年流行的極簡主義網頁,其實很大的影響來自既有的平面設計風格,只是大家把載體從傳統印刷,換成數位網頁而已。

而細究其原因,可以理解是因為很多資訊是從既有的印刷物(如海報、雜誌、報紙、書籍等)轉移到網頁上面,而因為人類的閱讀習慣與動線關係,就繼續沿用在紙張上的平面設計方法到網頁上,因此很多網頁看起來很有像是印在紙上的既視感。

https://mathieublok.co/
https://thinkbear.net

2011 年:螢幕載體意識

2011 年設計師開始在網頁嘗試在基礎平面上,多了一些裝飾性的元素,比如說緞帶類的視覺呈現,或是有明顯對角線的排版。

可以看出在螢幕的媒介上,設計師開始適應並嘗試了螢幕上才有的裝飾物件,但在許多地方還是能看出取材於現實中既有的材質。


Ribbons and tags in web design
http://cargocollective.com/sowinski/Wustomize

2012 年:Typography 字型排版

2012 年在國外設計圈開始流行將「字型」應用到網頁上的玩法,不論是手繪感的字,或放上各種字重的字體等等,都讓「文字」成為網頁上的視覺主導,當然我們本來就可以在許多雜誌(特別是日本或英文語系)中看到這樣的視覺,但網頁在技術的維度上又能做到更進階的變化可能性,尤其是文字本身構築的動態設計(Motion Design)。

https://safaririot.com/

而世界上第一個中文網頁字型服務,也是在這一年由台灣字型公司 justfont 所推出。


2013:Flat Deisgn 扁平化設計

2013 年是 Flat Design 扁平化設計大量出現的一年,扁平化使用了單純的配色,去除陰影與漸層,用更簡約乾淨的方式呈現資訊,由於扁平的設計元素在網頁上可以載入更快,同時兼顧介面的閱讀性,一直到今天的網頁設計風格都還是很常見。

比較經典的例子就是那時候 Windows 8 發表的 Metro UI 介面設計語言(雖然不是很多人喜歡就是惹)。

A fresh face for PCs
Windows 8 Metro UI: A Bold New Face for Windows

而我們從藝術史上來看,就可以發現這是源自於 1950 年代國際主義設計風格,又或者說是瑞士風格,與現代網頁技術的結合後的產物。

Flat Design 在網頁 UI 上的範例
Cover Image For Set of Flat Design Web Page Templates
扁平化設計在插畫上的例子

2014 年:Meterial Design

接著,說到 2014 年的網頁設計風格,就一定會提到當年 Google 發表的 Meterial Design(不用中翻,唸中文感覺很菜),而這畢竟是網路的老大谷歌發表的設計規範,讓接下來的設計師製作網頁時也只能乖乖就範。

所謂的 Material Design,不同於以往將既有的平面設計,或現實世界的媒介搬到電腦螢幕上,而是一套全新的專門為數位介面打造的設計語言,用起來體驗會更和諧。

https://material.io/design

Meterial Design 將既有的印刷排版、網格、平面空間,色彩和圖像都在 UI 設計上重新定義,重新思考螢幕上物件的材質與物理特性。

第一次認識可能會覺得有些抽象,的確,這真的是一個抽象化的設計語彙,但直到現在都還是被奉為設計師必看經典,建議如果之後要做 UI 設計職業,一定要去仔細閱讀。

https://material.io/design/environment/light-shadows.html#light

那麼,愈接近現在的網頁設計,你會發現很難夠用單純一種風格或趨勢,去概括一整年的網頁發展,主要是因為 HTML5 / CSS3,以及 JavaScript 等等更新網頁技術的體現,同時也都影響了網頁介面,讓設計有幾乎無限種可能性,只要想得到的創意,幾乎都能夠在網頁上呈現。

所以接下來,我們就以當年很常見的、跟比較具代表性的網頁發展項目來介紹。

2015 年:Double Exposure 多重曝光

2015 年不知道大家還有沒有印象,那一年很常看到一種叫 Double Exposure 的視覺效果,簡單來說就是將兩張照片融合在一起,這其實是源自於攝影上一種叫「多重曝光」的手法,而現今也被運用在網頁設計上面。

https://dribbble.com/shots/2209044-Furion-Freelancer-Portfolio/attachments/409555

同時,除了攝影照片的應用,影片這個媒材也愈來愈常見到在網頁當中,像是直接入嵌影片變成背景輪播,製造情境帶入感,也是這一年開始常見的設計做法。

https://www.bukwild.com/work
http://bravepeople.co/

不論怎麼做,都是要讓網頁看起來更吸睛,那我們就可以曉得,網頁除了記載資訊的原始用途之外,開始有更多的是給予更好的品牌印象與視覺效果。


2016 年:Flat Design 2.0

在 2016 年如果說只能認識一種設計風格,那應該就是被網路稱為 Flat Design 2.0 的二代扁平化設計,我們可以從下面這張對照圖中,看出二代扁平化有更多的視覺細節,比如說陰影表現或材質感,其實不難看出在視覺處理上有受到 Google 的 Material Design 影響,相較之下原本的一代扁平化顯得比較單調,而且在視覺層次上也稍微單薄一點。

null
https://www.bluecompass.com/blog/flat-20-why-your-website-needs-this-design-update

Flat Design 1.0 與 2.0 的差別還有更著重光影,以及配色選擇更多一點,同時也有更細緻一點的漸層表現,整體來說細節更豐富,但仍保留扁平化設計的直觀與易用等優點。

https://www.behance.net/gallery/17998561/Star-Wars-Long-Shadow-Flat-Design-Icons

而 Flat Design 2.0 之後就逐漸延伸到現在的各種網頁上的奇淫技巧了,尤其是插畫,我們在現在的很多網頁當中仍然可以看到一些扁平的感覺,但有更多的筆刷細節還有更豐富的色彩呈現。

https://designmodo.com/

2017 年:雙色調 Duotone

再說到 2017 年,我想介紹雙色調(Duotone)的視覺風格給你認識,這是一種將照片轉換成兩種顏色的手法,技術上可以用 Photoshop 調整,或直接用程式去改,好處是搭配企業品牌的標準色,可以讓網頁整體感更加明確。

https://duotone.shapefactory.co/
https://www.behance.net/gallery/33638195/Spotify-Year-in-Music-2015

而 Duotone 也幾乎變成 Spotify 的御用視覺風格,在過去幾年的官方網頁與其軟體中都很常見。


2018 年:材質與漸層

2018 年的網頁設計已經是創意的戰場,各種好玩的風格都有,這也是設計師價值的體現噢。

舉個例子,那年很常見一種類似於紙板裁切的效果,這個最早應該是會追朔到 18 世紀中葉,歐洲藝術家之間開始流行的紙雕(Papercut) 創作,那這樣的效果在網頁上呈現,會很好地創造視覺深度感,讓層次變化更富。 這樣子藝術媒材與數位介面的結合,其實綜觀網頁設計的發展史並不少見,但卻每一個案例都是經典。

而 Paper Cut 的紙雕風格結合網頁上的漸層跟陰影,就可以輕鬆做出層次感。

https://dribbble.com/shots/5367995-Grabient-Landing-Page/attachments

漸層在這幾年網頁上的風格使用就更常見了,而不同於以往幾乎只拿來做陰影跟配色,現在用來刻畫光暈、材質、光線等等的漸層運用很常看到。

https://dribbble.com/shots/5515214-Grabient-2-0/attachments

不論是從冷色轉到暖色,還是相似色的轉變漸層,都能更做出強烈的網頁視覺,而下面這個例子還運用立體曲線跟高斯模糊的作法:

https://dribbble.com/shots/5374044-Natoni-Landing-Page/attachments

2019:插畫與 3D

2019 年我想在網路產業中最一股熱潮的應該就是量身訂製的插畫風格了,我們可以在許多科技公司的網頁 Rebranding 中看到都有使用活潑的插畫來當作網頁的主視覺。 沒有什麼酷炫的新技術,而是直接將插畫圖片放到網站上面,並讓整個網站都套用一致的「插畫規範」營造整體感,這帶給了許多冷冰冰的科技產品一點溫度,可以讓使用者感到更多信賴感。

https://ueno.co/work/slack/

用插畫來主導網頁的視覺,在瀏覽的時候心情會很愉悅呢!

9ea9518b80ac239d7b87fcd0e8d2ad94
https://dribbble.com/shots/12873245-Landing-Page-TheCronos/attachments/4472807?mode=media

而插畫風格的網頁到現在,也有愈來愈多 3D 建模感的插畫出現,都帶給使用者們愉悅的瀏覽體驗。

Ab25d3e55a668d17f4aef87231f9aea3
https://dribbble.com/shots/13920747/attachments/5530478?mode=media
F933ae2bcfeee160a463559e4266f850
https://dribbble.com/shots/14273496/attachments/5924353?mode=media

2020 年起:當網頁技術跟上設計師的創意

那至於今年 2020 年與未來的網頁設計趨勢嘛⋯

我覺得雖然會有一些特定期間流行的元素,但其實啊去追本朔源,會發現那些設計風格,除了是網頁前端技術革新帶來的,還有很多是設計師自己的創意,並透過與前端工程師的合作,共同打造出來的嶄新介面體驗,來讓這個品牌網頁給人耳目一新的感覺。

https://thegeekdesigner.com/
這個探險活寶(Adventure Time)的官網很可愛!只是載入需要一點時間~
https://adventuretimedistantlands.com/

重點結語

看完了這十年流行過的網頁設計風格(坦白說還有很多沒列進來),我們可以大概 get 到一些網頁設計的風格發展走向:

  1. 一開始把平面設計搬到網頁上,接著發展出原生的螢幕載體設計語彙,然後混合成「取材於既有現實物件,並加以創意執行。」的網頁風格,通常會超帥。
  2. 網頁前端的新技術誕生,能讓網頁設計有更多發展可能性,同時設計師對於網頁框架突破的想像力,也會帶給開發技術上應用的躍進,「設計」與「開發」得以持續循環並產生無限的進化動能。
  3. 網頁存在的本質,已經從「存放紀錄資訊」為主,轉變成「提升品牌印象和好感度」為首要目標。

而我們也可以從中學習到,做 UI 設計的基礎工作,即是把基本的資訊內容與排版做好、照顧好使用者的體驗,但也可以不只停留在「好用」的階段,而是可以更進一步追求「好看」與「好玩」的境界,讓使用者除了感到滿意之外,還能有好喜歡的感覺,進而達到透過網站提升品牌印象和好感度等商業目標。

只是現在網頁那麼多,要如何讓使用者留下好印象呢?我們可以類比一下人與人之間的民間相處要訣:「始於顏值,敬於才華,合於性格,久於善良。」就能得到:

網頁設計的原則

始於設計,敬於技術,合於體驗,久於內容。 — By Riven

我們能夠在「設計」層面創造獨特的視覺風格,讓使用者能停留目光;而當往下滑的時候,則可透過網頁前端「技術」的展現,來讓使用者懾服於你。但當然網頁還是需要給人用的,當有進一步互動時最重要的就還是「體驗」;而影響下次還會不會再訪網頁的考慮因素,還是回歸到該有的「內容」上。


好啦,謝謝你看到這邊,而這堂歷史課就是為了能夠一起將脈絡理清楚,畢竟如果今天只說結論,那會有點空洞吧~而這也是我堅持在部落格撰寫長文的原因,很多知識是無法用懶人包或三言兩語傳達的。

而透過今天這篇文章呢,希望可以跟大家一起認識網頁的發展脈絡,同時借鑒過去的時代經驗,讓我們可以更全面地面對當下的設計挑戰,甚至也能夠預測未來的設計趨勢噢。

我是 Riven,我們下次見啦~ Bye!🙂


留個言
訂閱 RAR 設計攻略

訂閱 RAR 設計攻略

每週將收到最新設計相關情報~

🤩 成功完成訂閱啦!讚讚~