2021/04/01
4,447
想知道 UI 設計趨勢？帶你輕鬆找到設計靈感！設計師必讀！
UIUX 設計師靈感哪裡來？五分鐘快速回顧這十年的網頁設計風格，從那些年的流行關鍵字找出今年的 UI 設計趨勢！
對文章有興趣來不及看？點選右上角「橘色小書籤」
收藏文章，再也不怕錯過就是一輩子！
嗨囉，我是設計師 Riven 😊
通常每一年都會在社群上看到類似「2020 年網頁設計趨勢」的文章，坦白說這類整理都還滿主觀的（畢竟沒有數據統計過），不過還是可以看一下長長見聞，就像偶然間翻閱美妝或穿搭雜誌時總會有一些意外的收穫。
而今天我們就來聊聊在網頁基礎建設穩定後的網頁設計趨勢，說不定能夠從其中得到一些網頁設計上的靈感哦。
從 2010 之後，由於網頁的開發技術面相對穩定與安全，就跟人類在求溫飽滿足之後就會追求吃得更好一樣（八方雲集不吃鍋貼改點鮮蝦水餃），大家開始更關注網頁的視覺美觀，以及用起來好不好用，也就是網頁的開發重點轉移成設計、創意、視覺、互動等等；網路上統稱這些使用當代最新網頁技術的網站為 — — Modern Web。
現在就讓我們一年一年來回顧，在當時的網頁都流行些什麼東西，當然這跟每年的流行穿搭一樣，並不是絕對的！但我們可能更容易在那時候從客戶那邊聽到說：「我想要 _______ 的風格。」而這些暫時流行的設計風格，拉長時間軸來看，就變成為了當年比較具有代表性的象徵。
但其實很多多年前的網站啊，現在都已經不在網路上了，因此這篇文章我會挑選這些持續影響當代網頁的設計風格，也許是今年才架好的，不過仍保有當年代表的設計語彙在。
2010年：平面轉網頁
比如說 2010 年流行的極簡主義網頁，其實很大的影響來自既有的平面設計風格，只是大家把載體從傳統印刷，換成數位網頁而已。
而細究其原因，可以理解是因為很多資訊是從既有的印刷物（如海報、雜誌、報紙、書籍等）轉移到網頁上面，而因為人類的閱讀習慣與動線關係，就繼續沿用在紙張上的平面設計方法到網頁上，因此很多網頁看起來很有像是印在紙上的既視感。
2011 年：螢幕載體意識
2011 年設計師開始在網頁嘗試在基礎平面上，多了一些裝飾性的元素，比如說緞帶類的視覺呈現，或是有明顯對角線的排版。
可以看出在螢幕的媒介上，設計師開始適應並嘗試了螢幕上才有的裝飾物件，但在許多地方還是能看出取材於現實中既有的材質。
Ribbons and tags in web design
http://cargocollective.com/sowinski/Wustomize
2012 年：Typography 字型排版
2012 年在國外設計圈開始流行將「字型」應用到網頁上的玩法，不論是手繪感的字，或放上各種字重的字體等等，都讓「文字」成為網頁上的視覺主導，當然我們本來就可以在許多雜誌（特別是日本或英文語系）中看到這樣的視覺，但網頁在技術的維度上又能做到更進階的變化可能性，尤其是文字本身構築的動態設計 (Motion Design)。
而世界上第一個中文網頁字型服務，也是在這一年由台灣字型公司 justfont 所推出。
2013：Flat Design 扁平化設計
2013 年是 Flat Design 扁平化設計大量出現的一年，扁平化使用了單純的配色，去除陰影與漸層，用更簡約乾淨的方式呈現資訊，由於扁平的設計元素在網頁上可以載入更快，同時兼顧介面的閱讀性，一直到今天的網頁設計風格都還是很常見。
比較經典的例子就是那時候 Windows 8 發表的 Metro UI 介面設計語言（雖然不是很多人喜歡就是惹
Windows 8 Metro UI: A Bold New Face for Windows
而我們從藝術史上來看，就可以發現這是源自於 1950 年代國際主義設計風格，又或者說是瑞士風格，與現代網頁技術的結合後的產物。
Flat Design 在網頁 UI 上的範例
2014 年：Material Design
接著，說到 2014 年的網頁設計風格，就一定會提到當年 Google 發表的 Material Design（不用中翻，唸中文感覺很菜），而這畢竟是網路的老大谷歌發表的設計規範，讓接下來的設計師製作網頁時也只能乖乖就範。
所謂的 Material Design，不同於以往將既有的平面設計，或現實世界的媒介搬到電腦螢幕上，而是一套全新的專門為數位介面打造的設計語言，用起來體驗會更和諧。
Material 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
同時，除了攝影照片的應用，影片這個媒材也愈來愈常見到在網頁當中，像是直接入嵌影片變成背景輪播，製造情境帶入感，也是這一年開始常見的設計做法。
不論怎麼做，都是要讓網頁看起來更吸睛，那我們就可以曉得，網頁除了記載資訊的原始用途之外，開始有更多的是給予更好的品牌印象與視覺效果。
2016 年：Flat Design 2.0
在 2016 年如果說只能認識一種設計風格，那應該就是被網路稱為 Flat Design 2.0 的二代扁平化設計，我們可以從下面這張對照圖中，看出二代扁平化有更多的視覺細節，比如說陰影表現或材質感，其實不難看出在視覺處理上有受到 Google 的 Material Design 影響，相較之下原本的一代扁平化顯得比較單調，而且在視覺層次上也稍微單薄一點。
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 之後就逐漸延伸到現在的各種網頁上的奇淫技巧了，尤其是插畫，我們在現在的很多網頁當中仍然可以看到一些扁平的感覺，但有更多的筆刷細節還有更豐富的色彩呈現。
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://dribbble.com/shots/12873245-Landing-Page-TheCronos/attachments/4472807?mode=media
而插畫風格的網頁到現在，也有愈來愈多 3D 建模感的插畫出現，都帶給使用者們愉悅的瀏覽體驗。
https://dribbble.com/shots/13920747/attachments/5530478?mode=media
https://dribbble.com/shots/14273496/attachments/5924353?mode=media
2020 年起：當網頁技術跟上設計師的創意
那至於 2020 年與未來的網頁設計趨勢嘛⋯
我覺得雖然會有一些特定期間流行的元素，但其實啊去追本朔源，會發現那些設計風格，除了是網頁前端技術革新帶來的，還有很多是設計師自己的創意，並透過與前端工程師的合作，共同打造出來的嶄新介面體驗，來讓這個品牌網頁給人耳目一新的感覺。
https://adventuretimedistantlands.com/
這個探險活寶(Adventure Time)的官網很可愛！只是載入需要一點時間～
重點結語
看完了這十年流行過的網頁設計風格（坦白說還有很多沒列進來），我們可以大概 get 到一些網頁設計的風格發展走向：
-
一開始把平面設計搬到網頁上，接著發展出原生的螢幕載體設計語彙，然後混合成「取材於既有現實物件，並加以創意執行。」的網頁風格，通常會超帥。
-
網頁前端的新技術誕生，能讓網頁設計有更多發展可能性，同時設計師對於網頁框架突破的想像力，也會帶給開發技術上應用的躍進，「設計」與「開發」得以持續循環並產生無限的進化動能。
-
網頁存在的本質，已經從「存放紀錄資訊」為主，轉變成「提升品牌印象和好感度」為首要目標。
而我們也可以從中學習到，做 UI 設計的基礎工作，即是把基本的資訊內容與排版做好、照顧好使用者的體驗，但也可以不只停留在「好用」的階段，而是可以更進一步追求「好看」與「好玩」的境界，讓使用者除了感到滿意之外，還能有好喜歡的感覺，進而達到透過網站提升品牌印象和好感度等商業目標。
只是現在網頁那麼多，要如何讓使用者留下好印象呢？我們可以類比一下人與人之間的民間相處要訣：「始於顏值，敬於才華，合於性格，久於善良。」就能得到：
《 UI 設計的原則 》
始於設計，敬於技術，合於體驗，久於內容。
— By Riven
我們能夠在「設計」層面創造獨特的視覺風格，讓使用者能停留目光；而當往下滑的時候，則可透過網頁前端「技術」的展現，來讓使用者懾服於你。但當然網頁還是需要給人用的，當有進一步互動時最重要的就還是「體驗」；而影響下次還會不會再訪網頁的考慮因素，還是回歸到該有的「內容」上。
好啦，謝謝你看到這邊，而這堂歷史課就是為了能夠一起將脈絡理清楚，畢竟如果今天只說結論，那會有點空洞吧～ 而這也是我堅持撰寫長文的原因，很多知識是無法用懶人包或三言兩語傳達的。
而透過今天這篇文章呢，希望可以跟大家一起認識網頁的發展脈絡，同時借鑒過去的時代經驗，讓我們可以更全面地面對當下的設計挑戰，甚至也能夠預測未來的設計趨勢噢。我是 Riven，我們下次見啦～ Bye！
本文原載於 林育正 Riven medium，原標題：《10年網頁設計流行風格回顧與趨勢分析（2010~2020）》
如果你對於 UI/UX 很有興趣，想更深入學習成為設計師的必備知識，
我們設計了三種選課指南給不同性質、不同起點的學習者，現在就來看看吧！
► 新手自學 UI/UX ，零基礎入門成為設計師
► 平面設計轉職，快速上手 Figma/Sketch 製作作品集
► UI/UX 設計流程全攻略，實戰用戶研究方法
1128