Itsuki / イツキ
@otoitsuki
Thu, Sep 17, 2020 2:21 AM
1
四種有意義（Meaningful ）的 UI 動態特效（Motion）
Itsuki / イツキ
@otoitsuki
Thu, Sep 17, 2020 2:21 AM
1. Conversational Motion
用來與團隊內部確認用的 Motion ，比方說展示卡片元件放大時的是怎樣縮放，有點像是 Motion 的 Prototype ，通常不包括精細的動態設定參數（用什麼曲線、幾秒鐘要變化etc）
2. Functional Motion
作為提昇使用者體驗用的 Motion，比方說按鈕點下去後會放大或變換的特效或 Loading 畫面，使用者在操作系統時提供 Feedback ，讓使用者能瞭解自己的操作和系統有怎樣的互動和變化。
Itsuki / イツキ
@otoitsuki
Thu, Sep 17, 2020 2:21 AM
3. Structural Motion
展示整個產品的深度與層次的 Motion ，比方說產品中提供一致性的切換畫面轉場效果，我個人覺得這有點像是產品裡的世界觀設定xD，必須要營造產品中每個畫面一致性的連結方式。iOS Guideline & Material Guideline 都有一整套介紹深度與層次的說明。
4. Emotional Motion
主要提供趣味性、吸引人目光的 Motion。比方說 Google Doodle 跟 Landing Page 中展示區塊內容的特效。非常吃 Visual Design 的 Motion
Itsuki / イツキ
@otoitsuki
Thu, Sep 17, 2020 2:23 AM
目前我如果有做 Motion 的話多半是 1 跟 2 ，Web 開發上比較少用到 3 ，產品性質幾乎沒有 4
載入新的回覆
用來與團隊內部確認用的 Motion ，比方說展示卡片元件放大時的是怎樣縮放，有點像是 Motion 的 Prototype ，通常不包括精細的動態設定參數（用什麼曲線、幾秒鐘要變化etc）
2. Functional Motion
作為提昇使用者體驗用的 Motion，比方說按鈕點下去後會放大或變換的特效或 Loading 畫面，使用者在操作系統時提供 Feedback ，讓使用者能瞭解自己的操作和系統有怎樣的互動和變化。
展示整個產品的深度與層次的 Motion ，比方說產品中提供一致性的切換畫面轉場效果，我個人覺得這有點像是產品裡的世界觀設定xD，必須要營造產品中每個畫面一致性的連結方式。iOS Guideline & Material Guideline 都有一整套介紹深度與層次的說明。
4. Emotional Motion
主要提供趣味性、吸引人目光的 Motion。比方說 Google Doodle 跟 Landing Page 中展示區塊內容的特效。非常吃 Visual Design 的 Motion