2016 Web Design Trends

簡單整理(節錄)一下讀完 UXPin 2016 Web Design Trends的想法跟重點。

2016 Web Design Trends



文章內針對Microinteraction所提及的重點除了與視覺動效相關的部分,我認為最重要的是在該章節中所提到的“導向流程”:1.動機觸發 2.熟悉的行動 3.完成行動的Reward到重複達成目標並建立習慣養成的步驟。

  • Cue (the microinteraction) — Trigger that initiates action
  • Routine — Familiar user action
  • Reward — Reason for completing action

長時間來看這樣的習慣養成是漸進式的一個過程,因此過於跳Tone或是不合乎使用者預期的設計,動畫(更詳盡的動畫設計建議參考Material Design Guideline)以及流程規劃往往會造成使用者的困惑,更糟的情況是使用者會進而產生挫折以及不耐煩的感受,然後就…有緣再相見吧。


Facebook’s red box and whitened icon (cue) indicate there’s a message, which makes the user click the icon (routine) to chat with their friend (reward). After awhile, users automatically click when they see the red box/white icon and a habit forms.


Negative Space

Negative space, negative space, negative space, enough negative space.

很重要所以說四次,絕大部分的非視覺設計者,尤其是工程背景較重,或是較年長者(Boss?)往往會有內容塞越多越緊越密越吸引人的迷思?!Negative Space的使用在很多情況底下是很難說出一個“邏輯”跟原因的(當然您可以找到一大堆的文章去分析跟解釋為什麼要有Negative space,但最重要的還是感覺啦。),雖然是有點極端的案例,但是底下兩者範例產生的問題應該有點Sense的朋友都可以理解。

所以當設計師/工程師花費時間調整空間或間距時,Please don’t ask why。

Humor for Text

Microinteractions like modal CTAs or announcements — and especially error messages like 404 pages — benefit from humor. At the very least, use a casual and human voice.


Photo Usage



  • Use simple photos with a single, clear subject. Busy photographs, such as panoramic landscapes, may be obscured.
  • Contrasting colors make it easier to distinguish what’s in the photograph.
  • Set off the photo from the rest of the screen with a colorful border or scrolling slider.
  • Use crisp and focused pictures, with clear divides.

在Layout上面,可以嘗試運用不對稱(Asymmetry)如下圖 →其實滿坑滿谷的網站都這樣做了啊xD:

分割排版(Split-screen Style)

Photo credit: Watch Trop Fest


Video Usage


Auto-mute這個小細節是常常沒有注意到的喔 →自動靜音但是讓音量按鈕位置清楚,個人認為會是一個不錯的小體驗 : )。

  • Between 10–30 second loops — A good balance between engaging content and manageable loading times.
  • Auto-mute — A common pet peeve of users is unexpected sound, so set the default to Off with the option to turn it on themselves.

Note: 引用區原文皆引用自2016 Web Design Trends

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.