10年網頁設計流行風格回顧與趨勢分析（2010~2020）
嗨囉，我是設計師 Riven 🙂
在上一篇文章中呢，我們聊到西元 1990 年代網站的初次誕生，與接下來瀏覽器大戰帶來的網頁技術發展，同時也提到了在 2000 年初期呢，由於網站的使用者從被動瀏覽，轉變成自主產生內容的互動模式，UI/UX 的設計逐漸受到設計師與使用者的重視。
通常每一年都會在社群上看到類似「2020 年網頁設計趨勢」的文章，坦白說這類整理都還滿主觀的（畢竟沒有數據統計過），不過還是可以看一下長長見聞，就像偶然間翻閱美妝或穿搭雜誌時總會有一些意外的收穫。
而今天我們就接著來聊聊在網頁基礎建設穩定後的網頁設計趨勢，說不定能夠從其中得到一些網頁設計上的靈感哦。
時間來到西元 2010 年 6 月 7 日，已故蘋果前任 CEO 賈伯斯(Steve Jobs)，在展示台上向全世界介紹 Apple 最新的得意作品：iPhone 4，在科技圈滑起了一波大風向。在之後的短短幾年間，智慧型手機就成為每個人手上或褲子口袋內都會有的產品。
同年，網頁設計師 伊森·馬爾科特(Ethan Marcotte)發表了一篇叫《Responsive Web Design》的文章，裡面講述了一種方法，能將 HTML 程式碼乘載的網頁內容，針對不同裝置進行自適應，也就是現在網站都會要求的響應式設計。
在此之後的 10 年間(西元2010~2020)，由於前面歷經瀏覽器戰爭與 Web 2.0 等網頁技術面的發展，在這些基礎設施之上，網頁的開發技術面相對穩定與安全，就跟人類在求溫飽滿足之後就會追求吃得更好一樣（八方雲集不吃鍋貼改點鮮蝦水餃），大家開始更關注網頁的視覺美觀，以及用起來好不好用，也就是網頁的開發重點轉移成設計、創意、視覺、互動等等；網路上統稱這些使用當代最新網頁技術的網站為 — — Modern Web。
而在台灣也有同名的資訊年會 Modern Web，每年都會舉辦大型活動來讓 IT 產業工作者參加。而在接下來呢，讓我們一年一年來回顧，在當時的網頁都流行些什麼東西，當然這跟每年的流行穿搭一樣，並不是絕對的！但我們可能更容易在那時候從客戶那邊聽到說：「我想要 _______ 的風格。」而這些暫時流行的設計風格，拉長時間軸來看，就變成為了當年比較具有代表性的象徵。
但其實很多多年前的網站啊，現在都已經不在網路上了，因此這篇文章我會挑選這些持續影響當代網頁的設計風格，也許是今年才架好的，不過仍保有當年代表的設計語彙在。
2010年：平面轉網頁
比如說 2010 年流行的極簡主義網頁，其實很大的影響來自既有的平面設計風格，只是大家把載體從傳統印刷，換成數位網頁而已。
而細究其原因，可以理解是因為很多資訊是從既有的印刷物（如海報、雜誌、報紙、書籍等）轉移到網頁上面，而因為人類的閱讀習慣與動線關係，就繼續沿用在紙張上的平面設計方法到網頁上，因此很多網頁看起來很有像是印在紙上的既視感。
2011 年：螢幕載體意識
2011 年設計師開始在網頁嘗試在基礎平面上，多了一些裝飾性的元素，比如說緞帶類的視覺呈現，或是有明顯對角線的排版。
可以看出在螢幕的媒介上，設計師開始適應並嘗試了螢幕上才有的裝飾物件，但在許多地方還是能看出取材於現實中既有的材質。
2012 年：Typography 字型排版
2012 年在國外設計圈開始流行將「字型」應用到網頁上的玩法，不論是手繪感的字，或放上各種字重的字體等等，都讓「文字」成為網頁上的視覺主導，當然我們本來就可以在許多雜誌（特別是日本或英文語系）中看到這樣的視覺，但網頁在技術的維度上又能做到更進階的變化可能性，尤其是文字本身構築的動態設計(Motion Design)。
而世界上第一個中文網頁字型服務，也是在這一年由台灣字型公司 justfont 所推出。2013：Flat Deisgn 扁平化設計
2013 年是 Flat Design 扁平化設計大量出現的一年，扁平化使用了單純的配色，去除陰影與漸層，用更簡約乾淨的方式呈現資訊，由於扁平的設計元素在網頁上可以載入更快，同時兼顧介面的閱讀性，一直到今天的網頁設計風格都還是很常見。
比較經典的例子就是那時候 Windows 8 發表的 Metro UI 介面設計語言（雖然不是很多人喜歡就是惹）。
而我們從藝術史上來看，就可以發現這是源自於 1950 年代國際主義設計風格，又或者說是瑞士風格，與現代網頁技術的結合後的產物。
2014 年：Meterial Design
接著，說到 2014 年的網頁設計風格，就一定會提到當年 Google 發表的 Meterial Design（不用中翻，唸中文感覺很菜），而這畢竟是網路的老大谷歌發表的設計規範，讓接下來的設計師製作網頁時也只能乖乖就範。
所謂的 Material Design，不同於以往將既有的平面設計，或現實世界的媒介搬到電腦螢幕上，而是一套全新的專門為數位介面打造的設計語言，用起來體驗會更和諧。
Meterial Design 將既有的印刷排版、網格、平面空間，色彩和圖像都在 UI 設計上重新定義，重新思考螢幕上物件的材質與物理特性。
第一次認識可能會覺得有些抽象，的確，這真的是一個抽象化的設計語彙，但直到現在都還是被奉為設計師必看經典，建議如果之後要做 UI 設計職業，一定要去仔細閱讀。
那麼，愈接近現在的網頁設計，你會發現很難夠用單純一種風格或趨勢，去概括一整年的網頁發展，主要是因為 HTML5 / CSS3，以及 JavaScript 等等更新網頁技術的體現，同時也都影響了網頁介面，讓設計有幾乎無限種可能性，只要想得到的創意，幾乎都能夠在網頁上呈現。
所以接下來，我們就以當年很常見的、跟比較具代表性的網頁發展項目來介紹。
2015 年：Double Exposure 多重曝光
2015 年不知道大家還有沒有印象，那一年很常看到一種叫 Double Exposure 的視覺效果，簡單來說就是將兩張照片融合在一起，這其實是源自於攝影上一種叫「多重曝光」的手法，而現今也被運用在網頁設計上面。
同時，除了攝影照片的應用，影片這個媒材也愈來愈常見到在網頁當中，像是直接入嵌影片變成背景輪播，製造情境帶入感，也是這一年開始常見的設計做法。
不論怎麼做，都是要讓網頁看起來更吸睛，那我們就可以曉得，網頁除了記載資訊的原始用途之外，開始有更多的是給予更好的品牌印象與視覺效果。
2016 年：Flat Design 2.0
在 2016 年如果說只能認識一種設計風格，那應該就是被網路稱為 Flat Design 2.0 的二代扁平化設計，我們可以從下面這張對照圖中，看出二代扁平化有更多的視覺細節，比如說陰影表現或材質感，其實不難看出在視覺處理上有受到 Google 的 Material Design 影響，相較之下原本的一代扁平化顯得比較單調，而且在視覺層次上也稍微單薄一點。
Flat Design 1.0 與 2.0 的差別還有更著重光影，以及配色選擇更多一點，同時也有更細緻一點的漸層表現，整體來說細節更豐富，但仍保留扁平化設計的直觀與易用等優點。
而 Flat Design 2.0 之後就逐漸延伸到現在的各種網頁上的奇淫技巧了，尤其是插畫，我們在現在的很多網頁當中仍然可以看到一些扁平的感覺，但有更多的筆刷細節還有更豐富的色彩呈現。
2017 年：雙色調 Duotone
再說到 2017 年，我想介紹雙色調（Duotone）的視覺風格給你認識，這是一種將照片轉換成兩種顏色的手法，技術上可以用 Photoshop 調整，或直接用程式去改，好處是搭配企業品牌的標準色，可以讓網頁整體感更加明確。
而 Duotone 也幾乎變成 Spotify 的御用視覺風格，在過去幾年的官方網頁與其軟體中都很常見。
2018 年：材質與漸層
2018 年的網頁設計已經是創意的戰場，各種好玩的風格都有，這也是設計師價值的體現噢。
舉個例子，那年很常見一種類似於紙板裁切的效果，這個最早應該是會追朔到 18 世紀中葉，歐洲藝術家之間開始流行的紙雕(Papercut) 創作，那這樣的效果在網頁上呈現，會很好地創造視覺深度感，讓層次變化更富。 這樣子藝術媒材與數位介面的結合，其實綜觀網頁設計的發展史並不少見，但卻每一個案例都是經典。
而 Paper Cut 的紙雕風格結合網頁上的漸層跟陰影，就可以輕鬆做出層次感。
漸層在這幾年網頁上的風格使用就更常見了，而不同於以往幾乎只拿來做陰影跟配色，現在用來刻畫光暈、材質、光線等等的漸層運用很常看到。
不論是從冷色轉到暖色，還是相似色的轉變漸層，都能更做出強烈的網頁視覺，而下面這個例子還運用立體曲線跟高斯模糊的作法：
2019：插畫與 3D
2019 年我想在網路產業中最一股熱潮的應該就是量身訂製的插畫風格了，我們可以在許多科技公司的網頁 Rebranding 中看到都有使用活潑的插畫來當作網頁的主視覺。 沒有什麼酷炫的新技術，而是直接將插畫圖片放到網站上面，並讓整個網站都套用一致的「插畫規範」營造整體感，這帶給了許多冷冰冰的科技產品一點溫度，可以讓使用者感到更多信賴感。
用插畫來主導網頁的視覺，在瀏覽的時候心情會很愉悅呢！
而插畫風格的網頁到現在，也有愈來愈多 3D 建模感的插畫出現，都帶給使用者們愉悅的瀏覽體驗。
2020 年起：當網頁技術跟上設計師的創意
那至於今年 2020 年與未來的網頁設計趨勢嘛⋯
我覺得雖然會有一些特定期間流行的元素，但其實啊去追本朔源，會發現那些設計風格，除了是網頁前端技術革新帶來的，還有很多是設計師自己的創意，並透過與前端工程師的合作，共同打造出來的嶄新介面體驗，來讓這個品牌網頁給人耳目一新的感覺。
https://adventuretimedistantlands.com/
重點結語
看完了這十年流行過的網頁設計風格（坦白說還有很多沒列進來），我們可以大概 get 到一些網頁設計的風格發展走向：
- 一開始把平面設計搬到網頁上，接著發展出原生的螢幕載體設計語彙，然後混合成「取材於既有現實物件，並加以創意執行。」的網頁風格，通常會超帥。
- 網頁前端的新技術誕生，能讓網頁設計有更多發展可能性，同時設計師對於網頁框架突破的想像力，也會帶給開發技術上應用的躍進，「設計」與「開發」得以持續循環並產生無限的進化動能。
- 網頁存在的本質，已經從「存放紀錄資訊」為主，轉變成「提升品牌印象和好感度」為首要目標。
而我們也可以從中學習到，做 UI 設計的基礎工作，即是把基本的資訊內容與排版做好、照顧好使用者的體驗，但也可以不只停留在「好用」的階段，而是可以更進一步追求「好看」與「好玩」的境界，讓使用者除了感到滿意之外，還能有好喜歡的感覺，進而達到透過網站提升品牌印象和好感度等商業目標。
只是現在網頁那麼多，要如何讓使用者留下好印象呢？我們可以類比一下人與人之間的民間相處要訣：「始於顏值，敬於才華，合於性格，久於善良。」就能得到：
《 UI 設計的原則 》
始於設計，敬於技術，合於體驗，久於內容。
— By Riven
我們能夠在「設計」層面創造獨特的視覺風格，讓使用者能停留目光；而當往下滑的時候，則可透過網頁前端「技術」的展現，來讓使用者懾服於你。但當然網頁還是需要給人用的，當有進一步互動時最重要的就還是「體驗」；而影響下次還會不會再訪網頁的考慮因素，還是回歸到該有的「內容」上。
好啦，謝謝你看到這邊，而這堂歷史課就是為了能夠一起將脈絡理清楚，畢竟如果今天只說結論，那會有點空洞吧～而這也是我堅持在部落格撰寫長文的原因，很多知識是無法用懶人包或三言兩語傳達的。
而透過今天這篇文章呢，希望可以跟大家一起認識網頁的發展脈絡，同時借鑒過去的時代經驗，讓我們可以更全面地面對當下的設計挑戰，甚至也能夠預測未來的設計趨勢噢。
我是 Riven，我們下次見啦～ Bye！🙂
