較資深的用戶或設計師應該都還記得，90年代大家特別喜歡使用繁複的 GIF 動態檔來裝飾網頁吧？而現在最流行的網頁風格反而是簡約的扁平化設計。 網頁設計趨勢 可以反映當時的技術、使用者習慣、裝置、美學與設計思維的不同，相當有趣並值得探討。
舉個最近流行的趨勢吧！我們可以看到 響應式網頁設計（RWD）越來越流行，許多網站皆改為此方式來設計，除了對移動裝置用戶更友善外，甚至也影響 Google 的搜尋排行。接著，就讓我們透過 UXPin 針對今年度所見的趨勢整理而成的文章，一起回顧今年的網頁設計風潮與展望明年可能會流行的趨勢囉～
1. UI 模板（patterns）激增
我們可以發現，在響應式設計的風潮下，似乎每個網站看起來都一樣。不過，造成這樣的現象，除了響應式設計外，還有其他原因，譬如市場上出現大量的套版網站與工具（如 WordPress 等）。不過，相似排版與視覺的模板並非不好，這只是市場上出現大量好用的 UI 模板後，我們考量它所帶來的效益（省成本或可更專注於內容等）而產生的必然的現象而已。
另外，這些模板的發展都相當的成熟，要有極大的創新確實也相對困難。事實上，我們也不需要為了創新，而把一個通用成熟的東西重新發明。應該把精力放在如何用 UI 模板打造出流暢的使用者體驗，以下是設計師不可不知的 UI 模板元素：
1. 漢堡圖標（hamburger menu）：類似中文 “三” 的漢堡圖標，雖然過去常被批評和討論（使用者不易理解符號意思等），但現在使用者大多能理解它的意思了。此外，它可把眾多的選項元素縮合（menu），相當方便，在許多產品上都可看見這個圖標的應用。
2. 帳號註冊的方法：我們可以發現，幾乎所有網站的會員註冊頁面的排版方式都很接近，通常會在表格底下放置第三方登入的按鈕（如 Fb 等）。若註冊方式較複雜，也會將步驟拆解分散在多個頁面，並提供提示讓使用者知道如何進行，藉此減少註冊流程中不良體驗的產生。
3. 長滾動條頁面（Long scroll）：這項設計的流行可以歸因於行動裝置用戶的增長，因為行動裝置適合不斷的將頁面往下滑動。除此之外，這項技術特別適合那些想要說故事的網站（不斷的往下滾動，讓使用者沉浸於功能介紹等內容），並且還可以做出如簡報般，滾動一格就換到全新頁面的效果。
4. 卡片式排版：Pinterest 是應用卡片式排版的先驅，因為卡片式易於讓使用者以掃描的方式了解每塊區域的內容，所以相當受到歡迎。每一塊卡片區域都有獨立的資訊，就如同內容的容器般。此外，因其方形的型態，在不同的螢幕大小下，網站也可以輕易地重新排配版面。
5. 高清晰度的大圖（Hero image）：視覺是人們感受事物的主要方式之一，網站上若擺放高清晰度的大圖，可很快的抓住使用者的注意力。這個趨勢主要歸因於網路的速度提升，使用者不必受苦於載入圖片時的等待。其中，我們最常看到的排版方式莫過於在網站最上方放置一張高清晰度的大圖，緊接著下方有由左至右並由上往下的系列內容排列（zig-zagging）或卡片式的布局。
還想要了解更多 UI 模板與技術的知識，歡迎讀者參考這本免費的電子書 – Web Design Trends 2015 and 2016
2. 豐富的動態效果
動畫可以加強網站想要告訴使用者的資訊，營造更多互動性與娛樂性。然而，設計師還是需要考量放置的位置，何處或何時出現才能達到動畫想傳遞的效果；另外，也要思考如何帶入產品的故事元素與品牌個性。基本上，動態效果可分為兩種動畫類型：
- 大尺寸的動畫：通常使用大尺寸的動畫，就是想讓它成為與使用者互動的工具。其中有多種呈現方式，如滾動視差或彈跳通知視窗等方式。
- 小尺寸的動畫：小尺寸的動畫大多應用於資訊單向傳達的情境，如等待中的旋轉效果、滑鼠 hover 時的效果或載入進度條的效果等。
在此，我們整理了7種較受歡迎的動畫技術：
- 載入時的動畫
雖然傳統的旋轉或連續的圓點動畫就能表示載入狀態，但似乎滿無趣的。因此有一些設計師開始設計載入時的動畫（或頁面），它們特別受到扁平化設計、 極簡主義、 作品集與單頁類型的網站歡迎。最後，我們也要提醒，設計要保持簡單且避免加入音效，巧妙地融入網站特質與識別配色。
- 呼叫或隱藏導航列和選單的轉場效果
將導航列或選單隱藏，是現在很多網站或 app 應用的方式，尤其可以省下許多頁面空間。譬如說，應用 hamburger icon 來隱藏選單。但要特別注意別用太過度或過長的轉場效果，造成使用者不悅。
- hover 動畫
使用者已經習以為慣地透過滑鼠 hover 的方式，來瀏覽更多的資訊。因此增加 hover 的動畫，直接地給予使用者視覺回饋，會讓這個行為更直覺。
- 圖片集與幻燈片的動畫
圖片集（可切換圖片或呈現多張）與幻燈片（單張切換）的呈現方式，很適合讓使用者閱讀圖片，若增加更多互動性，可再提升使用者體驗。這樣的方式特別適合攝影、產品與作品集類型的網站。
- 動態的物件
人類很自然地會被動態的事物所吸引，因此設計師可以透過這個方法來抓住使用者的注意力，也可以讓畫面視覺更有層次感。甚至可以將其應用於表單、CTA 按鈕或選單上，以達到商業的效益。
- 透過滾動滑鼠一步一步的呈現動畫效果
流暢的滾動效果必須依賴動畫的呈現與提供更進一步的控制權給予使用者。使用者可以自行決定觸發下一段內容的步調。
- 背景動畫或影片
在背景放置簡單的動畫或影片，可讓網站更加吸引人，但必須保持簡單與色調溫和，不然容易造成使用者的分心。而製作的要領在於讓動畫或影片獨立於一個區塊或使用緩緩的動態效果來呈現大圖。
3. 微互動
人們幾乎每天都與微互動（microinteraction）接觸，例如關閉手機鬧鈴的過程或在 FB 的照片上按讚。每一個互動時刻都相當短暫快速，也不需要多想。就如同你關閉鬧鈴，很自然地就透過介面完成了這項事情。而也有越來越多的 app 開始思考它，並設計微互動的介面、操作方式與流程。
基本上，微互動可以幫助使用者完成三項事情：
- 告知現在處於何種狀態或回饋資訊
- 了解這個動作後的結果
- 幫助使用者操作一些功能
微互動的設計是每個 app 開發中十分關鍵的部分之一。因此，我們根據此篇文章（ Web Design Trends 2015 and 2016）給與開發團隊一些建議：微互動在設計時，必須儘量不打擾使用者，千萬別過度設計，並保持簡單；仔細思考每個細節，同時讓過程如同 “人類” 之間的互動；文字內容的撰寫多點人性，不要如機器人一般。此外，每一個互動的途徑都要以使用者為中心思考，讓產品更人性化，並提升可用性。當然，這會加重開發團隊的工作量，但這些確實是使用者真正或想要互動的部分。
對微互動還有興趣的讀者，可以參考設計大舌頭先前的文章 – 微互動將是2016年APP設計的新趨勢。
4. Material Design: 後扁平化設計時代的創新者
去年，Google 發佈了它的設計風格語言： Material Design。它利用陰影來表現各個狀態，而陰影的深度又能帶給使用者操作扁平化物件的真實感受（例如物件前後關係）。
Material Design 目的是希望創造出簡潔、現代的設計風格，並專注於使用者體驗（UX）。然而，過去 Google 與設計美學談不上關係，而這次 Material Design 發表後，反而造成流行並受到各界讚揚。雖然 Material Design 的簡約設計元素，與扁平化設計相似。不過相較於扁平化，Material Design 使用了深度表現與陰影，更可表現元件的前後關係。
儘管 Google 提出這個設計語言，想要打造可供跨裝置使用的漂亮 UI 與良好體驗。但至今，應用 Material Design 的產品大多是 app。Google 也發現了這個現象，因此在七月時發佈了網站可用的套件 – Material Design Lite（MDL）。這個套件結合 vanilla CSS、HTML 和 JavaScript，並希望它夠輕量並易於開發人員使用，同時保有 Material Design 的視覺元素。此外，MDL 並不是依賴在特定框架上，所以設計師可以用各種前端方法來設計網站，同時它的程式也非常輕量化。
5. 響應式設計
近幾年，因為移動裝置普及，網站響應式設計顯得格外重要，同時也相當受到歡迎（Responsive web design，RWD）。
以企業的角度而言，建構一個功能齊全且對於移動端友善的網站，Responsive design 是一個相對簡單且省錢的方式，但若是應用錯誤的方法，可能會影響效能。藉此，Guy’s Pod 向設計師提出了一些建議：
- 圖片顯示避免使用 display: none 的寫法。雖然使用者沒有看見圖片，但其實仍然是有被 load 進來的，因此在網頁的效能上產生了不必要的負擔。
- 圖片大小使用百分比來定義。
- 有條件式的引用 JavaScript，因為許多 js 元件在小尺寸的裝置上（手機）是無法被使用的。特別需要注意的是第三方 script（如社群分享按鈕）對於網站而言，常常會有負面的影響與降低效能。
- 使用 RESS – Responsive and Server Side
- 為了有效的量測與優化每個網站，應將效能測試這項目加入到流程中。
效能不單單只是使用者判斷體驗好壞的關鍵，同時也會影響 Google 的檢索排名。此外，由於最近流行的極簡風格讓網頁排除了不必要的元素而減少頁面的複雜性，非常適合響應式的設計。同時，我們也可以看到許多具響應式設計的網站使用卡片式的排列，可在不同螢幕尺寸下，輕易的重新調整排列。
響應式設計已慢慢由趨勢轉變為最佳的實踐方式。然而設計師們也必須想出一些聰明的方式解決任何速度的問題。無疑地，響應式設計是十分有用且通用的，但它也應該是高效能的，才可以提供出色的使用者體驗（UX）。
6. 扁平化設計會退燒嗎？應該沒那麼快！
扁平化設計風格其實已經流行一陣子了，目前它也與其他相似風格與設計語言融合得很好，如極簡主義、響應式網站設計與 Google 的 Material Design。
未來，我們推測有更多扁平化設計的元素會流行：
- 長陰影（Long shadow）：長陰影可以帶給扁平元素視覺上的深度。
- 鮮明色調： 一些受歡迎的 UI 模板都開始使用越來越鮮明的色系。
- 簡單的文字排版：簡單的文字排版，可以確保文字在扁平化設計下，保持清晰與可讀性。
- 幽靈按鈕（Ghost button）： 幽靈按鈕的意思就是，讓按鈕僅留下外框線與說明文字，當使用者透過滑鼠 hover 時，才呈現變化。這樣可以讓使用者更專注於按鈕的功能性，避免上方的顏色、形狀或視覺表現而分心。
- 極簡主義： 省略不必要的元素，讓畫面看起來清新不擁擠。
關於 網頁設計 趨勢的小建議
雖然這些設計趨勢是因為帶來某些效益而受到歡迎，但千萬別盲目地追求流行，一定要以使用者為中心思考，確保應用這些設計趨勢對他們是好的。例如，電商網站就不適合完全的無限滾動頁面。所以，這些趨勢僅是設計師腦袋中的資料庫，必須深思熟慮的選擇其中最佳方案。
如果還想要了解更多 網頁設計趨勢 的資訊，可以下載我們免費的 e-book – Web Design Trends 2015 and 2016。這本書內分析了超過160個案例，包含 Google、Apple、Reebok、BMW、Intercom、Adidas、Dropbox 等等。
本文章已獲得作者授權，翻譯自：6 Web Design Trends You Must Know for 2015 & 2016 by Jerry Cao ，原文出處 awwwards
–
延伸閱讀：
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
