2017 網頁設計流行趨勢Web Design Trend
【本文適合對網頁設計與開發有興趣的讀者】
身為產品設計師，時常會瀏覽不同的網站，不僅尋求設計的靈感，同時運用這些資源與工程師溝通，學習最新的技術，精進設計實力。
在Explore的階段，發現了近來的網頁設計有類似的趨勢，除了先前文章談過極簡主義簡介及應用 Minimalism in Web Design的流行
這次文章更注重網頁的整體性，包含：
- Digital Art Direction Layout / Style 平面設計導向的版面編排/風格
- Zig-Zag Pattern Z字型編排
- Magazine Layout 雜誌內頁排版
- Illustration Style 插畫風格
2. Subtle Animation & Micro-Interactions 細微動畫與互動設計
- Shape Transition 形狀變化
- Creative Scrolling / Navigation 創意導覽
(Navigation Indicator, Horizontal Scroll, Parallax Scrolling) - 3D 立體特效
希望看完這篇文章，對你的設計及開發過程有啟發，就讓我們開始吧！
1. Digital Art Direction Layout / Style 平面設計導向的版面編排/風格
在設計網頁時，如何利用視覺編排資訊的重要性十分關鍵，因為
瀏覽網頁時，使用者並不閱讀，而是掃視
因此，一個好的設計師應該理解使用者觀看習慣，及消化資訊的過程，才能讓瀏覽者將視覺焦點放在重點內容、加速理解過程，進一步達到公司的目的（傳達資訊、提升轉化率及利潤等）。先前的文章我們探討過提升易讀性 — 如何有效運用空白和資料視覺化：圖表設計。這次重點放在近年流行的網頁版面設計，由於工具的進步，讓版面設計更自由，概括而言，設計師與開發者可以更注重頁面的整體性。
1a. Zig-Zag Pattern Z字型編排 — 視覺平衡
Z字型編排十分直觀，將最主要的資訊放在左上角，觀覽者視角會按照左上、右上、左下到右下的順序掃視。
Z字型編排適合只有少數重點的內容，在Landing Page首頁、產品介紹、作品集裡十分常見，有以下兩個優點。
- 符合西方掃視書籍的習慣：左上到右下
- 視覺平衡，眼睛較不會疲勞
以下例子利用Z字型版面，十分簡潔、易於閱讀：
1b. Magazine Layout 雜誌內頁排版 — 打破水平界線
起初會注意到是因為Bloomberg首頁利用空白色塊打破了邊界，創造出十分有趣的效果，不但分隔了資訊，同時讓我回想起了雜誌內頁的排版。
試著去看雜誌內頁設計，巧妙的運用相片大小，打破了頁面邊界，引導並延升視覺方向。
過去幾年，大部分網頁遵循CSS的限制，近年但由於新工具的發展，如Flexbox及CSS grid等，打破了邊界的限制。
在今年的網頁設計中，時常發現這些巧妙的編排，頁面不再是模組塊、水平分隔，利用色塊創造出頁面整體性與層次感。以下網站也運用此效果：
1c. Illustration Style 插畫風格—拉近使用者距離
插畫讓人回憶起童年回憶，對網頁產生了親切感。插畫風格的網頁設計並不是新穎的概念，近來Ueno Digital Agency重新設計Slack團隊溝通平台的網頁，讓人耳目一新
從事產品設計師的讀者應該對InVision不陌生，2017年8月推出了DesignBetter.Co介紹設計規範及應用，首頁綜合了Z字型編排、雜誌內頁風格及插畫，綜合了這章節的三大類別。
想看更多插畫首頁設計，可以參考：
2. Subtle Animation & Micro-Interactions 細微動畫與互動設計
當環境靜止時，若有物體移動會集中觀看者的目光。強烈、突然的變化通常可以警告我們前方有危險（紅燈閃爍、高頻的音效等），會使觀覽者分散注意力，但細微的動畫，卻能讓頁面更為流暢自然。
近期導覽網站時，發現有許多頁面交替的細節讓轉換十分舒適，不論是滑動滾軸的變化、或轉換頁面的動畫，開發者與設計師更注重頁面的流暢性。
2a. Shape Transition 形狀變化
適當的形狀變化使觀看者的感受更為自然，利用Trigger啟動動畫，按鈕和Tab的應用最為常見。
2b. Scrolling Navigation 滾軸滑動導覽
• Navigation Indicator 導覽指標
以前的網頁設計盡可能把所有資訊放在與視窗大小相同的頁面，由於行動裝置的發展，使用者對Scrolling的互動方式越來越熟悉，而許多文章與研究也指出People DO Scroll。適當的導覽，讓使用者的視線不經意地往下Scroll，段落的轉化像是在說故事一樣流暢。
• Horizontal Scroll 水平導覽
由於行動裝置的廣泛，使用者漸漸習慣Swipe的手勢。同時，越多越多人使用iPad, 手機等瀏覽網頁，根據StatCounter的統計，於2016的十月，手機瀏覽網頁的比例(51.3%)超越桌上型電腦(48.7%)。再加上，360度全景相片日漸普遍與VR的興起，2016年使用者可以在Facebook上傳、觀看360度全景相片，更促成了水平瀏覽的流行。
水平瀏覽的優點在於使用者在Desktop與Mobile的經驗一致，但不習慣的使用者可能會忽略此互動方式。
• Parallax Scrolling 視差滾動
Parallax scrolling 是指隨著滾軸移動，背景的速度與前方物體的速度不同，而產生景深的錯覺，讓畫面更有層次感，在Video Game中廣泛使用。
有興趣的朋友還可以explore以下網站：
• 3D特效
玩電動遊戲的讀者應該十分熟悉3D視覺特效，隨者VR/AR的興起以及支持網頁3D的工具(WebGL)越來越成熟，順暢自然的3D動畫、沈浸式的體驗打破平面限制。
Conclusion結論
隨著科技與工具的進步，網頁設計與互動日漸多元、突破過往的限制，概括而言，我認為設計師與開發者越來越注重頁面的整體性，例如排版與轉換的動畫，讓瀏覽經驗更為自然順暢。
這些例子都是我精挑細選，希望能找到最符合主題的網站，有興趣的朋友可以點進去連結，親身體會更為深刻。
希望這篇文章對大家有幫助，可以試試看應用在自己的設計，不只是平面，更可以深入考量Transition的變化，讓使用者體驗更好。
感謝您的用心閱讀，讓我們期待下個月的文章！
