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的應用最為常見。
• 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的變化,讓使用者體驗更好。
感謝您的用心閱讀,讓我們期待下個月的文章!