1. Motion/Animation 基本元素

• 原則？
• Affordance, Feedback
• Easing, Duration

2. 情境：

Loading

• 歌單同步中
• 下載歌曲中
• 頁面載入中

Transition / Page Navigation (Slide-in/out, Pop-up, Push-in/out, Dissolve, Smart Animation)

Searching → 一般 & 音樂辨識

nowplaying icon (正在播放的藍色柱子)

特殊情境：隨機專屬推薦 Lottie 動態

3. 互動模式：

Gesture

• Drag
• Swipe
• Carousel
• Press (card scale)
• 下拉更新
• 展開收合

Interaction

當使用者運用手勢等行為和產品內的元件互動時，我們會運用動態效果來傳達視覺與觸覺上的回饋，讓使用者知道互動行為的開始、進行中與結束，確保使用者能夠認知到是否有成功完成他想要進行的任務，提升產品的反應與順暢度。

常見的互動模式

1. Tap 點擊
1. Card
2. List
3. Icon
4. Checkbox
5. Input Field
6. Tab switch
7. Now Playing Bar (iOS only)
8. 內容展開/收合
2. Hover (Web, Universal only)
3. Drag 上下拖曳
1. 歌單編輯
2. 下拉更新 (通知中心、一起聽)
4. Scroll 捲動畫面
5. Swipe 左右滑動
1. Card 切換
2. Page 切換 / 返回
3. List 刪除
6. Pinch & Spread 縮放
1. 歌詞頁
7. Long Press 長按
1. Card Preview (iOS only)

Reference

Animation

Animation

Dynamic Presence

www.audi.com

Motion

Spectrum, Adobe's design system

Spectrum's motion is used with intention. All animations help users reach their goals by surfacing connections between states or views, drawing attention to important details, or providing feedback. Spectrum's motion feels familiar and expected. It mirrors traits from the real world like acceleration, gravity, and volume to achieve a natural feel.

spectrum.adobe.com

Motion - Ant Design

Ant Motion is an animation library based on Ant Design's principles. It is more than just a single library, but also an entire React based solution for modern applications. The goal is to help developers to apply animations in their projects with minimal efforts.

ant.design

Loading

Loading

Navigating the Shopify admin should be fast, meaningful, and focused, but unintentional loading can get in the way and break a merchant's flow. To deliver a continuous experience, we need to consider loading states when planning and prototyping. Do you have ideas or feedback on how we can make these guidelines more empowering and useful?

polaris.shopify.com

Transition

Transitions

User orientation in the interface is significantly improved by creating a flowing, comprehensible transition between two views. Individual elements can be transformed or entire views animated. Here, key importance is attached to the arrangement of elements, the timing of the appearance of an element and the duration of an animation.

www.audi.com

Use Transition - Ant Design

Our Gray Matter are wired to react to dynamic things like movement,shape change and colour change. Transitions smooth out the jarring world of the Web, making changes appear more natural. The main purpose for Transitions is to provide an engaging interface and reinforce communication.

ant.design

Interaction States

Interaction states

Interaction states communicate the status of an element in the interface, establish confidence once an action is taken, and suggest the ability (or inability) to interact with the element. Successful interaction feedback is informative, not decorative. Avoid elaborate transitions that create visual noise or intense color changes.

polaris.shopify.com

Response Effect

Response Effect

When a button element is clicked or tapped, a discreetly animated, ring-shaped impulse appears as a response effect. It is used to provide direct, visual feedback to a user entry.

www.audi.com

Functional Animation

Functional Animation

Functional animations perform various functions in the interface: they guide the user through a process, improve orientation and provide feedback on entries. They supplement the interaction with small details which improve usability as well as being fun and offering emotional appeal. As such they are very important for a high-quality, fascinating and brand-based user experience.

www.audi.com

Reaction

React Immediately - Ant Design

Invitations are powerful because they directly address discoverability and provide feedback before an interaction happens. Transitions are useful because they provide visual feedback during an interaction. But another class of feedback exists. It is the feedback that happens immediately after each interaction with the system, an immediate reaction paired with the user's action.

ant.design

其他互動形式

Universal

• 清單的 focus
• 拖曳 多選
• buffer state 呼吸燈 (等歌曲播放 & 播到緩衝區)
• 輔助圖形登入時的飄動
• Loading 的 skeleton 動態

Mobile

For You：「換一批」的旋轉

Scroll：在 app & universal 置頂的效果

Nowplaying, 歌單頁 文字的跑馬燈

一起聽台長輪播

Runway 的自動輪播

Website

Website 的 Header

單頻 section scroll

官網 now playing 的展開收合

References