看這篇立刻了解2018年網頁設計趨勢

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

近幾年網頁設計的技術發展真的變化萬千，就連網頁設計的趨勢也都年年有所成長，尤其是2018年網頁設計又到了另外一個里程碑，如果說你還不知道現在網頁設計最新的趨勢，那建議你趕快仔細閱讀惡補一下！

1. 純色的扁平化區塊設計已經退燒

近年來RWD設計從扁平化設計(flat design)到google 的material design，都是採用單一色彩設計較多，而且區塊設計也開始讓人覺得無趣，所以早期常看到的擬真設計、陰影、漸層等設計手法又開始回歸，但是跟早期用法相比還是有不同的地方，以icon來說，單一色彩的icon開始會出現兩、三種顏色做搭配，以按鈕來說以往採用單一色彩的表現，現在也開始使用漸層色彩與淡淡的陰影凸顯按鈕立體感，如此一來可以解決單一色彩的按鈕在某些佈局下容易被忽略或是誤認的情況。

範例網站：airbnb 、 uber

搜尋框有淺淺的陰影效果

icon再也不是單一色彩，而是會透過色彩突顯重要部分

2. 大膽的用色更容易加深印象

以往我們總是會用品牌色來當作整體網站的主軸，但是一但跳脫網站的主軸用色反而會讓網友有大吃一驚的效果，通常都可以留下不錯的印象，對於新品牌來說這樣的手法可能還不敢使用，但是對於已經耳熟能詳的品牌，這要的手法反而會帶來意想不到的效果。
範例網站：Dropbox

大眾對Dropbox的印象都是水藍色，但是現在卻可以很百變

3. 破格設計打破無聊的佈局

在RWD網頁設計佈局中，因為常用的12欄格線系統，導致所有區塊都方方正正，排列雖然非常整齊，但久而久之也會覺得無趣，所以越來越多網站的內容開始會呈現破格排列，以添增內容排版上的趣味性，提供網友意外的驚喜，可以增加網友在網站上的瀏覽時間。

利用產品原本的造型創造出圓角效果，並且透過錯位的排版增加內容的吸引力

 範例網站：Bose

4. 微互動大升級，跟著捲軸一起動吃動

隨著捲軸追蹤技術的提升，以往只能在滑鼠移動或點擊時產生互動，但現在隨著你滑鼠捲動就可以安排內容區塊的進場、退場，以往的視差滾動只是圖片上的錯位效果，現在不但有錯位效果，還可以安排在頁面上製作有趣的動畫，例如火箭升空或九大行星環繞等這樣的效果，讓網友目不轉睛。

華麗的視差滾動效果可以讓網友目不轉睛

範例網站：invision

5. 影片背景運用

這裡說的影片背景通常影片長度都不會太長，而且也會墊一張大圖在影片下方，以免影片loading過慢時背景只有單一色彩的尷尬，許多用javascript或css3無法做出的視覺特效，可以透過影片的影音結合補強這點的不足。以前只能稍微滿足五感中部分視覺與聽覺，在網站與影片3D特效結合下，強烈視覺感官中又可以即時搭配配樂、音效，這樣的視覺與聽覺感官足以顛覆以往的設計。

將影片襯底，透過canvas製作數字遮罩，創造出不一樣的影片襯底效果

範例網站：Audi Q2、Microsoft Surface

6. 字型運用多變性

文字再也不是單純只是出現在畫面上，它也可以是遮罩或是有不同的錯位效果，甚至是一個很好做破格設計的元素，不再是單純呈現內容而已，也可以有互動的可能性。

將文字裸空、描邊，營造出不同的文字效果，加上墊底圖與破格設計可以將死板的網頁排版變成吸睛的動態海報

範例網站：benmingo

7. 手機載具螢幕加大

由於硬體零件成本降低，再加上觸控裝置學習曲線較低，所以上網年齡層開始上升，再者長時間上網使用螢幕造成視力容易受損，所以裝置的介面越來越大，以手機來說iphone最後一隻小螢幕手機目前是iphone SE，同iphone5系列，螢幕尺寸是4寸（320*528points，解析度1136*640），但根據statcounter的統計，台灣目前手機最流行的解析度是360*640points，約有45.45%，目前iphone 8 的解析度已經到了414*736points（解析度1242*2208），因此在設計上開始可以添加更多有互動性的內容，而不該繼續侷限在小螢幕只能很刻板無聊的設計，而且行動載具上網比例遠高於桌機，所以在網站規劃上，思考的出發點就絕對要以行動載具為主，而不是傳統桌機電腦。

8. 有趣的粒子效果風格

早期只要遇到動畫幾乎都適用flash （或現在叫animate）來製作，當然在現在已經不適合這樣製作動畫，除了直接把動畫做成影片以外，我們也可以考慮使用css來做逐格動畫，或是使用javascript撰寫動畫程式，例如可以使用javascript製作粒子效果來與滑鼠互動，你可以發現這樣效果通常都可以帶來很吸睛的互動效果。

範例網站：MASAYUKI DAIJIMA、bacter

9. 向量插畫風格動畫

由於向量格式的圖片開始可以直接用在網站上，所以網站上插畫的運用也開始變多了，也因為是向量格式，所以可以符合RWD的運用，因此向量格式的動畫也開始為之流行。但這樣的動態通常都不會太長，而且考量檔案大小，其實不一定會直接用svg格式來製作動畫內容，他有可能是jpg或png搭配css sprite，或直接使用gif製作，但整體插畫風格會是比較偏向量風格。

範例網站：inturn、baunfire、awesomemotive

以上九點就是2018年主要的網頁設計趨勢，如果你前幾年都沒跟上，你會發現現在的網頁設計跟兩三年前相比已經有點不一樣，但是跟五年前相比，改變程度的差距已經開始變大了，任何一個網站我覺得使用3~5年不等就要考慮重新設計，原因是數位世界改變其實非常快，每年網頁相關技術還在不斷發展中，五年的時間其實已經可以造成開發技術的嚴重落差，就連視覺設計風格上也會有產生落差，所以如果你的網站已經用超過五年的朋友，尤其是還沒有跟上RWD響應式設計風潮的朋友，建議您考慮一下，重新設計一個全新符合現代的網站吧！搶救回你無形中失去了行動市場！