2021年的10大網頁設計趨勢
從2011年到2013年主要是以RWD響應式網頁設計為開發主流，純色、區塊型排版、採用實境照片營造氛圍就成了常見的設計趨勢， 近年來RWD響應式網頁設計已經是普遍大眾化，作為網頁開發的基礎規格之一，於是開始吹起了突破純色、區塊、互動性低的為的設計趨勢，除了保留營造整體氛圍的方向之外，如何跟滑鼠或手指互動變得非常重要，不再是死板板的區塊型靜態RWD響應式網頁設計。到底2021年有哪10大網頁設計趨勢呢？我們來一個一個細看：
1. Dark Mode的流行
隨著Mac OS與iOS推廣Dark Mode之後，現在網頁設計也吹起了一場Dark Mode風格，以往以白色或明亮為主的網頁設計趨勢，已經逐漸轉變成較為神秘、黑暗的色系，最好還有附上切換鍵，可以切換色頁面色系，符合使用者喜好。而Dark Mode也不是一昧的把亮色改成黑色就好，例如黑底色根據Material Design推薦是採用#121212會是比較適合的暗色底，文字粗細也不宜太粗，避免頁面過於沈重，但太細的字體閱讀性不佳也不建議使用。主色系與配色等等的顏色建議飽和度都要偏高，否則整體顏色過重會一樣會帶來頁面過於沈重的氛圍。另外在圖片上也建議搭配濾鏡來過濾亮度過高的圖片，以免讓使用者覺得刺眼或過於突出，導致在頁面瀏覽上有不舒服的感受，除了Material Design可以參考以外，Apple的Human Interface Guidelines也有Dark Mode的規範可以參考喔！
2. 插畫
流行了滿屏照片營造氛圍幾年後，開始又從真實情境回到了虛擬，2D插畫的風格又再度回到了流行，尤其是svg向量圖在網頁上運用開始廣泛後，使用向量繪圖的插畫風就變成了一種風潮。而插畫本身也是極度帶有個人風格的一種設計圖樣，所以要找到符合品牌印象的插畫師，才能製作出適合網站的插畫風格。
3. 3D物件與AR擴增實境
隨著canvas的技術越來越穩定，加上web 3D引擎套件的開發逐漸成熟，將一些3D物件直接放到頁面上，跳脫照片氛圍的平面感，讓頁面風格更加立體，透過獨特的色彩渲染方式也可以讓3D物件擁有獨特的設計風格。另外360度的照相機或攝影機也開始流行，將相關的檔案放到Web頁面上360旋轉也可以打造3D瀏覽的效果。
比方說Jeep在Build＆Price a Jeep上就透過從心中360度瀏覽內裝的功能，讓使用者可以有身歷其境的感受！
4.高斯模糊渲染配色與舒適的漸層色
流行純色幾年以後，漸層色的運用又再度回到了流行趨勢上，但比起過往的漸層色運用，現在流行的漸層色偏好以舒適的漸層帶點模糊的概念，這是除了採用Dark Mode營造神秘氛圍之外的另外一種手法，色彩如果運用得宜可以明確呈現出網站的個性，也可以帶來一點溫暖的氛圍。如果你對什麼是舒適的漸層色有調色上的困擾，推薦你可以到itmeo所做的webgradients網站瀏覽，webgradients上面有180個已經調好配色的漸層，你可以下載Skethc或Photoshop的色彩包，網站上也可以直接瀏覽這180個漸層色全屏的樣子，喜歡的話你可以直接下載PNG圖檔或是直接複製CSS3漸層語法，是個相當方便的網站喔！webgradients一開始的loading動態與過場也蠻有趣的，真的很值得逛一下喔！
5. 自訂滑鼠游標
長達好幾年沒有看到自訂滑鼠游標這樣的功能出現在設計趨勢裡了，可以說是長達十幾年後，終於又回到了流行趨勢排行榜上。以往為了讓使用者覺得特別，可能一進網站就讓滑鼠游標帶點插畫或是更換一個有個性的icon圖示來做識別，但現在流程的自訂滑鼠游標只有在特地區塊上才會將滑鼠游標更換成其他樣式，例如文章列表就可以運用這樣的概念，一來可以讓文章的描述保留其閱讀性，二來更換游標可以讓使用者有一種驚喜感，這樣的驚喜感意外的可以吸引使用者的目標進而觸發點擊這樣的動作。
6. 複合媒材，如拼貼不同種類的素材或聲音與影片的運用
將2D與3D做一個融合，可以做出從平面跳出的感受，在頁面上做不同的反應會播放不同的聲音或是影片片段，都可以打破原本平面、死板、互動低的頁面。
7. 更華麗的視差滾動
初期一開始的視差滾動是有點移軸的概念，隨著捲軸捲動，不同的區塊彷彿有自己的時間軸似的，以不同速度向上移動，造成視覺上的一種落差，所以稱為視差滾動。現今視差滾動的運用可以結合動畫，讓捲軸真的扮演時間軸的角色，捲動多少動畫就播放多少，往上捲動或滑動是倒轉回去，而往下捲動或活動是繼續播放，如此一來可以讓使用者控制影片播放的速度，保留了視差滾動的效果，卻增加與使用者互動的緊密感。
9. 任何細節的互動方式
從早期要求滑鼠移到文字連結可能要有顏色或底線變化之後，現在可能滑鼠移到按鈕上四周的直角都會變形圓弧，或是移到某個特定的物件上，像是球體，就會觸發滾動的特效，這樣的互動會增加使用者在網頁上的趣味性，讓使用者覺得有趣，進而增加停留時間，增加使用者仔細閱讀內文、可正確傳遞內容資訊的可能性。
10. 動畫的運用
不管是2D插圖、3D模組還是視差滾動，抑或滑鼠Hover滑入的動態等等，這些都是都可以是動畫運用的區域，過往只能用影片播放的方式將動畫影片嵌入網頁中，但播放影片會有網路速度問題，很容易造成卡頓、lag等等的狀態，現今網路發展已經到5G，光籤更是普及的各個角落，所以網路速度提升的狀態下，再加上各種壓縮套件的開發、多媒體格式的標準等等，我們已經可以將影片拆成簡單的逐格動畫，直接透過捲動或滑動來做到控制動畫的播放順度，不只如此，像是點擊之後會有冒出泡泡，可以營造出在海底的感受，隨著CSS的強悍，很多動畫我們也可以不需要使用圖片就可以做到，更何況十幾年前說到動畫只會想到Flash，而現在Flash隨著iPhone誕生至今，Adobe也已經正式宣佈不在維護Flash player，建議使用者移除Flash player，這是暨微軟IE瀏覽器死亡之後，另一個陣亡的軟體，至今我們已經完全不需要Flash也能製作網頁的動畫了，而且現階段我們也逐漸發展出可以降低動畫檔案的套件，例如LottieFiles也就是其中一種。
以上十點就是我們認為的2021年網頁設計的趨勢，如果你的網站設計已經有三、四年以上，我們認為你可以開始思考要更改視覺設計符合潮流，或是直接委託我們重新製作符合潮流又好用的的新網站，一個新穎的又好用的新網站，可以讓你在數位行銷上有不一樣的突破喔。日後若有相關不錯的案例，我們也會再做補充說明，如果覺得我們有漏掉的地方，或是說明的還不清楚的話，歡迎與我們聯繫！