開發網站不可不知:2015 - 16 年的網頁設計趨勢

評論
評論

本文轉自

02
Photo credit: Bugaboo via awwwards

 

  • 透過滾動滑鼠一步一步的呈現動畫效果

流暢的滾動效果必須依賴動畫的呈現與提供更進一步的控制權給予使用者。使用者可以自行決定觸發下一段內容的步調。

03

Photo credit: Squarespace

  • 背景動畫或影片

在背景放置簡單的動畫或影片,可讓網站更加吸引人,但必須保持簡單與色調溫和,不然容易造成使用者的分心。而製作的要領在於讓動畫或影片獨立於一個區塊或使用緩緩的動態效果來呈現大圖。

04
Photo credit: Dunckelfeld

 

人們幾乎每天都與微互動(microinteraction)接觸,例如關閉手機鬧鈴的過程或在 FB 的照片上按讚。每一個互動時刻都相當短暫快速,也不需要多想。就如同你關閉鬧鈴,很自然地就透過介面完成了這項事情。而也有越來越多的 app 開始思考它,並設計微互動的介面、操作方式與流程。

05

Photo credit: Slack

基本上,微互動可以幫助使用者完成三項事情:

  1. 告知現在處於何種狀態或回饋資訊
  2. 了解這個動作後的結果
  3. 幫助使用者操作一些功能

微互動的設計是每個 app 開發中十分關鍵的部分之一。因此,我們根據此篇文章( Web Design Trends 2015 and 2016)給與開發團隊一些建議:微互動在設計時,必須儘量不打擾使用者,千萬別過度設計,並保持簡單;仔細思考每個細節,同時讓過程如同 “人類" 之間的互動;文字內容的撰寫多點人性,不要如機器人一般。此外,每一個互動的途徑都要以使用者為中心思考,讓產品更人性化,並提升可用性。當然,這會加重開發團隊的工作量,但這些確實是使用者真正或想要互動的部分。

對微互動還有興趣的讀者,可以參考設計大舌頭先前的文章 – 微互動將是 2016 年 APP 設計的新趨勢

4. Material Design: 後扁平化設計時代的創新者

去年,Google 發佈了它的設計風格語言: Material Design。它利用陰影來表現各個狀態,而陰影的深度又能帶給使用者操作扁平化物件的真實感受(例如物件前後關係)。

001
Photo Credit: Google Now

Material Design 目的是希望創造出簡潔、現代的設計風格,並專注於使用者體驗(UX)。然而,過去 Google 與設計美學談不上關係,而這次 Material Design 發表後,反而造成流行並受到各界讚揚。雖然 Material Design 的簡約設計元素,與扁平化設計相似。不過相較於扁平化,Material Design 使用了深度表現與陰影,更可表現元件的前後關係。

002

Photo credit: Angular

儘管 Google 提出這個設計語言,想要打造可供跨裝置使用的漂亮 UI 與良好體驗。但至今,應用 Material Design 的產品大多是 app。Google 也發現了這個現象,因此在七月時發佈了網站可用的套件 – Material Design Lite(MDL)。這個套件結合 vanilla CSS、HTML 和 JavaScript,並希望它夠輕量並易於開發人員使用,同時保有 Material Design 的視覺元素。此外,MDL 並不是依賴在特定框架上,所以設計師可以用各種前端方法來設計網站,同時它的程式也非常輕量化。

5. 響應式設計

近幾年,因為移動裝置普及,網站響應式設計顯得格外重要,同時也相當受到歡迎(Responsive web design,RWD)。

003

Photo credit: UXPin

以企業的角度而言,建構一個功能齊全且對於移動端友善的網站,Responsive design 是一個相對簡單且省錢的方式,但若是應用錯誤的方法,可能會影響效能。藉此,Guy’s Pod 向設計師提出了一些建議:

  1. 圖片顯示避免使用 display: none 的寫法。雖然使用者沒有看見圖片,但其實仍然是有被 load 進來的,因此在網頁的效能上產生了不必要的負擔。
  2. 圖片大小使用百分比來定義。
  3. 有條件式的引用 JavaScript,因為許多 js 元件在小尺寸的裝置上(手機)是無法被使用的。特別需要注意的是第三方 script(如社群分享按鈕)對於網站而言,常常會有負面的影響與降低效能。
  4. 使用 RESS – Responsive and Server Side
  5. 為了有效的量測與優化每個網站,應將效能測試這項目加入到流程中。

效能不單單只是使用者判斷體驗好壞的關鍵,同時也會影響 Google 的檢索排名 。此外,由於最近流行的極簡風格讓網頁排除了不必要的元素而減少頁面的複雜性,非常適合響應式的設計。同時,我們也可以看到許多具響應式設計的網站使用卡片式的排列,可在不同螢幕尺寸下,輕易的重新調整排列。

004

Photo credit: The Guardian

響應式設計已慢慢由趨勢轉變為最佳的實踐方式。然而設計師們也必須想出 一些聰明的方式解決任何速度的問題 。無疑地,響應式設計是十分有用且通用的,但它也應該是高效能的,才可以提供出色的使用者體驗(UX)。

6. 扁平化設計會退燒嗎?應該沒那麼快!

扁平化設計風格其實已經流行一陣子了,目前它也與其他相似風格與設計語言融合得很好,如極簡主義、響應式網站設計與 Google 的 Material Design。

005

Photo credit: Beoplay via awwwards

未來,我們推測有更多扁平化設計的元素會流行:

  • 長陰影(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

 

相關文章

評論