10年網頁設計流行風格回顧與趨勢分析(2010~2020)

高雄網頁設計

RWD網頁設計

客製化網站

響應式網站設計

APP開發

RWD購物網站

響應式購物網站

承攬商管理系統

高雄網頁設計,RWD網頁設計,客製化網站,響應式網站設計,APP開發,RWD購物網站,響應式購物網站,承攬商管理系統

知識觀點Article

 知識觀點 / 網站設計 / 詳細

10年網頁設計流行風格回顧與趨勢分析(2010~2020)

11 Sep 2021

 十年之前

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

UI設計,UX設計,網頁設計,高雄網頁設計

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

UI設計,UX設計,網頁設計,高雄網頁設計

 

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


而在接下來呢,讓我們一年一年來回顧,在當時的網頁都流行些什麼東西,當然這跟每年的流行穿搭一樣,並不是絕對的!但我們可能更容易在那時候從客戶那邊聽到說:「我想要 _______ 的風格。」而這些暫時流行的設計風格,拉長時間軸來看,就變成為了當年比較具有代表性的象徵。 但其實很多多年前的網站啊,現在都已經不在網路上了,因此這篇文章我會挑選這些持續影響當代網頁的設計風格,也許是今年才架好的,不過仍保有當年代表的設計語彙在。

2010年:平面轉網頁

比如說 2010 年流行的極簡主義網頁,其實很大的影響來自既有的平面設計風格,只是大家把載體從傳統印刷,換成數位網頁而已。 而細究其原因,可以理解是因為很多資訊是從既有的印刷物(如海報、雜誌、報紙、書籍等)轉移到網頁上面,而因為人類的閱讀習慣與動線關係,就繼續沿用在紙張上的平面設計方法到網頁上,因此很多網頁看起來很有像是印在紙上的既視感。
 

UI設計,UX設計,網頁設計,高雄網頁設計
UI設計,UX設計,網頁設計,高雄網頁設計
 

2011 年:螢幕載體意識

2011 年設計師開始在網頁嘗試在基礎平面上,多了一些裝飾性的元素,比如說緞帶類的視覺呈現,或是有明顯對角線的排版。 可以看出在螢幕的媒介上,設計師開始適應並嘗試了螢幕上才有的裝飾物件,但在許多地方還是能看出取材於現實中既有的材質。
 

UI設計,UX設計,網頁設計,高雄網頁設計
UI設計,UX設計,網頁設計,高雄網頁設計

2012 年:Typography 字型排版

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

UI設計,UX設計,網頁設計,高雄網頁設計

2013:Flat Deisgn 扁平化設計

2013 年是 Flat Design 扁平化設計大量出現的一年,扁平化使用了單純的配色,去除陰影與漸層,用更簡約乾淨的方式呈現資訊,由於扁平的設計元素在網頁上可以載入更快,同時兼顧介面的閱讀性,一直到今天的網頁設計風格都還是很常見。 比較經典的例子就是那時候 Windows 8 發表的 Metro UI 介面設計語言(雖然不是很多人喜歡就是惹)。

UI設計,UX設計,網頁設計,高雄網頁設計

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

UI設計,UX設計,網頁設計,高雄網頁設計
UI設計,UX設計,網頁設計,高雄網頁設計

2014 年:Meterial Design

接著,說到 2014 年的網頁設計風格,就一定會提到當年 Google 發表的 Meterial Design(不用中翻,唸中文感覺很菜),而這畢竟是網路的老大谷歌發表的設計規範,讓接下來的設計師製作網頁時也只能乖乖就範。 所謂的 Material Design,不同於以往將既有的平面設計,或現實世界的媒介搬到電腦螢幕上,而是一套全新的專門為數位介面打造的設計語言,用起來體驗會更和諧。

UI設計,UX設計,網頁設計,高雄網頁設計

Meterial Design 將既有的印刷排版、網格、平面空間,色彩和圖像都在 UI 設計上重新定義,重新思考螢幕上物件的材質與物理特性。 第一次認識可能會覺得有些抽象,的確,這真的是一個抽象化的設計語彙,但直到現在都還是被奉為設計師必看經典,建議如果之後要做 UI 設計職業,一定要去仔細閱讀。
 

UI設計,UX設計,網頁設計,高雄網頁設計
 

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

2015 年:Double Exposure 多重曝光

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

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

UI設計,UX設計,網頁設計,高雄網頁設計

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

2016 年:Flat Design 2.0

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

UI設計,UX設計,網頁設計,高雄網頁設計

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

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

UI設計,UX設計,網頁設計,高雄網頁設計

2017 年:雙色調 Duotone

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

UI設計,UX設計,網頁設計,高雄網頁設計UI設計,UX設計,網頁設計,高雄網頁設計

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

2018 年:材質與漸層

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

UI設計,UX設計,網頁設計,高雄網頁設計
 

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

UI設計,UX設計,網頁設計,高雄網頁設計
 

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

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

UI設計,UX設計,網頁設計,高雄網頁設計
 

2019:插畫與 3D

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

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

UI設計,UX設計,網頁設計,高雄網頁設計

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

 

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

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

UI設計,UX設計,網頁設計,高雄網頁設計
UI設計,UX設計,網頁設計,高雄網頁設計

 

文章摘自AAPD

相關文章

高雄網頁設計 RWD網頁設計 客製化網站 響應式網站設計 APP開發 RWD購物網站 響應式購物網站 承攬商管理系統

高雄網頁設計,RWD網頁設計,客製化網站,響應式網站設計,APP開發,RWD購物網站,響應式購物網站,承攬商管理系統